最近面试有道题是至少写出 15 个数组方法，数组方法平时经常用到的也就6-7个，突然要一下子写出15个，还是有点卡壳了，今天整理一波，日后好复习。
Array.map()
map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
const list = [:tired_face:, :tired_face:, :tired_face:, :tired_face:];
list.map((:white_circle:️) => :grinning:); // [:grinning:, :grinning:, :grinning:, :grinning:]
const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]Array.filter()
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:];
list.filter((:white_circle:️) => :white_circle:️ === :grinning:); // [:grinning:, :grinning:]
// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]Array.reduce()
reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.reduce((:white_large_square:️, :white_circle:️) => :white_large_square:️ + :white_circle:️); // :grinning: + :tired_face: + :grinning: + :tired_face: +
// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15Array.reduceRight()
reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.reduceRight((:white_large_square:️, :white_circle:️) => :white_large_square:️ + :white_circle:️); // + :tired_face: + :grinning: + :tired_face: + :grinning:
// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15Array.fill()
fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.fill(:grinning:); // [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:]
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]Array.find()
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.find((:white_circle:️) => :white_circle:️ === :grinning:); // :grinning:
list.find((:white_circle:️) => :white_circle:️ === :stuck_out_tongue_closed_eyes:); // undefined
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefinedArray.indexOf()
indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.indexOf(:grinning:); // 0
list.indexOf(:rage:); // -1
// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1lastIndexOf()
arr.lastIndexOf(searchElement[, fromIndex])方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.lastIndexOf(:grinning:); // 3
list.lastIndexOf(:grinning:, 1); // 0
// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1Array.findIndex()
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.findIndex((:white_circle:️) => :white_circle:️ === :grinning:); // 0
// You might be thinking how it's different from `indexOf`
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3
// OR
const array = [{
id: :grinning:
}, {
id: :tired_face:
}, {
id:
}];
array.findIndex((element) => element.id === ); // 2Array.includes()
includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.includes(:grinning:); // true
// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // falseArray.pop()
pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.pop(); //
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:]
// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]Array.push()
push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.push(:rage:); // 5
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:, , :rage:]
// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]Array.shift()
shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ]; list.shift(); // :grinning: list; // [:tired_face:, :grinning:, :tired_face:, ]
// Code const list = [1, 2, 3, 4, 5]; list.shift(); // 1 list; // [2, 3, 4, 5]Array.unshift()
unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.unshift(:rage:); // 6
list; // [:rage:, :grinning:, :tired_face:, :grinning:, :tired_face:, ]
// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]Array.splice()
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.splice(1, 2); // [:grinning:, :tired_face:]
list; // [:grinning:, :tired_face:, ]
// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]Array.slice()
slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin，不包括end)。原始数组不会被改变。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.slice(1, 3); // [:tired_face:, :grinning:]
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:, ]
// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]Array.join()
join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.join(':wavy_dash:'); // ":grinning::wavy_dash::tired_face::wavy_dash::grinning::wavy_dash::tired_face::wavy_dash: "
// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"Array.reverse()
reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.reverse(); // [ , :tired_face:, :grinning:, :tired_face:, :grinning:]
list; // [ , :tired_face:, :grinning:, :tired_face:, :grinning:]
// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]Array.sort()
sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.sort(); // [:grinning:, :grinning:, :tired_face:, :tired_face:, ]
// This make more sense
const array = ['D', 'B', 'A', 'C'];
array.sort(); // :grinning: ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // :anguished: [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // :grinning: [1, 2, 3, 4, 10]Array.some()
some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.some((:white_circle:️) => :white_circle:️ === :grinning:); // true
list.some((:white_circle:️) => :white_circle:️ === :rage:); // false
// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // falseArray.every()
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.every((:white_circle:️) => :white_circle:️ === :grinning:); // false
const list = [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:];
list.every((:white_circle:️) => :white_circle:️ === :grinning:); // true
// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false
const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // trueArray.from()
Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
const list = :grinning::tired_face::grinning::tired_face: ;
Array.from(list); // [:grinning:, :tired_face:, :grinning:, :tired_face:, ]
const set = new Set([':grinning:', ':tired_face:', ':grinning:', ':tired_face:', ' ']);
Array.from(set); // [:grinning:, :tired_face:, ]
const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]Array.of()
Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组(注意：这是指一个有7个空位(empty)的数组，而不是由7个 undefined 组成的数组)。
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]Array.isArray()
Array.isArray() 用于确定传递的值是否是一个 Array。
Array.isArray([:grinning:, :tired_face:, :grinning:, :tired_face:, ]); // true
Array.isArray( ); // false
// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // falseArray.at()
at() 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.at(1); // :tired_face:
// Return from last
list.at(-1); //
list.at(-2); // :tired_face:
// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4copyWithin()
arr.copyWithin(target[, start[, end]])方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.copyWithin(1, 3); // [:grinning:, :grinning:, , :tired_face:, ]
const list = [:grinning:, :tired_face:, :grinning:, :tired_face:, ];
list.copyWithin(0, 3, 4); // [:tired_face:, :tired_face:, :grinning:, :tired_face:, ]
// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]Array.flat()
var newArray = arr.flat([depth])
// depth 可选:指定要提取嵌套数组的结构深度，默认值为 1。flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:, ]];
list.flat(Infinity); // [:grinning:, :tired_face:, :grinning:, :tired_face:, ]
// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]Array.flatMap()
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:, ]];
list.flatMap((:white_circle:️) => [:white_circle:️, :white_circle:️ + :white_circle:️ ]); // [:grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:, :grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:, , ]
// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]探索JavaScript数组奥秘
avaScript数组同后端语言一样，具有它自己的数据结构，归根结底，这种数据结构，本质就是一种集合。在后端语言中(如java,.net等)，数组是这样定义的：数组是用来存储相同数据类型的集合
js使用数组+循环+条件实现数字转换为汉字的简单方法。
单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说，这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。
[译]async-await 数组循环的几个坑
在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单，但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子，看看你应该注意什么，以及哪个循环最适合特定用例。
数组、字符串去重
今天说的数组和字符串去重呢，主要用到es6新的数据结构 Set，它类似于数组，但是成员的值都是唯一的，没有重复的值，所以活用Set来进行数组和字符串的去重。
JavaScript 数组方法
数组方法：1、Array.join([param]) 方法：将数组中所有的元素都转换为字符串并连接起来，通过字符 param 连接，默认使用逗号，返回最后生成的字符串2、Array.reverse() 方法：将数组中的元素颠倒顺序（在原数组中重新排列它们），返回逆序数组
如何删除JavaScript 数组中的虚值
falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值，比如：在条件语句或者循环语句中。
JavaScript中十种一步拷贝数组的方法
JavaScript中我们经常会遇到拷贝数组的场景，但是都有哪些方式能够来实现呢，我们不妨来梳理一下。扩展运算符（浅拷贝）自从ES6出现以来，这已经成为最流行的方法。
JS数组的几个经典api
本文主要来讲数组api的一些操作，如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()
关于Vue不能监听（watch）数组变化
vue无法监听数组变化的情况，但是数组在下面两种情况下无法监听：利用索引直接设置数组项时，例如arr[indexofitem]=newValue；修改数组的长度时，例如arr.length=newLength
JS计算两个数组的交集、差集、并集、补集（多种实现方式）
使用 ES5 语法来实现虽然会麻烦些，但兼容性最好，不用考虑浏览器 JavaScript 版本，使用 ES5 语法来实现虽然会麻烦些，但兼容性最好，不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!