1. 程式人生 > >ES6新特性:解構賦值

ES6新特性:解構賦值

ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構
以前,為變數賦值,只能直接指定值。
let x=1;let y=2;let z=3;

ES6允許如下寫法

let[x,y,z]=[1,2,3];//模式匹配,按照位置來匹配

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

let [x,y,z]=[1,{'x':123},3];console.log(y);//輸出依次是 2 [1,2] {x: 123}let [head,...tail] = [0,1,2,3,4,5,6,7,8,9];  console.log(head);     //0console.log(tail);      
//[1,2,3,4,5,6,7,8,9]

解構不成功,值都會等於undefined

let [x, y] = [1, 2, 3];
x // 1
y // 2 
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

上面兩個案例都屬於不完全解構,但可以成功

如果等號右邊不是陣列,就會報錯

// 報錯 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};

上面的語句都會報錯,因為等號右邊的值,要麼轉為物件以後不具備 Iterator 介面(前五個表示式),要麼本身就不具備 Iterator 介面(最後一個表示式)。

解構賦值,允許指定預設值

陣列:按照位置來匹配

let [x,y='3',z]=[1];let [x,y='3',z]=[1,2];
let [x,y='3',z]=[1,2,3];
let [x,y='3',z]=[1,,3];
let [x,y='3',z='4']=[1,,null];console.log(x,y,z);//1 3 undefined//1 2 undefined
//1 2 3//1 "3" 3//1 "3" null函式function f(){  return 'aaa';};let[x=f()]=[];console.log(x);//'aaa'物件 按照對應的名字(屬性的名稱)來匹配

let{x,y}={x:"1",y:"2"};==let{x:x,y:y}={x:"1",y:"2"

x:x 前面的x代表一個匹配模式,後者代表一個變數

console.log(x,y);//這裡的x,y為後面的變數  1 2

let {x1:qq,y1}={y1:'22',x1:'21'};console.log(qq); //21let {x1:qq,y1}={y1:'22',x1:'21'};console.log(x1);//報錯let {x=1,y}={x:'a'};console.log(x,y);//a undefinedlet {x : y ='111'}={x : undefined};console.log(y);//111let {x : y ='111'}={x : null};console.log(y);//null字串的結構賦值let [a,b,c,d,e,f]='nodejs';console.log(b);//o類似於陣列,按照位置賦值函式引數的解構賦值function fun([x,y]){return x+y;};fun([3,5]);//8function fun([x=0,y=0]){return x+y;};fun([]);//0function fun([x=0,y=0]){return x+y;};fun([3,5]);//8function fun([x=3,y=5]){return x+y;};fun([]);//8  

如果呼叫的時候傳值就用次值,否則會直接使用預設值

函式裡返回多個值

function fun(){

    return [1,2,3];

}

let [a,b,c]=fun();

console.log(a,b,c);//1,2,3

//物件function num(){let obj={"name":"str","age":12}return obj}let [name:wqw,age]=num();console.log(wqw,age);let obj={"name":"str","age":12,"friends":["a1","b1"],"member":{x:1,y:2}}let {name,age,friends:ff,member}=obj;console.log(ff[1]);//b1console.log(member.x);//1
用途
(1)交換變數的值
let x = 1; let y = 2; [x, y]=[y, x];

上面程式碼交換變數xy的值,這樣的寫法不僅簡潔,而且易讀,語義非常清晰。

(2)從函式返回多個值

函式只能返回一個值,如果要返回多個值,只能將它們放在陣列或物件裡返回。有了解構賦值,取出這些值就非常方便。

// 返回一個數組

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個物件

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

(3)函式引數的定義

解構賦值可以方便地將一組引數與變數名對應起來。

// 引數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 引數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

(4)提取 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 資料的值。

(5)函式引數的預設值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

指定引數的預設值,就避免了在函式體內部再寫var foo = config.foo || 'default foo';這樣的語句。

(6)遍歷 Map 結構

任何部署了 Iterator 介面的物件,都可以用for...of迴圈遍歷。Map 結構原生支援 Iterator 介面,配合變數的解構賦值,獲取鍵名和鍵值就非常方便。

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想獲取鍵名,或者只想獲取鍵值,可以寫成下面這樣。

// 獲取鍵名
for (let [key] of map) {
  // ...
}

// 獲取鍵值
for (let [,value] of map) {
  // ...
}

(7)輸入模組的指定方法

載入模組時,往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");


相關推薦

ES6特性(上)

變量賦值 什麽 模式 註意 只需要 一個數 html 代碼 內容 1:什麽是解構賦值 按照一貫的套路,接下來的內容是解釋:什麽是解構賦值? 來看看官方的解釋: ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構(

ES6特性

ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構以前,為變數賦值,只能直接指定值。let x=1;let y=2;let z=3;ES6允許如下寫法let[x,y,z]=[1

ECMAscript6特性

註意 對象 指定 iterator 接口 模式匹配 我們 結構 pan   在以前,我們要對變量賦值,只能直接指定值。比如:var a = 1;var b = 2;但是發現這種寫法寫起來有點麻煩,一點都不簡潔,而在ECMAScript6中引入了一種新的概念,那就是“解構”,

ECMA Script 6特性

不完全 賦值語句 cti true 進行 null 必須 引用 cee 1.基本概念用法 1.1解構賦值:ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值。 var a = 1; var b = 2; var c = 3; /*上述賦值語句用

es6 陣列擴充套件,的api

陣列的擴充套件 擴充套件運算子 含義 擴充套件運算子(spread)是三個點(...)。它好比 rest 引數的逆運算,將一個數組轉為用逗號分隔的引數序列。 console.log(...[1, 2, 3]) // 1 2 3 consol

es6 變量的

.com pre syntax data defined math對象 b+ syn 內容 一、數組的解構賦值 數組解構賦值,索引很重要,即順序很重要 1、解構[1,2,3] //把1,2,3分別賦值給a,b,c var [a,b,c]=[1,2

ES6變量的

def 對象 ons aov aaa let es6 define 等號 // -------------------------------------------------------------------/** * 基本概念: * 本質上就是一種匹配模式,只

es6--變量的

表達 element ... ava 進行 解構賦值 .get java 獲取元素 基本用法: 以前為變量賦值只能直接指定值; var a = 1; var b = 2; var c = 3;  而es6允許寫成下面這樣: var [a, b, c] = [1,

Es6 -- 對象的

bar java bsp true 例子 div pre aaa log 解構不僅可以用於數組,還可以用於對象。 var {foo, bar} = {foo: "aaa", bar: "bbb"}; console.log(foo); //aaa console.log(

ES6 對象的

obj 位置 bar foo 不同 屬性 它的 排列 wro 對象的解構賦值 解構不僅可以用於數組,還可以用於對象。 let {foo,bar} = {foo:"aaa",bar:"bbb"}; console.log(foo); /

ES6中的陣列

解構賦值: 解構賦值語法是一個Javascript表示式,這使得可以將資料從陣列或物件提取到不同的變數中(這段話是mdn中關於解構賦值的定義,注意這裡的定義,可以看出解構主要用在陣列和物件上)。 說白了就是解析等號兩邊的結構,然後把右邊的對應賦值給左邊。如果解構不成功,變數的值就等於

ES6小技巧 - 使用設定函式引數預設

本文要說的並不是下面這種ES6的函式引數預設值: function fn(a = 0, b = 1) {} 複製程式碼 很多時候,我們在寫一個建構函式時,可能需要傳入很多引數,這時候就不可能使用函式引數一個一個的傳入,而是傳入一個物件當作引數。 舉個例子:一個函式,引數傳入一個物件,物件裡可以設定兩個屬性

ES6】物件的

物件的解構賦值 解構不僅可以用於陣列(陣列解構賦值),還可以用於物件。 let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" 物件的解構與陣列的解構的區別: 陣列的元素是按次序排列的,變

ES6之二(

ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(Destructuring)。解構分為以下幾種: 數值解構 1. 情況1:少 對 多 ——-解構成功 let [ , , third] = ["foo", "bar

es6筆記2之,rest和展開運算子

1.陣列解構 var arr=[1,2,3] var [a,b,c]=arr 然後就可以給abc分別賦對應的值 應用場景:   1.1  var [x,y]=[y,x]  變數互換   1.2  字串解構  var [a,b,c]='lha

ES6之——變數的

一、陣列的結構賦值 1>、什麼是解構? ES6允許我們隊陣列和物件中提取值,對變數進行賦值,這被叫做“解構”。 通常我們像下面這樣為變數賦值: var a = 1; b = 2; c = 3; 但是,ES6允許我們像下面這樣

javascript ES6 特性

 解構的作用是可以快速取得陣列或物件當中的元素或屬性,而無需使用arr[x]或者obj[key]等傳統方式進行賦值 var arr = [1, 2, 3]; //傳統方式 var a = arr[0], b = arr[1], c = arr[2]; console.log(a, b

學習ES6 你必須知道的特性!!關於

ES6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 陣列的解構賦值 ES5寫法 let a = 123; let b = 456; ES6允許寫法 let [a,b] = [123,456]; 可以從陣列中提取值,按照對應位置,對變數賦值

es6常用的特性 let,const,class,模版字串,,箭頭函式,for-of, keys values entries, export import, async await

let const class var命令和function命令宣告的全域性變數,依舊是頂層物件的屬性; 另一方面規定,let命令、const命令、class命令宣告的全域性變數,不屬於頂層物件的屬性。 也就是說,從ES6開始,全域性變數將逐步與頂層物件的屬性脫

ES6特性(3)——變量的

允許 不一致 node 變量名 使用 tail 有用 生效 ole 變量的解構賦值 數組的解構賦值 基本用法 ES6 允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構(Destructuring)。 let a = 1; let b = 2; let