ES6 10筆記 解構賦值

2022-07-16 12:15:12 字數 3329 閱讀 8245

解構賦值重點是在賦值，賦值的元素是要拷貝出來賦值給變數，賦值的元素本身是不會被改變的

es5中變數賦值很麻煩

let arr = ['ilya', 'kantor']


let firstname = arr[0]


let surname = arr[1]
es6變數賦值人性化許多

let [firstname, surname] = ['ilya', 'kantor']


console.log(firstname) // ilya


console.log(surname) // kantor


let [,,a,,b] = [1,2,3,4,5];


console.log(a,b);//3,5


let [a,...reset] = [1,2,3,4,5];


console.log(a,reset);//1,[2,3,4,5]
​ 如果剩餘引數是對應的值為undefined，則賦值為

let [a,...reset] = [1];


console.log(a,reset);//1,


let [a, b, c] = "abc"; // ["a", "b", "c"]


let [one, two, three] = new set([1, 2, 3]);


let user = {};


[user.name, user.surname] = "ilya kantor".split(' ');


console.log(user.name); // ilya


let user = ;


// loop over keys-and-values


for (let [key, value] of object.entries(user)) :$`); // name:john, then age:30


}
let user = new map();


user.set("name", "john");


user.set("age", "30");


for (let [key, value] of user.entries()) :$`); // name:john, then age:30


}
如果陣列的內容少於變數的個數，並不會報錯，沒有分配到內容的變數會是 undefined

let [firstname, surname] = ;


console.log(firstname); // undefined


console.log(surname); // undefined
也可以給變數賦予預設值，防止 undefined 的情況出現

// default values


let [name = "guest", surname = "anonymous"] = ["julius"];


console.log(name);    // julius (from array)


console.log(surname); // anonymous (default used)


let  =
​ 大致的意思是我們有乙個 object 想把裡面的屬性分別拿出來而無需通過呼叫屬性的方式賦值給指定的變數。具體的做法是在賦值的左側宣告乙個和 object 結構等同的模板，然後把關心屬性的 value 指定為新的變數即可。

let options = ;


//let  = options;


//let  = options;


let  = options;


alert(title);  // menu


alert(width);  // 100


alert(height); // 200
​ 注：左側的「模板」結構要與右側的 object 一致，但是屬性的順序無需一致。

let options = ;


let  = options;


alert(title);  // menu


alert(width);  // 100


alert(height); // 200


let options = ;


let  = options;


// now title="menu", rest=


alert(rest.height);  // 200


alert(rest.width);   // 100


let options = ,


items: ["cake", "donut"],


extra: true    // something extra that we will not destruct


};// destructuring assignment on multiple lines for clarity


let ,


items: [item1, item2], // assign items here


title = "menu" // not present in the object (default value is used)


} = options;


alert(title);  // menu


alert(width);  // 100


alert(height); // 200
上述**配圖

解構賦值基本只要寫**就會用到，除非是在用es5之前的版本寫**。。。

從作為函式實參的物件中提取資料

function userid() 


function whois(})


var user = 


};console.log("userid: " + userid(user)); // "userid: 42"


whois(user); // "jdoe is john"

es6筆記 變數的解構賦值

模式匹配賦值，左邊是陣列，右邊也是陣列，一一對應賦值 例子 let a,b,c 1,2,3 解構賦值允許指定預設值，只有當乙個陣列成員 嚴格等於undefined,預設值才會生效 字串的結構賦值 字串也可以解構賦值，這是因為此時，字串被轉換成了乙個類似陣列的物件 例子 const a,b,c,d,e...

ES6筆記（解構）

1 解構 解構通俗點說，就是通過一種特定格式，快捷的讀取物件 陣列中的資料的方法 基本用法 如果右邊是物件，左邊也要用物件的格式，解構出來就是變數了，再也不是屬性了 解構物件 var ouser es5讀資料的方法 console.log ouser name ouser age aaa 20 le...

ES6學習筆記之解構賦值

let a hello a hello let b world yes b yes es6 內部使用嚴格相等運算子 判斷乙個位置是否有值。所以，只有當乙個陣列成員嚴格等於undefined，預設值才會生效。let c 13 undefined c 13 let d 12 null d nulllet...