ES6的解构赋值详解

时间:2018-05-19 15:40:48 来源:互联网 作者: 神秘的大神 字体:

这次给大家带来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);

相信看了本文案例你已经掌握了方法,更多精彩请关注我要学编程网wyxbc.com其它相关文章!

相关阅读:

webpack3.x的entry,output,module解析

Vue2 tab切换选项卡的方法

基础的JavaScript知识总结(十一)对象,包装类

以上就是ES6的解构赋值详解的详细内容,更多请关注我要学编程网wyxbc.com其它相关文章!