在前端的日常開發中，數組使用的頻率非常高，所以充分熟悉各種常見的方法後，能提升工作的效率。

1. 基本語法

數組有三種創建的方法:

//第一種 []
var arr0 = [element0, element1, ..., elementN]
//第二種 構造函數
var arr1 = new Array(element0, element1[, ...[, elementN]])
//第三種 構造函數
var arr2 = new Array(arrayLength)

2. 遍歷數組

我們時常會需要對一個array進行遍歷，進而針對每個元素進行操作。

1. for

某些情況下會使用for --- 當循環滿足某種條件下，跳出循環，或是跳出本次循環進入下一個循環。

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < arr.length; i++) {
  // 當 i == 3 時，跳過此次循環進入下次
  if (i == 3) continue;
  console.log(arr[i]);
  // 當 i > 7 時，跳出循環
  if (i > 7) break;
}

// 0
// 1
// 2
// 4
// 5
// 6
// 7
// 8

2. forEach

語法如下

arr.forEach(callback[, thisArg]);

參數說明:

• currentValue : 當前的值
• index : 可選，當前的索引
• array : 可選，forEach正在操作的數組
• thisArg : 可選，當執行callback時，this的值

let a = 123;
let b = {a:456};
(function() {
  let arr = [0, 1, 2];
  arr.forEach(function(item){
    console.log(this.a);// 這裡是指向b.a
  },b);//b作為thisArg參數傳入後，this就指向了b
})();

// 456
// 456
// 456

注意，如果使用箭頭函數來傳入thisArg參數會被忽略，因為箭頭函數綁訂了this值。

let a = 123;
let b = {a:456};
(function() {
  let arr = [0, 1, 2];
  arr.forEach((item)=>{
    console.log(this.a);// 這裡是window.a
  },b);//這裡把b作為thisArg參數傳入之後，本来this應該指向b，但因為使用了箭頭函數表達式，this固定指向包含此函数的外層作用域（也即匿名函数）的this，也就是window
})();

//>> 123
//>> 123
//>> 123

3. map

map與forEach相似，只是map會返回一個新的數組，數組內的每一個element都是callback function return的值，所以可以用一個變數去接map的返回值。

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const arr1 = arr.map(item => item + 1);
console.log(arr1);
// [1,2,3,4,5,6,7,8,9,10]

const arr2 = arr.map(item => {item + 1});// 如果沒有return任何的值
console.log(arr2);
//輸出一個皆是undefined的數組
//>> [undefined, undefined, …… undefined]

4. for..in與for..of

for..in是遍歷數組的索引，而for...of是遍歷數組的值。for..of遍歷的只是數組內屬性的值，而不包含數組的原型屬性跟方法。

Array.prototype.getLength = function () {
   return this.length;
}
let arr = [1, 2, 4, 5, 6, 7]
arr.name = "ownArray";
console.log("for...of");
for (let value of arr) {
   console.log(value);
}
console.log("for...in");
for (let key in arr) {
   console.log(key);
}

//  for...of
//  1
//  2
//  4
//  5
//  6
//  7
//  for...in
//  0
//  1
//  2
//  3
//  4
//  5
//  name
//  getLength

可以發現，for..in是可以遍歷到原型上的屬性和方法，如果不想遍歷原型的屬性和方法，可以在循完內部使用hasOwnProperty方法判斷某屬性是否為該object的屬性。

Array.prototype.getLength = function () {
   return this.length;
}
let arr = [1, 2, 4, 5, 6, 7]
arr.name = "ownArray";
console.log("for...in");
for (let key in arr) {
   if(arr.hasOwnProperty(key))
      console.log(key);
}
//  for...in
//  0
//  1
//  2
//  3
//  4
//  5
//  name

與forEach不同，for..of與for..in都可以使用break,continue,return等語句。