這兩個章節的內容主要在介紹Array在ES6裡的新語法，這篇文有點長，想更深入學習ES6可參考下方連結。 阮一峰 ECMAScript 6 入門

目錄

forEach

array.forEach(function(currentValue, index, arr), thisValue) currentValue，必要，當前項目 index，索引值 arr，代表正在被遍歷的陣列 thisValue，傳值進forEach，預設是this

const numbers = [1, 44, 12, 5, 26, 99];
numbers.forEach((item,index,arr) => arr[index] = item * 3);
console.log(numbers); // [3, 132, 36, 15, 78, 297]

不會回傳值，直接在遍歷時處理資料。

filter

array.filter(function(currentValue,index,arr), thisValue)

const numbers = [1, 44, 12, 5, 26, 99];
const filterNumbers = numbers.filter(item => item > 20);
console.log(filterNumbers); // [44, 26, 99]

顧名思義就是過濾，遍歷時符合條件才會被回傳出去組成新陣列。

map

array.map(function(currentValue,index,arr), thisValue)

const numbers = [1, 44, 12, 5, 26, 99];
const mapNumbers = numbers.map(item => item + 5);
console.log(numbers); // [1, 44, 12, 5, 26, 99] 原陣列保持原樣
console.log(mapNumbers); // [6, 49, 17, 10, 31, 104]

看起來和forEach差不多對吧，不過map會回傳出新陣列，不會影響到原本的陣列。

reduce

array.reduce(function(total, currentValue, currentIndex, arr), initialValue) total，必要，代表起始值 currentValue，必要，當前項目 initialValue，設定起始值

const numbers = [1, 44, 12, 5, 26, 99];
const reduceNumbers = numbers.reduce((accumulate, current) => accumulate + current);
console.log(reduceNumbers); // 187

第一個參數會累加且傳入下一次運算，最後傳出這個累加值。

sort

array.sort(sortfunction)

const numbers = [1, 44, 12, 5, 26, 99];
numbers.sort((a, b) => a - b); // 正數->小到大，負數->大到小，0->不改變
console.log(numbers); // [1, 5, 12, 26, 44, 99]

顧名思義就是排序，sortfunction傳出的值會影響排序結果，可用reverse()進行反轉。

some

array.some(function(currentValue,index,arr),thisValue)

const numbers = [1, 44, 12, 5, 26, 99];
const someNumbers = numbers.some(item => item > 20);
console.log(someNumbers); // true

回傳Boolean，陣列只要有一項符合規則就回傳True。

every

array.every(function(currentValue,index,arr), thisValue)

const numbers = [1, 44, 12, 5, 26, 99];
const everyNumbers = numbers.every(item => item > 20);
console.log(everyNumbers); // false

回傳Boolean，與some()的差別是陣列需要全部符合規則才回傳True。

find

array.find(function(currentValue, index, arr),thisValue)

const numbers = [1, 44, 12, 5, 26, 99];
const findNumbers = numbers.find(item => item > 20);
console.log(findNumbers); // 44

類似filter()，但只會回傳第一個符合條件的值就停止遍歷了。

findIndex

array.findIndex(function(currentValue, index, arr), thisValue)

const numbers = [1, 44, 12, 5, 26, 99];
const findIndexNumbers = numbers.findIndex(item => item > 20);
console.log(findIndexNumbers); // 1 此為陣列索引 實際是第二個

回傳第一個符合條件的值的索引的同時停止遍歷。

set

new Set([iterable])

const numbers = new Set([1, 2, 3, 4, 5, 5, 5, 5, 2, 3, 3]);
const setNumbers =  [...numbers];
console.log(numbers); // Set(5) {1, 2, 3, 4, 5}
console.log(setNumbers); // [1, 2, 3, 4, 5]

set本身是一種資料結構，配合Spread Operator(…)可以轉換成陣列值，set本身有個只會儲存唯一值的特性，平常想過濾掉重複的陣列內容可以用[…new Set(array)]。

其他

  • string/array.slice(start,end) 只傳入一個數字，slice(5)，代表從第六個開始保留到最後一個 傳入兩個數字，slice(5, 11)，代表從第六個開始保留到第十一個 可以切字串(String)也可以切陣列(Array)。

  • for…of

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

跟for…in不一的是會直接讀取裡面的值，且key = value。

  • 箭頭函式(Arrow functions) 這篇一直用就順帶說明一下
const func = function (x) { return x + 1 };
// 等同於
const func = x => x + 1;

const name = 'global name';
const nameFunc = {
  name: 'local name',
  callName: function () { 
    // 注意，這裡是 function，以此為基準產生一個作用域
    console.log('1', this); // 1 nameFunc object
    console.log('2', this.name); // 2 local name
  },
  callName2: () => { 
    // 注意，箭頭函式，this 指向物件所在的那一層
    console.log('3', this); // 3 window object
    console.log('4', this.name); // 4 global name
    console.log('5', this.nameFunc); // 5 local name
  }
};
nameFunc.callName();
nameFunc.callName2();

有幾個特性

  1. 前面傳入的參數在只有一個的情況下不用小括號，沒有參數或複數參數就一定要小括號()
  2. 箭頭後面的部分如果只有一行，不需要大括號{}，且預設會return
  3. this綁的位置和原本的function(){}不一樣，通常是建議有用到this就不要用箭頭函式