雙語學(xué)習(xí)解構(gòu)賦值、數(shù)組解構(gòu)和對象解構(gòu)

解構(gòu)賦值語法是一種 Javascript 表達式。通過解構(gòu)賦值, 可以將屬性值從對象或數(shù)組中取出,賦值給其他變量。

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

描述

對象和數(shù)組逐個對應(yīng)表達式，或稱對象字面量和數(shù)組字面量，提供了一種簡單的定義一個特定的數(shù)據(jù)組的方法。

Description

The object and array literal expressions provide an easy way to create ad hoc packages of data.

數(shù)組解構(gòu)

Array destructuring

為了理解數(shù)組解構(gòu)，我舉個例子吧，這個例子是我們家孩子暑假的學(xué)習(xí)list。他暑假要學(xué)習(xí)語文、數(shù)學(xué)、英語，他自己還喜歡畫畫。

const hugetodoListToday = ['Language', 'math','English','painting']; 
const [Language, math] = hugetodoListToday; 
console.log(Language,math);//Language math

獲取到相應(yīng)位置的值
Get the value to the corresponding location
可以用不同的變量代替數(shù)組中第一、第二項的值。例如，用a1、a2代替Langugae和math.

const hugetodoListToday = ['Language', 'math','English','painting']; 
const [a1,a2] = hugetodoListToday; 
console.log(a1,a2);、//Language math

忽略某些返回值

Ignoring some returned values

可以用中間添加逗號的方式忽略返回值，下面的例子，我們忽略了第二項--math，

const hugetodoListToday = ['Language', 'math','English','painting']; 
const [a1,,a2] = hugetodoListToday; 
console.log(a1,a2);//Language English

剩余參數(shù)

rest parameter

將剩余數(shù)組賦值給一個變量

Assigning the rest of an array to a variable

const hugetodoListToday = ['Language', 'math','English','painting']; 
const [a1,...a2] = hugetodoListToday;
console.log(a1,a2);//Language 0: "math"1: "English"2: "painting"

得到的結(jié)果是：一個Language和由其他參數(shù)組成的數(shù)組

這里補充一點剩余參數(shù)的知識：

剩余參數(shù)語法允許我們將一個不定數(shù)量的參數(shù)表示為一個數(shù)組。

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

Description

A function's last parameter can be prefixed with ... which will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array. Only the last parameter can be a "rest parameter".

如果函數(shù)的最后一個命名參數(shù)以...為前綴，則它將成為一個由剩余參數(shù)組成的真數(shù)組，其中從0（包括）到theArgs.length（排除）的元素由傳遞給函數(shù)的實際參數(shù)提供。

function myFun(a, b, ...manyMoreArgs) { 
console.log("a", a); 
console.log("b", b); 
console.log("manyMoreArgs", manyMoreArgs);
 } 
myFun("one", "two", "three", "four", "five", "six"); 
// Console Output: 
// a, one 
// b, two 
// manyMoreArgs, [three, four, five, six]

補充知識2：實參和形參

function sum(sum1,sum2){//形參
 var c = sum1+sum2; 
for(var i=0;i<arguments.length;++){ 
console.log(arguments[i]); 
}
 console.log(c); 
};
 sum(1,20); //實參

這里的sum1和sum2就是形參

當(dāng)你調(diào)用函數(shù)的時候傳入的參數(shù)就為實參

剩余參數(shù)和 arguments對象之間的區(qū)別主要有三個：

• 剩余參數(shù)只包含那些沒有對應(yīng)形參的實參，而 arguments 對象包含了傳給函數(shù)的所有實參。
• arguments對象不是一個真正的數(shù)組，而剩余參數(shù)是真正的 Array實例，也就是說你能夠在它上面直接使用所有的數(shù)組方法，比如 sort，map，forEach或pop。
• arguments對象還有一些附加的屬性 （如callee屬性）。

Difference between rest parameters and the arguments object

There are three main differences between rest parameters and the arguments object:

• rest parameters are only the ones that haven't been given a separate name (i.e. formally defined in function expression), while the arguments object contains all arguments passed to the function;
• the arguments object is not a real array, while rest parameters are Array instances, meaning methods like sort, map, forEach or pop can be applied on it directly;
• the arguments object has additional functionality specific to itself (like the calleeproperty).

補充小知識3：

the rest 和the other的區(qū)別

the other 一般是指兩者中的一個,比如說the one,the other one,或者用來表示另一部分,比如說 一些人同意這個計劃,另一些人不同意,就可以說,some people agreed this plan,but the others didn't.

the rest 一般指剩下的全部,例如 the rest of your life,the rest of the money.the rest 一般情況下與of 搭配.

回到正題。

解構(gòu)數(shù)組默認(rèn)值問題,

Default values

const hugetodoListToday = ['Language', 'math','English','painting']; 
const [a1,a2,a3,a4,a5 = 'program'] = hugetodoListToday;
console.log(a1,a2,a4,a5,a3);
//Language math painting program English

注意輸出順序改了一下喲

如果默認(rèn)值是null

const hugetodoListToday = ['Language', 'math','English','painting',null]; 
const [a1,a2,a3,a4,a5 = 'program'] = hugetodoListToday; 
console.log(a1,a2,a4,a5,a3);
// Language math painting null English

變量先聲明后賦值時的解構(gòu)

應(yīng)用場景：交換數(shù)組的值，
就是交換變量
Swapping variables

let one = 1, two = 2; 
[one,two] = [two,one];
console.log(one,two);

對象解構(gòu)
Object destructuring

基本賦值
Basic assignment

const huge = { 
name: 'huge',
 age: 9, 
todoList:{ 
Language: 'Copybook', 
math: 'Paper', 
English: 'word'
 }, 
}
 const {name, age} = huge;
 console.log(name);// huge
 console.log(age);// 9

無聲明賦值
Assignment without declaration

let a, b;
 ({a, b} = {a: 1, b: 2});

解構(gòu)嵌套對象和數(shù)組
Nested object and array destructuring

const huge = { 
name: 'huge', 
age: 9,
 todoList:{ 
Language: 'Copybook', 
math: 'Paper', 
English: 'word' 
}, 
} 
const {Language: l, math: m, English: e, painting = 'comic'} = huge.todoList;
console.log(l);//Copybook
 console.log(m);//Paper
 console.log(e); //word
console.log(painting);//comic

上面的例子還給變量重新命名，Language重命名為l。