45.9 JavaScript 可迭代对象
-
可迭代对象(
Iterables
)是可以使用for..of
进行迭代的对象。 -
从技术上讲,可迭代对象必须实现
Symbol.iterator
方法。
45.9.1 遍历字符串
<body><p id="demo"></p><script>const world = "China";var text = "";for (const x of world) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>
输出:
C
h
i
n
a
45.9.2 遍历数组
<body><p id="demo"></p><script>const nums = [1, 2, 3, 4, 5];var text = "";for (const x of nums) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>
输出:1
2
3
4
5
45.9.3 JavaScript 迭代器
JavaScript 迭代器
46、JavaScript Set
-
JavaScript 的
Set
(集合)是一组唯一值的集合。 -
每个值只能在
Set
中出现一次。 -
Set
可以容纳任何数据类型的值。 -
对于
Set
,typeof
返回object
。 -
对于
Set
,instanceof Set
返回true
-
Set 方法:
46.1 如何创建 Set
您可以通过以下方式创建 JavaScript Set:
- 将数组传递给
new Set()
- 创建一个新的
Set
,然后使用add()
方法添加值 - 创建一个新的
Set
,然后使用add()
方法添加变量、
<body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);//添加新元素worlds.add(e);worlds.add("f");//重复添加同一个元素只会显示一个worlds.add("f");for (const x of worlds) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为:" + worlds.size + "<br>" + "遍历所有元素为:<br>" + text;</script></body>
46.2 查询Set的值
46.2.1 forEach() 方法
<body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);//添加新元素worlds.add(e);worlds.add("f");//重复添加同一个元素只会显示一个worlds.add("f");//遍历Set元素 forEach() 方法worlds.forEach(function (value) {text += value + "<br>";});document.getElementById("demo").innerHTML ="worlds长度为:" + worlds.size + "<br>" + "遍历所有元素为:<br>" + text;</script></body>
输出:
worlds长度为:6
遍历所有元素为:
a
b
c
d
e
f
46.2.2 for…of方法
<body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);//添加新元素worlds.add(e);worlds.add("f");//重复添加同一个元素只会显示一个worlds.add("f");//遍历Set元素 for...of方法for (const x of worlds) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为:" + worlds.size + "<br>" + "遍历所有元素为:<br>" + text;</script></body>
输出:
worlds长度为:6
遍历所有元素为:
a
b
c
d
e
f
46.2.3 values() 方法
<body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);var values = worlds.values(); //返回 [object Set Iterator]for (const x of values) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为:" + worlds.size + "<br>" + "遍历所有元素为:<br>" + text;</script></body>
输出:worlds长度为:4
遍历所有元素为:
a
b
c
d
46.2.4 keys() 方法
-
Set
没有键。 -
keys()
返回与values()
相同的结果。 -
这使得 Set 与 Map 相兼容。
<body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);var values = worlds.keys(); //返回 [object Set Iterator]for (const x of values) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为:" + worlds.size + "<br>" + "遍历所有元素为:<br>" + text;</script></body>
输出:worlds长度为:4
遍历所有元素为:
a
b
c
d
46.2.5 entries() 方法
-
Set
没有键(key
)。 -
entries()
方法返回的是[value,value]
值值对,而不是[key,value]
键值对。 -
这使得 Set 与 Map 兼容:
<body><p id="demo"></p><script>var text = "";var e = "e";const worlds = new Set(["a", "b", "c", "d"]);var values = worlds.entries(); //返回 [object Set Iterator]for (const x of values) {text += x + "<br>";}document.getElementById("demo").innerHTML ="worlds长度为:" + worlds.size + "<br>" + "遍历所有元素为:<br>" + text;</script></body>
输出:
worlds长度为:4
遍历所有元素为:
a,a
b,b
c,c
d,d
47、JavaScript Map
-
Map
保存键值对,其中键可以是任何数据类型。 -
Map
会记住键的原始插入顺序。 -
Map
提供表示映射大小的属性。 -
Map 方法:
47.1 如何创建 Map
您可以通过以下方式创建 JavaScript 映射:
Map
是对象typeof
返回object
,instanceof Map
返回true
- 将数组传递给
new Map()
- 创建映射并使用
Map.set()
- 获取 Map 中键的值
Map.get()
- 返回 Map 中元素的数量
Map.size
<body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//set() 方法将元素添加到Map中fruits.set("grapes", 600);//set() 方法还可用于更改现有的 Map 值:fruits.set("apple", 555);document.getElementById("demo").innerHTML ="fruits长度为:" +fruits.size +"<br>" +"apple对应的value值为:<br>" +fruits.get("apple");</script></body>
输出:fruits长度为:4
apple对应的value值为:
555
- 删除 Map 元素
Map.delete()
<body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//删除Map元素:fruits.delete("apple");document.getElementById("demo").innerHTML ="fruits长度为:" +fruits.size +"<br>" +"apple对应的value值为:<br>" +fruits.get("apple");</script></body>
输出:
fruits长度为:2
apple对应的value值为:
undefined
- 从
Map
中删除所有元素:
<body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//删除Map所有元素:fruits.clear();document.getElementById("demo").innerHTML ="fruits长度为:" +fruits.size +"<br>" +"apple对应的value值为:<br>" +fruits.get("apple");</script></body>
输出:
fruits长度为:0
apple对应的value值为:
undefined
- 如果
Map
中存在键,则has()
方法返回true
:
<body><p id="demo"></p><script>const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);//如果 Map 中存在键,则 has() 方法返回 true:var isHas = fruits.has("apple");document.getElementById("demo").innerHTML ="fruits长度为:" +fruits.size +"<br>" +'Map中是否包含"apple":' +isHas;</script></body>
输出:
fruits长度为:3
Map中是否包含"apple":true
- 为
Map
中的每个键/值对调用回调:Map.forEach()
:
<body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);fruits.forEach(function (value, key) {text += key + "=" + value + "<br>";});document.getElementById("demo").innerHTML = text;</script></body>
输出:
apple=500
orange=200
bananas=100
entries()
方法返回一个带有Map
中[key,values]
的迭代器对象:
<body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);for (const x of fruits.entries()) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>
输出:apple,500
orange,200
bananas,100
keys()
方法返回一个迭代器对象,其中包含Map
中的键:
<body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);for (const x of fruits.keys()) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>
输出:
apple
orange
bananas
values()
方法返回一个迭代器对象,其中包含Map
中的值:
<body><p id="demo"></p><script>var text = "";const fruits = new Map([["apple", 500],["orange", 200],["bananas", 100],]);for (const x of fruits.values()) {text += x + "<br>";}document.getElementById("demo").innerHTML = text;</script></body>
输出:
500
200
100
48、JavaScript ES5 对象方法
ECMAScript 5 (2009) 向 JavaScript 添加了许多新的对象方法。
- 管理对象:
// 以现有对象为原型创建对象
Object.create()// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)// 添加或更改对象属性
Object.defineProperties(object, descriptors)// 访问属性
Object.getOwnPropertyDescriptor(object, property)// 以数组返回所有属性
Object.getOwnPropertyNames(object)// 访问原型
Object.getPrototypeOf(object)// 以数组返回可枚举属性
Object.keys(object)
- 保护对象:
// 防止向对象添加属性
Object.preventExtensions(object)// 如果属性可以添加到对象,则返回 true
Object.isExtensible(object)// 防止更改对象属性(不是值)
Object.seal(object)// 如果对象被密封,则返回 true
Object.isSealed(object)// 防止对对象进行任何更改
Object.freeze(object)// 如果对象被冻结,则返回 true
Object.isFrozen(object)
48.1 更改属性值
<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//更改属性值Object.defineProperty(fruits, "years", { value: 30 });document.getElementById("demo").innerHTML = fruits.years;</script></body>
输出:30
48.2 更改元数据
ES5 允许更改以下属性元数据:
writable : true // 属性值可更改
enumerable : true // 属性可枚举
configurable : true // 属性可重新配置
writable : false // 属性值不可更改
enumerable : false // 属性不可枚举
configurable : false // 属性不可重新配置
ES5 允许更改 getter 和 setter:
// 定义 getter
get: function() { return language }
// 定义 setter
set: function(value) { language = value }
此例设置 language 为只读:
Object.defineProperty(person, "language", {writable:false});
这个例子使 language 不可枚举:
Object.defineProperty(person, "language", {enumerable:false});
48.3 列出所有属性
<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//设置属性可枚举Object.defineProperty(fruits, "years", { enumerable: true });//列出所有属性document.getElementById("demo").innerHTML =Object.getOwnPropertyNames(fruits);</script></body>
输出:firstName,lastNast,years
48.4 列出可枚举的属性
<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//更改属性为不可枚举Object.defineProperty(fruits, "years", { enumerable: false });//列出所有属性document.getElementById("demo").innerHTML = Object.keys(fruits);</script></body>
输出:firstName,lastNast
48.5 添加属性
Object.defineProperty()
<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//添加属性Object.defineProperty(fruits, "language", {value: "Chinese",enumerable: true,});//列出所有属性document.getElementById("demo").innerHTML = Object.keys(fruits);</script></body>
输出:firstName,lastNast,years,language
48.6 添加 Getter 和 Setter
Object.defineProperty()
方法也可以用来添加Getter
和Setter
:
<body><p id="demo"></p><script>var text = "";const fruits = {firstName: "文",lastNast: "阿花",years: 24,};//定义getterObject.defineProperty(fruits, "fullName", {get: function () {return this.firstName + this.lastNast;},});document.getElementById("demo").innerHTML = fruits.fullName;</script></body>
输出:文阿花