1. 程式人生 > 實用技巧 >JS-陣列常用方法整理

JS-陣列常用方法整理

想了解陣列有哪些原生方法,控制檯輸出,如圖:

length:陣列的例項屬性,返回或設定一個數組中的元素個數。

toString():可以把陣列轉換成字串,並返回結果。

toLocaleString():返回陣列中每個元素的本地化表示形式。

let a = [1234,'hello',21];
a.length; //3
a.toString();  //'1234','hello','21'
a.toLocaleString();  //'1,234','hello','21'

join([seperator]):返回一個字串,由每個元素轉換而成的字串使用指定的seperator拼接而成。

let a = [1234,'hello',21];
a.join('-'); //'1234-hello-21'

concat():拼接兩個或更多的陣列,並返回結果。此方法不會更改現有陣列,而是返回一個新陣列。每個引數可以是一個值,也可以是一個數組,可以接收任意多個引數。可用作拷貝陣列。

let a = [1234,'hello',21];
let b = a.concat(50,60,[1,2,3]); //[1234, "hello", 21, 50, 60, 1, 2, 3]

reverse():顛倒陣列中元素的順序,現有陣列內容會改變。

let a = [1234,'hello',21];
let b 
= a.reverse(); a; //[21, "hello", 1234] b; //[21, "hello", 1234]

sort():講陣列元素按Unicode碼進行重新排序。

let a = [1234,'hello',21,'bar',6,789];
a.sort();
a; //[1234, 21, 6, 789, "bar", "hello"]

slice(start, [end]) : 返回現有陣列的一個子陣列,從下標為start的位置開始取,到下標為end的為止(獲取內容不包括end),若引數為負數,則表示從尾部開始算起,end引數可以省略。可用作拷貝陣列。

let a = [1234,'hello',21,'bar',6,789];
let b 
= a.slice(1,4); //["hello", 21, "bar"] let c = a.slice(2); //[21, "bar", 6, 789] let d = a.slice(-4,-2); //[21, "bar"] a; //[1234, "hello", 21, "bar", 6, 789]

splice(start,count,e1,e2,...en):從陣列中刪除一部分元素,並新增另一部分元素,start為指定新增/刪除的起始位置,可取負值,count為要刪除的個數,0表示不刪除,e1,e2表示在start新新增的項,返回會刪除的專案,現有陣列會改變。

let a = [10,20,30,40,50];
let b = a.splice(2,2,110);
b; //[30,40]
a; //[10,20,110,50,]
let c = a.splice(2,0,[70,80,90]);
c; //[]
a; //[10,20,[70,80,90],110,50]

push():將一個或多個元素新增到陣列的末尾,並返回該陣列的新長度。

unshift():將一個或多個元素新增到陣列的開頭,並返回該陣列的新長度。

pop():從陣列中刪除最後一個元素,並返回該元素的值。此方法更改陣列的長度。

shift():從陣列中刪除第一個元素,並返回該元素的值。此方法更改陣列的長度。

let a = [10,20,30,40,50];
let a1 = a.push(60);
a1; //6
a; //[10,20,30,40,50,60]

let b = [10,20,30,40,50];
let b1 = b.unshift(60);
b1; //6
b; //[60,10,20,30,40,50]

let c = [10,20,30,40,50];
let c1 = c.pop();
c1; //50
c; //[10,20,30,40]

let d = [10,20,30,40,50];
let d1 = d.shift();
d1; //10
d; //[20,30,40,50]

includes():用來判斷一個數組是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。

let array1 = [1, 2, 3];
array1.includes(2); //true

indexOf(value, [fromIndex]):返回在陣列中可以找到一個給定元素的第一個索引,如果不存在,則返回-1。fromIndex為可選,指定從該下標處開始進行查詢。

lastIndexOf(value, [fromIndex]):返回指定元素在陣列中的最後一個的索引,如果不存在則返回 -1。從陣列的後面向前查詢,從fromIndex處開始。

let beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
beasts.indexOf('bison'); //1
beasts.indexOf('bison', 2); //4
beasts.indexOf('giraffe'); //-1

beasts.lastIndexOf('bison'); //4
beasts.lastIndexOf('bison', 2); //1
beasts.lastIndexOf('giraffe'); //-1

find():返回陣列中滿足提供的測試函式的第一個元素的值。否則返回undefined。

findIndex():返回陣列中滿足提供的測試函式的第一個元素的索引。否則返回-1。

let array1 = [5, 12, 8, 130, 44];
let val = array1.find(element => element > 10);
let index = array1.findIndex(element => element > 10);
val; //12
index; //1

forEach():對陣列的每個元素執行一次提供的函式。

filter():建立一個新陣列, 其包含通過所提供函式實現的測試的所有元素。

map():建立一個新陣列,其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果。

reduce(reducer[,initialValue]):對陣列中的每個元素執行一個由您提供的reducer函式(升序執行),將其結果彙總為單個返回值。reducer函式接收4個引數:Accumulator (acc) (累計器)、Current Value (cur) (當前值)、Current Index (idx) (當前索引)、Source Array (src) (源陣列)。initialValue作為第一次呼叫callback函式時的第一個引數的值。如果沒有提供初始值,則將使用陣列中的第一個元素。

accumulator為累加器,currentValue為當前值,index為當前索引,array為源陣列。

every():測試一個數組內的所有元素是否都能通過某個指定函式的測試。它返回一個布林值。

some():測試陣列中是不是至少有1個元素通過了被提供的函式測試。它返回的是一個Boolean型別的值。

let array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element)); //'a'\n 'b'\n 'c' 
array1; //['a', 'b', 'c']

let words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
let result = words.filter(word => word.length > 6);
result; //["exuberant", "destruction", "present"]
words; //["spray", "limit", "elite", "exuberant", "destruction", "present"]

let array2 = [1, 4, 9, 16];
let map1 = array2.map(x => x * 2);
map1; //[2, 8, 18, 32]
array2; //[1, 4, 9, 16]

let array3 = [1, 2, 3, 4];
let reducer = (accumulator, currentValue) => accumulator + currentValue;
array3.reduce(reducer); //10
array3.reduce(reducer, 5); //15
array3; //[1, 2, 3, 4]

let isBelowThreshold = (currentValue) => currentValue < 40;
let array4 = [1, 30, 39, 29, 10, 13];
let array5 = [1, 30, 39, 291, 10, 13];
array4.every(isBelowThreshold); // true
array5.every(isBelowThreshold); // false

let array = [1, 2, 3, 4, 5];
let even = (element) => element % 2 === 0;
array.some(even); // true

flat([depth]):會按照一個可指定的深度遞迴遍歷陣列,並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回。depth指定要提取巢狀陣列的結構深度,預設值為 1。可用作扁平化巢狀陣列。

let arr1 = [1, 2, [3, 4],[5,[6,[7]]]];
let b = arr1.flat(); 
let c = arr1.flat(2); 
let d = arr1.flat(Infinity); 
arr1; // [1, 2, [3, 4],[5,[6,[7]]]]
b; // [1, 2, [3, 4],[5,[6,[7]]]]
c; //[1,2,3,4,5,[6,[7]]]
d; //[1,2,3,4,5,6,7]

Array.from():從一個類似陣列或可迭代物件建立一個新的,淺拷貝的陣列例項。

Array.of():用於將一組值,轉換為陣列。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.isArray():確定傳遞的值是否是一個array。

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar");   // false
Array.isArray(undefined);  // false

先介紹這麼多,有空的時候再補充。