JS數(shù)組Array常用方法匯總+實例
一、JavaScript中創(chuàng)建數(shù)組的方式
（1）使用 Array 構(gòu)造函數(shù)：
var arr1 = new Array(); //創(chuàng)建一個空數(shù)組
var arr2 = new Array(15); // 創(chuàng)建一個長度為15的數(shù)組
var a = new Array([15]); //指創(chuàng)建一個數(shù)組，長度為1，并且第一位是15
var arr3 = new Array("sf","zs","zsf"); // 創(chuàng)建一個包含3個字符串的數(shù)組
（2）使用數(shù)組字面量表示法：
var arr4 = []; //創(chuàng)建一個空數(shù)組 var arr5 = [15]; // 創(chuàng)建一個數(shù)組，長度為1，包含‘15'數(shù)字 var arr6 = ["sf","zs","zsf"]; // 創(chuàng)建一個包含3個字符串的數(shù)組
二、數(shù)組方法概括
數(shù)組的方法我們一般以是否會改變原數(shù)組進行區(qū)分
使用以下方法會改變原數(shù)據(jù)
| 方法名 | 功能 | 原數(shù)組是否改變 |
|---|---|---|
| pop() | 刪除最后一位，并返回刪除的數(shù)據(jù) | y |
| shift() | 刪除第一位，并返回刪除的數(shù)據(jù) | y |
| push | 在最后新增一個或多個數(shù)據(jù)，返回長度 | y |
| unshift() | 在第一位新增一或多個數(shù)據(jù)，返回長度 | y |
| sort() | 排序（字符規(guī)則），返回結(jié)果 | y |
| reverse() | 反轉(zhuǎn)數(shù)組，返回結(jié)果 | y |
| splice() | 刪除指定位置，并替換，返回刪除的數(shù)據(jù) | y |
使用以下方法不會改變原數(shù)據(jù)
| 方法名 | 功能 | 原數(shù)組是否改變 |
|---|---|---|
| join() | 使用分隔符，將數(shù)組轉(zhuǎn)為字符串并返回 | n |
| concat() | 合并數(shù)組，并返回合并之后的數(shù)據(jù) | n |
| slice() | 截取指定位置的數(shù)組，并返回 | n |
| toString() | 直接轉(zhuǎn)為字符串，并返回 | n |
| valueOf() | 返回數(shù)組對象的原始值 | n |
| indexOf() | 查詢并返回數(shù)據(jù)的索引 | n |
| lastIndexOf() | 反向查詢并返回數(shù)據(jù)的索引 | n |
| forEach() | 參數(shù)為回調(diào)函數(shù)，會遍歷數(shù)組所有的項，回調(diào)函數(shù)接受三個參數(shù)，分別為value，index，self；forEach沒有返回值 | n |
| map() | 同forEach，同時回調(diào)函數(shù)返回數(shù)據(jù)，組成新數(shù)組由map返回 | n |
| filter() | 同forEach，同時回調(diào)函數(shù)返回布爾值，為true的數(shù)據(jù)組成新數(shù)組由filter返回 | n |
| every() | 同forEach，同時回調(diào)函數(shù)返回布爾值，全部為true，由every返回true | n |
| some() | 同forEach，同時回調(diào)函數(shù)返回布爾值，只要由一個為true，由some返回true | n |
| reduce() | 歸并，同forEach，迭代數(shù)組的所有項，并構(gòu)建一個最終值，由reduce返回 | n |
| reduceRight() | 反向歸并，同forEach，迭代數(shù)組的所有項，并構(gòu)建一個最終值，由reduceRight返回 | n |
| findIndex() | 找到數(shù)組中第一個符合條件的元素的下標并不再遍歷 | n |
三、方法詳解
1、pop()
pop()：數(shù)組末尾移除最后一項，減少數(shù)組的 length 值，然后返回移除的項
ar arr = [1,2,3]; console.log(arr.pop()); //3 console.log(arr); //[1,2]---原數(shù)組改變
2、shift()
功能：方法用于刪除并返回數(shù)組的第一個元素。
var arr = [1,2,3] console.log(arr.shift()); //1 console.log(arr); //[2,3]---原數(shù)組改變
3、push()
功能：向數(shù)組的末尾添加一個或更多元素，并返回新的長度。
var arr = [1,2,3];
console.log(arr.push("hello")); //4
console.log(arr); //[1,2,3,"hello"]---原數(shù)組改變
console.log(arr.push("a","b")); //6
console.log(arr); //[1,2,3,"hello","a","b"]---原數(shù)組改變
4、unshift()
功能：向數(shù)組的開頭添加一個或更多元素，并返回新的長度。
var arr = [1,2,3];
console.log(arr.unshift("hello")); //4
console.log(arr); //["hello",1,2,3]---原數(shù)組改變
console.log(arr.unshift("a","b")); //6
console.log(arr); //["a","b","hello",1,2,3]---原數(shù)組改變
5、sort()
功能：對數(shù)組中的元素進行排序，默認是升序。
var arr = [6,1,5,2,3]; console.log(arr.sort()); //[1, 2, 3, 5, 6] console.log(arr); //[1, 2, 3, 5, 6]---原數(shù)組改變
注意：sort默認把所有元素先轉(zhuǎn)換為String再排序，而字符串根據(jù)ASCII碼進行排序
// 案例一：看上去正常的結(jié)果 ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft']; // 案例二：apple排在了最后 ['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple'] // 案例三：無法理解的結(jié)果 [10, 20, 1, 2].sort(); // [1, 10, 2, 20]
我們可以看到案例二和案例三，就會發(fā)現(xiàn)直接使用sort()沒有辦法排序復雜的數(shù)組
因此我們可以如下使用它
var arr = [10, 20, 1, 2];
arr.sort((x, y)=> {
if (x < y) {
return -1;
}
if (x > y) {
return 1;
}
return 0;
});
console.log(arr); // [1, 2, 10, 20]
6、reverse()
功能: 反轉(zhuǎn)數(shù)組項的順序。
var arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //[3, 51, 24, 13](原數(shù)組改變)
7、splice()
功能：很強大的數(shù)組方法，它有很多種用法，可以實現(xiàn)刪除、插入和替換。
array.splice(index, howmany, item1, ....., itemX)
- index:必需。整數(shù)，指定在什么位置添加/刪除項目，使用負值指定從數(shù)組末尾開始的位置
- howmany:可選。要刪除的項目數(shù)。如果設(shè)置為 0，則不會刪除任何項目。
- item1, …, itemX:可選。要添加到數(shù)組中的新項目。
splice()方法始終都會返回一個數(shù)組，該數(shù)組中包含從原始數(shù)組中刪除的項，如果沒有刪除任何項，則返回一個空數(shù)組。
var arr = [1,3,5,7,9,11]; var arrRemoved = arr.splice(0,2); console.log(arr); //[5, 7, 9, 11] console.log(arrRemoved); //[1, 3] var arrRemoved2 = arr.splice(2,0,4,6); console.log(arr); // [5, 7, 4, 6, 9, 11] console.log(arrRemoved2); // [] var arrRemoved3 = arr.splice(1,1,2,4); console.log(arr); // [5, 2, 4, 4, 6, 9, 11] console.log(arrRemoved3); //[7]
1、join()
功能：根據(jù)指定分隔符將數(shù)組中的所有元素放入一個字符串，并返回這個字符串。
參數(shù)：join(str);參數(shù)可選，默認為","號，以傳入的字符作為分隔符。
var arr = [1,2,3];
console.log(arr.join()); //1,2,3
console.log(arr.join("-")); //1-2-3
通過join()方法可以實現(xiàn)重復字符串，只需傳入字符串以及重復的次數(shù)，就能返回重復后的字符串，函數(shù)如下：
function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi
2、concat()
功能: 將參數(shù)添加到原數(shù)組中。這個方法會先創(chuàng)建當前數(shù)組一個副本，然后將接收到的參數(shù)添加到這個副本的末尾，最后返回新構(gòu)建的數(shù)組。在沒有給 concat()方法傳遞參數(shù)的情況下，它只是復制當前數(shù)組并返回副本。
const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = arr1.concat(arr2); console.log(arr3); //[1,2,3,4,5,6]
3、slice()
功能: 返回從原數(shù)組中指定開始下標到結(jié)束下標之間的項組成的新數(shù)組。
array.slice(start, end)
slice()方法可以接受一或兩個參數(shù)，即要返回項的起始(start)和結(jié)束位置(end)。
- 在只有一個參數(shù)的情況下， slice()方法返回從該參數(shù)指定位置開始到當前數(shù)組末尾的所有項。
- 如果有兩個參數(shù)，該方法返回起始和結(jié)束位置之間的項——但不包括結(jié)束位置的項。
- 如果start > end 的索引的話，則返回空數(shù)組
var arr = [1,3,5,7,9,11]; var arrCopy1 = arr.slice(1); var arrCopy2 = arr.slice(1,4); var arrCopy3 = arr.slice(1,-2); var arrCopy4 = arr.slice(-4,-1); console.log(arr); //[1, 3, 5, 7, 9, 11](原數(shù)組沒變) console.log(arrCopy1); //[3, 5, 7, 9, 11] console.log(arrCopy2); //[3, 5, 7] console.log(arrCopy3); //[3, 5, 7] console.log(arrCopy4); //[5, 7, 9]
4、toString()
功能：轉(zhuǎn)換成字符串，類似于沒有參數(shù)的join()。該方法會在數(shù)據(jù)發(fā)生隱式類型轉(zhuǎn)換時被自動調(diào)用，如果手動調(diào)用，就是直接轉(zhuǎn)為字符串。
var arr = [1,2,3]; console.log(arr.toString()); //1,2,3 console.log(arr); //[1,2,3]---原數(shù)組未改變
5、valueOf()
功能：返回數(shù)組的原始值（一般情況下其實就是數(shù)組自身），一般由js在后臺調(diào)用，并不顯式的出現(xiàn)在代碼中
var arr = [1,2,3]; console.log(arr.valueOf()); //[1,2,3] console.log(arr); //[1,2,3] //為了證明返回的是數(shù)組自身 console.log(arr.valueOf() == arr); //true
6、indexOf()
功能：根據(jù)指定的數(shù)據(jù)，從左向右，查詢在數(shù)組中出現(xiàn)的位置，如果不存在指定的數(shù)據(jù)，返回-1。該方法是查詢方法，不會對數(shù)組產(chǎn)生改變。
indexOf(value, start);
- value：要查詢的數(shù)據(jù)；
- start：可選，表示開始查詢的位置，當start為負數(shù)時，從數(shù)組的尾部向前數(shù)；如果查詢不到value的存在，則方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.indexOf("l")); //2
console.log(arr.indexOf("l",3)); //3
console.log(arr.indexOf("l",4)); //-1
console.log(arr.indexOf("l",-1)); //-1
console.log(arr.indexOf("l",-3)); //2
7、lastIndexOf()
功能：根據(jù)指定的數(shù)據(jù)，從右向左，查詢在數(shù)組中出現(xiàn)的位置，如果不存在指定的數(shù)據(jù)，返回-1。該方法是查詢方法，不會對數(shù)組產(chǎn)生改變。
lastIndexOf(value, start);
- value：要查詢的數(shù)據(jù)；
- start：可選，表示開始查詢的位置，當start為負數(shù)時，從數(shù)組的尾部向前數(shù)；如果查詢不到value的存在，則方法返回-1
var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l")); //3
console.log(arr.lastIndexOf("l",3)); //3
console.log(arr.lastIndexOf("l",1)); //-1
console.log(arr.lastIndexOf("l",-3)); //2
console.log(arr.lastIndexOf("l",-4)); //-1
8、forEach()
功能：對數(shù)組進行遍歷循環(huán)，對數(shù)組中的每一項運行給定函數(shù)。這個方法沒有返回值。
參數(shù): 都是function類型，默認有傳參，參數(shù)分別為：遍歷的數(shù)組內(nèi)容；第對應的數(shù)組索引，數(shù)組本身。
var arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, a)=>{
console.log(item + '|' + index + '|' + (a === arr));
});
// 輸出為：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
9、map()
功能：對數(shù)組中的每一項運行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
如果你想要數(shù)組里的每一個值都發(fā)生變化就使用map
let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.map(item => {
return item * 2
})
console.log(newArr); //[20, 60, 100, 120, 240, 460, 680, 900]
console.log(arr); //[10, 30, 50, 60, 120, 230, 340, 450]
10、filter()
功能: 過濾，數(shù)組中的每一項運行給定函數(shù)，返回滿足過濾條件組成的數(shù)組。
//過濾出索引為3的倍數(shù) 或者 值大于8的元素
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter((item, index) => {
return index % 3 === 0 || item >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
11、every()
功能：判斷數(shù)組中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every((x)=> {
return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every((x) => {
return x < 3;
});
console.log(arr3); // false
12、some()
功能: 判斷數(shù)組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some((x)=> {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some((x)=> {
return x < 1;
});
console.log(arr3); // false
13、reduce()
功能：從數(shù)組的第一項開始，逐個遍歷到最后，迭代數(shù)組的所有項，然后構(gòu)建一個最終返回的值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
參數(shù)：
- total是當前聚合值即合并的值，他可以是任何類型
- currentValue是數(shù)組循環(huán)時的當前元素
- currentIndex 是數(shù)組元素的索引值
- arr是數(shù)組本身
- initialValue傳遞給函數(shù)的初始值
一般常用的是前面的兩個參數(shù),后面兩個參數(shù)不常用,常用的使用場景便是數(shù)組的求和
// 作用:對數(shù)組中所有的內(nèi)容進行匯總 要傳至少兩個值
let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.reduce((pre, n) => {
return pre + n
}, 0)
console.log(newArr);
14、reduceRight()
功能：（與reduce類似）從數(shù)組的最后一項開始，向前逐個遍歷到第一位，迭代數(shù)組的所有項，然后構(gòu)建一個最終返回的值。
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
參數(shù)：同reduce。
var arr = [1,2,3,4,5];
var sum = arr.reduceRight(function(pre, cur, index, array){
return pre + cur;
},10);
console.log(sum); //25
15、findIndex()
功能: 返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引。若沒有則返回-1。
let arr = [10, 2, 9, 17, 22]; let index = arr.findIndex((item) => item > 13) console.log(index); // 3
四、實戰(zhàn)
一些算法我們可以使用此方法實現(xiàn)，此處我只寫一些簡單可實現(xiàn)的方法
4.1、實現(xiàn)數(shù)組排序（升序 || 降序）
我們使用sort搭配reverse可以快速實現(xiàn)排序，但是我們也可以使用冒泡排序、快速排序等方法
sort的原理本身就是冒泡排序的一種寫法
升序
var arr = [6,1,5,2,3]; console.log(arr.sort()); //[1, 2, 3, 5, 6]
降序
var arr = [6,1,5,2,3];
console.log(arr.sort((a,b)=>{return b - a}));//[6,5,4,3,2,1]
降序
var arr = [6,1,5,2,3]; console.log(arr.sort().reverse()); //[6,5,4,3,2,1]
4.2、數(shù)組去重
適用indexOf和push實現(xiàn)
function uniqueArray(arr) {
var temp = [];
for (var i = 0; i < arr.length; i++) {
if (temp.indexOf(arr[i]) == -1) {
temp.push(arr[i]);
}
}
return temp;
}
使用filter去重
var r = [],
arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
consolo.log(r)//['apple', 'strawberry', 'banana', 'pear', 'orange']
使用reduce實現(xiàn)數(shù)組對象去重
//數(shù)組重名去重
var resources = [
{ name: "張三", age: "18" },
{ name: "張三", age: "19" },
{ name: "張三", age: "20" },
{ name: "李四", age: "19" },
{ name: "王五", age: "20" },
{ name: "趙六", age: "21" }
]
var temp = {};
resources = resources.reduce((prev, curv) => {
if (!temp[curv.name]) {// 如果臨時對象沒有就把這個名字加進去，同時把當前的這個對象加入到prev中
temp[curv.name] = true;
prev.push(curv);
}
return prev
}, []);
console.log(resources);
//[
// { name: "張三", age: "18" },
// { name: "李四", age: "19" },
// { name: "王五", age: "20" },
// { name: "趙六", age: "21" }
//]
4.3、找數(shù)組元素
數(shù)組中重復次數(shù)最多的一個元素
var arr = [1,1,1,2,2,2,2,2,2,2,3,3,3,4,4,5,6,7,7,8];
var maxNum = 0;
var maxName = "";
var obj = {};
arr.forEach((ele,index)=>{
obj[ele] ? obj[ele] += 1 : obj[ele] = 1;
})
for(let r in obj) {
if(obj[r]>maxNum){
maxNum = obj[r]
maxName = r
}
}
console.log(`最多重復的數(shù)${maxName},重復次數(shù)為:${maxNum}`) //最多重復的數(shù)2,重復次數(shù)為:7
更多關(guān)于JS創(chuàng)建數(shù)組，JS數(shù)組排序，JS查找數(shù)組的知識請相看下面的相關(guān)鏈接
相關(guān)文章
這篇文章主要介紹了說說Vuex的getters屬性的具體用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要給大家介紹了關(guān)于vue中input獲取光標位置并追加內(nèi)容的相關(guān)資料,vue通過當前的光標來進行插值,從而需要去獲取光標所在的位置,需要的朋友可以參考下2023-07-07
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關(guān)于如何利用vue控制元素的顯示與隱藏的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
vue3?+?Ant?Design?實現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)
這篇文章主要介紹了vue3?+?Ant?Design?實現(xiàn)雙表頭表格（橫向表頭+縱向表頭）,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue實現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實例形式簡單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法
vue3 集成 echarts 最大的坑就是出現(xiàn)了,reactive 的數(shù)據(jù) 刷新了,但圖表缺不會刷新,所以本文就給大家詳細的介紹一下vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue使用微信掃一掃功能的實現(xiàn)代碼,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue-router權(quán)限控制(簡單方式)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了Vue-cli項目部署到Nginx服務(wù)器的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11