首頁  >  文章  >  web前端  >  ES6的解構賦值詳解

ES6的解構賦值詳解

php中世界最好的语言
php中世界最好的语言原創
2018-05-19 15:40:481820瀏覽

這次帶給大家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解析

Vue2 tab切換選項卡的方法

基礎的JavaScript知識總結(十一)對象,包裝類別

以上是ES6的解構賦值詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn