js 数组方法总结 之 一道面试题引发的思考

在前端面试当中高频出现的一道面试题，让我产生了把js数组的方法总结一下的念头，呐，就是下面这道题目！看了解析先别撤哦，后面留了几道提升题目，你值得拥有（皮这一下很开心~~）

[1, 2, 3].map(parseInt);

// 解析：

[1, 2, 3].map((item, index, arr) => parseInt(item, index));

parseInt(1, 0); // 1

parseInt(2, 1); // NaN

parseInt(3, 2); // NaN

// 故：结果为 [1, NaN, NaN]

// 考点分析：

map(function(currentValue, index, arr){})方法回调函数的参数

// currentValue 当前元素的值

// index 当前元素的索引值

// arr 原数组

parseInt(string, radix) 函数的参数

// radix该值介于 2 ~ 36 之间,如果省略该参数或其值为 0，则数字将以 10 为基础来解析

// 如果它以 “0x” 或 “0X” 开头，将以 16 为基数

// 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN

由此看出，主要是考察对数组方法的熟悉程度，接下来，我们一起回顾下数组的方法。特别需要是否改变原数组这一点，会对我们的变成带来意想不到的副作用。

转化方法

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.toString()	将数组转换为一个以逗号分隔的字符串	否	字符串	[1, 2, 3].toString() → "1,2,3"
.valueOf()	返回数组对象的原始值（仍为数组本身）	否	数组	[1, 2, '3'].valueOf() → [1, 2, "3"]
.join(separator)	用指定的分隔符连接数组元素成为字符串	否	字符串	[1, 2, 3].join('-') → "1-2-3"

栈方法（LIFO）

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.push(element1[, ...elements])	在数组末尾添加元素	是	新数组长度	[1, 2].push(3) → 3, 数组：[1, 2, 3]
.pop()	移除并返回数组的最后一个元素	是	移除的元素	[1, 2].pop() → 2, 数组：[1]

队列方法

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.unshift(element1[, ...elements])	在数组开头添加元素	是	新数组长度	[1, 2].unshift(0) → 3, 数组：[0, 1, 2]
.shift()	移除并返回数组的第一个元素	是	移除的元素	[1, 2].shift() → 1, 数组：[2]

重排方法

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.sort([compareFunction])	对数组元素进行排序，可选自定义比较函数	是	排序后的数组	[1, 3, 11, 2].sort((a, b) => a - b) → [1, 2, 3, 11]
.reverse()	颠倒数组中元素的顺序	是	颠倒后的数组	[1, 2, 3].reverse() → [3, 2, 1]

操作方法

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.concat(array2[, ...arrays])	连接两个或更多数组，并返回新数组	否	新数组	[1, 2].concat([3, 4]) → [1, 2, 3, 4]
.splice(start[, deleteCount[, ...items]])	在数组中添加/删除项目，并返回被删除的元素数组	是	被删除的元素数组	[1, 2].splice(0, 1) → [1] [1, 2].splice(0, 0, 3) → [], 数组：[1, 2, 3]
.slice(start[, end])	提取原数组的一部分，并返回一个新的数组	否	新数组	[1, 2, 3, 4].slice(1, 3) → [2, 3]

位置方法

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.indexOf(searchElement[, fromIndex])	查找数组中指定元素首次出现的位置，未找到返回-1	否	索引或-1	[1, 2, 3].indexOf(3) → 2
.lastIndexOf(searchElement[, fromIndex])	从数组末尾向前查找指定元素最后一次出现的位置，未找到返回-1	否	索引或-1	[1, 2, 3].lastIndexOf(3) → 2

迭代方法

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.every(callback[, thisArg])	判断数组的所有元素是否都满足测试函数，都满足则返回true	否	boolean	[1, 2, 3].every(item => item > 0) → true
.some(callback[, thisArg])	判断数组中是否存在至少一个元素满足测试函数，存在则返回true	否	boolean	[1, 2, 3].some(item => item > 2) → true
.filter(callback[, thisArg])	根据测试函数过滤数组元素，并返回符合条件的新数组	否	新数组	[1, 2, 3].filter(item => item > 2) → [3]
.forEach(callback[, thisArg])	对数组中的每个元素执行给定函数，无返回值	否	无返回值	N/A
.map(callback[, thisArg])	遍历数组，对每个元素执行给定函数，并返回处理后的新数组	否	新数组	[1, 2, 3].map(item => item * 2) → [2, 4, 6]

归并方法

方法名	功能描述	是否改变原数组	返回结果	示例代码及输出
.reduce(callback[, initialValue])	从左到右遍历数组，累积计算结果，返回单一最终值	否	累计结果	[1, 2, 3].reduce((prev, cur) => prev + cur) → 6
.reduceRight(callback[, initialValue])	从右到左遍历数组，累积计算结果，返回单一最终值	否	累计结果	[1, 2, 3].reduceRight((prev, cur) => prev + cur) → 6

测试题

[1, 2, 3].map(parseInt);    // [1, NaN, NaN]

==> [1, 2, 3].map((item, index, arr) => parseInt(item, index));

[1, 2, 3].filter(parseInt); // [1]

[1, 2, 3].every(parseInt);  // false

[1, 2, 3].some(parseInt);   // true

[1, 2, 3].reduce(parseInt); // 1

==> [1, 2, 3].reduce((prev, cur) => parseInt(prev, cur))