ES6相關擴充套件 一

2021-09-10 12:30:28 字數 2867 閱讀 2323

字串的擴充套件

數值的擴充套件

函式的擴充套件

陣列的擴充套件

擴充套件運算子 …[2, 3, 4]

array.from()

array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件(array-like object)和可遍歷(iterable)的物件(包括 es6 新增的資料結構 set 和 map)。

let arraylike = ;

// es5的寫法

var arr1 = .slice.call(arraylike); // ['a', 'b', 'c']

// es6的寫法

let arr2 = array.from(arraylike); // ['a', 'b', 'c']

array.of() array.of方法用於將一組值,轉換為陣列。

array.of(3, 11, 8) // [3,11,8]

array.of(3) // [3]

array.of(3).length // 1

陣列例項的 copywithin()

陣列例項的copywithin方法,在當前陣列內部,將指定位置的成員複製到其他位置(會覆蓋原有成員)

-target(必需):從該位置開始替換資料。如果為負值,表示倒數。

-start(可選):從該位置開始讀取資料,預設為 0。如果為負值,表示倒數。

-end(可選):到該位置前停止讀取資料,預設等於陣列長度。如果為負值,表示倒數。

[1, 2, 3, 4, 5].copywithin(0, 3) // [4, 5, 3, 4, 5]

陣列例項的 find() 和 findindex()

陣列例項的find方法,用於找出第乙個符合條件的陣列成員

[1, 4, -5, 10].find((n) => n < 0) // -5
陣列例項的findindex方法的用法與find方法非常類似,返回第乙個符合條件的陣列成員的位置,如果所有成員都不符合條件,則返回-1。

[1, 5, 10, 15].findindex(function(value, index, arr) ) // 2

陣列例項的 fill() fill方法使用給定值,填充乙個陣列。

['a', 'b', 'c'].fill(7)

// [7, 7, 7]

new array(3).fill(7)

// [7, 7, 7]

陣列例項的 entries(),keys() 和 values()

es6 提供三個新的方法——entries(),keys()和values()——用於遍歷陣列。它們都返回乙個遍歷器物件(詳見《iterator》一章),可以用for…of迴圈進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) 

// 0

// 1

for (let elem of ['a', 'b'].values())

// 'a'

// 'b'

for (let [index, elem] of ['a', 'b'].entries())

// 0 "a"

// 1 "b"

陣列例項的 includes() 表示某個陣列是否包含給定的值

[1, 2, 3].includes(2)     // true

[1, 2, 3].includes(4) // false

[1, 2, nan].includes(nan) // true

陣列例項的 flat(),flatmap()

flat()用於將巢狀的陣列「拉平」,變成一維的陣列。該方法返回乙個新陣列,對原資料沒有影響。

[1, 2, [3, 4]].flat() // [1, 2, 3, 4]

[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5], 引數2代表拉平兩層

flatmap()方法對原陣列的每個成員執行乙個函式(相當於執行array.prototype.map()),然後對返回值組成的陣列執行flat()方法。該方法返回乙個新陣列,不改變原陣列, 預設只能展開一層。

函式原型:

arr.flatmap(function callback(currentvalue[, index[, array]]) [, thisarg])

方法的引數是乙個遍歷函式,該函式可以接受三個引數,分別是當前陣列成員、當前陣列成員的位置(從零開始)、原陣列。

第二個引數,用來繫結遍歷函式裡面的this

陣列的空位

es6 明確將空位轉為undefined。

array.from(['a',,'b']) // [ "a", undefined, "b" ]

// 由於空位的處理規則非常不統一,所以建議避免出現空位。

ES6相關擴充套件 四

proxy proxy.revocable 返回乙個可取消的 proxy 例項 let target let handler let proxy.revocable target,handler proxy.foo 123 proxy.foo 123 revoke proxy.foo typeerr...

ES6相關知識點

一 箭頭函式和普通函式的區別 普通函式中的this 1.this總是代表它的直接呼叫者,例如 obj.func 那麼func中的this就是obj 2.在預設情況 非嚴格模式下,未使用 use strict 沒找到直接呼叫者,則this指的是 window 3.在嚴格模式下,沒有直接呼叫者的函式中的...

ES6相關特性 解構賦值

解構賦值 本質上是一種匹配模式,等號兩邊的模式相同,則左邊的變數可以被賦予對應的值。注意 null undefined 不能解構賦值!陣列的解構賦值 let a,b c 1,2 3 a 1,b 2,c 3 let c 1,2,4 c 4 let x let x x undefined 可以指定預設值...