ES6的解构赋值详解

这次给大家带来ES6的解构赋值详解，使用ES6的解构赋值注意事项有哪些，下面就是实战案例，一起来看一下。

　@1数组的解构赋值;

let [a,b,c]=[1,2,3];
console.log(a,b,c)            //1 2 3
----------------------------------------------------------------
let [a=true]=[];
console.log(a)                //a=true;
----------------------------------------------------------------
let[a=true]=[undefined];
let[b=true]=[null]
console.log(a,b)             //a=true,b=null

其实理解undefined与null的区别很简单:虽然 undefined==null;

但是还是可区分的 参照犀牛书说 null 是一个 空对象指针

typeof null  ==>object;而undefined可以认为在下面两种情况会出现;

1.访问数组不存在的项;

2.未定义的变量var 方式;

所以:以下两种等价;

let[a=true]=[undefined];
let[a=true]=[ ];

就不难理解为什么了;

@2对象的解构赋值;

与数组不同,对象的解构赋值是根据键而不是根据索引;

let {foo,bar}={bar:"liuhf",foo:true};　　　　//跟键的顺序没有关系;

　　@3字符串的解构赋值;

const [a,b,c,d,e,f]="liuhee";
console.log(a,b,c,d,e,f);        // l i u h e e

　　不管哪一种解构赋值,必须左右对应;

<下面是对象/数组的函数解构赋值:再次验证了 ...拓展运算符取的是"值"而已>

let json = {
        a: '对',
        b: '象'
    }
    //对象的函数解构;
function fun({ a, b = 'jspang' }) {
    console.log(a, b);
}
fun(json);
//数组的函数解构;
let arr = ["liu", "hai"]
function fun1([a, b]) {
    console.log(a, b);
}
fun1(arr);
console.log("------------");
//或者;
function fun2(a, b) {
    console.log(a, b);
}
fun2(...arr);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

webpack3.x的entry,output,module解析

Vue2 tab切换选项卡的方法

基础的JavaScript知识总结（十一）对象，包装类

以上是ES6的解构赋值详解的详细内容。更多信息请关注PHP中文网其他相关文章！