js中的陣列方法
js中的陣列方法
陣列是js中最常用到的資料集合，其內建的方法也很多，熟練掌握這些方法，可以有效的提高我們的工作效率，也對我們的程式碼質量有很大影響。
一、建立陣列
1、使用陣列字面量方法
var arr1 = []; // 建立一個數組 var arr2 = [20]; // 建立一個包含1項資料為20的陣列 var arr3 = ['lily','lucy','Tom']; // 建立一個包含3個字串的陣列
2、使用Array建構函式
無參構造
var arr1 = new Array(); // 建立一個空陣列
帶參構造
如果只傳一個數值引數，則表示建立一個初始長度為指定陣列的空陣列
var arr2 = new Array(10); // 建立一個包含10項的陣列
如果傳入一個非數值的引數或者引數大於1，則表示建立一個包含指定元素的陣列
var arr3 = new Array('lily','lucy','Tom'); // 建立一個包含3個字串的陣列
3、Array.of方法建立陣列(es6新增)
Array.of()方法會建立一個包含所有傳入引數的陣列，而不管引數的數量與型別
let arr1 = Array.of(1,2); console.log(arr1.length); // 2 let arr2 = Array.of(3); console.log(arr2.length); // 1 console.log(arr2[0]); // 3
4、Array.from方法建立陣列(es6新增)
在js中將非陣列物件轉換為真正的陣列是非常麻煩的。在es6中，將可迭代物件或者類陣列物件作為第一個引數傳入，Array.from()就能返回一個數組
function arga(...args){ // ...args剩餘引數陣列，由傳遞給函式的實際引數提供
let arg = Array.from(args);
console.log(arg);
}
arga(arr1,26,from); // [arr1,26,from]
二、陣列方法
陣列原型方法主要有以下這些：
- join()：用指定的分隔符將陣列每一項拼接為字串
- push()：向陣列的末尾新增新元素
- pop()：刪除陣列的最後一項
- unshift()：向陣列首位新增新元素
- shift()：刪除陣列的第一項
- slice()：按照條件查找出其中的部分元素
- splice()：對陣列進行增刪改
- filter()：過濾功能
- concat()：用於連線兩個或多個數組
- indexOf()：檢測當前值在陣列中第一次出現的位置索引
- lastIndexOf()：檢測當前值在陣列中最後一次出現的位置索引
- every()：判斷陣列中每一項都是否滿足條件
- some()：判斷陣列中是否存在滿足條件的項
- includes()：判斷一個數組是否包含一個指定的值
- sort()：對陣列的元素進行排序
- reverse()：對陣列進行倒序
- forEach()：es5及以下迴圈遍歷陣列每一項
- map()：es6迴圈遍歷陣列每一項
- find()：返回匹配的項
- findIndex()：返回匹配位置的索引
- reduce()：從陣列的第一項開始遍歷到最後一項，返回一個最終的值
- reduceRight()：從陣列的最後一項開始遍歷到第一項，返回一個最終的值
- toLocaleString()、toString()：將陣列轉換為字串
- entries()、keys()、values()：遍歷陣列
各個方法的基本功能詳解
1、join()
join()方法用於把陣列中的所有元素轉換一個字串，預設使用逗號作為分隔符
var arr1 = [1,2,3];
console.log(arr1.join()); // 1,2,3
console.log(arr.join('-')); // 1-2-3
console.log(arr); // [1,2,3](原陣列不變)
2、push()和pop()
push()方法從陣列末尾向陣列新增元素，可以新增一個或多個元素
pop()方法用於刪除陣列的最後一個元素並返回刪除的元素
var arr1 = ['lily','lucy','Tom'];
var count = arr1.push('Jack','Sean');
console.log(count); // 5
console.log(arr1); // ['lily','lucy','Tom','Jack','Sean']
var item = arr1.pop();
console.log(item); // Sean
console.log(arr1); // ['lily','lucy','Tom','Jack']
3、unshift()和shift()
unshift()方法可向陣列的開頭新增一個或更多元素，並返回新的長度
shift()方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值
var arr1 = ['lily','lucy','Tom'];
var count = arr1.unshift('Jack','Sean');
console.log(count); // 5
console.log(arr1); // ['Jack','Sean','lily','lucy','Tom']
var item = arr1.shift();
console.log(item); // Jack
console.log(arr1); // [''Sean','lily','lucy','Tom']
4、sort()：用於對陣列的元素進行排序。排序順序可以是字母或數字，並按升序或降序，預設排序順序為按字母升序
var arr1 = ['a','d','c','b'];
console.log(arr1.sort()); // ['a','b','c','d']
function compare(value1,value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}
var arr2 = [13,24,51,3];
console.log(arr2.sort(compare)); // [3,13,24,51]
// 如果需要通過比較函式產生降序排序的結果，只要交後比較函式返回的值即可
5、reverse()：用於顛倒陣列中元素的順序
var arr1 = [13,24,51,3]; console.log(arr1.reverse()); // [3,51,24,13] console.log(arr1); // [3,51,24,13](原陣列改變)
6、concat()：用於連線兩個或多個數組，該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本
var arr1 = [1,3,5,7]; var arrCopy = arr1.concat(9,[11,13]); console.log(arrCopy); // [1,3,5,7,9,11,13] console.log(arr1); // [1,3,5,7](原陣列未被修改)
7、slice()：返回從原陣列中指定開始下標到結束下標之間的項組成的新陣列，可以接受一或兩個引數，即要返回項的起始和結束位置(不包括結束位置的項)
var arr1 = [1,3,5,7,9,11]; var arrCopy = arr1.slice(1); var arrCopy2 = arr1.slice(1,4); var arrCopy3 = arr1.slice(1,-2); // 相當於arr1.slice(1,4); var arrCopy4 = arr1.slice(-4,-1); // 相當於arr1.slice(2,5); console.log(arr1); // [1,3,5,7,9,11](原陣列沒變) console.log(arrCopy); // [3,5,7,9,11] console.log(arrCopy2); // [3,5,7] console.log(arrCopy3); // [3,5,7] console.log(arrCopy4); // [5,7,9]
8、splice()：可以實現刪除、插入和替換
8-1、刪除元素，並返回刪除的元素，2個引數：起始位置和要刪除的項數
var arr1 = [1,3,5,7,9,11]; var arrRemoved = arr1.splice(0,2); console.log(arr1); // [5,7,9,11] console.log(arrRemoved); // [1,3]
8-2、向指定索引處新增或替換元素，3個引數：起始位置、0(要刪除的項數)和要插入的項
// 新增元素 var arr1 = [22,3,31,12]; arr1.splice(1,0,12,35); console.log(arr1); // [22,12,35,3,31,12] // 替換元素 var arr2 = [22,3,8,58]; arr2.splice(1,1,6); // [3] console.log(arr2); // [22,6,8,58]
9、forEach()：3個引數：遍歷的陣列的項，索引、陣列本身
10、map()：返回一個新陣列，會按照原始陣列元素順序依次處理元素
11、every()：判斷陣列中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true
var arr1 = [1,2,3,4,5];
var arr2 = arr1.every.every(x => {
return x < 10;
});
console.log(arr2); // true
var arr3 = arr1.every(x => {
return x < 3;
});
console.log(arr3); // false
12、some()：判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會返回true
var arr1 = [1,2,3,4,5];
var arr2 = arr1.some(x => {
return x < 3;
});
console.log(arr2); // true
var arr3 = arr1.some(x => {
return x < 1;
});
console.log(arr3); // false
13、includes()：es7新增，用來判斷一個數組是否包含一個指定的值，使用===運算子來進行值比較，如果是返回true，否則false，引數有兩個，第一個是(必填)需要查詢的元素值，第二個是(可選)開始查詢元素的位置
var arr1 = [22,3,31,12,58]; var includes = arr1.includes(31); console.log(includes); // true var includes2 = arr1.includes(31,3); // 從索引3開始查詢31是否存在 console.log(includes2); // false
14、reduce()和reduceRight()：都會實現迭代陣列的所有項(即累加器)，然後構建一個最終返回的值
reduce()方法從陣列的第一項開始，逐個遍歷到最後
reduceRight()方法從陣列的最後一項開始。向前遍歷到第一項
4個引數：前一個值、當前值、項的索引和陣列物件
var arr1 = [1,2,3,4,5];
var sum = arr1.reduce((prev,cur,index,array) => {
return prev + cur;
},10); // 陣列一開始加了一個初始值10，可以不設預設0
console.log(sum); // 25
15、toLocaleString()和toString()：都是將陣列轉換為字串
var arr1 = [22,3,31,12]; let str = arr1.toLocaleString(); var str2 = arr1.toString(); console.log(str); // 22,3,31,12 console.log(str2); // 22,3,31,12
16、find()和findIndex()：都接受兩個引數：一個回撥函式，一個可選值用於指定回撥函式內部的this
該回調函式可接受3個引數：陣列的某個元素、該元素對應的索引位置、陣列本身，在回撥函式第一次返回true時停止查詢。
二者的區別是：find()方法返回匹配的值，而findIndex()方法返回匹配位置的索引
17、entries()、keys()和values()：es6新增
entries()、keys()和values()--用於遍歷陣列。它們都返回一個遍歷器物件，可以用for...of迴圈進行遍歷
區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷、entries()是對鍵值對的遍歷
for(let index of [a,b],keys()){
console.log(index);
}
// 0
// 1
for(let elem of [a,b].values()){
console.log(elem);
}
// a
// b
for(let [index,elem] of [a,b].entries()){
console.log(index,elem);
}
// 0 'a'
// 1 'b'
如果不使用for...of迴圈，可以手動呼叫遍歷器物件的next方法，進行遍歷
let arr1 = [a,b,c]; let entries = arrr1.entries(); console.log(entries.next().value); // [0,a] console.log(entries.next().value); // [1,b] console.log(entries.next().value); // [2,c]