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
相当于去除大括号
- 案例
// 合并数组 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.迭代
- 迭代协议
- 规定了迭代与实现的逻辑
-
基本结构
“`
// 迭代协议
obj[Symbol.iterator] = function () {
return {
next: function () { // 迭代函数必须的
return {
value: '' // 迭代输出值
done: true | faslse // 是否结束迭代
}
}
}
}
“`
- 迭代器
-
具体的迭代实现逻辑,即 [Symbol.iterator]方法
输出结果:left 100
top 200
- 实例
“`
/*
* 迭代对象
* 实现了迭代器的对象
* 迭代器:方法 [Symbol.iterator]
*/<pre><code> 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);
}
</code></pre>“`
- 迭代对象
- 可被迭代的对象,含有 [Symbol.iterator]方法的对像
- 迭代语句
-
for…in:以原始插入的顺序迭代对象的可枚举属性
输出结果:0, 1, 2
- 实例
“`
<script>
var arry = ['a', 'b', 'c'];
for(var attr i arry){
console.log(attr);
}
</script>
“` -
for…of:根据迭代对象的迭代器具体实现迭代对象数据
输出结果:a, b, c
- 实例
“`
<script>
var arry = ['a', 'b', 'c'];
for(var attr of arry){
console.log(attr);
}
</script>
“`