[Day23] Array methods 阵列操作方法(1)

前面在讲物件型别的时候只稍微谈到阵列，而其实阵列包含很多种 methods 可以运用，这篇要来练习阵列的操作方法，让我们来看看郑列工具人可以做到哪些事。
关於怎麽当工具人，有兴趣请详见追求JS小姊姊系列 Day6～Day8 郑列展现的工具力（上中下）
因为会提到 index(索引值)先复习一下 length 这个 Properties，例如我们建立一个 menu 阵列，然後透过 length 可以看里面有几个品项：

let menu = ["red tea", "green tea", "oolong tea", "milk tea"];
console.log(menu.length); // 4

// 透过 index 取得阵列里的项目
let first = menu[0]; 
console.log(first); // red tea

let last = menu[menu.length - 1] // 因为索引值是从零开始所以要减 1
console.log(last); // milk tea

indexOf()、lastIndexOf()

indexOf() 可以判断阵列里是否包含需要的值，判断方式由左而右，有的话回传索引值，没有的话回传 -1，有两个参数，第一个是值，第二个是从哪个索引值开始(预设为 0)，而 lastIndexOf() 跟 indexOf() 一样，只是差在由右而左。

let numarr = [4, 6, 7, 87, 8, 9, 54, 80];
numarr.indexOf(54); // 6，索引值
numarr.lastIndexOf(7); // 2，索引值

find()

将阵列里每个元素带入指定的函式然後做判断，回传第一个符合条件的元素，如果都没有则回传 undefined。

let numarr = [4, 6, 7, 8, 9, 12, 13];
numarr.find(a => a > 9); // 12
numarr.find(a => a < 3); // undefined

findIndex()

findIndex() 和 find() 相同，差别在他回传的是索引值。第一个大於 3 的是 6 位於 numarr[2]，而因为 numarr 内没有比 0 小的值，所以回传 [-1]。

let numarr = [1,2,6,8,9,10,11,16];
numarr.findIndex(a => a > 3); // 2
numarr.findIndex(e => a < 0)); // -1

forEach()

迭代阵列，用 forEach() 方法会将阵列内的每个元素，皆传入并执行给定的函式一次。

menu.forEach(function (item, index, array) {
  console.log(item, index);
});
// red tea 0
// green tea 1
// oolong tea 2
// milk tea 3

这个 callback 函式将会把 Array 中的每一个元素作为参数，带进本 callback 函式里，每个元素各执行一次，接收三个参数：

• 元素值(必填)
• 索引值(选择性)
• 阵列本身(选择性)
• thisArg(选择性)

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

参考资料

Array-MDN