Ця стаття навчить вас, як створити словник у JavaScript, використовуючи об’єкти для зберігання пар ключ-значення. Хоча JavaScript не має вбудованого типу словника, ми можемо ефективно створити його за допомогою об’єктів JavaScript. Почнемо зі створення нового об’єкта JavaScript, який буде діяти як наш словник.
рядок замінює всю java
Синтаксис:
Ключем може бути рядок, ціле число. Якщо ви просто напишете key1 або будь-яке число, це буде розглядатися як рядок.
var dict = { key1 : value1 , key2 : value2 , .... };>- Створити порожній словник
var dict = {};> - Додавання пар ключ-значення до словника
dict[new_key] = new_value;>
або Якщо new_key вже присутній у словнику, тоді значення this буде оновлено до new_value.dict.new_key = new_value;>
- Доступ до пар ключ-значення
var value = dict[key];>
абоvar value = dict.key;>
- Ітерація всього словника
for(var key in dict) { console.log(key + ' : ' + dict[key]); }>
приклад:
HTML Словник у Javascripttitle> head> <body style='text-align: center;'> <h1 style='color: green;'>techcodeview.com h1><p>var dict = { <br />'виродок' : 1 , <br />'для' : '2', <br />'гіки' : 3.5 <br />}; <br />p> <button onClick='fun()'>Кнопка «Додати нові пари «ключ-значення»><p id='demo'>p><script>функція fun() { var dict = { geek: 1, for: '2', geeks: 3.5, }; dict.new_geeks = 'нове_значення'; dict['another_new_geeks'] = 'інше_значення'; var to_show = 'var dict = { '; for (ключ var у dict) { to_show += ''' + key + '' : ' + dict[key] + ' '; } to_show += ' }; '; document.getElementById('demo') .innerHTML = to_show; } script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p> <img src='//techcodeview.com/img/javascript-misc/88/how-create-dictionary.webp' alt=""> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Категорія</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/logarithms/">Логарифми</a> </li><li> <a href="/misc/">Різний</a> </li><li> <a href="/python-json/">Python-Json</a> </li><li> <a href="/java-swing/">Java Swing</a> </li><li> <a href="/greedy/">Жадібний</a> </li><li> <a href="/java-hashmap/">Java-Hashmap</a> </li><li> <a href="/discord/">Розбрат</a> </li><li> <a href="/shell-script/">Сценарій Оболонки</a> </li><li> <a href="/linux-directories/">Каталоги Linux</a> </li><li> <a href="/python-selenium-exercises/">Вправи Python Selenium</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Java-Клас І Об'єкт</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java-Клас І Об'єкт</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-class-object/"> <i class="fa fa-external-link"></i> Читати Далі</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Цікаві Статті</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-dhl">Що таке повна форма DHL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/explained-what-is-mewe-24298">Пояснення: що таке MeWe?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ultimate-apush-dbq-guide-1311328">The Ultimate APUSH DBQ Guide: Рубрика, приклади та багато іншого!</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/timestamp-date">Мітка часу до дати</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/asynchronous-transfer-mode-computer-network">Режим асинхронної передачі (АТМ) у комп’ютерній мережі</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">Популярні Пости</h2>
<div class="content">
<ul class="list"> <li><a href="/java-string-replaceall">java замінити все</a>
</li><li><a href="/booths-multiplication-algorithm">алгоритм будки</a>
</li><li><a href="/java-visualizers">візуалізатор java</a>
</li><li><a href="/java-string-valueof">java значення рядка</a>
</li><li><a href="/difference-between-dinner">час вечері проти обіду</a>
</li><li><a href="/java-string-replace">замінити з рядка в java</a>
</li><li><a href="/java-convert-int-string">рядок для int java</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 Всі Права Захищені | <a href="//sr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>