4.5 陣列迭代(Iteration)

在 javascript/practice 資料夾下，建立 array_iteration.html 檔案，以便練習。

以下各迭代範例，同學都需要實際執行過並且會解讀。

Array.forEach()

陣列的每個項目，都依序地跑過執行指定的程式：

• value：陣列的值。

• index：陣列索引，從 0 開始。

var numbers = [45, 4, 9, 16, 25];
numbers.forEach(function(value, index){ // 參數若沒有用到，可以省略不寫
  console.log(value);
});

Array.map()

陣列裡的每個項目，都執行特定程式，要有回傳值(return)，然後會產生新的陣列，原陣列並不會被影響。例：

var numbers = [45, 4, 9, 16, 25];
var numbers2 = numbers.map(function(value, index){
  return value * 2;
});

console.log(numbers); // [45, 4, 9, 16, 25]
console.log(numbers2); // [90, 8, 18, 32, 50]

如果不靠內建的 map() 函式，自己寫邏輯的話，例：

var numbers = [45, 4, 9, 16, 25];
var new_numbers = [];
for(let i = 0; i < numbers.length; i++){
  new_numbers.push( numbers[i] * 2 );
}

console.log(new_numbers);

Array.filter()

按照指定的過濾條件，回傳新的陣列，不會影響原來的陣列。例：

var numbers = [
  {
    id: 1,
    num: 45
  },
  {
    id: 2,
    num: 4
  },
  {
    id: 3,
    num: 9
  },
  {
    id: 4,
    num: 16
  },
  {
    id: 5,
    num: 25
  }
];

var over18 = numbers.filter(function(item, index){
  return item.num > 18;
});

console.log(numbers);
console.log(over18); // [{id: 1, num: 45}, {id: 5, num: 25}]

Array.every()

依序跑過每個陣列項目，如果陣列裡的每一項，都符合指定的條件，那就回傳 true；反之，只要有一個不符合，就回傳 false。例：

var numbers = [
  {
    id: 1,
    num: 45
  },
  {
    id: 2,
    num: 4
  },
  {
    id: 3,
    num: 9
  },
  {
    id: 4,
    num: 16
  },
  {
    id: 5,
    num: 25
  }
];

var all_over18 = numbers.every(function(item, index){
  return item.num > 18;
});

console.log(all_over18); // false

Array.some()

依序跑過每個陣列項目，如果陣列裡的每一項，只要有一項符合指定的條件，那就回傳 true；反之，如果都不符合，就回傳 false。例：

var numbers = [
  {
    id: 1,
    num: 45
  },
  {
    id: 2,
    num: 4
  },
  {
    id: 3,
    num: 9
  },
  {
    id: 4,
    num: 16
  },
  {
    id: 5,
    num: 25
  }
];

var all_over18 = numbers.some(function(item, index){
  return item.num > 18;
});

console.log(all_over18); // true

Array.indexOf()

在陣列中找一個元素，找到第一個出現的位置：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var position = fruits.indexOf("Apple");

console.log("索引位置：" + position); // 索引位置：0

Array.lastIndexOf()

在陣列中找一個元素，從後面開始找，找到第一個出現的位置：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var position = fruits.lastIndexOf("Apple");

console.log("索引位置：" + position); // 索引位置：2

Array.find()

回傳第一個找到符合條件的那項：

var numbers = [
  {
    id: 1,
    num: 45
  },
  {
    id: 2,
    num: 4
  },
  {
    id: 3,
    num: 9
  },
  {
    id: 4,
    num: 16
  },
  {
    id: 5,
    num: 25
  }
];

var first = numbers.find(function(item, index){
  return item.num > 18;
});

console.log(first); // {id: 1, num: 45}

Array.findIndex()

回傳第一個找到符合條件的那項的索引值：

var numbers = [
  {
    id: 1,
    num: 45
  },
  {
    id: 2,
    num: 4
  },
  {
    id: 3,
    num: 9
  },
  {
    id: 4,
    num: 16
  },
  {
    id: 5,
    num: 25
  }
];

var first = numbers.findIndex(function(item, index){
  return item.num > 18;
});

console.log(first); // 0