ES6之陣列的擴充套件

es6在陣列方面增加了一些方法和原型屬性，有些還是蠻有用的。

擴充套件運算子：把陣列或者類陣列轉成用逗號隔開的引數：

把類陣列轉成陣列，有限制（類陣列就是有長度的變數）：

var str = 'wade';
console.log([...str]);//["w", "a", "d", "e"]
把陣列轉成用逗號隔開的引數序列：
var arr = [1, 2, 3];
console.log(...arr); //1 2 3
console.log(1, 2, 3); //1 2 3

math.max(...[1, 2, 3])

push函式：

var arr = [1, 2, 3];
arr.push(5, 6, 7);
arr.push(...[5, 6, 7]);

大部分都是陣列的使用，合併陣列、複製陣列、與結構結合、函式傳參等等。

array.from：將類陣列轉換成陣列，無限制

console.log(array.from('wade')); //["w", "a", "d", "e"]
console.log(array.from( )); //["a", "b", "c"]
console.log(array.from([1, 2, 3])); //[1, 2, 3]
console.log(array.from()); //[undefined, undefined, undefined]

array.from還接受第二個函式引數，對每個元素進行處理返回：

console.log(array.from('5678', (x) => )) //[10, 12, 14, 16]

array.from第三個引數是this，用以this的指向。

array.of：將值轉成陣列

這個函式其實就是解決了array的行為差異：

console.log(array (3)) //[ , , ,}
console.log(array.of (3)) //[3]

copywithin方法：改變原陣列，接收三個引數，在當前陣列內部，將指定位置的成員複製到其他位置（陣列函式引數的下標都是包前不包後）

arr.copywithin（target， start， end）
target（必需）：從該位置開始替換資料。如果為負值，表示倒數。
start（可選）：從該位置開始讀取資料，預設為 0。如果為負值，表示倒數。
end（可選）：到該位置前停止讀取資料，預設等於陣列長度。如果為負值，表示倒數。
var arr = [1, 2, 3, 4, 5];
arr.copywithin(0, 3)
console.log(arr);// [4, 5, 3, 4, 5]

find() 和 findindex()：不改變原陣列，接收乙個函式引數和乙個this物件

find返回第乙個符合條件的元素，否則undefined，findindex返回第乙個元素的下標，否則-1

var arr = [1, 0, 9, -5, 12]
var resfind = arr.find((value, index, arr) => , this);
var resfindindex = arr.findindex((value, index, arr) => , this);
console.log(resfind); //12
console.log(resfindindex); //4

fill：填充陣列，改變原陣列，接收三個引數，第乙個是替換元素，第二個是起始位置，第三個是結束位置。

var arr = [1, 0, 9, -5, 12]
arr.fill('a', 1, 3);
console.log(arr); //[1, "a", "a", -5, 12]

entries()，keys() 和 values()：返回遍歷器物件interator，配合for of迴圈，keys是對鍵名的遍歷、values是對鍵值的遍歷、entries是對鍵名和鍵值的遍歷

var arr = [1, 2, 3]
for(var val of arr.keys())//0 1 2
for(var val of arr.values())// 1 2 3
for(var val of arr.entries())//[0, 1] [1, 2] [2, 3]

includes()：返回乙個布林值，表示是否包含某個元素，接收兩個個引數，第乙個是要查詢的元素，第二個是起始位置

var arr = [1, 2, 3, 4, 5]

console.log(arr.includes(4, 2)); //true

flat()，flatmap()：返回新陣列，不改變原陣列。拉平陣列，就是把二維、三維陣列變成一維陣列

flat接收乙個引數，拉平幾維陣列，會跳過空位：

console.log([1, 2, [3, [4, 5]]].flat())// [1, 2, 3, [4, 5]]
console.log([1, 2, [3, [4, 5]]].flat(2));// [1, 2, 3, 4, 5]
flatmap跟map函式一樣，需要return
console.log([1, 2, 3].flatmap((val, index, arr) => ));// [2, 4, 6]

陣列空位：陣列的空位指，陣列的某乙個位置沒有任何值，比如[,]空位不是undefined，乙個位置的值等於undefined，依然是有值的。空位是沒有任何值。

es5 對空位的處理很不一致，大多數情況下會忽略空位。es6則不跳過空位，轉為undefined

console.log(array.from([1, , 2]));//[1, undefined, 2]

foreach(),filter(),reduce(),every()和some()都會跳過空位。

map()會跳過空位，但會保留這個值

join()和tostring()會將空位視為undefined，而undefined和null會被處理成空字串。

array.from()、擴充套件運算子…、entries()、keys()、values()、find()和findindex()會將空位處理成undefined。

for of也會迴圈遍歷空位，copywithin()會連空位一起拷貝，fill也會把空位視為正常位置

陣列的組合使用其實很好用，只是平時很少去考慮使用這些提供的方法，要是能把陣列的使用都記清楚，對平時開發有很大的便利。

coding 個人筆記

Es6陣列擴充套件

示例 es5和es6的擴充套件運算子區別 let arr 1,2,3 function add a,b,c es5 es6 add arr 6 複製陣列 let arr 1,2,3 es5 let arr3 arr.concat 4 es6 let arr3 arr,4 console.log ar...

ES6陣列擴充套件

陣列建構函式的靜態方法。靜態方法把函式當物件處理 key對應的value是函式我們就說這個方法是靜態方法否則就是靜態屬性 array.f 1 console.log array.f 靜態屬性 array.fn function array.fn 靜態方法array.from方法用於將兩類物件轉...

ES6學習之陣列擴充套件

擴充套件運算子將陣列分割為用逗號分割的引數序列 console.log 1,2,3 1 2 3 function test x,y,z var arg 1,2,3 null,arg 1 2 3 test arg 1 2 3 擴充套件運算子的應用 const a 1,2 複製陣列a const b ...

ES6之陣列的擴充套件

Es6陣列擴充套件

ES6陣列擴充套件

ES6學習之陣列擴充套件

相關推薦