[快速入门前端 56] JavaScript：Array 阵列 (3) 常见阵列操作方法

常见操作方法

在 上篇 阵列相关文章中我们已经大致了解简单的操作方法，但其实在 JavaScript 阵列中还有更多元的方法可以使用，不过有些牵涉到 Function 的概念，所以在文章顺序上可能怪怪的
话不多说，接下来就开始正式介绍常见的阵列操作啦~

回传符合条件的元素或索引

find()

find() 会回传第一个符合判断条件的元素值，或没有符合条件的元素则回传 undefined，只会回传不会改变原始阵列。
範例：

let array = [1, 3, 2];let ans = array.find(item => item > 1);console.log(ans); // 3

findIndex()

findIndex() 会回传第一个符合判断条件的元素索引值，或没有符合条件的元素则回传 -1，只会回传不会改变原始阵列。
範例：

let array = [1, 3, 2];let ans = array.findIndex(item => item > 1);console.log(ans); // 1 (第一个符合条件的元素为 3， index 为 1)

filter()

filter() 会将阵列中每一项带入函式内做筛选判断，若元素符合条件则会回传成一个新的阵列，不会改变原始阵列。
範例：

let array = [1, 3, 2];let ans = array.filter(item => item > 1);console.log(ans); // [3, 2]

迴圈处理

forEach()

forEach() 会将阵列内的每个元素传入并执行给定的函式一次，没有回传值。简单来说有点像迴圈的概念，自动帮你遍历阵列中的每一项，让你做操作。forEach() 的函式中有三个参数，第一个必要参数是 该项的值，后两项参数则分别为 该项的索引值 及 原始阵列。
範例：

let array = [1, 3, 2];// 印出每项的值array.forEach((item, index, array) => {    console.log(item); // 执行三次分别为 1, 3, 2});

在实际开发中我们也很常使用 forEach 进行阵列的运算：

let array = [1, 3, 2];// 阵列加总let total = 0; // 初始化总和为 0array.forEach((item, index, array) => {    console.log(item); // 阵列每项的值    total += item; // 将值加到 total 中});console.log(total); // 6// 将阵列每项值 +1array.forEach((item, index, array) => {    console.log(item); // 阵列每项的值    console.log(array[index]); // array[index] 也可以取出每项的值    array[index] = item + 1; // 指定阵列第 index 索引值比原本 +1});console.log(array); // [2, 4, 3] (原始阵列每项 +1)

map()

map() 会回传由 callback function 运算后的结果并组成新的阵列，简单来说 map 的功能跟 foreach 蛮像的，都是遍历一遍阵列的项目，也同样也都有 值、索引值、原始阵列 三个参数，只是 map 需要有 return 值来组成新的阵列。
範例：

let array1 = [1, 2, 3];// 将阵列 array1 中每一项值 +10 放到阵列 array2 中// 普通函式let array2 = array1.map(function(item) {    return item + 10; // 将每一项值 +10});console.log(array2); // [11, 12, 13]// 箭头函式let array2 = array1.map( item => { // 使用箭头函式时若只有一个参数可以省略括号，若多个参数则要写成 (item, index, array) => {}    return item + 10; // 将每一项值 +10});console.log(array2); // [11, 12, 13]

阵列拼接、转换、撷取

join()

join() 语法为 array.join();，会将阵列中所有元素值藉由指定的字串或字符合併在一起变成字串，若没有指定字符预设为「逗号」。
範例：

let array = [1, 2, 3];// 若不指定则使用逗号连接console.log(array.join()); // 1,2,3// 指定字符连接console.log(array.join('-')); // 1-2-3console.log(array.join('和')); // 1和2和3

toString()

阵列一样可以使用 toString 将其转为字串型态，但在使用上 join() 的弹性较高。

concat()

concat() 语法为 array.concat(array2);，会合併两个或以上的阵列及值并回传成一个新的阵列。
範例：

let array1 = [1, 2, 3];let array2 = [4, 5, 6];let array3 = ['hi', 'amy'];console.log(array1.concat(array2)); // [1, 2, 3, 4, 5, 6]console.log(array1.concat(array2, array3)); // [1, 2, 3, 4, 5, 6, 'hi', 'amy']console.log(array1.concat('1', 22)); // [1, 2, 3, '1', 22]

slice()

slice() 的语法为 array.slice(index1, index2) 会撷取阵列索引值 index1 到 index2 的内容成为新的阵列，而若结束索引值为负数，则是「倒数」的意思，array.slice(1, -1) 即为「撷取原始阵列索引 1 到 "倒数" 的索引 1 (倒数第二项) 」并组成新阵列。
範例：

let array = [1, 2, 3, 'hi', '123'];console.log(array.slice(1, 3)); // [2, 3]console.log(array.slice(1, -1)); // [2, 3, 'hi']

上一篇：[快速入门前端 55] JavaScript：Global Scope 全域和 Local Scope 区域
下一篇：[快速入门前端 57] JavaScript：常见的内建函式 (1) Math
系列文章列表：[快速入门前端] 系列文章索引列表