ES6 解構賦值的作用

2022-07-11 07:36:11 字數 1534 閱讀 8341

概述

es6允許按照一定的模式,從陣列或物件中提取值,給變數進行賦值,稱為解構賦值。

解構賦值在**書寫上簡單易懂,語義清晰明了,方便對複雜物件中資料字段的獲取。

解構模型

在解構中,解構的源,位於解構賦值表示式的右邊,而解構的目標,在解構表示式的左邊。

常見用途

乍一看上面的概述,不太清楚到底是幹嘛的,那,有很多地方可以用到解構,很方便呢又強大,下面舉幾個常用的例子:

字串

var [a,b,c,d,e] = "hello";

console.log(a); // h

console.log(b); // e

console.log(c); // l

console.log(d); // l

console.log(e); // o

交換變數的值

let x = 1;

let y = 2;

[x, y] = [y, x];

函式

function move( = {}) 

move(); // [3, 8]

move(); // [3, 0]

move({}); // [0, 0]

move(); // [0, 0]

從函式返回多個值

// 返回乙個陣列

function example()

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

// 返回乙個物件

function example() ;

}let = example();

函式引數的定義

// 引數是一組有次序的值

function f([x, y, z])

f([1, 2, 3]);

// 引數是一組無次序的值

function f()

f();

提取 json 資料

let jsondata = ;

let = jsondata;

console.log(id, status, number);

// 42, "ok", [867, 5309]

遍歷map結構

const map = new map();

map.set('first', 'hello');

map.set('second', 'world');

for (let [key, value] of map)

// first is hello

// second is world

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

// 獲取鍵名

for (let [key] of map)

// 獲取鍵值

for (let [,value] of map)

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...