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,
};
//定义getter
Object.defineProperty(fruits, "fullName", {
get: function () {
return this.firstName + this.lastNast;
},
});
document.getElementById("demo").innerHTML = fruits.fullName;
</script>
</body>
输出：文阿花
