function*fibs() {
let a =0;
let b =1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
let [first, second, third, fourth, fifth, sixth] =fibs();
sixth; // 5
let p1 = {
name:"zhuangzhuang",
age:25
};
let { name, age } = p1; //注意变量必须为属性名console.log(name, age); //"zhuangzhuang",25
其转成 es5 的原理则为:
var _p1 = p1,
name =_p1.name,
age =_p1.age;
console.log(name, age); //"zhuangzhuang",25
解构赋值的别名
如果使用别名,则不允许再使用原有的解构出来的属性名,看以下举例则会明白:
let p1 = {
name:"zhuangzhuang",
age:25
};
let { name: aliasName, age: aliasAge } = p1; //注意变量必须为属性名console.log(aliasName, aliasAge); //"zhuangzhuang",25console.log(name, age); //Uncaught ReferenceError: age is not defined
为何打印原有的属性名则会报错?让我们看看转成 es5 后的原理是如何实现的:
var _p1 = p1,
aliasName =_p1.name,
aliasAge =_p1.age;
console.log(aliasName, aliasAge); //"zhuangzhuang",25console.log(name, age); //所以打印name和age会报错——“Uncaught ReferenceError: age is not defined”,但是为何只报错age,不报错name呢?
只报错 age,不报错 name,这说明其实 name 是存在的,那么根据 js 的解析顺序,当在当前作用域 name 无法找到时,会向上找,直到找到 window 下的 name,而我们打印 window 可以发现,其下面确实有一个 name,值为“”,而其下面并没有属性叫做 age,所以在这里 name 不报错,只报 age 的错。类似 name 的属性还有很多,比如 length 等。
解构赋值的默认值
有些情况下,我们解构出来的值并不存在,所以需要设定一个默认值,例如:
let obj = {
name:"zhuangzhuang"
};
let { name, age } = obj;
console.log(name, age); //"zhuangzhuang",undefined
我们可以看到当 age 这个属性并不存在于 obj 的时候,解构出来的值为 undefined,那么为了避免这种尴尬的情况,我们常常会设置该属性的默认值,如下:
let obj = {
name:"zhuangzhuang"
};
let { name, age =18 } = obj;
console.log(name, age); //"zhuangzhuang",18