詳解JS數組方法
更新時間：2021年11月19日 16:43:26 作者：維生素D沒有用
這篇文章主要為大家介紹了JS的數組方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
一、會修改原數組
1.push()：
（在數組結尾處）向數組添加一個新的元素
push() 方法返回新數組的長度
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
2.pop():
方法從數組中刪除最后一個元素
可以接收pop()的返回值，是被彈出的值"Mango"
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
3.shift()：
刪除首個數組元素
可以接收刪除的值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift();
4.unshift()：
（在開頭）向數組添加新元素
返回新數組的長度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
5.splice()：
用于向數組添加新項
第一個參數（2）定義了應添加新元素的位置（拼接）。
第二個參數（0）定義應刪除多少元素。
其余參數（“Lemon”，“Kiwi”）定義要添加的新元素。
splice() 方法返回一個包含已刪除項的數組
也可以通過設置參數來刪除數組中元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); //["Banana","Orange","Lemon","Kiwi","Apple","Mango"] var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1); //["Orange", "Apple", "Mango"]
6.sort()：
以字母順序對數組進行排序
如果是對數字進行排序，則需要注意。 "25" 大于 "100"，因為 "2" 大于 "1"。我們通過一個比值函數來修正此問題。
sort()也可以通過修改比較函數來排序對象數組
var fruits = ["Banana", "Orange", "Apple", "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", "Orange", "Apple", "Mango"]; fruits.reverse();
二、不修改原數組
1.toString()：
把數組轉換為數組值（逗號分隔）的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"] console.log(fruits.toString()) //Banana,Orange,Apple,Mango
2.join():
可將所有數組元素結合為一個字符串。
它的行為類似 toString()，但是還可以規(guī)定分隔符
var fruits = ["Banana", "Orange", "Apple", "Mango"]
console.log(fruits.join(" * "))
//Banana * Orange * Apple * Mango
3.concat():
通過合并（連接）現有數組來創(chuàng)建一個新數組。可以連接多個
var myGirls = ["Cecilie", "Lone"]; var myBoys = ["Emil", "Tobias", "Linus"]; var myChildren = myGirls.concat(myBoys); // 連接 myGirls 和 myBoys var arr1 = ["Cecilie", "Lone"]; var arr2 = ["Emil", "Tobias", "Linus"]; var arr3 = ["Robin", "Morgan"]; var myChildren = arr1.concat(arr2, arr3); // 將arr1、arr2 與 arr3 連接在一起
4.slice() ：
方法用數組的某個片段切出新數組。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1);//從第一個到最后 //["Orange", "Lemon", "Apple", "Mango"] var fruits = ["Banana", "Orange", "Lemon", "Apple", "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, 2, 3, 4, 5] 原數組保持不變 //newArr = [2, 4, 6, 8, 10] 返回新數組
6.forEach()：
將數組中的每個元素執(zhí)行提供的函數，沒有返回值，注意和map方法區(qū)分
let arr = [1, 2, 3, 4, 5]
arr.forEach(x => {
console.log(2*x)
//return x*2 返回值沒有用，此函數沒有返回值
})
7.filter()：
此方法是將所有元素進行判斷，將滿足條件的元素作為一個新的數組返回。函數里面寫的是條件！?。?/p>
let arr = [1, 2, 3, 4, 5]
let newArr = arr.filter(value => value >= 3 )
//或者
let newArr = arr.filter(function(value) {return value >= 3} )
console.log(newArr)
//[3,4,5]
8.every():
此方法是將所有元素進行判斷返回一個布爾值，如果所有元素都滿足判斷條件，則返回true，否則為false
let arr = [1, 2, 3, 4, 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, 2, 3, 4, 5] const isLessThan4 = value => value < 4 const isLessThan6 = value => value > 6 arr.some(isLessThan4 ) //true arr.some(isLessThan6 ) //false
10.reduce():
此方法是所有元素調用返回函數，返回值為最后結果,傳入的值必須是函數類型
let arr = [1, 2, 3, 4, 5] const add = (a, b) => a + b let sum = arr.reduce(add) console.log(sum) //sum = 15 相當于累加的效果 //與之相對應的還有一個 Array.reduceRight() 方法，區(qū)別是這個是從右向左操作的
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務器的功能
這篇文章主要介紹了vue使用vue-quill-editor富文本編輯器且將圖片上傳到服務器的功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了JavaScript迭代器的含義及用法,迭代器就是為實現對不同集合進行統一遍歷操作的一種機制，只要給需要遍歷的數據結構部署Iterator接口，通過調用該接口，或者使用消耗該接口的API實現遍歷操作。,需要的朋友可以參考下2019-06-06
在JavaScript中,幾乎每一個值都是某種特定類型的對象,于是ES6也著重提升了對象的功能性,下面這篇文章主要給大家介紹了關于es6新增對象實用方法的相關資料,需要的朋友可以參考下2022-05-05
下面小編就為大家?guī)硪黄猨s 判斷各種數據類型的簡單方法(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript學習筆記之取值函數getter與取值函數setter詳解
這篇文章主要介紹了JavaScript取值函數getter與取值函數setter，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了JS保留兩位小數 四舍五入函數的小例子，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JS棧stack類的實現與使用方法,結合實例形式分析了棧的原理,以及javascript定義與使用棧的基本操作技巧,需要的朋友可以參考下2019-01-01
Array?對象是前端開發(fā)中使用頻率最高的數據結構之一,今天我們來復習一下它的幾種操作方法,find(),some()和filter(),通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
javaScript事件學習小結（四）event的公共成員（屬性和方法）
這篇文章主要介紹了javaScript事件學習小結（四）event的公共成員（屬性和方法）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了微信小程序實現指定顯示行數多余文字去掉用省略號代替的方法,需要的朋友可以參考下2018-07-07