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中文網其他相關文章！