數(shù)組操作方法大全（包括ES6方法）

一、concat()——連接兩個或多個數(shù)組。該方法不會改變原數(shù)組，僅會返回被連接數(shù)組的一個副本
var arr1 = [1,2,3];
var arr2 = [4,5];
var arr3 = arr1.concat(arr2);
console.log(arr1);     //[1, 2, 3]
console.log(arr3);     //[1, 2, 3, 4, 5]
二、join()——把數(shù)組中的所有元素放入一個字符串。元素是通過指定的分隔符進(jìn)行分隔的，默認(rèn)使用“,”分隔，不會改變原數(shù)組
var arr = [2,3,4];
console.log(arr.join());     //2,3,4
console.log(arr);     //[2, 3, 4]
三、push()——向數(shù)組的末尾添加一個或多個元素，并返回新的長度。末尾添加，返回的是長度，會改變原數(shù)組。push方法可以一次添加多個元素push(data1,data2....)
var a = [2,3,4];
var b = a.push(5);
console.log(a);     //[2,3,4,5]
console.log(b);     //4
四、pop()——刪除并返回數(shù)組的最后一個元素。返回最后一個元素，會改變原數(shù)組
var arr = [2,3,4];
console.log(arr.pop());     //4
console.log(arr);     //[2,3]
五、shift()——刪除數(shù)組的第一個元素。返回第一個元素，會改變原數(shù)組
var arr = [2,3,4];
console.log(arr.shift());     //2
console.log(arr);     //[3,4]
六、unshift()——向數(shù)組的開頭添加一個或多個元素，并返回新的長度。開頭添加，返回的是長度，會改變原數(shù)組。unshift方法可以一次添加多個元素push(data1,data2....)
var arr = [2,3,4,5];
console.log(arr.unshift(3,6));     //6
console.log(arr);     //[3, 6, 2, 3, 4, 5]
七、slice()——返回一個新的數(shù)組，包含從start到end（不包括該元素）的arrayObject中的元素。返回選定的元素，不會改變原數(shù)組
var arr = [2,3,4,5];
console.log(arr.slice(1,3));     //[3,4]
console.log(arr);     //[2,3,4,5]
八、splice()——刪除從index處開始的零個或多個元素，并且用參數(shù)列表中的一個或多個值來替換被刪除的元素。如果從arrayObject中刪除了元素，則返回的是含有被刪除元素的數(shù)組，該方法會直接對數(shù)組進(jìn)行修改（第二個參數(shù)是0，代表的是添加元素，不是0代表的是刪除元素）
var a = [5,6,7,8];
console.log(a.splice(1,0,9));     //[]
console.log(a);     // [5, 9, 6, 7, 8]
var b = [5,6,7,8];
console.log(b.splice(1,2,3));     //[6, 7]
console.log(b);     //[5, 3, 8]
九、substring()和substr()

1、相同點：如果只有一個參數(shù)，兩者的作用一樣，都是截取字符串從當(dāng)前下標(biāo)開始直到字符串最后的字符串片段
substr(startIndex);
substring(startIndex);

var str = '123456789';
console.log(str.substr(2));     //  "3456789"
console.log(str.substring(2));     //  "3456789"

2、不同點：第二個參數(shù)：substr（startIndex,lenth）： 第二個參數(shù)是截取字符串的長度（從起始點截取某個長度的字符串）；substring（startIndex, endIndex）： 第二個參數(shù)是截取字符串最終的下標(biāo) （截取2個位置之間的字符串，‘含頭不含尾’）

console.log("123456789".substr(2,5));     //  "34567"
console.log("123456789".substring(2,5));     //  "345"
十、sort()——按照 Unicode Code 位置排序，默認(rèn)升序，會改變原數(shù)組
var fruit = ['cherries', 'apples', 'bananas'];
console.log(fruit.sort());     // ['apples', 'bananas', 'cherries']
var scores = [1, 10, 21, 2];
console.log(scores.sort());     // [1, 10, 2, 21]
console.log(scores) ;    // [1, 10, 2, 21]
十一、reverse()——顛倒數(shù)組中元素的順序。返回的是顛倒后的數(shù)組，會改變原數(shù)組
var arr = [2,3,4];
console.log(arr.reverse());     //[4, 3, 2]
console.log(arr);     //[4, 3, 2]
十二、indexOf() 和 lastIndexOf()——都接受兩個參數(shù)：查找的值、查找的起始位置。如果不存在，返回 -1，存在，返回位置。indexOf是從前往后查找，lastIndexOf是從后往前查找
var a = [2, 9, 9];
a.indexOf(2);     // 0
a.indexOf(7);     // -1

if (a.indexOf(7) === -1) {
    // element doesn't exist in array
}

var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);     // 3
numbers.lastIndexOf(7);     // -1
numbers.lastIndexOf(2, 3);     // 3
numbers.lastIndexOf(2, 2);     // 0
numbers.lastIndexOf(2, -2);      // 0
numbers.lastIndexOf(2, -1);      // 3
十三、every()——對數(shù)組的每一項都運(yùn)行給定的函數(shù)，每一項都返回true，則最后返回true
function isBigEnough(element, index, array) {
    return element < 10;
}    
console.log([2, 5, 8, 3, 4].every(isBigEnough));     // true
十四、some()——對數(shù)組的每一項都運(yùn)行給定的函數(shù)，任意一項都返回 ture，則最后返回 true
function compare(element, index, array) {
    return element > 10;
}    
[2, 5, 8, 1, 4].some(compare);     // false
[12, 5, 8, 1, 4].some(compare);     // true
十五、filter()——對數(shù)組的每一項都運(yùn)行給定的函數(shù)，返回結(jié)果為true的項組成的數(shù)組
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];
var longWords = words.filter(function(word){
    return word.length > 6;
});
console.log(longWords)     // ["exuberant", "destruction", "present"]
十六、map()——對數(shù)組的每一項都運(yùn)行給定的函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的一個新數(shù)組，不會改變原數(shù)組
var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
    return x * 2;
});
console.log(doubles )     // [2, 10, 20, 30]
console.log(numbers )     // [1, 5, 10, 15]
十七、forEach()——數(shù)組遍歷
const items = ['item1', 'item2', 'item3'];
const copy = [];    
items.forEach(function(item){
    copy.push(item)
});
console.log(copy)     // ['item1', 'item2', 'item3']
ES6新增的操作數(shù)組的方法
十八、find()——傳入一個回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個元素，返回它，并且終止搜索
const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number"))     // 1
十九、findIndex()——傳入一個回調(diào)函數(shù)，找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個元素，返回它的下標(biāo)，并終止搜索
const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number"))     // 0
console.log(arr.findIndex(n => typeof n === "string"))     // 1
二十、fill()——用新元素替換掉數(shù)組內(nèi)的元素，可以指定替換下標(biāo)范圍，arr.fill(value, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.fill(10, 1, 3))     // [1, 10, 10, 4, 5]
二十一、copyWithin()——選擇數(shù)組的某個下標(biāo)，從該位置開始復(fù)制數(shù)組元素，默認(rèn)從0開始復(fù)制。也可以指定要復(fù)制的元素范圍，arr.copyWithin(target, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))     // [1,2,3,1,2] 從下標(biāo)為3的元素開始，復(fù)制數(shù)組，所以4, 5被替換成1, 2
const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1))      // [1,2,3,2,3] 從下標(biāo)為3的元素開始，復(fù)制數(shù)組，指定復(fù)制的第一個元素下標(biāo)為1，所以4, 5被替換成2, 3
const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2))      // [1,2,3,2,5] 從下標(biāo)為3的元素開始，復(fù)制數(shù)組，指定復(fù)制的第一個元素下標(biāo)為1，結(jié)束位置為2，所以4被替換成2
二十二、from()——將類似數(shù)組的對象（array-like object）和可遍歷（iterable）的對象轉(zhuǎn)為真正的數(shù)組
const bar = ["a", "b", "c"];
console.log(Array.from(bar));     // ["a", "b", "c"]
console.log(Array.from('foo'));     // ["f", "o", "o"]
二十三、of()——用于將一組值轉(zhuǎn)換為數(shù)組。這個方法的主要目的是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同，會導(dǎo)致Array()的行為有差異
console.log(Array());     // []
console.log(Array(3));     // [, , ,] 或 [ empty x 3 ]
console.log(Array(3, 11, 8));     // [3, 11, 8]
console.log(Array.of(7));       // [7]
console.log(Array.of(1, 2, 3));     // [1, 2, 3]
console.log(Array(7));          // [ , , , , , , ] 或 [ empty x 7 ]
console.log(Array(1, 2, 3));      // [1, 2, 3]
二十四、entries() 返回迭代器——返回鍵值對
//數(shù)組
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
    console.log(v)     // [0, 'a'] [1, 'b'] [2, 'c']
}

//Set
const arr1 = new Set(['a', 'b', 'c']);
for(let v of arr1.entries()) {
    console.log(v)     // ['a', 'a'] ['b', 'b'] ['c', 'c']
}

//Map
const arr2 = new Map();
arr2.set('a', 'a');
arr2.set('b', 'b');
for(let v of arr2.entries()) {
    console.log(v)     // ['a', 'a'] ['b', 'b']
}
二十五、values() 返回迭代器——返回鍵值對的value
//數(shù)組
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
    console.log(v)     //'a' 'b' 'c'
}

//Set
const arr1 = new Set(['a', 'b', 'c']);
for(let v of arr1.values()) {
    console.log(v)     // 'a' 'b' 'c'
}

//Map
const arr2 = new Map();
arr2.set('a', 'a');
arr2.set('b', 'b');
for(let v of arr2.values()) {
    console.log(v)     // 'a' 'b'
}
二十六、keys() 返回迭代器——返回鍵值對的key
//數(shù)組
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
    console.log(v)     // 0 1 2
}

//Set
const arr1 = new Set(['a', 'b', 'c']);
for(let v of arr1.keys()) {
    console.log(v)     // 'a' 'b' 'c'
}

//Map
const arr2 = new Map();
arr2.set('a', 'a');
arr2.set('b', 'b');
for(let v of arr2.keys()) {
    console.log(v)     // 'a' 'b'
}
二十七、includes()——判斷數(shù)組中是否存在該元素，參數(shù)：查找的值、起始位置，可以替換 ES5 時代的 indexOf 判斷方式。indexOf 判斷元素是否為 NaN，會判斷錯誤
var arr = [1, 2, 3];
console.log(arr .includes(2));     // true
console.log(arr .includes(4));     // false
console.log(arr .indexOf(2))     // 1
console.log(arr .indexOf(4))     // -1
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容