ES6学习笔记(3)--变量的解构赋值

引言：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰----技术胖

1.数组的解构赋值

一般数组的解构

let [a,c,d] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);

控制台输出：

这里要求要求等号两边的结构要一致，如下会出错

let [a,[c,d]] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);

控制台输出：

正确写法如下：

let [a,[c,d]] = [1,[2,3]];
console.log(a);
console.log(b);
console.log(c);

含有默认值的数组解构 

let [a,b='World'] = ['hello'];
console.log(a+b);

控制台输出

undefined和null的区别

let [a,b='World'] = ['hello',undefined];
console.log(a+b);

控制台输出：

 

let [a,b='World'] = ['hello',null];
console.log(a+b);

控制台输出：

由此可知，unfinished是没有这个东西，所以程序会输出b的默认值，而null是一个对象，值取null，所以可以被赋值为null

 

此外啊，我们一般数组解构还可以以下面的形式来用，就是说直接传数组作为参数

let arr = [1,3,4];

function add([a,b,c]){
    console.log(a+b+c);
}
add(arr);

 还可以这样,之所以要加上（...）是因为这样表示的是取数组的值，而不是数组，记住解构的格式要一一对应！

let arr = [1,3,4];

function add(a,b,c){
    console.log(a+b+c);
}
add(...arr);

 

2.对象的解构赋值

对象的解构赋值与数组不一样，不像数组是按照顺序赋值的，对象的解构是根据变量解构的，看代码

let {first,second} = {second:1,first:'i am first'}
console.log(first);
console.log(second);

控制台输出：表明不是按照顺序的，而是按照变量名解构

需要注意的是，若是变量先定义再解构，以下格式会出错

let obj;
{obj} = {obj:'i am a obj'};
console.log(obj);

 编译出错：

 正确写法是：

let obj;
({obj} = {obj:'i am a obj'});
console.log(obj);

控制台输出:

当我们从后台接收到一个json数据时，我们可以通过对象的解构将，将数据传送到函数里面执行,直接作为参数，看代码

let json ={
    a:1,
    b:2
}

function fun({a,b}){
    console.log(a+b);
}
fun(json)

 

还可以加上默认值呢，这里给b加一个默认值

let json ={
    a:1,
    b:undefined
}

function fun({a,b=3}){
    console.log(a+b);
}
fun(json)

 

3.字符串的解构赋值 

let [a,b,c,d,e,f] = 'string';

console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);

控制台输出：表明会将字符赋给变量。

上一篇：ES6学习笔记(2)--ES6的新的声明方式 

下一篇：ES6学习笔记(4)--扩展运算符和rest运算符