快捷導(dǎo)航

深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法

更新時(shí)間：2018年01月13日 09:05:06 作者：尋找石頭魚

本文介紹了深入理解ES6之?dāng)?shù)據(jù)解構(gòu)的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

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

對(duì)象解構(gòu)語(yǔ)法在賦值語(yǔ)句的左側(cè)使用了對(duì)象字面量

let node = {
  type: true,
  name: false
}

//既聲明又賦值
let {
  type,
  name
} = node;

//或者先聲明再賦值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

type與name標(biāo)識(shí)符既聲明了本地變量，也讀取了對(duì)象的相應(yīng)屬性值。

解構(gòu)賦值表達(dá)式的值為表達(dá)式右側(cè)的值。當(dāng)解構(gòu)表達(dá)式的右側(cè)的計(jì)算結(jié)果為null或者undefined時(shí)，會(huì)拋出錯(cuò)誤。

默認(rèn)值

當(dāng)你使用解構(gòu)賦值語(yǔ)句時(shí)，如果所指定的本地變量在對(duì)象中沒有找到同名屬性，那么該變量會(huì)被賦值為undefined

let node = {
  type: true,
  name: false
},
  type, name, value;
({type,value,name} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

你可以選擇性地定義一個(gè)默認(rèn)值，以便在指定屬性不存在時(shí)使用該值。

let node = {
    type: true,
    name: false
  },
  type, name, value;
({
  type,
  value = true,
  name
} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//true

賦值給不同的本地變量名

let node = {
  type: true,
  name: false,
  value: "dd"
}
let {
  type: localType,
  name: localName,
  value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);

type:localType這種語(yǔ)法表示要讀取名為type的屬性，并把它的值存儲(chǔ)在變量localType上。該語(yǔ)法與傳統(tǒng)對(duì)象字面量的語(yǔ)法相反

嵌套的對(duì)象結(jié)構(gòu)

let node = {
type: "Identifier",
name: "foo",
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
}
}

let {
loc: localL,
loc: {
  start: localS,
  end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

當(dāng)冒號(hào)右側(cè)存在花括號(hào)時(shí)，表示目標(biāo)被嵌套在對(duì)象的更深一層中（loc: {start: localS,end: localE}）

二數(shù)據(jù)解構(gòu)

數(shù)組解構(gòu)的語(yǔ)法看起來(lái)跟對(duì)象解構(gòu)非常相似，只是將對(duì)象字面量換成了數(shù)組字面量。

let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow

你也可以在解構(gòu)模式中忽略一些項(xiàng)，并只給感興趣的項(xiàng)提供變量名。

let colors = ["red","green","blue"];

let [,,thirdC] = colors;
console.log(thirdC);//blue

thirdC之前的逗號(hào)是為數(shù)組前面的項(xiàng)提供的占位符。使用這種方法，你就可以輕易從數(shù)組任意位置取出值，而無(wú)需給其他項(xiàng)提供名稱。

解構(gòu)賦值

let colors = ["red","green","blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor,secondColor] = colors;
console.log(firstColor);//red
console.log(secondColor);//green

數(shù)組解構(gòu)有一個(gè)非常獨(dú)特的用例，能輕易的互換兩個(gè)變量的值。

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

嵌套的解構(gòu)

let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue

剩余項(xiàng)

let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue

使用剩余項(xiàng)可以進(jìn)行數(shù)組克隆

let colors = ["red", "green", "blue"];
let [...restC] = colors;
console.log(restC);//["red", "green","blue"]

三混合解構(gòu)

let node = {
type: "Identifier",
name: 'foo',
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
},
range: [0, 3]
}

let {
type,
name: localName,
loc: {
  start: {
    line: ll
  },
  end: {
    column: col
  }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: