深入理解ES6之 資料解構

2022-11-24 19:31:19 字數 3031 閱讀 9172

物件解構語法在賦值語句的左側使用了物件字面量

let node = 

//既宣告又賦值

let = node;

//或者先宣告再賦值

let type, name

( = node);

console.log(type);//true

console.log(name);//false

type與name識別符號既宣告瞭本地變數,也讀取了物件的相應屬性值。

解構賦值表示式的值為表示式右側的值。當解構表示式的右側的計算結果為null或者undefined時,會丟擲錯誤。

當你使用解構賦值語句時,如果所指定的本地變數在物件中沒有找到同名屬性,那麼該變數會被賦值為undefined

let node = ,

type, name, value;

( = node);

console.log(type);//true

console.log(name);//false

console.log(value);//undefined

你可以選擇性地定義一個預設值,以便在指定屬性不存在時使用該值。

let node = ,

type, name, value;

( = node);

console.log(type);//true

console.log(name);//false

console.log(value);//true

let node = 

let = node;

console.log(localtype);

console.log(localname);

console.log(localvalue);

type:localtype這種語法表示要讀取名為type的屬性,並把它的值儲存在變數localtype上。該語法與傳統物件字面量的語法相反

let node = ,

end: }}

let

} = node;

console.log(locall);// start: ,end:

console.log(locals);//

console.log(locale);//

當冒號右側存在花括號時,表示目標被巢狀在物件的更深一層中(loc: )

陣列解構的語法看起來跟物件解構非常相似,只是將物件字面量換成了陣列字面量。

let colors = ["red", "blue", "green"];

let [firstc, secondc, thirdc, thursc = "yellow"] = colors;

console.log(firstc//red

console.log(secondc);//blue

console.log(thirdc);//green

console.log(thursc);//yellow

你也可以在解構模式中忽略一些項,並只給感興趣的項提供變數名。

let colors = ["red","green","blue"];

let [,,thirdc] = colors;

console.log(thirdc);//blue

thirdc之前的逗號是為陣列前面的項提供的佔位符。使用這種方法,你就可以輕易從陣列任意位置取出值,而無需給其他項提供名稱。

let colors = ["red","green","blue"],

firstcolor = "black",

secondcolor = "purple";

[firstcolor,secondcolor] = colors;

console.log(firstcolor);//red

console.log(secondcolor);//green

陣列解構有一個非常獨特的用例,能輕易的互換兩個變數的值。

let a =1,b =2;

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

console.log(a);//2

console.log(b);//1

let colors = ["red", ["green", "blue"], "yellow"];

let [firstc, [, ssc]] = colors;

console.log(ssc);//blue

let colors = ["red", "green", "blue"];

let [firstc, ...restc] = colors;

console.log(firstc);

console.log(...restc);

console.log(restc[0]);//green

console.log(restc[1]);//blue

使用剩餘項可以進行陣列克隆

let colors = ["red", "green", "blue"];

let [...restc] = colors;

console.log(restc);//["red", "green","blue"]

let node = ,

end:

},range: [0, 3]

}let ,

end:

},range: [, second]

} = node;

console.log(type);//identifier

console.log(localname);//foo

console.log(ll);//1

console.log(col);//4

console.log(second);//3

深入理解ES6之 物件

在js中比較兩個值時,你可能會用相等運算子 或者嚴格相等運算子 為了避免在比較時發生強制型別轉換,許多開發者更傾向於使用後者。object.is 接受兩個引數,並且會在二者的值相等時返回true,此時要求二者的資料型別相同並且值也相等。console.log object.is 0,0 false ...

css之深入理解border

border style 設定4個邊框的樣式 p 定義和用法 border style屬性用於設定元素所有邊框的樣式,或者單獨為各邊設定邊框樣式。border style dotted solid double dashed border double的應用 二,border color與color...

深入理解css之absolute

1.絕對定位和float有一樣的特性,都有包裹性,和破壞性。2.absolute和relative 如果不把他們倆放在一起,absolute越獨立越強大。relative和absolute是分離的,對立的,絕不是什麼兄弟關係!獨立的absolute可以擺脫overflow的限制,無論是滾動還是隱藏 ...