彙總 數組方法

es5

concat() 銜接數組（原數組不變）

將參數銜接到數組中，並返回銜接後新的數組

 

概要：arr.concat(value,...)  or  arr.concat(arr2,...)

例：

var a = [ 1 , 2 , 3];

a.concat(4,5);   // [1,2,3,4,5]

a.concat([4,5]); //[1,2,3,4,5]

a.concat([4,5],[6,7]); //[1,2,3,4,5,6,7]

a.concat(4,[5,[6,7]]); //[1,2,3,4,5,[6,7]]

 

 

every() 測試數組中是否每一個元素都爲真（符合函數的條件）

將每一個數組元素代入函數中判斷，並返回布爾值，若都爲真，返回true，只要一個不爲真則返回false

 

概要：arr.every(function(arr[i],i,arr){return 判斷條件 });

例：

var a = [ 1 , 2 , 3];

a.every(function(x){return x<5});   // true

a.every(function(x){return x<3}); //false

注：空數組總返回true；

 

some() 測試數組中是否某個元素都爲真（符合函數的條件）

將每一個數組元素代入函數中判斷，並返回布爾值，若某個元素爲真，返回true，若都不爲真則返回false

 

概要：arr.some(function(arr[i],i,arr){return 判斷條件 });

例：

var a = [ 1 , 2 , 3];

a.every(function(x){return x>5});   // false

a.every(function(x){return x<3}); //true

注：空數組總返回false；

 

filter() 測試數組中是否每一個元素爲真 （符合函數的條件） ，並返回爲真的元素的數組

將數組元素帶入函數中判斷，若爲真則放入一個新的數組，循環結束後返回這個新的數組

 

概要：arr.filter(function(arr[i],i,arr){return 判斷條件 });

例：

var a = [ 1 , 2 , 3];

a.filter(function(x){return x<3});   //[1,2]

 

forEach() 讓每個數組元素都調用一次函數（f(arr[i],i,arr)）（改變原數組）

將每一個數組元素分別代入函數中（無返回值）

 

概要：arr.forEach(function(arr[i],i,arr){  });

例：

var a = [ 1 , 2 , 3];

a.forEach(function(x,i,a){a[i]++});   // a變成[2,3,4]

 

 

indexOf() 查找數組中是否含有查找的這個值

對數組進行查找，有則返回元素位置，無返回-1

 

概要：arr.indexOf(value,start);（start 不填默認爲0）

例：

var a = [ 1 , 2 , 3];

a.indexOf(1);   // 0

a.indexOf(4);   // -1

a.indexOf(1,1);   // -1

 

lastIndexOf() 從數組最後開始查找數組中是否含有查找的這個值

對數組進行反向查找，有則返回元素位置，無返回-1

 

概要：arr.lastIndexOf(value,start);（start 不填默認爲最後一個數組元素）

例：

var a = [ 1 , 2 , 3];

a.indexOf(1);   

a.indexOf(4);   // -1

a.indexOf(3,1);   // -1

a.indexOf(1,1);   // 0

 

join() 將數組元素銜接爲字符串（與string.split()相反）

將數組元素經過特定字符（不填默認爲「 , 」）銜接爲字符串

 

概要：arr.join(sep);（sep不填默認爲英文逗號 ，）

例：

var a = [ 1 , 2 , 3];

a.join("+"); // "1+2+3"

a.join(); // "1,2,3"

 

map() 從數組元素中計算新值 （原數組不變）

將數組元素經過函數運算獲得新的數組，並返回這個新數組

 

概要：arr.map(function(arr[i],i,arr){ return ? })

例：

var a = [ 1 , 2 , 3];

a.map(function(x){return x*x}); // [1,4,9]

a.map(function(x){if(x>1){return x;}}); // [undefined, 2, 3]

 

 

pop() 刪除並返回數組最後一個元素 （改變原數組）

將數組最後一個元素刪除並返回這個元素

 

概要：arr.pop( )

例：

var a = [ 1 , 2 , 3];

a.pop(); // 3

 

push() 給數組追加元素 （改變原數組）

在數組最後添加元素返回組合後數組的長度

 

概要：arr.push( value,... )

例：

var a = [ 1 , 2 , 3];

a.push(4); // 4

 

shift() 刪除並返回數組第一個元素 （改變原數組）

將數組第一個元素刪除並返回這個元素

 

概要：arr.shift( )

例：

var a = [ 1 , 2 , 3];

a.shift(); // 1

 

unshift() 在數組頭部插入元素 （改變原數組）

將數組第一個元素前插入並返回這個新數組的長度

 

概要：arr.unshift(value,... )

例：

var a = [ 1 , 2 , 3];

a.unshift(4); // 4....a=[4,1,2,3]

 

 

reduce() 從數組中計算出一個值 （原數組不變）

從數組中計算出一個值

 

概要：arr.reduce( func(preV,curV,index,arr){return ?;} )

例：

var a = [ 1 , 2 , 3];

a.reduce(function(previousValue, currentValue, index, array){

  return previousValue + currentValue;

}); // 6

 

 

reduceRight() 從數組右側開始計算出一個值 （原數組不變）

在從數組右側開始計算出一個值

 

概要：arr.reduceRight( func(preV,curV,index,arr){return ?;} )

例： 

var a = [ 1 , 2 , 3];

a.reduceRight(function(previousValue, currentValue, index, array){

  return previousValue + currentValue;

}); // 6

 

reverse() 數組倒序 （改變原數組）

把數組元素倒序

 

概要：arr.reverse(  )

例：

var a = [ 1 , 2 , 3];

a.reverse(); // [3,2,1]

 

 

slice() 返回數組一部分 （原數組不變）

返回數組的一部分

 

概要：arr.slice( start,end )

例：

var a = [ 1 , 2 , 3];

a.slice(0,1); // [1]

 

 

sort() 數組排序 （改變原數組）

把數組元素排序

 

概要：arr.sort()   arr.sort( func )

例：

var a = [ 1 , 3 , 2];

a.sort(function(a,b){return a- b}); // [1,2,3]

 

 

splice() 插入、刪除、替換數組元素 （改變原數組）

把數組元素刪除，返回刪除的元素，若刪除個數爲0，val有值，則插入val元素，若刪除個數不爲0且val有值，則先刪除再插入元素

 

概要：arr.splice( start,deleteCount，val,...)

例：

var a = [ 1 , 2 , 3,4,5];

a.splice(1,2); // [2,3] ;    a=[1,4,5]

a.splice(1,0,2,3); // [ ] ;    a=[1,2,3,4,5]

 

es6

 

from() 轉換數組

用於將兩類對象轉換成真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括ES6新增的數據結構Set和Map）。

 

let arrayLike ={'0':'a','1':'b','2':'c',
    length:3};
// ES5的寫法
var arr1 =[].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

實際應用中，常見的相似數組的對象是DOM操做返回的NodeList集合，以及函數內部的arguments對象。Array.from均可以將它們轉爲真正的數組。argumentsArray.from

// NodeList對象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function(p){
  console.log(p);});
// arguments對象
functionfoo(){var args = Array.from(arguments); // ...
}

上面代碼中，querySelectorAll方法返回的是一個相似數組的對象，只有將這個對象轉爲真正的數組，才能使用forEach方法。querySelectorAllforEach

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet =newSet(['a','b'])
Array.from(namesSet) // ['a', 'b']

字符串和Set結構都具備Iterator接口，所以能夠被轉爲真正的數組。Array.from

擴展運算符（）也能夠將某些數據結構轉爲數組。...

// arguments對象
functionfoo(){var args =[...arguments];}
// NodeList對象
[...document.querySelectorAll('div')]