超詳細的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]