詳解JS陣列方法
目錄
- 一、會修改原陣列
- 1.push()：
- 2.pop():
- 3.shift()：
- 4.unshift()：
- 5.splice()：
- 6.sort()：
- 7.reverse()：
- 二、不修改原陣列
- 1.toString()：
- 2.join():
- 3.concat():
- 4.slice() ：
- 5.map()：
- 6.forEach()：
- 7.filter()：
- 8.every():
- 9.some():
- 10.reduce():
- 總結
一、會修改原陣列
1.push()：
（在陣列結尾處）向陣列新增一個新的元素
push() 方法返回新陣列的長度
var fruits = ["Banana","Orange","Apple","Mango"];
fruits.push("Kiwi"); 2.pop():
方法從陣列中刪除最後一個元素
可以接收pop()的返回值，是被彈出的值"Mango"
var fruits = ["Banana","Mango"];
fruits.push("Kiwi");
3.shift()：
刪除首個數組元素
可以接收刪除的值
var fruits = ["Banana","Mango"]; fruits.shift();
4.unshift()：
（在開頭）向陣列新增新元素
返回新陣列的長度。
var fruits = ["Banana","Mango"];
fruits.unshift("Lemon");
5.splice()：
用於向陣列新增新項
第一個引數（2）定義了應新增新元素的位置（拼接）。
第二個引數（0）定義應刪除多少元素。
其餘引數（“Lemon”，“Kiwi”）定義要新增的新元素。
splice() 方法返回一個包含已刪除項的陣列
也可以通過設定引數來刪除陣列中元素
var fruits = ["Banana","Mango"]; fruits.splice(2,"Lemon","Kiwi"); //["Banana","Kiwi","Mango"] var fruits = ["Banana","Mango"]; fruits.splice(0,1); //["Orange","Mango"]
6.sort()：
以字母順序對陣列進行排序
如果是對數字進行排序，則需要注意。 "25" 大於 "100"，因為 "2" 大於 "1"。我們通過一www.cppcns.com個比值函式來修正此問題。
sort()也可以通過修改比較函式來排序物件陣列
var fruits = ["Banana","Mango"];
fruits.sort();
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a - b});//升序
points.sort(function(a,b){return b - a});//降序
points.sort((a,b)=>{return b - a});//箭頭函式
var cars = [
{type:"Volvo",year:2016},{type:"Saab",year:2001},{type:"BMW",year:2010}
]
cars.sort(function(a,b){return a.year - b.year});//比較年份（數字）
cars.sort(function(a,b){//比較型別（字串）
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
7.reverse()：
反轉陣列中的元素
var fruits = ["Banana","Mango"]; fruits.reverse();
二、不修改原陣列
1.toString()：
把陣列轉換為陣列值（逗號分隔）的字串。
var fruits = ["Banana","Mango"] console.log(fruits.toString()) //Banana,Orange,Apple,Mango
2.join():
可將所有陣列元素結合為一個字串。
它的行為類似 toString()，但是還可以規定分隔符
var fruits = ["Banana","Mango"]
console.log(fruits.join(" * "))
//Banana * Orange * Apple * Mango
3.concat():
通過合併（連線）現有陣列來建立一個新陣列。可以連線多個
var myGirls = ["Cecilie","Lone"]; var myBoys = ["Emil","Tobias","Linus"]; var myChildren = myGirls.concat(myBoys); // 連線 myGirls 和 myBoys var arr1 = ["Cecilie","Lone"]; var arr2 = ["Emil","Linus"]; var arr3 = ["Robin","Morgan"]; var myChildren = arr1.concat(arr2,arr3); // 將arr1、arr2 與 arr3 連線在一起
4.slice() ：
方法用陣列的某個片段切出新陣列。
var fruits = ["Banana","Mango"]; var citrus = fruits.slice(1);//從第一個到最後 //["Orange","Mango"]; var citrus = fruits.slice(1,3);//從第一個到第三個（不包括3） //["Orange","Lemon"]
5.map()：
將陣列中的每個元素呼叫一個提供的函式，結果作為一個新的陣列返回，並沒有改變原來的陣列
let arr = [1,2,3,4,5] let newArr = arr.map(x => x*2)//簡寫的箭頭函式 //arr= [1,5] 原陣列保持不變 //newArr = [2,6,8,10] 返回新陣列
6.forEach()：
將陣列中的每個元素執行提供的函式，沒有返回值，注意和map方法區分
let arr = [1,5]
arr.forEach(x => {
console.log(2*x)
//return x*2 返回值沒有用，此函式沒有返回值
})
7.filter()：
此方法是將所有元素進行判斷，將滿足條件的元素作為一個新的陣列返回。函式裡面寫的是條件！！！
let arr = [1,http://www.cppcns.com 3,5] let newArr = arr.filter(value => value >= 3 ) //或者 let newArr = arr.filter(function(value) {return value >= 3} ) console.log(newArr) //[3http://www.cppcns.com,5]
8.every():
此方法是將所有元素進行判斷返回一個布林值，如果所有元素都滿足判斷條件，則返回true，否則為false
let arr = [1,5] const isLessThan4 = value => value < 4 const isLessThan6 => value => value < 6 arr.every(isLessThan4 ) //false arr.every(isLessThan6 ) //true
9.some():
此方法是將所有元素進行判斷返回一個布林值，如果存在元素滿足判斷條件，則返回true，若所有元素都不滿足判斷條件，則返回false
let arr= [1,5] const isLessThan4 = value => value < 4 const isLessThan6 = value => value > 6 arr.some(isLessThan4 ) //true arr.some(isLessThan6 ) //false
10.reduce():
此方法是所有元素呼叫返回函式，返回值為最後結果,傳入的值必須是函式型別
let arr = [1,5] const add = (a,b) => a + b let sum = arr.reduce(add) console.log(sum) //sum = 15 相當於累加的效果 //與之相對應的還有一個 Array.reduceRight() 方法，區別是這個是從右向左操作的
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!