JavaScript数组方法合集

[qppq54s]

ES3

pop 移除数组末尾的元素

let a = [5,6];
a.pop(); // 6
a // [5];

push 向数组末尾添加元素

let a = [5,6];
a.push(7); // 7
a // [5, 6, 7];

reverse 反转数组

let a = [5,6];
a.reverse(); // [6,5]
a // [6,5];

shift 移除数组的第一个元素

let a = [5,6];
a.shift(); // 5
a // [6];

unshift 把元素插入数组的开始

let a = [5,6];
a.unshift(4); // 3 数组的长度
a // [4,5,6];

slice 对数组的一段做浅复制

let a = [5,6];
a.slice(0); // [5,6]
a.slice(0, 1); // [5]
a // [5,6];

sort 对数组进行排序(不能用于数字,把所有元素视为字符串,但是可以自己定义比较函数)

let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
a.sort(); // [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
a //  [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
a.sort((a,b) => a-b);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

splice 移除数组中的0个或多个元素，并插入0个或多个元素

let a = [5,6];
a.splice(0, 1); // [5] 返回的是被删除的**数组**
a // [6]
a.splice(0, 0, 4, 5); // []
a // [4,5,6]

ES5

forEach 遍历数组

let a = [5,6];
a.forEach((value, index, array) => {
  value // 5,6
  index // 0,1
  array // [5, 6]
}) // 返回undefined 

map 遍历数组后创建一个新数组

let a = [5,6];
a.map((value, index, array) => {
  return value + 1;
}) // 返回[6,7] 

filter 返回过滤后的新数组

let a = [5,6];
a.filter((value, index, array) =>  value > 5;) // 返回[6] 
a // [5,6];

some 返回是否有元素满足条件

let a = [5,6];
a.some((value, index, array) =>  value > 5;) // 返回true
a // [5,6];

every 返回是否所有元素满足条件

let a = [5,6];
a.some((value, index, array) =>  value > 5;) // 返回false
a // [5,6];

indexOf 查找元素位置

let a = [5,6];
a.indexOf(5) // 返回0，未查到返回-1
a // [5,6];

lastIndexOf 从末尾开始查找元素位置

let a = [5,6];
a.lastIndexOf(5) // 返回0，未查到返回-1
a // [5,6];

reduce 递归

let a = [0, 1, 2, 3, 4];
a.reduce((accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, 0 ); // 返回10，0 + 0 = 0; 0 + 1 = 1; 1 + 2 = 3; 3 + 3 = 6; 6 + 4 = 10; 
a.reduce((accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, 10 ); // 返回20，10 + 0 = 10; 10 + 1 = 11; 11 + 2 = 13; 13 + 3 = 16; 16 + 4 = 20; 
a //  [0, 1, 2, 3, 4]

reduceRight 从末尾开始递归

let a = [0, 1, 2, 3, 4];
[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
}, 10); // 返回20，10 + 4 = 14; 14 + 3 = 17; 17 + 2 = 19; 19 + 1 = 20; 20 + 0 = 20; 
a //  [0, 1, 2, 3, 4]

ES6

... 扩展运算符

...[1,2] // 1 2 主要用于函数调用
Math.max.apply(null, [14, 3, 7]) => Max.max(...[14, 3, 7]);
运用
1. 复制数组
es5: 
var a1 = [1,2];
var a2 = a1.concat();
es6:
const a1 = [1,2];
const a2 = [...a1]; // 或者 const [...a2] = a1;
2. 合并数组
[...a1, ...a2, ...a3]

Array.from() 将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of() 将一组值转为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.copyWithin(target, start = 0, end = this.length) 将start到end-1的内容拷贝到target

let a = [5,6,7,8,9];
a.copyWithin(0, 2); // [7, 8, 9, 8, 9]
a //  [7,8,9,8,9];

Array.find() 和Array.findIndex() // 查找符合条件的值，用于代替indexOf

let a = [5,6,7,8,9];
a.find((value, index, arr) => {
  return value > 7;
}); // 8
a.findIndex((value, index, arr) => {
  return value > 7;
}); // 3
可以接受第二个参数，用于绑定回调函数的this对象
function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

Array.fill() 空数组的初始化，当填充类型为对象时，只做浅拷贝(内存地址一样)
entries() keys() values()
includes()
flat/flatMap(flat + map)

[1,[2,3],4].flat(1) // [1,2,3,4] 参数为层数