3.解构赋值
允许按照一定模式，从数组和对象中提取值，并对变量进行赋值，这被称为解构赋值
数组解构赋值
顺序对应
let [a, b, c] = [1, 2, 3];对象解构赋值
key 值对应
let { foo, bar } = { foo: "aaa", bar: "bbb" }解构赋值——别名
foo: 原始名称
f：别名
let { foo: f, bar: b } = { foo: "aaa", bar: "bbb" }多重解构
let { foo: [a, b] } = { foo: [10,20], bar: "bbb" }
4.扩展运算符
把数组/对象转成参数序列（使用逗号分隔的序列）
['a,'b','c'] => 'a','b','c'相当于去除数组的中括号
{left:100, top:200} => left: 100, top: 200相当于去除大括号
案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 合并数组
var arr1 = [1,7,3,6,2];
var arr2 = ['a', 'b', 'c'];
console.log( [...arr1, 'maiov', ...arr2] );
// 合并对象
let obj1 = {left:100, top: 200};
let obj2 = {width: 200, height: 200};
let obj3= {
...obj1,
...obj2
};
console.log(obj3);5.迭代
迭代协议
规定了迭代与实现的逻辑
基本结构
1
2
3
4
5
6
7
8
9
10
11// 迭代协议
obj[Symbol.iterator] = function () {
return {
next: function () { // 迭代函数必须的
return {
value: '' // 迭代输出值
done: true | faslse // 是否结束迭代
}
}
}
}
迭代器
具体的迭代实现逻辑,即 [Symbol.iterator]方法
输出结果：left 100
top 200
实例
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
27
28
29
30
31
32
33
34
35
36
37/*
* 迭代对象
* 实现了迭代器的对象
* 迭代器：方法 [Symbol.iterator]
*/
var obj = {
left: 100,
top: 200
};
// 迭代协议
// 自定义迭代条件，以及返回值
obj[Symbol.iterator] = function () {
let keys = Object.keys(obj); // 获取对象的key值，返回一个数组
let len = keys.length;
let n = 0;
return {
next: function () { // 迭代函数必须的
if (n < len) { // 迭代条件
return {
value: { k: keys[n], v: obj[keys[n++]] },// 迭代输出的值，此处的n++的含义是先输出obj[keys[n]]的值，然后在n++
done: false // false代表还需继续迭代
}
} else {
return {
done: true
}
}
}
}
}
// obj[Symbol.iterator]().next() => {done: true}
for (var { k, v } of obj) { //of 是一个可迭代的对象
console.log(k, v);
}
迭代对象
- 可被迭代的对象，含有 [Symbol.iterator]方法的对像
迭代语句
for…in：以原始插入的顺序迭代对象的可枚举属性
输出结果：0， 1， 2
实例
1
2
3
4
5
6<script>
var arry = ['a', 'b', 'c'];
for(var attr i arry){
console.log(attr);
}
</script>for…of：根据迭代对象的迭代器具体实现迭代对象数据
输出结果：a， b， c
实例
1
2
3
4
5
6<script>
var arry = ['a', 'b', 'c'];
for(var attr of arry){
console.log(attr);
}
</script>