物件解構，陣列解構

i涵涵發表於2019-02-21
物件陣列

物件解構、陣列解構

ES6允許按照一定的模式，從物件中提取值，對變數進行賦值，這被稱為解構(Destructuring);

例如在以下的例子當中:

const Tom = { name: "Tom Cat", age: 18, family: { mother: "Tom ma", father: "Tom fa", brother: "Tom bro" } }

如果沒有使用ES6之前，想要用一個變數儲存屬性的值，我們需要這麼做。

const name = Tom.name; const age = Tom.age; 可以看到，我們重複的書寫了Tom這程式碼。 使用ES6的物件解構，我們可以這麼寫；

const {name, age} = Tom;

console.log(name);/Tom Cat; console.log(age);/18 需要注意的是，物件解構完成以下兩件事。

宣告一個變數； 賦值這個變數； 所以，如果該變數被提前宣告瞭。

let name;

({name, age} = Tom);

解構時指定變數名 那麼，如果變數名之前被佔用了。現在不想被覆蓋怎麼辦？

const name = "使用者名稱";

let {name: Tname,age} = Tom;

如果原來的變數被佔用，我們指定一個需要宣告的變數。

解構時的預設值 在我們使用第三方庫的時候，經常能夠碰到的一個場景就是，哪怕我們沒有傳引數，這個第三方庫總會有一個預設值為我們去完成預設的配置。然後當我們傳了配置之後，又會使用我們的使用者配置。

function appendDiv(options = {}){ const {parent = "body", width = "100px", height = "200px",backgroundColor = "pink"} = options;

const div = document.createElement("div");
div.style.width = width;
div.style.height = height;
div.style.backgroundColor = backgroundColor;

document.querySelector(parent).appendChild(div);
複製程式碼

}

上面的例子可以看到，假設使用者傳入一個配置物件，那麼，該函式將會使用使用者的設定，如果沒有傳入，則為預設配置。

注意點：

只有當使用者傳入的資料為明確的undefined的時候。才回去使用預設值，如果不是的話，依舊會使用使用者的設定。 陣列解構 有物件解構，當然少不了我們的陣列解構。使用方式如下:

const arr = ["one", "two", "three"];

const [one, two] = arr; console.log(one, two); //one, two 陣列解構比較典型的用法是交換兩個數的值。

那麼，在過去，我們去交換兩個變數的值的時候。這樣寫

var a = 10; var b = 20;

var temp = a; a=b; b=temp; 如果使用陣列解構，我們可以直接一行程式碼搞定。

[b,a] = [a,b]; 當然，和物件解構一樣，陣列解構也接受預設值的寫法。

const [one,two,three, four="我是第四項"] =arr;

相關文章