JavaScript數組方法

數組的屬性
length屬性
數組的項數保存在其length屬性中,這個屬性始終會返回0或更大的值。數組的length屬性很有特點——它不是隻讀的。因此,通過設置這個屬性,可以從數組的末尾移除項或向數組中添加新項。
例子:
//刪除數組裏的值
const arr1 = [1, 2, 3];
console.log(arr1[2]); //輸出:3
arr1.length = 2;
console.log(arr1[2]); //輸出:undefined

//在數組末尾添加新值
const arr2 = [1, 2, 3];
console.log(arr2[3]); //輸出:undefined
arr2[arr2.length] = 4;
console.log(arr2[3]); //輸出:4
檢測數組的方法
instanceof 操作符
例子:
console.log([] instanceof Array);
//輸出:true
Object.prototype.toString.call()方法
例子:
console.log(Object.prototype.toString.call([]));
//輸出:[object Array]
Array.isArray()方法
例子:
console.log(Array.isArray([]));
//輸出:true
數組轉爲字符串的方法
toString() 方法
返回由數組中每個項拼接而成的一個以逗號分隔的字符串。
例子:
console.log([1, 2, 3].toString());
//輸出:1,2,3
join() 方法
join()方法接收一個參數用作分隔符,然後返回由這個分隔符構建的字符串。如果不給join()方法傳入任何值,或者給它傳入undefined,則默認使用逗號作爲分隔符。
例子:
console.log([1, 2, 3].join()); //輸出:1,2,3
console.log([1, 2, 3].join("&")); //輸出:1&2&3
添加和刪除項的方法
push() 方法
push()方法可以接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度。
例子:
const arr = [1];
const len = arr.push(2, 3);
console.log(arr); //輸出:[1, 2, 3]
console.log(len); //輸出:3
pop() 方法
pop()方法從數組末尾移除最後一項,減少數組的length值,然後返回移除的項。
例子:
const arr = [1, 2, 3];
const item = arr.pop();
console.log(arr); //輸出:[1, 2]
console.log(item); //輸出:3
unshift() 方法
unshift() 方法能在數組前端添加任意個項並返回新數組的長度。
例子:
const arr = [3];
const len = arr.unshift(1, 2);
console.log(arr); //輸出:[1, 2, 3]
console.log(len); //輸出:3
shift() 方法
shift() 方法能夠移除數組中的第一個項並返回該項,同時將數組長度減1。
例子:
const arr = [1, 2, 3];
const item = arr.shift();
console.log(arr); //輸出:[2, 3]
console.log(item); //輸出:1
splice() 方法
splice() 方法接收的第一個參數,表示想要刪除或插入的元素的索引值。第二個參數是刪除元素的個數(如果不是刪除元素,可以傳入0)。第三個參數往後,就是要添加到數組裏的值。
例子:
刪除
const arr = [1, 2, 3];
const new_arr = arr.splice(0, 2);
console.log(arr); //輸出:[3]
console.log(new_arr); //輸出:[1, 2]
插入
const arr = [1, 2, 3];
const new_arr = arr.splice(2, 0, 9);
console.log(arr); //輸出:[1, 2, 9, 3]
console.log(new_arr); //輸出:[]
替換
const arr = [1, 2, 3];
const new_arr = arr.splice(2, 1, 9);
console.log(arr); //輸出:[1, 2, 9]
console.log(new_arr); //輸出:[3]
數組項排序的方法
reverse()方法
reverse()方法會反轉數組項的順序。
例子:
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); //輸出:[3, 2, 1]
sort()方法
sort()方法可以接收一個函數作爲參數:如果函數返回一個小於零或等於零的值則不交換前後項的位置;如果返回一個大於零的值則交換前後項的位置。
例子:
const arr = [2, 33, 10, 9];
arr.sort((x, y) => x - y);
console.log(arr); //輸出:[2, 9, 10, 33]
arr.sort((x, y) => y - x);
console.log(arr); //輸出:[33, 10, 9, 2]
copyWithin() 方法
copyWithin() 方法在當前數組內部,將指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前數組。它接受三個參數:第一個參數表示從該位置開始替換數據;第二個和第三個參數表示獲得數據的起始和結束位置(不包括結束位置的項)。三個參數都可以爲負數。
例子:
const arr1 = [1, 2, 3],
arr2 = [1, 2, 3];

arr1.copyWithin(0, 1);
console.log(arr1); //輸出:[2, 3, 3]

arr2.copyWithin(0, 1, 2);
console.log(arr2); //輸出:[2, 2, 3]
複製數組的方法
concat()方法
concat()方法會複製當前數組並將接收到的參數添加到這個副本的末尾,最後返回新構建的數組。
例子:
沒有參數
const arr = [1, 2, 3];
const new_arr = arr.concat();
console.log(arr); //輸出:[1,2,3]
console.log(new_arr); //輸出:[1,2,3]
參數是原始值
const arr = [1, 2, 3];
const new_arr = arr.concat(4, 5);
console.log(arr); //輸出:[1,2,3]
console.log(new_arr); //輸出:[1,2,3,4,5]
參數是一個或多個數組
const arr = [1, 2, 3];
const new_arr = arr.concat([4], [5]);
console.log(arr); //輸出:[1,2,3]
console.log(new_arr); //輸出:[1,2,3,4,5]
slice()方法
slice()方法複製返回項創建一個新數組。如果只有一個參數,slice()方法返回從該索引位置開始到當前數組末尾的所有項。如果有兩個參數,該方法返回起始和結束位置之間的項——但不包括結束位置的項。
例子:
const arr = [1, 2, 3];
const new_arr_1 = arr.slice(0);
const new_arr_2 = arr.slice(0, 2);
console.log(new_arr_1); //輸出:[1,2,3]
console.log(new_arr_2); //輸出:[1,2]
如果slice()方法的參數中有一個負數,則用數組長度加上該數來確定相應的位置。
查找值的位置的方法
indexOf()和lastIndexOf()方法
這兩個方法都接收兩個參數:要查找的值和表示查找起點位置的索引。其中,indexOf()方法從數組的開頭(位置0)開始向後查找,lastIndexOf()方法則從數組的末尾開始向前查找。這兩個方法都返回要查找的值在數組中的位置,或者在沒找到的情況下返回-1。
例子:
console.log([1, 2, 3].indexOf(2)); //輸出:1
console.log([1, 2, 3].indexOf(0)); //輸出:-1
includes() 方法
includes() 方法返回一個布爾值,表示某個數組是否包含給定的值。這個方法接收兩個參數:要查找的值和表示查找起點位置的索引。如果第二個參數爲負數,則表示倒數的位置。
例子:
console.log([1, 2, 3].includes(2)); //輸出:true
console.log([1, 2, 3].includes(1, 1)); //輸出:false
find() 和 findIndex() 方法
find() 方法接受一個回調函數作爲參數,所有數組成員依次執行該回調函數,直到找出第一個返回值爲true的成員,然後返回該成員。如果沒有符合條件的成員,則返回undefined。
例子:
console.log([1, 2, 3].find((v, i, a) => v > 1)); //輸出:2
console.log([1, 2, 3].find((v, i, a) => v > 3)); //輸出:undefined
findIndex() 方法的用法與find() 方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1。
例子:
console.log([1, 2, 3].findIndex((v, i, a) => v > 1)); //輸出:1
console.log([1, 2, 3].findIndex((v, i, a) => v > 3)); //輸出:-1
find() 和 findIndex() 方法的回調函數可以接受三個參數,依次爲當前的值、當前的位置和原數組。
遍歷數組的方法
entries(),keys() 和 values() 方法
keys()是對索引值的遍歷、values()是對值的遍歷,entries()是對鍵值對的遍歷。這三個方法一般配合for…of循環使用。
例子:
for (let i of[1, 2, 3].keys()) {
console.log(i);
}
//輸出:0 1 2
for (let v of[1, 2, 3].values()) {
console.log(v);
}
//輸出:1 2 3
for (let [i, v] of[1, 2, 3].entries()) {
console.log(i + ":" + v);
}
//輸出:0:1 1:2 2:3
every()方法
every() 方法對數組中的每一項運行給定函數,如果該函數對每一項都返回true,則返回true。
例子:
console.log([1, 2, 3].every((v, i, a) => v < 4));
//輸出:true
some()方法
some() 方法對數組中的每一項運行給定函數,如果該函數任一項返回true,則返回true。
例子:
console.log([1, 2, 3].some((v, i, a) => v > 2));
//輸出:true
filter() 方法
filter() 方法對數組中的每一項運行給定函數,返回該函數會返回true的項組成的數組。
例子:
const arr = [1, 2, 3, "A"];
const new_arr = arr.filter((v, i, a) => typeof(v) === "number");
console.log(arr); //輸出:[1, 2, 3, "A"]
console.log(new_arr); //輸出:[1, 2, 3]
map() 方法
map() 方法對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。
例子:
const arr = [1, 2, 3];
const new_arr = arr.map((v, i, a) => v - 1);
console.log(arr); //輸出:[1, 2, 3]
console.log(new_arr); //輸出:[0, 1, 2]
forEach() 方法
forEach() 方法對數組中的每一項運行給定函數。這個方法沒有返回值。可以替代for循環使用。
例子:
(function() {
[...arguments].forEach((v, i, a) => {
console.log(i);
});
})(1, 2, 3);
//輸出:0 1 2
every() 、 some()、filter()、map()和forEach()方法的回調函數可以接受三個參數,依次爲當前的值、當前的位置和原數組。
reduce()和reduceRight()方法
這兩個方法都會遍歷數組的所有項,然後累加一個最終返回的值。其中,reduce()方法從數組的第一項開始,逐個遍歷到最後。而reduceRight()則從數組的最後一項開始,向前遍歷到第一項。
例子:
console.log(["S", "O", "S"].reduce((p, c, i, a) => p + c));
//輸出:SOS
reduce()和reduceRight()方法的回調函數接收4個參數:前一個值、當前值、項的索引和數組對象。
多維數組變一維數組的方法
flat() 方法
flat() 方法接受一個數值參數,表示要“拉平”的嵌套數組的層數,默認爲1。如果不管有多少層嵌套,都要轉成一維數組,可以用Infinity關鍵字作爲參數。flat() 方法會返回一個新數組,不改變原數組。
例子:
const arr = [1, [2], 3];
const new_arr = arr.flat();
console.log(arr); //輸出:[1, [2], 3]
console.log(new_arr); //輸出:[1, 2, 3]
flatMap() 方法
flatMap() 方法相當於先執行map()方法,然後對返回值組成的數組執行flat()方法。該方法返回一個新數組,不改變原數組。
例子:
const arr = [1, 2, 3];
const new_arr = arr.flatMap((v, i, a) => [v * 2]);
console.log(arr); //輸出:[1, 2, 3]
console.log(new_arr); //輸出:[2, 4, 6]
填充數組的方法
fill() 方法
fill() 方法使用給定值,填充一個數組。該方法接受三個參數,第一個參數表示將要填充數組的值,第二個和第三個參數,用於指定填充的起始位置和結束位置。該方法屬於淺拷貝,會直接修改原數組的內容。
例子:
const arr = Array(3).fill(0);
const new_arr = arr.fill(1, 1, 2);
console.log(arr); //輸出:[0, 1, 0]
console.log(new_arr); //輸出:[0, 1, 0]

原文鏈接:https://www.imooc.com/article/266117

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章