logo

Jak utworzyć słownik i dynamicznie dodawać pary klucz-wartość?

W tym artykule dowiesz się, jak utworzyć słownik w JavaScript, używając obiektów do przechowywania par klucz-wartość. Chociaż JavaScript nie ma wbudowanego typu słownika, możemy go skutecznie utworzyć za pomocą obiektów JavaScript. Zacznijmy od utworzenia nowego obiektu JavaScript, który będzie pełnił rolę naszego słownika.

Składnia:



Klucz może być ciągiem znaków lub liczbą całkowitą. Jeśli po prostu napiszesz klucz1 lub dowolną liczbę, zostanie on potraktowany jako ciąg znaków.

var dict = { key1 : value1 , key2 : value2 , .... };>
  • Utwórz pusty słownik
    var dict = {};>
  • Dodawanie par klucz-wartość w słowniku
    dict[new_key] = new_value;>
    lub Jeśli nowy_klucz jest już obecny w słowniku, jego wartość zostanie zaktualizowana do nowej_wartości.
    dict.new_key = new_value;>
  • Dostęp do par klucz-wartość
    var value = dict[key];>
    Lub
    var value = dict.key;>
  • Iterowanie całego słownika
    for(var key in dict) { console.log(key + ' : ' + dict[key]); }>

Przykład:

HTML
   Słownik w JavaScripttytuł>głowa> <body style='text-align: center;'> <h1 style='color: green;'>techcodeview.com h1><p>var dykt = { <br />'geek' : 1 , <br />'dla 2', <br />'geekowie' : 3.5 <br />}; <br />p> <button onClick='fun()'>Dodaj nowy przycisk par klucz-wartość><p id='demo'>p><script>funkcja zabawa() { var dict = { maniak: 1, for: '2', maniak: 3.5, };  dict.new_geeks = 'nowa_wartość';  dict['another_new_geeks'] = 'inna_wartość';  var to_show = 'var dict = { ';  for (var klucz w dyktacie) { to_show += ''' + klucz + '' : ' + dykt[klawisz] + ' ';  } to_show += ' }; ';  document.getElementById('demo') .innerHTML = to_show;  } skrypt> treść> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Wyjście:</strong>  </b>  </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />  <img src='//techcodeview.com/img/javascript-misc/88/how-create-dictionary.webp' alt="">  <br></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">Kategoria</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/node-js-fs-module/">Moduł Node.js-Fs</a> </li><li> <a href="/java-sortedset/">Sortowany Zestaw Java</a> </li><li> <a href="/rxjs-tutorial/">Samouczek Rxjs</a> </li><li> <a href="/python-data-type/">Typ Danych Pythona</a> </li><li> <a href="/bootstrap-tutorial/">Poradnik Bootstrapa</a> </li><li> <a href="/c-input-output/">C-Wejście-Wyjście</a> </li><li> <a href="/numbers/">Liczby</a> </li><li> <a href="/pwa-tutorial/">Poradnik Pwa</a> </li><li> <a href="/java-integer/">Liczba Całkowita Java</a> </li><li> <a href="/cheat-sheet/">Ściągawka</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Metoda sortowania listy Java</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Metoda sortowania listy Java z przykładami na temat języka Java, list, zawiera wszystko (), równości (), get (), hashCode (), indeksOf (), isEmpty (), add (), zawiera (), size (), listIterator (), clear(), usuń(), toArray(), zachowaj wszystko(), usuń wszystko() itp.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/java-list-sort-method"> <i class="fa fa-external-link"></i> Czytaj Więcej</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Ciekawe Artykuły</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/abs-python">abs() w Pythonie</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-an-acceptable-use-policy-24290">Co to jest polityka dopuszczalnego użytkowania?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/everything-you-need-know-about-princeton-university-1311350">Wszystko, co musisz wiedzieć o Uniwersytecie Princeton</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/shraddha-kapoor">Shraddha Kapoor</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-formula">Jaki jest wzór na znalezienie kątów?</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">Popularne Wiadomości</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/java-convert-char-string">znak na ciąg Java</a>
</li><li><a href="/java-list">lista javy</a>
</li><li><a href="/objects-classes-java">obiekt w programowaniu w Javie</a>
</li><li><a href="/java-convert-string-int">ciąg w int</a>
</li><li><a href="/examples-search-engines">wyszukiwarka i przykłady</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 Wszelkie Prawa Zastrzeżone |  <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zastrzeżenie</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nas</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Polityka Prywatności</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>