JavaScript解構(gòu)賦值的示例分析

這篇文章給大家分享的是有關(guān)JavaScript解構(gòu)賦值的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

概念

ES6提供了更簡(jiǎn)潔的賦值模式，從數(shù)組和對(duì)象中提取值，這被稱(chēng)為解構(gòu)

示例：

[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]

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

數(shù)組解構(gòu)是非常簡(jiǎn)單簡(jiǎn)潔的，在賦值表達(dá)式的左側(cè)使用數(shù)組字面量，數(shù)組字面量中的每個(gè)變量名稱(chēng)映射為解構(gòu)數(shù)組的相同索引項(xiàng)

這是什么意思呢，就是如下面這個(gè)示例一樣，左邊數(shù)組中的項(xiàng)分別得到了右側(cè)解構(gòu)數(shù)組相應(yīng)索引的值

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

聲明分別賦值

你可以通過(guò)變量聲明分別解構(gòu)賦值

示例：聲明變量，分別賦值

// 聲明變量
let a, b;
// 然后分別賦值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

解構(gòu)默認(rèn)值

如果解構(gòu)取出的值是undefined，可以設(shè)置默認(rèn)值：

let a, b;
// 設(shè)置默認(rèn)值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

在上面的例子中，我們給a和b均設(shè)置了默認(rèn)值
這種情況下，如果a或b的值是undefined，它將把設(shè)置的默認(rèn)值賦給相應(yīng)變量（5賦給a，7賦給b）

交換變量值

以往我們進(jìn)行兩個(gè)變量的交換，都是使用

//交換abc = a;a = b;b = c;

或者異或的方法

然而在解構(gòu)賦值中，我們可以在一個(gè)解構(gòu)表達(dá)式中交換兩個(gè)變量值

let a = 1;let b = 3;//交換a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1

解構(gòu)函數(shù)返回的數(shù)組

我們可以直接解構(gòu)一個(gè)返回值為數(shù)組的函數(shù)

function c() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

在上面的例子中，**c()**的返回值[10，20]可以在單獨(dú)的同一行代碼中使用解構(gòu)

忽略返回值（或跳過(guò)某一項(xiàng)）

你可以有選擇性的跳過(guò)一些不想得到的返回值

function c() {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

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

當(dāng)你使用數(shù)組解構(gòu)時(shí)，你可以把賦值數(shù)組剩余的部分全部賦給一個(gè)變量

let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]

這樣的話(huà)b也會(huì)變成一個(gè)數(shù)組了，數(shù)組中的項(xiàng)是剩余的所有項(xiàng)

注意：
這里要小心結(jié)尾是不能再寫(xiě)逗號(hào)的，如果多了一個(gè)逗號(hào)將會(huì)報(bào)錯(cuò)

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma

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

像對(duì)象一樣，數(shù)組也可以進(jìn)行嵌套解構(gòu)

示例：

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解構(gòu)賦值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

字符串解構(gòu)

在數(shù)組解構(gòu)中，解構(gòu)的目標(biāo)若為可遍歷對(duì)象，皆可進(jìn)行解構(gòu)賦值，可遍歷對(duì)象即實(shí)現(xiàn)Iterator接口的數(shù)據(jù)

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

對(duì)象解構(gòu)

基礎(chǔ)對(duì)象解構(gòu)

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的簡(jiǎn)寫(xiě)

console.log(y); // 22
console.log(z); // true

賦值給新變量名

當(dāng)使用對(duì)象解構(gòu)時(shí)可以改變變量的名稱(chēng)

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // true

如上代碼var {p: foo} = o 獲取對(duì)象 o 的屬性名 p，然后賦值給一個(gè)名稱(chēng)為 foo 的變量

解構(gòu)默認(rèn)值

如果解構(gòu)取出的對(duì)象值是undefined，我們可以設(shè)置默認(rèn)值

let { a = 10, b = 5 } = { a: 3 };

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

賦值給新對(duì)象名的同時(shí)提供默認(rèn)值

前面提到過(guò)我們賦值給新的對(duì)象名，這里我們可以給這個(gè)新的對(duì)象名提供一個(gè)默認(rèn)值，如果沒(méi)有解構(gòu)它，就會(huì)自動(dòng)使用默認(rèn)值

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

同時(shí)使用數(shù)組和對(duì)象解構(gòu)

在結(jié)構(gòu)中數(shù)組和對(duì)象可以一起使用

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

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

不完全解構(gòu)

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解構(gòu)x

// x = undefined
// y = 'world'

賦值剩余值給一個(gè)對(duì)象

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

嵌套對(duì)象解構(gòu)（可忽略解構(gòu)）

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'

注意事項(xiàng)

小心使用已聲明變量進(jìn)行解構(gòu)

錯(cuò)誤示范：

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

JavaScript引擎會(huì)將{x}理解為一個(gè)代碼塊，從而產(chǎn)生語(yǔ)法錯(cuò)誤，我們要避免將大括號(hào)寫(xiě)在行首，避免JavaScript將其解釋為代碼塊
正確寫(xiě)法：

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

正確寫(xiě)法將整個(gè)解構(gòu)賦值語(yǔ)句放在一個(gè)圓括號(hào)里，就可以正確執(zhí)行了

函數(shù)參數(shù)的解構(gòu)賦值

函數(shù)的參數(shù)也可以使用解構(gòu)賦值

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

上面代碼中，函數(shù)add的參數(shù)表面上是一個(gè)數(shù)組，但在傳參的時(shí)候，數(shù)組參數(shù)就被解構(gòu)為變量x和y了，對(duì)于函數(shù)內(nèi)部來(lái)說(shuō)，就和直接傳入x和y是一樣的

解構(gòu)的用途

解構(gòu)賦值的用法很多

交換變量的值

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

上面的代碼交換x和y的值，這樣的寫(xiě)法不僅簡(jiǎn)潔而且易讀，語(yǔ)義清晰

從函數(shù)返回多個(gè)值

函數(shù)只能返回一個(gè)值，如果要返回多個(gè)值，我們只能將這些值放置數(shù)組或?qū)ο罄锓祷?，?dāng)我們有了解構(gòu)賦值后，從對(duì)象或數(shù)組里取出這些值猶如探囊取物

// 返回一個(gè)數(shù)組function example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // 返回一個(gè)對(duì)象
  function example() {
  return {
    foo: 1,
    bar: 2
  };
  }let { foo, bar } = example();

提取JSON數(shù)據(jù)

解構(gòu)賦值對(duì)于提取JSON對(duì)象中的數(shù)據(jù)，尤其有用

示例：

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數(shù)據(jù)中的值

感謝各位的閱讀！關(guān)于“JavaScript解構(gòu)賦值的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！