ES6學習之變數的解構賦值

2022-09-15 17:12:16 字數 3841 閱讀 5207

1.陣列的解構賦值

let [a, b, c] = ["hello", 1, 2]

console.log(a)

//hello

console.log(b) //

1console.log(c) //

2

本質上,這種寫法屬於「模式匹配」,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值。如果解構不成功,變數的值就等於undefined

let [, , third, last, ...rest] = ["foo", "bar", "baz"];

console.log(third)

//baz

console.log(last) //

undefined

console.log(rest) //

//

不完全解構

let [a, b] = ["x", "y", "z"]

console.log(a) //x

console.log(b) //y//

set結構解構

let [c, d] = new set(["x", "y", "z"]);

console.log(c) //x

console.log(d) //

y

只要某種資料結構具有 iterator 介面,都可以採用陣列形式的解構賦值。

設定預設值:es6 內部使用嚴格相等運算子(===),判斷乙個位置是否有值。所以,如果乙個陣列成員不嚴格等於undefined,預設值是不會生效的。

let [a = 1] =[undefined];

console.log(a); //1

let [b = 2] = [null

];console.log(b)

//null

2.物件的解構賦值:物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。若變數沒有對應的同名屬性,則賦值為undefined

let  = ;

console.log(name)

//fred

console.log(age) //

20let =;

console.log(height)

//undefined

變數名與屬性名不一致寫法:

let  = 

console.log(person)

//fred

console.log(name) //

referenceerror: name is not defined

注:name是匹配模式,person才是變數,真正被賦值的是name

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

let  =

console.log(name)

//fred

let =

console.log(age)

//null

為已宣告的變數賦值:

let x;

= //

syntaxerror: unexpected token =

//因為 j**ascript 引擎會將理解成乙個**塊

( = ) //

x=1

為變數賦值方法:

let  =math;

console.log(sin)

//[function: sin]

陣列進行物件屬性的解構

let arr = [1,2,3]

let =arr;

console.log(first) //1

console.log(last) //

3

3.字串的解構賦值

const [a,b,c,d] = "hello";  //

具有iterator介面,採用陣列形式的解構賦值

console.log(a) //

hconsole.log(b) //

econsole.log(c) //

lconsole.log(d) //

lconst = "hello"; //

字串屬性的解構

console.log(len) //

5

4.數值和布林值的解構賦值

let  = 123;

console.log(value);

//[function: tostring]

let = true

;console.log(s)

//[function: tostring]

5.用途

交換變數的值

let a = 10;

let b = 20;

[a,b] =[b,a];

console.log(a)

//20

console.log(b) //

10

從函式返回多個值

//

陣列function

test1()

let [a,b] =test1();

console.log(a) //1

console.log(b) //2//

物件function

test2()

}let =test2();

console.log(x)

//20

console.log(y) //

40

函式引數的定義

//

引數是一組有次序的值

function

f([x, y, z])

f([1, 2, 3]);

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

function

f()

f();

提取json資料

let jsondata =

let =jsondata;

console.log(name,age)

設定函式引數預設值

function person()

遍歷map結構

const map = new

map();

map.set("name","fred");

map.set("age",20);

for(let [key,value] of map)

//name is fred

//age is 20

輸入模組的指定方法

const  = require("source-map");

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 上面 表示,可以從陣列中提取值,按照對應位置,對變數賦值,也就是說,只要兩邊的模式相同,左...