從昨天開始將文章標題前面加個工具包，是期望日後開發時能透過文章快速查詢，所以內容也會偏向於開發時可能會用到的方法。

雖然短時間可能無法全部記住，又或者時間久了就忘了，但是卻能夠對這些方法有「印象」。

在某些情境時，突然靈光一現有這些方法可以用，不用自己土法煉鋼；又或者遇到問題時，能有個「關鍵字」去google，不至於卡在查詢這一關。

像是前陣子，朋友問我說:「有沒有辦法不用迴圈就把陣列全部的值串成字串?」，我想了一下就說:「可以試試看 join」。
有些方法可能短時間用不到，但真正需要它時，若是看過能有個印象，好像也不是件壞事嘛。

打了有點多廢話，那就介紹今天的主角吧。

Array

1. 以下方法(method)大部分會直接以範例呈現，比起看文字介紹，直接看怎麼用會比較快!
2. 以下順序不等於重要性排序，主要是自己學習及實戰過程中有用到的時候，就會特別記錄下來。
3. 程式碼都親自確認能夠運行，若還是有漏網之魚，歡迎留言告訴我。

宣告

var myArray = [];
myArray[0] = "apple";


var myArray2 = new Array();
myArray2 = ["dog", "cat", "bird"];


// 宣告同時給定初始值
var arr = new Array(123, '456', true);
var arr2 = [123, '456', true];

查看長度

var myArr = [1, 2, 3];
console.log(myArr.length); // 3

添加新元素到陣列尾端

範例: 將字串 banana 添加到陣列尾端

var myArr = ["apple"];
myArr.push("banana");
console.log(myArr); // ["apple", "banana"]

添加新元素到陣列前端

var myArr = ["apple"];
myArr.unshift("banana");
console.log(myArr); // ["banana", "apple"]

刪除最尾端元素

var myArr = ["apple", "banana"];
myArr.pop();
console.log(myArr); // ["apple"]

反轉陣列

var myArr = [1, 2, 3, 4, 5];
myArr.reverse();
console.log(myArr); // [5, 4, 3, 2, 1]

添加/刪除指定Index之元素

小提醒: 雖然很基本，但注意 Array index 是由 0 開始。

用法:

1. 第一個參數為指定位置
2. 第二個參數為刪除幾個元素
3. 第三個參數後可以新增元素

範例1: 刪除 myArr[1] 起(包含)的3個元素

var myArr = ["apple", "banana", "d", "e", "f"];
myArr.splice(1, 3);
console.log(myArr); // ["apple", "f"]

範例2: 新增 3 個元素到 myArr[1] 之前

var myArr = ["a", "e"];
myArr.splice(1, 0, "b", "c", "d");
console.log(myArr); // ["a", "b", "c", "d", "e"]

取出指定範圍的元素

用法:

1. 第一個參數為起始位置(包含)
2. 第二個參數為結束位置(不包含)

var myArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var newArr = myArr.slice(5, 8);
console.log(newArr); // [5, 6, 7]

查詢陣列中某元素位置(是否存在)

用法:

1. 第一個參數為要查找的元素值
2. 第二個參數為指定從哪裡開始找(可不加)
   => 找到則回傳元素在陣列中的位置(第一筆)
   => 若找不到則回傳 -1

var myArr = ["apple", "banana"];
if(myArr.indexOf("apple") != -1) {
  console.log("Find apple in myArr");
}

可以結合上面的 splice，

範例: 刪除陣列中的 apple

var myArr = ["apple", "banana", "orange"];
myArr.splice(myArr.indexOf("apple"), 1);
console.log(myArr) // ["banana", "orange"]

陣列合併

範例: 將陣列 b 添加到陣列 a 尾端

var a = ['a', 'b', 'c'];
var b = ['d', 'e', 'f'];
var c = a.concat(b);
console.log(c) // ["a", "b", "c", "d", "e", "f"]

陣列所有值組字串

var myArr = [1, 2, 3];
var myStr = myArr.join("");
console.log(myStr); // 123

呈上，也可以自訂義中間符，

var myStr = myArr.join("Y") // 1Y2Y3

For

都消化的差不多了嗎?

再接下去介紹以前，先來聊聊陣列怎麼取值操作吧，

最基本的就是，

var numbers = [1, 2, 3];
for(let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// 1
// 2
// 3

也可以用 for of

var numbers = [1, 2, 3];
for(var val of numbers){
  console.log(val);
}
// 1
// 2
// 3

Okay，It's a piece of cake

接下來看看陣列常用的 7 大天王！

forEach

用法和 for 差不多，但是每次執行除了傳入當前取的值，還會有它的 index 和 整個 array

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

map 迭代函數

與 forEach 相似，但會有回傳值

範例: 令一個新陣列，它的值是將原陣列所有數字 * 2

var numbers = [1, 2, 3, 4];
var newNumbers = numbers.map(function(item, index, array){
  return item * 2;
});
console.log(newNumbers); // [2, 4, 6, 8]

可是 map 不適合拿來過濾，

以下範例: 試圖取得所有原值大於 1，並將它們乘以 2，
但很明顯失敗了，因為 undefined 也會回傳。

var numbers = [1, 2, 3, 4];
var newNumbers = numbers.map(function(item, index, array){
  if(item > 1){
    return item * 2;
  }
});
console.log(newNumbers); // [undefined, 4, 6, 8]

可以回傳物件

var numbers = [1, 2, 3, 4];
var newNumbers = numbers.map(function(item, index, array){
  return {
    val: item * 100
  }
});
console.log(newNumbers);
// [
// {val: 100}
// {val: 200}
// {val: 300}
// {val: 400}
// ]

filter 過濾函數

回傳所有判斷結果為 true 的值

範例: 過濾出所有奇數

var numbers = [1, 2, 3, 4];
var newNumbers = numbers.filter(function(item, index, array){
  return (item % 2 != 0);
})
console.log(newNumbers); // [1, 3]

結合 map，

範例: 先取出所有奇數，再將其值乘以 2

var numbers = [1, 2, 3, 4];
var newNumbers = numbers.filter(function(item, index, array){
  return(item % 2 != 0);
})
.map(function(item){
  return item * 2;
});
console.log(newNumbers); // [2, 6]

find

與 filter 原理相同，但差別在 find 只會回傳第一個為 true 的結果。

範例: 過濾出所有奇數
看到了嗎，只有取出第一個符合的值而已，也就是 1。

var numbers = [1, 2, 3, 4];
var newNumbers = numbers.find(function(item, index, array){
  return(item % 2 != 0);
})
console.log(newNumbers); // 1

every

檢查所有判斷結果，全為 true 則 return true，有一個 false 則 return false。

範例: 檢查是否所有數字都是偶數

var numbers = [1,2,3,4];
var allNumbersAreEven = numbers.every(function(item, index, array){
  return(item % 2 == 0);
})

if(allNumbersAreEven) {
  console.log("All numbers are even");
} else {
  console.log("No"); // print this
}

some

檢查所有判斷結果，只要有一個 true 則 return true。

範例: 檢查是否有一個數字為偶數

var numbers = [1, 2, 3, 4];
var someNumbersAreEven = numbers.some(function(item, index, array){
  return(item % 2 == 0);
})

if(someNumbersAreEven) {
  console.log("Some numbers are even"); // print this
} else {
  console.log("No");
}

reduce 累計函數

一樣對陣列進行遍歷操作，但會將每回合 return 的值，傳入下一回合，所以可以用來加總。

1. val 為前一個 reduce return 的值，但第一回合執行時並沒有前一個回傳值，
   => 所以在 , 後面加上 val 初始值。
2. 而 item 則為當前取出的陣列值。

var numbers = [1, 2, 3, 4];
var total = numbers.reduce(function(val, item){
  return val + item;
}, 0);

console.log("The sum is " + total); // 10

今日的分享就到這，有點多，但還沒分享完，明天會補上 ES6 相關的操作。
我們明天見