ES6(二)之變數的解構賦值

2021-10-03 09:42:47 字數 4932 閱讀 2418

基本用法

let arr = [1, 2, 3];

let a = arr[0];

let b = arr[1];

let c = arr[2];

console.log(a, b, c);

解構賦值後:

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

console.log(a, b, c);

let [, , num, str] = [, , 6, "str"];

let = ;這種寫法不合理,右邊不屬於合法的值

預設值
let [foo = true] = ;

foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'

let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

let [x = 1] = [undefined];

x // 1

let [x = 1] = [null];

x // null

舉例理解:

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

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

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

let [x = y, y = 1] = ; // referenceerror: y is not defined

使用

物件的解構與陣列的解構有乙個重要的不同,陣列的元素是按次序排列的,變數的取值由他的位置決定的,而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值

let   = ;

a //"aaa"

b //"bbb"

let = ;

c //undefined

如果變數名與屬性名不一致

let  = ;

baz // "aaa"

let obj = ;

let = obj;

f // 'hello'

l // 'world'

let = ;

baz // "aaa"

foo // error: foo is not defined

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

3. 解構用於巢狀結構的物件

let obj = 

]};let ] } = obj;

x // "hello"

y // "world"

這個時候,p是模式,不是變數,因此不會被賦值,如果p要歐威變數賦值,應該寫成如下:

let obj = 

]};let ] } = obj;

x // "hello"

y // "world"

p // ["hello", ]

預設值
var  = {};

x // 3

var = ;

x // 1

y // 5

預設值生效的條件是,物件的屬性值嚴格等於undefined。

注意點js會將理解成**塊 ,只有在不將大括號寫在行首,才能解決這個問題

//錯誤的寫法

let x;

= ;//正確的寫法

( = });

解構賦值允許等號左邊的模式之中,不放置任何變數名。但是表示式毫無意義

({} = [true, false]);
由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構。

let arr = [1, 2, 3];

let = arr;

first // 1

last // 3

字串也可以解構賦值,字串被轉換成了乙個類似陣列的物件

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

類似陣列的物件都有length屬性

let  = "hello";

len //5

數值和布林值的包裝物件都有tostring屬性

let  = 123;

s === number.prototype.tostring // true

let = true;

s === boolean.prototype.tostring // true

undefinednull無法轉為物件,所以對他們進行解構賦值,都會報錯typeerror
let  = undefined;  //typeerror

let = null; //typeerror

函式引數的解構賦值舉例說明:

[[1, 2], [3, 4]].map(([a, b]) => a + b);

// [ 3, 7 ]

函式引數資料的解構的預設值,函式的引數是物件,通過對物件進行解構,得到xy值,解構失敗等於xy預設值

function move( = {}) 

move(); // [3, 8]

move(); // [3, 0]

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

move(); // [0, 0]

對函式的引數指定預設值會有不同的效果

function move( = ) 

move(); // [3, 8]

move(); // [3, undefined]

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

move(); // [0, 0]

不能使用圓括號的情況

變數宣告語句

//全部報錯

let [(a)] = [1];

let = {};

let () = {};

let = {};

let = {};

let ) } = };

函式引數

//報錯

function f( [(a)] )

賦值語句的模式

//報錯

() = ;

可以使用圓括號的情況

是賦值語句,而不是宣告語句

圓括號都不屬於模式的一部分

[(b)] = [3]; // 正確

( = {}); // 正確

[(parseint.prop)] = [3]; // 正確

在第二個例子裡,p是模式,(d)是變數

let x =1;

let y = 2;

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

// 返回陣列

function example ()

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

//返回物件

function example()

} let = example();

//引數是有序的

function f([x, y, z])

f([1, 2, 3]);

//引數是無序的

function f()

f();

let jsondata = ;

let = jsondata;

console.log(id, status, number);

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

jquery.ajax = function (url, ,

cache = true,

complete = function () {},

crossdomain = false,

global = true,

// ... more config

} = {}) ;

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)

import  from 'mint-ui'

ES6之變數與解構賦值

變數宣告var 函式作用域 可以重新賦值,重新定義 let 塊級作用域 不能重新宣告,可以修改 const 塊級作用域 不能重新宣告,不能修改 常量 var 是全域性變數,for var i 0 i 10 i for let i 0 i 10 i 1000 script 變數提公升var命令會發生 ...

es6基礎之變數的解構賦值

本文源自阮老師的es6入門教程,為了之後方便自己隨時檢視,將常用的es6部分整理了一下 傳送門概念 es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值 基本用法 1 let a,b,c 1,2,3 上面 表示,可以從陣列中提取值,按照對應位置,對變數賦值,也就是說,只要兩邊的模式相同,左...

es6基礎之變數的解構賦值

本文源自阮老師的es6入門教程,為了之後方便自己隨時檢視,將常用的es6部分整理了一下 傳送門概念 es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值 基本用法 1 let a,b,c 1,2,3 上面 表示,可以從陣列中提取值,按照對應位置,對變數賦值,也就是說,只要兩邊的模式相同,左...