Javascript 数组方法汇总整理
01、Array.map()
返回一个新数组，其中包含对该数组中每个元素调用提供的函数的结果。补充说明在第35条
// Code
const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]02、Array.filter()
返回一个新数组，其中包含通过所提供函数实现的测试的所有元素。
// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]03、Array.reduce()
将数组减少为单个值。函数返回的值存储在累加器中（结果 / 总计）。
参数： callback: previousValue 必选 -- 上一次调用回调返回的值，或者是提供的初始值（initialValue）
currentValue 必选 -- 数组中当前被处理的数组项
index 可选 -- 当前数组项在数组中的索引值
array 可选 -- 原数组
initialValue: 可选 -- 初始值
实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且 curValue 等于数组中的第一个值；如果 initialValue 未被提供，那么 preValue 等于数组中的第一个值
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15
PS：reduce 的高级用法
（1）计算数组中每个元素出现的次数
let names = ['peter', 'tom', 'mary', 'bob', 'tom','peter'];
let nameNum = names.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(nameNum); //{ peter: 2, tom: 2, mary: 1, bob: 1 }（2）数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
}else{
return pre
}
},[])
console.log(newArr);// [1, 2, 3, 4]（3）将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]04、Array.reduceRight()
对数组的每个元素执行一个你提供的 reducer 函数，从而产生一个输出值（从右到左）,与 arr.reduce() 功能一样，不同的是，reduceRight() 从数组的末尾向前将数组中的数组项做累加。
ps：(如果对这两个方法不明白，可以查看实例 http://www.w3cplus.com/javascript/array-part-8.html)
// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 1505、Array.fill()
用静态值填充数组中的元素。
参数：target -- 待填充的元素
start -- 开始填充的位置 - 索引
end -- 终止填充的位置 - 索引（不包括该位置)
// Code
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]06、Array.find()
返回数组中满足提供的测试函数的第一个元素的值。否则返回未定义。
// Code
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined07、Array.indexOf()
返回可以在数组中找到给定元素的第一个索引，如果不存在则返回 -1。
// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -108、Array.lastIndexOf()
返回可以在数组中找到给定元素的最后一个索引，如果不存在，则返回 -1。从 fromIndex 开始向后搜索数组。
// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -109、Array.findIndex()
返回数组中满足提供的测试函数的第一个元素的索引。否则，返回 -1。
const list = [😀, 😫, 😀, 😫, 🤪];
list.findIndex((⚪️) => ⚪️ === 😀); // 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: 😀
}, {
id: 😫
}, {
id: 🤪
}];
array.findIndex((element) => element.id === 🤪); // 210、Array.includes()
如果给定元素存在于数组中，则返回 true。
// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // falsePS:对象数组不能使用includes方法来检测，空数组也无法调用includes。
解决办法: 结合JSON.stringify()序列化为字符串后再判断
JSON.stringify(arr).includes(JSON.stringify(obj))
11、Array.pop()
从数组中删除最后一个元素并返回该元素。
// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]12、Array.push()
将新元素追加到数组的末尾，并返回新的长度。
// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]13、Array.shift()
从数组中删除第一个元素并返回该元素。
// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]14、Array.unshift()
将新元素添加到数组的开头，并返回新长度。
// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]15、Array.splice()
通过删除或替换现有元素和 / 或在适当位置添加新元素来更改数组的内容。
// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]16、Array.slice()
将数组的一部分的浅拷贝返回到从开始到结束（不包括结束）选择的新数组对象中，原始数组不会被修改。
// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]17、Array.join()
将数组的所有元素连接成一个字符串。
// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"18、Array.reverse()
反转数组中元素的顺序。
// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]19、Array.sort()
对数组的元素进行就地排序并返回该数组。默认排序顺序是根据字符串 Unicode 代码点。
const list = [😀, 😫, 😀, 😫, 🤪];
list.sort(); // [😀, 😀, 😫, 😫, 🤪]
// This make more sense 🤔
const array = ['D', 'B', 'A', 'C'];
array.sort(); // 😀 ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // 😧 [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // 😀 [1, 2, 3, 4, 10]20、Array.some()
如果数组中至少有一个元素通过了提供的函数实现的测试，则返回 true。
// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false21、Array.every()
如果数组中的所有元素都通过了提供的函数实现的测试，则返回 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); // true22、Array.from()
从类数组或可迭代对象创建一个新数组。伪数组变成数组，就是只要有 length 的就可以转成数组。 ---es6
const list = 😀😫😀😫🤪;
Array.from(list); // [😀, 😫, 😀, 😫, 🤪]
const set = new Set(['😀', '😫', '😀', '😫', '🤪']);
Array.from(set); // [😀, 😫, 🤪]
const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]23、Array.of()
使用可变数量的参数创建一个新数组，而不管参数的数量或类型,将一组值转换成数组，类似于声明数组 ---es6
const list = Array.of(😀, 😫, 😀, 😫, 🤪);
list; // [😀, 😫, 😀, 😫, 🤪]
// Code
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]24、Array.isArray()
如果给定值是一个数组，则返回 true。
// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false25、Array.at()
返回指定索引处的值。
const list = [😀, 😫, 😀, 😫, 🤪];
list.at(1); // 😫
// Return from last 🤔
list.at(-1); // 🤪
list.at(-2); // 😫
// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 426、Array.copyWithin()
复制数组中的数组元素(在当前数组内部，将制定位置的数组复制到其他位置，会覆盖原数组项)。返回修改后的数组。
const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(1, 3); // [😀, 😀, 🤪, 😫, 🤪]
const list = [😀, 😫, 😀, 😫, 🤪];
list.copyWithin(0, 3, 4); // [😫, 😫, 😀, 😫, 🤪]
// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]注意：
第一个参数是开始复制元素的目标。
第二个参数是开始复制元素的索引。默认为 0. 如果为负值，则从右往左读。
第三个参数是停止复制元素的索引。默认是 Array.length, 如果是负值，表示倒数
27、Array.flat()
返回一个新数组，其中所有子数组元素递归连接到指定深度。
const list = [😀, 😫, [😀, 😫, 🤪]];
list.flat(Infinity); // [😀, 😫, 😀, 😫, 🤪]
// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]28、Array.flatMap()
返回通过将给定的回调函数应用于数组的每个元素而形成的新数组，
const list = [😀, 😫, [😀, 😫, 🤪]];
list.flatMap((⚪️) => [⚪️, ⚪️ + ⚪️ ]); // [😀, 😀😀, 😫, 😫😫, 😀, 😀😀, 😫, 😫😫, 🤪, 🤪🤪]
// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]29、Arr.keys()
遍历数组的键名 //数组对象中常用
let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
console.log(key); // 0,1,2,3
}30、Arr.values()
遍历数组键值 //数组对象中常用
let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
console.log(val); // 1,2,3,4
}31、Arr.entries()
遍历数组的键名和键值 //数组对象中常用
let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
console.log(e); // [0,1] [1,2] [2,3] [3,4]
}entries() 方法返回迭代数组。迭代数组中每个值 前一个是索引值作为 key， 数组后一个值作为 value。
32、Arr.includes()
判断数中是否包含给定的值
let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)
console.log(arr1) // ture
let arr2 = arr.includes(9)
console.log(arr2) // false
let arr3 = [1,2,3,NaN].includes(NaN)
console.log(arr3) // trueps: 与 indexOf() 的区别：
1 indexOf() 返回的是数值，而 includes() 返回的是布尔值
2 indexOf() 不能判断 NaN，返回为 - 1 ，includes() 则可以判断
33、Arr.concat()
连接两个数组 返回值为连接后的新数组
let arr = [1,2,3,4,5]
console.log(arr.concat([1,2])) // [1,2,3,4,5,1,2]
console.log(arr) // [1,2,3,4,5]34、Arr.forEach(callback)
遍历数组, 无 return 即使有 return，也不会返回任何值，并且会影响原来的数组
callback 的参数： value -- 当前索引的值
index -- 索引
array -- 原数组
var arr = [1,2,3,4];
var res = arr.forEach((item,index,arr)=>{
arr[index] = item * 2;
return arr
})
console.log(arr); // [2,4,6,8]
console.log(res); // undefined35、Arr.map(callback)
映射数组 (遍历数组), 有 return 返回一个新数组 。
callback 的参数： value -- 当前索引的值
index -- 索引
array -- 原数组
let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
value = value * 2
console.log(`value:${value} index:${index} array:${array}`)
})
console.log(arr)
var arr1 = [1,2,3,4];
var res1 = arr1.map((item,index,arr)=>{
item = item * 3;
return item;
})
console.log(arr1); // [1,2,3,4]
console.log(res1); // [3,6,9,12]ps: arr.forEach() 和 arr.map() 的区别
1. arr.forEach() 是和 for 循环一样，是代替 for。arr.map() 是修改数组其中的数据，并返回新的数据。
2. arr.forEach() 没有 return arr.map() 有 return
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
