這次帶給大家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
不管哪一種解構賦值,必須左右對應;
92e709dc071bd0efdfacf93188ff1258
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解析
以上是ES6的解構賦值詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!