5.3/javascript_new-api_data-structures.html

   1 <!DOCTYPE html>
   2 <head>
   3     <meta charset="utf-8">
   4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   5 <meta name="viewport" content="width=device-width, initial-scale=1">
   6 <meta name="description" content="">
   7 <meta name="keywords" content=" ">
   8 <title>Data Structures - JavaScript API | WoltLab Suite 5.3 Documentation</title>
   9
  10 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/syntax.css">
  11 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600">
  12 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/font-awesome.min.css">
  13 <!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
  14 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/modern-business.css">
  15 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/lavish-bootstrap.css">
  16 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/customstyles.css">
  17 <link rel="stylesheet" href="https://docs.woltlab.com/5.3/css/theme-blue.css?v=3">
  18
  19 <script src="https://docs.woltlab.com/5.3/js/jquery.min.js"></script>
  20 <script src="https://docs.woltlab.com/5.3/js/jquery.cookie.min.js"></script>
  21 <script src="https://docs.woltlab.com/5.3/js/jquery.navgoco.min.js"></script>
  22 <script src="https://docs.woltlab.com/5.3/js/bootstrap.min.js"></script>
  23 <script src="https://docs.woltlab.com/5.3/js/anchor.min.js"></script>
  24 <script src="https://docs.woltlab.com/5.3/js/toc.js"></script>
  25 <script src="https://docs.woltlab.com/5.3/js/customscripts.js"></script>
  26
  27 <link rel="shortcut icon" href="https://docs.woltlab.com/5.3/images/favicon.ico">
  28
  29 <link rel="alternate" type="application/rss+xml" title="woltlab.github.io" href="https://docs.woltlab.com/5.3feed.xml">
  30
  31     <script>
  32         $(document).ready(function() {
  33             // Initialize navgoco with default options
  34             $("#mysidebar").navgoco({
  35                 caretHtml: '',
  36                 accordion: true,
  37                 openClass: 'active', // open
  38                 save: false, // leave false or nav highlighting doesn't work right
  39                 cookie: {
  40                     name: 'navgoco',
  41                     expires: false,
  42                     path: '/'
  43                 },
  44                 slide: {
  45                     duration: 400,
  46                     easing: 'swing'
  47                 }
  48             });
  49
  50             $("#collapseAll").click(function(e) {
  51                 e.preventDefault();
  52                 $("#mysidebar").navgoco('toggle', false);
  53             });
  54
  55             $("#expandAll").click(function(e) {
  56                 e.preventDefault();
  57                 $("#mysidebar").navgoco('toggle', true);
  58             });
  59
  60         });
  61
  62     </script>
  63     <script>
  64         $(function () {
  65             $('[data-toggle="tooltip"]').tooltip()
  66         })
  67     </script>
  68
  69
  70 </head>
  71 <body>
  72   <!-- Navigation -->
  73 <nav class="navbar navbar-inverse navbar-fixed-top">
  74     <div class="container topnavlinks">
  75         <div class="navbar-header">
  76             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  77                 <span class="sr-only">Toggle navigation</span>
  78                 <span class="icon-bar"></span>
  79                 <span class="icon-bar"></span>
  80                 <span class="icon-bar"></span>
  81             </button>
  82             <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> WoltLab Suite 5.3 Documentation</span></a>
  83         </div>
  84         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  85             <ul class="nav navbar-nav navbar-right">
  86                 <!-- entries without drop-downs appear here -->
  87
  88
  89
  90                 <li><a href="https://www.woltlab.com" target="_blank">woltlab.com</a></li>
  91
  92
  93
  94
  95
  96                 <li><a href="https://github.com/WoltLab/WCF/" target="_blank">Code on github.com</a></li>
  97
  98
  99
 100                 <!-- entries with drop-downs appear here -->
 101                 <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
 102
 103
 104                 <!--comment out this block if you want to hide search-->
 105                 <li>
 106                     <!--start search-->
 107                     <div id="search-demo-container">
 108                         <input type="text" id="search-input" placeholder="search...">
 109                         <ul id="results-container"></ul>
 110                     </div>
 111                     <script src="https://docs.woltlab.com/5.3/js/jekyll-search.js" type="text/javascript"></script>
 112                     <script type="text/javascript">
 113                             SimpleJekyllSearch.init({
 114                                 searchInput: document.getElementById('search-input'),
 115                                 resultsContainer: document.getElementById('results-container'),
 116                                 dataSource: 'https://docs.woltlab.com/5.3/search.json',
 117                                 searchResultTemplate: '<li><a href="{url}" title="Data Structures - JavaScript API">{title}</a></li>',
 118                     noResultsText: 'No results found.',
 119                             limit: 10,
 120                             fuzzy: true,
 121                     })
 122                     </script>
 123                     <!--end search-->
 124                 </li>
 125             </ul>
 126         </div>
 127         </div>
 128         <!-- /.container -->
 129 </nav>
 130
 131
 132   <div class="container">
 133     <div class="col-lg-12">&nbsp;</div>
 134
 135     <div class="row">
 136       <div class="col-md-3">
 137
 138
 139
 140 <ul id="mysidebar" class="nav">
 141     <li class="sidebarTitle">WoltLab Suite 5.3</li>
 142
 143
 144
 145             <li>
 146                 <a href="#">Getting Started</a>
 147                 <ul>
 148
 149
 150
 151
 152                                 <li data-identifier="index"><a href="index.html">Introduction</a></li>
 153
 154
 155
 156
 157
 158
 159
 160
 161                                 <li data-identifier="getting-started_quick-start"><a href="getting-started_quick-start.html">Quick Start</a></li>
 162
 163
 164
 165
 166
 167                 </ul>
 168             </li>
 169
 170             <li>
 171                 <a href="#">PHP API</a>
 172                 <ul>
 173
 174
 175
 176
 177                                 <li data-identifier="php_pages"><a href="php_pages.html">Pages</a></li>
 178
 179
 180
 181
 182
 183
 184
 185
 186                                 <li data-identifier="php_database-objects"><a href="php_database-objects.html">Database Objects</a></li>
 187
 188
 189
 190
 191
 192
 193
 194
 195                                 <li data-identifier="php_database-access"><a href="php_database-access.html">Database Access</a></li>
 196
 197
 198
 199
 200
 201
 202
 203
 204                                 <li data-identifier="php_exceptions"><a href="php_exceptions.html">Exceptions</a></li>
 205
 206
 207
 208
 209
 210
 211
 212
 213                             <li class="subfolders">
 214                                 <a href="#">API</a>
 215                                 <ul>
 216
 217
 218
 219                                             <li data-identifier="php_api_caches"><a href="php_api_caches.html">Caches</a></li>
 220
 221
 222
 223
 224                                             <li data-identifier="php_api_comments"><a href="php_api_comments.html">Comments</a></li>
 225
 226
 227
 228
 229                                             <li data-identifier="php_api_cronjobs"><a href="php_api_cronjobs.html">Cronjobs</a></li>
 230
 231
 232
 233
 234                                             <li data-identifier="php_api_events"><a href="php_api_events.html">Events</a></li>
 235
 236
 237
 238
 239                                             <li data-identifier="php_api_form_builder"><a href="php_api_form_builder.html">Form Builder</a></li>
 240
 241
 242
 243
 244                                             <li data-identifier="php_api_package_installation_plugins"><a href="php_api_package_installation_plugins.html">Package Installation Plugins</a></li>
 245
 246
 247
 248
 249                                             <li data-identifier="php_api_user_activity_points"><a href="php_api_user_activity_points.html">User Activity Points</a></li>
 250
 251
 252
 253
 254                                             <li data-identifier="php_api_user_notifications"><a href="php_api_user_notifications.html">User Notifications</a></li>
 255
 256
 257
 258
 259                                             <li data-identifier="php_api_sitemaps"><a href="php_api_sitemaps.html">Sitemaps</a></li>
 260
 261
 262                                 </ul>
 263                             </li>
 264
 265
 266
 267
 268
 269                                 <li data-identifier="php_code-style"><a href="php_code-style.html">Code Style</a></li>
 270
 271
 272
 273
 274
 275
 276
 277
 278                                 <li data-identifier="php_apps"><a href="php_apps.html">Apps</a></li>
 279
 280
 281
 282
 283
 284
 285
 286
 287                                 <li data-identifier="php_gdpr"><a href="php_gdpr.html">GDPR</a></li>
 288
 289
 290
 291
 292
 293                 </ul>
 294             </li>
 295
 296             <li>
 297                 <a href="#">Languages, Templates & CSS</a>
 298                 <ul>
 299
 300
 301
 302
 303                                 <li data-identifier="view_languages"><a href="view_languages.html">Languages</a></li>
 304
 305
 306
 307
 308
 309
 310
 311
 312                                 <li data-identifier="view_templates"><a href="view_templates.html">Templates</a></li>
 313
 314
 315
 316
 317
 318
 319
 320
 321                                 <li data-identifier="view_css"><a href="view_css.html">CSS</a></li>
 322
 323
 324
 325
 326
 327                 </ul>
 328             </li>
 329
 330             <li>
 331                 <a href="#">JavaScript API</a>
 332                 <ul>
 333
 334
 335
 336
 337                                 <li data-identifier="javascript_general-usage"><a href="javascript_general-usage.html">General Usage</a></li>
 338
 339
 340
 341
 342
 343
 344
 345
 346                             <li class="subfolders">
 347                                 <a href="#">New API</a>
 348                                 <ul>
 349
 350
 351
 352                                             <li data-identifier="javascript_new-api_writing-a-module"><a href="javascript_new-api_writing-a-module.html">Writing a module</a></li>
 353
 354
 355
 356
 357                                             <li class="active" data-identifier="javascript_new-api_data-structures"><a href="javascript_new-api_data-structures.html">Data Structures</a></li>
 358
 359
 360
 361
 362                                             <li data-identifier="javascript_new-api_core"><a href="javascript_new-api_core.html">Core Functions</a></li>
 363
 364
 365
 366
 367                                             <li data-identifier="javascript_new-api_dom"><a href="javascript_new-api_dom.html">DOM</a></li>
 368
 369
 370
 371
 372                                             <li data-identifier="javascript_new-api_events"><a href="javascript_new-api_events.html">Event Handling</a></li>
 373
 374
 375
 376
 377                                             <li data-identifier="javascript_new-api_ajax"><a href="javascript_new-api_ajax.html">Ajax</a></li>
 378
 379
 380
 381
 382                                             <li data-identifier="javascript_new-api_dialogs"><a href="javascript_new-api_dialogs.html">Dialogs</a></li>
 383
 384
 385
 386
 387                                             <li data-identifier="javascript_new-api_browser"><a href="javascript_new-api_browser.html">Browser and Screen Sizes</a></li>
 388
 389
 390
 391
 392                                             <li data-identifier="javascript_new-api_ui"><a href="javascript_new-api_ui.html">User Interface</a></li>
 393
 394
 395                                 </ul>
 396                             </li>
 397
 398
 399
 400
 401
 402                                 <li data-identifier="javascript_legacy-api"><a href="javascript_legacy-api.html">Legacy API</a></li>
 403
 404
 405
 406
 407
 408
 409
 410
 411                                 <li data-identifier="javascript_helper-functions"><a href="javascript_helper-functions.html">Helper Functions</a></li>
 412
 413
 414
 415
 416
 417
 418
 419
 420                                 <li data-identifier="javascript_code-snippets"><a href="javascript_code-snippets.html">Code Snippets</a></li>
 421
 422
 423
 424
 425
 426                 </ul>
 427             </li>
 428
 429             <li>
 430                 <a href="#">Package Components</a>
 431                 <ul>
 432
 433
 434
 435
 436                                 <li data-identifier="package_package-xml"><a href="package_package-xml.html">package.xml</a></li>
 437
 438
 439
 440
 441
 442
 443
 444
 445                                 <li data-identifier="package_pip"><a href="package_pip.html">PIPs</a></li>
 446
 447
 448
 449
 450
 451                 </ul>
 452             </li>
 453
 454             <li>
 455                 <a href="#">Migration</a>
 456                 <ul>
 457
 458
 459
 460
 461                             <li class="subfolders">
 462                                 <a href="#">Migrating from WSC 5.2</a>
 463                                 <ul>
 464
 465
 466
 467                                             <li data-identifier="migration_wsc-52_php"><a href="migration_wsc-52_php.html">PHP API</a></li>
 468
 469
 470
 471
 472                                             <li data-identifier="migration_wsc-52_templates"><a href="migration_wsc-52_templates.html">Templates and Languages</a></li>
 473
 474
 475
 476
 477                                             <li data-identifier="migration_wsc-52_libraries"><a href="migration_wsc-52_libraries.html">Third Party Libraries</a></li>
 478
 479
 480                                 </ul>
 481                             </li>
 482
 483                             <li class="subfolders">
 484                                 <a href="#">Migrating from WSC 3.1</a>
 485                                 <ul>
 486
 487
 488
 489                                             <li data-identifier="migration_wsc-31_php"><a href="migration_wsc-31_php.html">PHP API</a></li>
 490
 491
 492                                 </ul>
 493                             </li>
 494
 495                             <li class="subfolders">
 496                                 <a href="#">Migrating from WSC 3.0</a>
 497                                 <ul>
 498
 499
 500
 501                                             <li data-identifier="migration_wsc-30_php"><a href="migration_wsc-30_php.html">PHP API</a></li>
 502
 503
 504
 505
 506                                             <li data-identifier="migration_wsc-30_javascript"><a href="migration_wsc-30_javascript.html">JavaScript API</a></li>
 507
 508
 509
 510
 511                                             <li data-identifier="migration_wsc-30_templates"><a href="migration_wsc-30_templates.html">Templates</a></li>
 512
 513
 514
 515
 516                                             <li data-identifier="migration_wsc-30_css"><a href="migration_wsc-30_css.html">CSS</a></li>
 517
 518
 519
 520
 521                                             <li data-identifier="migration_wsc-30_package"><a href="migration_wsc-30_package.html">Package Components</a></li>
 522
 523
 524                                 </ul>
 525                             </li>
 526
 527                             <li class="subfolders">
 528                                 <a href="#">Migrating from WCF 2.1</a>
 529                                 <ul>
 530
 531
 532
 533                                             <li data-identifier="migration_wcf-21_php"><a href="migration_wcf-21_php.html">PHP API</a></li>
 534
 535
 536
 537
 538                                             <li data-identifier="migration_wcf-21_templates"><a href="migration_wcf-21_templates.html">Templates</a></li>
 539
 540
 541
 542
 543                                             <li data-identifier="migration_wcf-21_css"><a href="migration_wcf-21_css.html">CSS</a></li>
 544
 545
 546
 547
 548                                             <li data-identifier="migration_wcf-21_package"><a href="migration_wcf-21_package.html">Package Components</a></li>
 549
 550
 551                                 </ul>
 552                             </li>
 553
 554
 555                 </ul>
 556             </li>
 557
 558             <li>
 559                 <a href="#">Tutorials</a>
 560                 <ul>
 561
 562
 563
 564
 565                                 <li data-identifier="tutorial_tutorial-series"><a href="tutorial_tutorial-series.html">Tutorial Series</a></li>
 566
 567
 568
 569
 570
 571                 </ul>
 572             </li>
 573
 574
 575 </ul>
 576
 577 <script>
 578 (function() {
 579     var sidebar = $('#mysidebar');
 580     var item = sidebar.find('.active');
 581     if (item.length === 0) {
 582         var parent = '';
 583         if (parent) {
 584             sidebar.find('li[data-identifier="' + parent + '"]').addClass('active');
 585         }
 586     }
 587
 588     sidebar.find(".active").parents('li').toggleClass("active");
 589 })();
 590 </script>
 591
 592       </div>
 593
 594       <div class="col-md-9">
 595         <div class="post-header">
 596    <h1 class="post-title-main">Data Structures - JavaScript API</h1>
 597 </div>
 598
 599
 600
 601 <div class="post-content">
 602
 603
 604
 605
 606
 607 <!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
 608 <script>
 609 $( document ).ready(function() {
 610   // Handler for .ready() called.
 611
 612 $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });
 613
 614 /* this offset helps account for the space taken up by the floating toolbar. */
 615 $('#toc').on('click', 'a', function() {
 616   var target = $(this.getAttribute('href'))
 617     , scroll_target = target.offset().top
 618
 619   $(window).scrollTop(scroll_target - 10);
 620   return false
 621 })
 622
 623 });
 624 </script>
 625
 626 <div id="toc"></div>
 627
 628
 629
 630   <h2 id="introduction">Introduction</h2>
 631
 632 <p>JavaScript offers only limited types of collections to hold and iterate over
 633 data. Despite the ongoing efforts in ES6 and newer, these new data structures
 634 and access methods, such as <code class="language-plaintext highlighter-rouge">for … of</code>, are not available in the still supported
 635 Internet Explorer 11.</p>
 636
 637 <h2 id="dictionary"><code class="language-plaintext highlighter-rouge">Dictionary</code></h2>
 638
 639 <p>Represents a simple key-value map, but unlike the use of plain objects, will
 640 always to guarantee to iterate over directly set values only.</p>
 641
 642 <p><em>In supported browsers this will use a native <code class="language-plaintext highlighter-rouge">Map</code> internally, otherwise a plain object.</em></p>
 643
 644 <h3 id="setkey-string-value-any"><code class="language-plaintext highlighter-rouge">set(key: string, value: any)</code></h3>
 645
 646 <p>Adds or updates an item using the provided key. Numeric keys will be converted
 647 into strings.</p>
 648
 649 <h3 id="deletekey-string"><code class="language-plaintext highlighter-rouge">delete(key: string)</code></h3>
 650
 651 <p>Removes an item from the collection.</p>
 652
 653 <h3 id="haskey-string-boolean"><code class="language-plaintext highlighter-rouge">has(key: string): boolean</code></h3>
 654
 655 <p>Returns true if the key is contained in the collection.</p>
 656
 657 <h3 id="getkey-string-any"><code class="language-plaintext highlighter-rouge">get(key: string): any</code></h3>
 658
 659 <p>Returns the value for the provided key, or <code class="language-plaintext highlighter-rouge">undefined</code> if the key was not found.
 660 Use <code class="language-plaintext highlighter-rouge">.has()</code> to check for key existence.</p>
 661
 662 <h3 id="foreachcallback-value-any-key-string--void"><code class="language-plaintext highlighter-rouge">forEach(callback: (value: any, key: string) =&gt; void)</code></h3>
 663
 664 <p>Iterates over all items in the collection in an arbitrary order and invokes the
 665 supplied callback with the value and the key.</p>
 666
 667 <h3 id="size-number"><code class="language-plaintext highlighter-rouge">size: number</code></h3>
 668
 669 <p>This read-only property counts the number of items in the collection.</p>
 670
 671 <h2 id="list"><code class="language-plaintext highlighter-rouge">List</code></h2>
 672
 673 <p>Represents a list of unique values.</p>
 674
 675 <p><em>In supported browsers this will use a native <code class="language-plaintext highlighter-rouge">Set</code> internally, otherwise an array.</em></p>
 676
 677 <h3 id="addvalue-any"><code class="language-plaintext highlighter-rouge">add(value: any)</code></h3>
 678
 679 <p>Adds a value to the list. If the value is already part of the list, this method
 680 will silently abort.</p>
 681
 682 <h3 id="clear"><code class="language-plaintext highlighter-rouge">clear()</code></h3>
 683
 684 <p>Resets the collection.</p>
 685
 686 <h3 id="deletevalue-any-boolean"><code class="language-plaintext highlighter-rouge">delete(value: any): boolean</code></h3>
 687
 688 <p>Attempts to remove a value from the list, it returns true if the value has been
 689 part of the list.</p>
 690
 691 <h3 id="foreachcallback-value-any--void"><code class="language-plaintext highlighter-rouge">forEach(callback: (value: any) =&gt; void)</code></h3>
 692
 693 <p>Iterates over all values in the list in an arbitrary order and invokes the
 694 supplied callback for each value.</p>
 695
 696 <h3 id="hasvalue-any-boolean"><code class="language-plaintext highlighter-rouge">has(value: any): boolean</code></h3>
 697
 698 <p>Returns true if the provided value is part of this list.</p>
 699
 700 <h3 id="size-number-1"><code class="language-plaintext highlighter-rouge">size: number</code></h3>
 701
 702 <p>This read-only property counts the number of items in the list.</p>
 703
 704 <h2 id="objectmap"><code class="language-plaintext highlighter-rouge">ObjectMap</code></h2>
 705
 706 <div class="bs-callout bs-callout-info">This class uses a <code class="language-plaintext highlighter-rouge">WeakMap</code> internally, the keys are only weakly referenced and do not prevent garbage collection.</div>
 707
 708 <p>Represents a collection where any kind of objects, such as class instances or
 709 DOM elements, can be used as key. These keys are weakly referenced and will not
 710 prevent garbage collection from happening, but this also means that it is not
 711 possible to enumerate or iterate over the stored keys and values.</p>
 712
 713 <p>This class is especially useful when you want to store additional data for
 714 objects that may get disposed on runtime, such as DOM elements. Using any regular
 715 data collections will cause the object to be referenced indefinitely, preventing
 716 the garbage collection from removing orphaned objects.</p>
 717
 718 <h3 id="setkey-object-value-object"><code class="language-plaintext highlighter-rouge">set(key: Object, value: Object)</code></h3>
 719
 720 <p>Adds the key with the provided value to the map, if the key was already part
 721 of the collection, its value is overwritten.</p>
 722
 723 <h3 id="deletekey-object"><code class="language-plaintext highlighter-rouge">delete(key: Object)</code></h3>
 724
 725 <p>Attempts to remove a key from the collection. The method will abort silently if
 726 the key is not part of the collection.</p>
 727
 728 <h3 id="haskey-object-boolean"><code class="language-plaintext highlighter-rouge">has(key: Object): boolean</code></h3>
 729
 730 <p>Returns true if there is a value for the provided key in this collection.</p>
 731
 732 <h3 id="getkey-object-object--undefined"><code class="language-plaintext highlighter-rouge">get(key: Object): Object | undefined</code></h3>
 733
 734 <p>Retrieves the value of the provided key, or <code class="language-plaintext highlighter-rouge">undefined</code> if the key was not found.</p>
 735
 736
 737
 738     <div class="tags">
 739
 740     </div>
 741
 742
 743
 744 </div>
 745
 746       </div>
 747     </div>
 748   </div>
 749
 750   <div class="footerBox">
 751     <div class="container">
 752       <div class="footerBoxLeft">
 753
 754         <a target="_blank" href="https://github.com/woltlab/woltlab.github.io/blob/master/pages/javascript/javascript_new-api_data-structures.md" class="btn btn-default githubEditButton no_icon" role="button"><i class="fa fa-github fa-lg"></i> Edit on GitHub</a>
 755         <p>Site last generated: Mar 5, 2021</p>
 756       </div>
 757       <div class="footerBoxRight">
 758         <a class="no_icon" href="https://www.woltlab.com"><img src="https://docs.woltlab.com/5.3/images/woltlab-black.png" srcset="https://docs.woltlab.com/5.3/images/woltlab-black@2x.png 2x" height="40" width="204" alt=""></a>
 759       </div>
 760     </div>
 761   </div>
 762
 763   <div class="pageFooter">
 764     <div class="container">
 765       &copy; 2001 ‐ 2021 <a class="no_icon" href="https://www.woltlab.com">WoltLab GmbH</a>. All rights reserved. | <a class="no_icon" href="https://www.woltlab.com/legal-notice/">Legal Notice</a> | <a class="no_icon" href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
 766     </div>
 767   </div>
 768 </body>
 769
 770 </html>