聊一聊ES6的解構賦值

2021-09-22 18:49:24 字數 1579 閱讀 4046

##es6的結構賦值

基本用法:es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構

陣列的結構賦值是按照順序賦值的

//1. 最簡單用法

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

a //1;

b //2;

c //3;

//2. 如果沒有相應的值給變數賦值

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

d //undefined

//3. 變數可以有預設值

let [ x=3, y=4 ] = [ ];

x //3;

y //4;

//注意,es6 內部使用嚴格相等運算子(===),判斷乙個位置是否有值。所以,只有當乙個陣列成員嚴格等於undefined,預設值才會生效。

let [ x=1 ] = [undefined];

x //1;

let [ x=1 ] = [null];

x //null;

//4. 陣列中較複製的陣列巢狀賦值

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

b //2

let [ a , ...b ] = [ 1, 2, 3, 4 ];

a //1;

b //[ 2, 3, 4]

//5. 特殊的情況

let [foo] = 1; //1 is not iterable

let [foo] = false; //false is not iterable

let [foo] = nan;

let [foo] = undefined;

let [foo] = null;

let [foo] = {};

//以上情況均會報錯,如果等號的右邊不是陣列(或者嚴格地說,不是可遍歷的結構)那麼將會報錯。

物件的結構賦值沒有順序,是根據對應相同的屬性名賦值

//1. 基礎應用

let = ;

foo // "aaa"

bar // "bbb"

let = ;

num //undefined

//2. 物件的解構賦值,可以很方便地將現有物件的方法,賦值到某個變數。

// 例一

let = math;

// 例二

const = console;

log('hello') // hello

//例一將math物件的對數、正弦、余弦三個方法,賦值到對應的變數上,使用起來就會方便很多。例二將console.log賦值到log變數。

//3. 物件的解構賦值的內部機制,是先找到同名屬性,然後再賦給對應的變數。真正被賦值的是後者,而不是前者。

let = ;

baz // "aaa"

foo // error: foo is not defined

//上面**中,foo是匹配的模式,baz才是變數。真正被賦值的是變數baz,而不是模式foo。

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 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...