📝 JavaScript 中使用字典
2025-01-22 08:19:30    1k 字    #前端 #📝 JavaScript
This post is also available in English and alternative languages.

How to Use JavaScript Dictionary Like a Pro


1. 创建字典

1.1. 使用对象字面量

1
2
3
4
5
6
7
8
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

console.log(languages)
// { EN: 'English', ES: 'Spanish', TA: 'Tamil' }

使用对象字面量创建字典是最简单的方式。


1.2. 使用Map对象

1
2
3
4
5
6
7
const languages = new Map()
languages.set('EN', 'English');
languages.set('ES', 'Spanish');
languages.set('TA', 'Tamil');

console.log(languages)
// Map(3) { 'EN' => 'English', 'ES' => 'Spanish', 'TA' => 'Tamil' }

Map() 是 JavaScript 中的非原始数据类型之一。不仅可以保存字符串，还可以保存其他类型的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 空字典对象
let lookupData = {}

// 只有一个键值对
let name = { "name": "John Doe" }

// 含有多个键值对
let person = { "name": "John Doe", "age": 25 }

// 含有数字
let days = { 1: "Monday", 2: "Tuesday", 3: "Wednesday" }

// 含有布尔值
let status = { "isActive": true, "hasAccess": false }

// 嵌套字典对象
let people = { "person": { "name": "John Doe", "age": 25 } }

// 含有数组值
let fruits = { "fruits": ["apple", "banana", "orange"] }

// 含有函数值
let functions = { "calculate": function (a, b) { return a + b; } }

// 含有 undefined 和 null
let edgeCases = { "name": undefined, "age": null }

1.3. 使用Object.create方法

1
2
3
4
5
6
7
let languages = Object.create({});
languages.EN = 'English';
languages.ES = 'Spanish';
languages.TA = 'Tamil';

console.log(languages)
// { EN: 'English', ES: 'Spanish', TA: 'Tamil' }

2. 将键值添加到字典中

1
2
3
4
5
6
7
8
9
10
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

languages['FR'] = 'French'

console.log(languages)
// { EN: 'English', ES: 'Spanish', TA: 'Tamil', FR: 'French' }

3. 更新字典中键的值

1
2
3
4
5
6
7
8
9
10
11
12
const languages = {
  'EN': 'English',
  'ES': 'Spanish',
  'TA': 'Tamil'
}

console.log(languages)
// { EN: 'English', ES: 'Spanish', TA: 'Tamil' }

languages['EN'] = 'English (US)'
console.log(languages)
// { EN: 'English (US)', ES: 'Spanish', TA: 'Tamil' }

4. 访问字典

1
2
3
4
5
6
7
8
9
10
11
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

console.log(languages['ES'])
// Spanish

console.log(languages.EN);
// English

要检索字典对象中的特定键关联的值，可以使用括号表示法或 get() 方法。


5. 迭代字典

5.1. for…in 循环

1
2
3
4
5
6
7
8
9
10
11
12
13
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

for (let key in languages) {
    console.log(`${key}=${languages[key]}`);
}

// EN=English
// ES=Spanish
// TA=Tamil

5.2. for…of 循环

1
2
3
4
5
6
7
8
9
10
11
12
13
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

for (let key of Object.entries(languages)) {
    console.log(key);
}

// [ 'EN', 'English' ]
// [ 'ES', 'Spanish' ]
// [ 'TA', 'Tamil' ]

Object.entries() 是对象方法之一，它可以以数组形式访问字典的值。


5.3. entries()

1
2
3
4
5
6
7
8
9
10
11
12
13
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

for (let [key, value] of Object.entries(languages)) {
    console.log(`${key}=${value}`);
}

// EN=English
// ES=Spanish
// TA=Tamil

6. 获取所有键

1
2
3
4
5
6
7
8
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

console.log(Object.keys(languages))
// [ 'EN', 'ES', 'TA' ]

7. 获取所有字典值

1
2
3
4
5
6
7
8
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

console.log(Object.values(languages));
// [ 'English', 'Spanish', 'Tamil' ]

8. 获取字典长度

1
2
3
4
5
6
7
8
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

console.log(Object.keys(languages).length)
// 3

9. 检查包含某键

1
2
3
4
5
6
7
8
9
10
11
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

console.log(Object.keys(languages).includes('EN'));
// true

console.log(Object.keys(languages).includes('en'));
// false

检查键是否在字典对象中，可以使用 includes() 或 hasOwnProperty() 方法。

在 JavaScript 中，字符串值区分大小写。因此字典键 “en” 搜索返回 false，因为实际键是大写字母。


10. 删除键

1
2
3
4
5
6
7
8
9
10
const languages = {
    'EN': 'English',
    'ES': 'Spanish',
    'TA': 'Tamil'
}

delete languages['TA']

console.log(Object.values(languages));
// [ 'English', 'Spanish' ]