Es6 - 变量解构赋值

变量解构赋值

定义 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

第一种直接赋值

let a = 0;let b = 1;let c = 2;复制代码

第二种 数组结构赋值 按照次序一一对应

let [d,e,f] = [3,4,5]复制代码

数组模式与赋值模式要一致

let [d,e,f] = [3,4,5]复制代码

let [d,e,f,[g,h]] = [3,4,5,[6,7]]复制代码

默认值

let [fun = true] =[];
console.log(fun)   // true复制代码

let [aa,bb = '我是bb'] =['你好'];console.log(aa,bb)    // 你好 我是bb复制代码

let [aa,bb="我是bb"]=['你好',undefined];
console.log(aa,bb)    // 你好 我是bb复制代码

let [aa,bb="我是bb"]=['你好',null];
console.log(aa,bb)    // 你好 null复制代码

undefined 是相当于什么都没有，仍然是默认值

null 表示 值为空 ，bb 并没有去默认值，而是结构为 null

对象结构赋值 键值对 一一对应就好。

let {  cc, dd} = {  'cc': '我是cc',  'dd': '我是dd'}console.log(cc, dd)复制代码

键值对 一一对应就好。

cc 对应 cc , dd 对应dd

圆括号使用

如果在解构之前就定义了变量，这时候你再解构会出现问题。

let foo;
{foo} ={foo:'圆括号的使用'};
console.log(foo);  报错复制代码

修改 在解构的语句外边加一个圆括号就可以了

let foo;
({foo} ={foo:'圆括号的使用'});
console.log(foo);  复制代码

字符串结构 字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e,f]="kaikai";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);复制代码

转载于:https://juejin.im/post/5d0a0810e51d45590a445b43