帶你來了解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: 'FizzBu​​zz' },
];

const [, , { name }] = props;
console.log(name); // "FizzBu​​zz"

不完全解構

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};

JavaScript引擎會將{x}理解為一個程式碼區塊，從而產生語法錯誤，我們要避免將大括號寫在行首，避免JavaScript將其解釋為程式碼區塊
正確寫法：

let x;({x} = {x: 1});

正確寫法將整個解構賦值語句放在一個圓括號裡，就可以正確執行了

函數參數的解構賦值

函數的參數也可以使用解構賦值

function add([x, y]) {
	return x + y;}add([1, 2]);

上面程式碼中，函數add的參數表面上是一個數組，但在傳參的時候，數組參數就被解構為變數x和y了，對於函數內部來說，就和直接傳入x和y是一樣的

解構的用途

解構賦值的用法很多

交換變數的值

let x = 1;
let y = 2;
[x, y] = [y, x];

上面的程式碼交換x和y的值，這樣的寫法不僅簡潔而且易讀，語義清楚

從函數傳回多個值

函數只能傳回一個值，如果要回傳多個值，我們只能將這些值放置數組或物件裡返回，當我們有了解構賦值後，從物件或數組裡取出這些值猶如探囊取物

// 返回一個數組function example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // 回傳一個物件function example() {
  return {
    foo: 1,
    bar: 2
  };
  }let { foo, bar } = example();

提取JSON資料

解構賦值對於提取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中文網其它相關文章！