ES5與ES6數組方法總結

時間 2019-12-05

原文原文鏈接

Array 對象屬性

constructor 返回對建立此對象的數組函數的引用。
length 設置或返回數組中元素的數目。
prototype 使您有能力向對象添加屬性和方法。

傳統Array 對象方法

toSource() 返回該對象的源代碼。
toString() 把數組轉換爲字符串，並返回結果。
toLocaleString() 把數組轉換爲本地數組，並返回結果。
valueOf() 返回數組對象的原始值

修改原數組	不修改原數組
push， pop	concat
unshift，shift	join
sort	slice
reverse	indexOf()，lastIndexOf()
splice	forEach
copyWithin	map
fill	filter
	some
	every
	reduce，reduceRight
	includes
	finde，findIndex
	entries()，keys()，values()

修改原數組

push() 向數組的末尾添加一個或更多元素，並返回新的長度。
unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。
pop() 刪除並返回數組的最後一個元素
shift() 刪除並返回數組的第一個元素
sort() 對數組的元素進行排序
reverse() 顛倒數組中元素的順序。
splice() 刪除元素，並向數組添加新元素。

splice

語法

arrayObject.splice(index,howmany,item1,.....,itemX)數組

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.splice(2,1);               //"George", "John"
arr.splice(1,0,"William");     //"George", "William", "John"
arr.splice(2,1,"haha");        //"George", "William", "haha"

不修改原數組

concat() 鏈接兩個或更多的數組，並返回結果。
join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
slice() 從某個已有的數組返回選定的元素

slice

語法

arrayObject.slice(start,end);瀏覽器

start 必需。規定從何處開始選取。可爲負，從數組尾部開始算起。
end 可選。規定從何處結束選取。若是沒有指定，那麼切分的數組包含從 start 到數組結束的全部元素。可爲負，從數組尾部開始算起。

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

arr.slice(2,1);         //[]
arr.slice(1,2);         //"William"
arr.slice(-2,-1);         //"William"

將相似數組的對象(好比arguments)轉換爲真實的數組
Array.prototype.slice.call(arguments);

ES5新增數組

索引方法：indexOf()，lastIndexOf()
迭代方法：forEach()、map()、filter()、some()、every()
歸併方法：reduce()、reduceRight()

方法並不會修改原數組

索引方法

indexOf

array.indexOf(searchElement[, fromIndex])

返回整數索引值，若是沒有匹配（嚴格匹配），返回-1。
fromIndex可選，表示從這個位置開始搜索，若缺省或格式不合要求，使用默認值0。

var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (從3號位開始搜索)

lastIndexOf

array.lastIndexOf(searchElement[, fromIndex])

從字符串的末尾開始查找，而不是從開頭。
fromIndex的默認值是array.length - 1。

var data = [2, 5, 7, 3, 5];

console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (從後往前，索引值小於3的開始搜索)

console.log(data.lastIndexOf(4)); // -1 (未找到)

兩個方法在比較第一個參數與數組中的每一項時，會使用全等操做符，要求必須徹底相等,不然返回-1。

迭代方法

每一個方法都接受兩個參數，第一個參數callback（回調函數，必選），第二個參數是一個可選的上下文參數。數據結構

其中第一個參數callback接受三個參數，當前項的值、當前項在數組中的索引、數組對象自己。即 function(value,index,arr) {}；須要注意的是與咱們經常使用的jQuery中封裝的方法區別在第一個參數和第二個參數，即index和value的順序是相反的。
第二個參數是一個可選的上下文參數，是執行第一個函數參數的做用域對象，也就是上面說的callback中this所指向的值。若是這第2個可選參數不指定，則使用全局對象代替（在瀏覽器是爲window），嚴格模式下甚至是undefined。

須要注意的是除了forEach()方法，其他的迭代方法中callback須要有return值不然會返回undefined。wordpress

forEach

forEach()對數組進行遍歷循環，對數組中的每一項運行給定的函數，這個方法沒有返回值。函數

[].forEach(function(value, index, array) {
    // ...
}, [ thisObject]);

forEach除了接受一個必須的回調函數參數，還能夠接受一個可選的上下文參數（改變回調函數裏面的this指向）（第2個參數）。
若是這第2個可選參數不指定，則使用全局對象代替（在瀏覽器是爲window），嚴格模式下甚至是undefined.

[1, 2, 3, 4].forEach(function (item, index, array) {
  console.log(array[index] == item); // true
  sum += item;
});

alert(sum); // 10

var database = {
  users: ["張含韻", "江一燕", "李小璐"],
  sendEmail: function (user) {
    if (this.isValidUser(user)) {
      console.log("你好，" + user);
    } else {
      console.log("抱歉，"+ user +"，你不是本家人");    
    }
  },
  isValidUser: function (user) {
    return /^張/.test(user);
  }
};

// 給每一個人法郵件
database.users.forEach(  // database.users中人遍歷
  database.sendEmail,    // 發送郵件
  database               // 使用database代替上面標紅的this
);

// 結果：
// 你好，張含韻
// 抱歉，江一燕，你不是本家人
// 抱歉，李小璐，你不是本家

map

map()指「映射」，對數組中的每一項運行給定的函數，返回每次函數調用的結果組成的數組。this

[].map(function(value, index, array) {
    // ...
}, [ thisObject]);

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

alert(arrayOfSquares); // 1, 4, 9, 16

filter

filter()，「過濾」，對數組中的每一項運行給定函數，返回知足過濾條件組成的數組。es5

array.filter(callback,[ thisObject]);

filter的callback函數須要返回布爾值true或false。
返回值只要是弱等於== true/false就能夠了，而非非得返回 === true/false。

var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flag = arr3.filter(function(value, index) {
  return value % 3 === 0;
}); 
console.log(flag);  // [3, 6, 9]

every

every()，判斷數組中每一項都是否知足所給條件，當全部項都知足條件，纔會返回true。prototype

array.every(callback,[ thisObject]);

var arr4 = [1, 2, 3, 4, 5];
var flag = arr4.every(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);  // false

some

some()，判斷數組中是否存在知足條件的項，只要有一項知足條件，就會返回true。code

array.some(callback,[ thisObject]);

var arr5 = [1, 2, 3, 4, 5];
var flag = arr5.some(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);   // true

歸併方法

這兩個方法相比前面可能稍微複雜一些，它們都會迭代數組中的全部項，而後生成一個最終返回值。這兩個方法接收兩個參數。對象

第一個參數callback，函數接受4個參數分別是（初始值total必選，當前值currentValue必選，索引值currentIndex可選，當前數組arr可選），函數須要返回一個值，這個值會在下一次迭代中做爲初始值。
第二個參數是迭代初始值（initialValue），參數可選，若是缺省，初始值爲數組第一項，從數組第一個項開始疊加，缺省參數要比正常傳值少一次運算。

reduce

reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。 reduce() 對於空數組是不會執行回調函數的。

array. reduce(function(total, currentValue, currentIndex, array) {
    // ...
});

var arr9 = [1, 2, 3, 4];
var sum9 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
});
console.log(sum9);  // 24 
var sum9_1 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
}, 10);
console.log(sum9_1);  // 240

reduceRight

reduceRight()和reduce()相比，用法相似，差別在於reduceRight是從數組的末尾開始實現的。

array.reduceRight(callback,[ thisObject]);

var arr9 = [2, 45, 30, 80];
var flag = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
});
var flag_1 = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
},200);
console.log(flag);  // 3
console.log(flag_1);  // 43

Array方法

isArray

判斷參數是不是」Array」返回true或false。

var a = [1,2,3];
Array.isArray(a);   //true

ES6數組方法

Array方法

Array.from()

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

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

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

Array.from還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。

Array.from(arrayLike, x => x * x);
// 等同於
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

Array.of()

用於將一組值，轉換爲數組。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]

實例方法

會改變原數組

copyWithin

在當前數組內部，將指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組。

array. copyWithin(target, start = 0, end = this.length);

target（必需）：從該位置開始替換數據。若是爲負值，表示倒數。
start（可選）：從該位置開始讀取數據，默認爲 0。若是爲負值，表示倒數。
end（可選）：到該位置前中止讀取數據，默認等於數組長度。若是爲負值，表示倒數。

// 將3號位複製到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2至關於3號位，-1至關於4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

fill

使用給定值，填充一個數組。

array. copyWithin(target, start = 0, end = this.length);

target（必需）：從該位置開始替換數據。若是爲負值，表示倒數。
start（可選）：從該位置開始讀取數據，默認爲 0。若是爲負值，表示倒數。
end（可選）：到該位置前中止讀取數據，默認等於數組長度。若是爲負值，表示倒數。

['a', 'b', 'c'].fill(7);   // [7, 7, 7]

let arr = new Array(3).fill([]);
arr[0].push(5);       // [[5], [5], [5]]

不會改變原數組

find

用於找出第一個符合條件的數組成員。它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。
find方法的回調函數能夠接受三個參數，依次爲當前的值、當前的位置和原數組。

array.reduceRight(callback,[ thisObject]);

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex

findIndex方法的用法與find方法很是相似，返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

array.reduceRight(callback,[ thisObject]);

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

includes

返回一個布爾值，表示某個數組是否包含給定的值。

[1, 2, 3].includes(2)     // true

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 letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']