本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於解構賦值的相關問題，包括了數組解構、對象結構以及解構的用途等等，希望對大家有幫助。
相關推薦：javascript學習教學
ES6提供了更簡潔的賦值模式，從數組和物件中提取值，這被稱為解構
範例：
[a, b] = [50, 100]; console.log(a); // expected output: 50 console.log(b); // expected output: 100 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: [30, 40, 50]
數組解構是非常簡單簡潔的，在賦值表達式的左側使用數組字面量，數組字面量中的每個變數名稱映射為解構數組的相同索引項
這是什麼意思呢，就是如下面這個示例一樣，左邊數組中的項分別得到了右側解構數組對應索引的值
let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3
你可以透過變數宣告分別解構賦值
範例：宣告變量，分別賦值
// 声明变量 let a, b; // 然后分别赋值 [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2
#如果解構取出的值是undefined，可以設定預設值：
let a, b; // 设置默认值 [a = 5, b = 7] = [1]; console.log(a); // 1 console.log(b); // 7
在上面的範例中，我們給a和b都設定了預設值
這種情況下，如果a或b的值是undefined，它將把設定的預設值賦給對應變數（5賦給a，7賦給b）
以往我們進行兩個變數的交換，都是使用
//交换abc = a;a = b;b = c;
或異或的方法
#然而在解構賦值中，我們可以在一個解構表達式中交換兩個變數值
let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1
我們可以直接解構一個傳回值為陣列的函數
function c() {
return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20在上面的範例中，**c()**的傳回值[ 10，20]可以在單獨的同一行程式碼中使用解構
你可以有選擇性的跳過一些不想得到的回傳值
function c() {
return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3當你使用數組解構時，你可以把賦值數組剩餘的部分全部賦給一個變數
let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]
這樣的話b也會變成一個陣列了，陣列中的項目是剩餘的所有項目
注意：
這裡要小心結尾是不能再寫逗號的，如果多了一個逗號將會報錯
let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma
像物件一樣，數組也可以進行嵌套解構
範例：
const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)']; // Use nested destructuring to assign red, green and blue // 使用嵌套解构赋值 red, green, blue const [hex, [red, green, blue]] = color; console.log(hex, red, green, blue); // #FF00FF 255 0 255
#在陣列解構中，解構的目標若為可遍歷對象，皆可進行解構賦值，可遍歷物件即實作Iterator介面的資料
let [a, b, c, d, e] = 'hello';/* a = 'h' b = 'e' c = 'l' d = 'l' e = 'o' */
let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写
console.log(y); // 22
console.log(z); // true當使用物件解構時可以改變變數的名稱
let o = { p: 22, q: true };
let { p: foo, q: bar } = o;
console.log(foo); // 22
console.log(bar); // true如上程式碼var {p: foo} = o 取得物件o 的屬性名p，然後賦值給一個名稱為foo 的變數
如果解構取出的物件值是undefined，我們可以設定預設值
let { a = 10, b = 5 } = { a: 3 };
console.log(a); // 3
console.log(b); // 5前面提到我們賦值給新的物件名，這裡我們可以給這個新的物件名稱提供一個預設值，如果沒有解構它，就會自動使用預設值
let { a: aa = 10, b: bb = 5 } = { a: 3 };
console.log(aa); // 3
console.log(bb); // 5在結構中陣列和物件可以一起使用
const props = [
{ id: 1, name: 'Fizz' },
{ id: 2, name: 'Buzz' },
{ id: 3, name: 'FizzBuzz' },
];
const [, , { name }] = props;
console.log(name); // "FizzBuzz"let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x
// x = undefined
// y = 'world'let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj;//忽略y
// x = 'hello'##錯誤示範：
let x;{x} = {x: 1};{x}理解為程式碼區塊，從而產生語法錯誤，我們要避免將大括號寫在行首，避免JavaScript將其解釋為程式碼區塊
正確寫法：
let x;({x} = {x: 1});function add([x, y]) {
return x + y;}add([1, 2]);let x = 1; let y = 2; [x, y] = [y, x];
// 返回一个数组function example() {
return [1, 2, 3];}let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}let { foo, bar } = example();解构赋值对于提取JSON对象中的数据，尤其有用
示例：
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]使用上面的代码，我们就可以快速取出JSON数据中的值
相关推荐：javascript教程
以上是帶你來了解JavaScript解構賦值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
