js数组方法分类

js数组方法分类

0.前言

我们知道，js中数组方法非常多，MDN就列举了43个方法，就连常用方法都很多，比如forEach,filter,map,push等等等，可能我们见到方法认识这个方法，但要我们列举所知道的数组方法，我们可能会遗忘漏掉某些，为了帮助大家更好更有规律地记住更多方法，在这里我特地将数组方法分俄为七大类，每一类都有其特定共同点和功能的标签，根据这些标签去记忆，相信大家读完可以感到醍醐灌顶的感觉。

一共2+4+9+7+6+3+2=33个，放心吧，足够啦！

1.创建数组方法

• Array.from() :将可迭代对象或类数组对象转化为新的浅拷贝数组.
• Array.of():将可变数量的参数转化为新的浅拷贝 数组.

//Array.from()
console.log(Array.from("foo")); // ['f', 'o', 'o']
function bar() {
  console.log(arguments); //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] 类数组
  console.log(Array.from(arguments)); // [1, 2, 3]
}
bar(1, 2, 3);
const set = new Set(["foo", "bar", "baz", "foo"]);
console.log(Array.from(set)); //从Set构建数组['foo', 'bar', 'baz']，Map也可以

//Array.of()
console.log(Array.of()); //[] 创建空数组
console.log(Array.of(1, 2, 3, 4)); //[1, 2, 3, 4]
//浅拷贝
const obj1 = { age: 18 };
const arr1 = [666, 777];
const arr = Array.of(obj1, arr1);
arr[0].age = 19;
arr[1][0] = 999;
console.log(arr); //[{age:19},[999,777]]

2.数组首端或尾端添加删除方法

• Array.prototype.push():将指定的元素添加到数组的末尾，并返回新的数组长度.

• Array.prototype.pop():从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度.

• Array.prototype.shift():从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度.

• Array.prototype.unshift():将指定的元素添加到数组的开头，并返回新的数组长度.

//Array.prototype.push()
const arr = [1, 2];
console.log(arr.push(3, 4, 5)); //5
console.log(arr); //[ 1, 2, 3, 4, 5 ]
//Array.prototype.pop()
console.log(arr.pop()); //数组最后一个元素:5
console.log(arr); //[ 1, 2, 3, 4 ]
//Array.prototype.shift()
console.log(arr.shift()); //1
console.log(arr); //[ 2, 3, 4 ]
//Array.prototype.unshift()
console.log(arr.unshift(66, 77, 88)); //6
console.log(arr); //[ 66, 77, 88, 2, 3, 4 ]

3.操作数组方法

1. Array.prototype.concat():用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组.
2. Array.prototype.copyWithin():浅复制数组的一部分到同一数组中的另一个位置，并返回该数组，不会改变原数组的长度.
3. Array.prototype.fill():用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。会改变原始数组.

// Array.prototype.concat()
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
// Array.prototype.copyWithin()
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.copyWithin(2, 3, 5)); //[ 1, 2, 4, 5, 5, 6 ] 将 4，5替换到2索引位置
// Array.prototype.fill()
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4)); //[ 1, 2, 0, 0 ]
console.log(array1.fill(5, 1)); //[ 1, 5, 5, 5 ]
console.log(array1.fill(6)); //[ 6, 6, 6, 6 ]
console.log(array1); //[ 6, 6, 6, 6 ]

4. Array.prototype.flat():展开嵌套数组,默认嵌套深度为1，不改变原数组，返回新数组.
5. Array.prototype.join():用逗号或指定分隔符将数组连接成字符串.
6. Array.prototype.reverse():就地反转字符串，返回同一数组的引用，原数组改变.

// Array.prototype.flat()
const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); //[ 1, 2, 3, 4 ]
console.log(arr1); // 不改变原数组 [ 1, 2, [ 3, 4 ] ]
const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); //默认展开嵌套一层数组[ 1, 2, 3, 4, [ 5, 6 ] ]
console.log(arr2.flat(2)); //展开嵌套二层数组 [ 1, 2, 3, 4, 5, 6 ]
// Array.prototype.join()
const elements = ["Fire", "Air", "Water"];
console.log(elements.join()); //"Fire,Air,Water"
console.log(elements.join("+++++")); //Fire+++++Air+++++Water
console.log(elements.join("-")); //Fire-Air-Water
// Array.prototype.reverse()
const arr = [1, 2, 3];
console.log(arr.reverse()); //[3,2,1]
console.log(arr); //[3,2,1]

7. Array.prototype.slice():截取数组，返回一个新数组，不改变原数组.
8. Array.prototype.sort():排序数组，改变原数组，默认排序规则是将数组每一项转化为字符串，根据utf-16码升值排序.
9. Array.prototype.splice():对数组进行增加、删除、替换元素，改变原数组.

// Array.prototype.slice();
const animals = ["ant", "bison", "camel", "duck", "elephant"];
console.log(animals.slice(2)); //["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); //["camel", "duck"]
console.log(animals.slice(-2)); //["duck", "elephant"]
console.log(animals.slice(2, -1)); //["camel", "duck"]
console.log(animals.slice()); //浅复制数组 ["ant", "bison", "camel", "duck", "elephant"]
// Array.prototype.sort();
const months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months); // ["Dec", "Feb", "Jan", "March"];
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); //[1, 100000, 21, 30, 4]
array1.sort((a, b) => a - b); //升序
console.log(array1);
//Array.prototype.splice();
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 2); //从index为2的位置开始删除两个元素[1, 2, 5];
arr.splice(2, 0, 3, 4); //从index为2的位置增加3、4两个元素 [1,2,3,4,5]
arr.splice(2, 2, 7, 8); //删除index为2位置的两个元素，并添加8、9两个元素 [ 1, 2, 7, 8, 5 ]

4.查找元素或索引方法

1. Array.prototype.at()：返回索引位置对应的元素，负索引从数组最后一个元素倒数开始.
2. Array.prototype.find():查找符合条件的第一个元素，未找到则返回undefined，回调函数返回值为真则符合条件.
3. Array.prototype.findIndex():查找符合条件第一个元素的索引，未找到则返回**-1**，回调函数返回值为真则符合条件.
4. Array.prototype.findLast():从后往前查找符合条件的第一个元素，其余同理Array.prototype.find().
5. Array.prototype.findLastIndex()：从后往前查找符合条件第一个元素的索引，其余同理Array.prototype.findIndex().

// Array.prototype.at()
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(0)); //1
console.log(arr.at(-1)); //5
const array = [
  { name: "jack", age: 15 },
  { name: "tom", age: 29 },
  { name: "bob", age: 23 },
];
// Array.prototype.find()
const obj = array.find((item) => {
  if (item.age > 18) {
    return true;
  } else {
    return false;
  }
}); //{ name: 'tom', age: 29 }
//Array.prototype.findIndex()
const objIndex = array.findIndex((item) => {
  if (item.age > 18) {
    return true;
  } else {
    return false;
  }
}); //1
// Array.prototype.findLast()
const lastObj = array.findLast((item) => {
  if (item.age > 18) {
    return true;
  } else {
    return false;
  }
}); //{name: 'bob', age: 23}
// Array.prototype.findLast()
const lastIndex = array.findLastIndex((item) => {
  if (item.age > 18) {
    return true;
  } else {
    return false;
  }
}); //2

6. Array.prototype.indexOf():返回数组中给定元素第一次出现的下标，如果不存在则返回-1.
7. Array.prototype.includes():在数组中查找指定元素，如果找到则返回true，如果找不到则返回false.

//Array.prototype.indexOf()
const arr = [1, 2, 6, 8, 9];
console.log(arr.indexOf(6)); //2
console.log(arr.indexOf(10)); //-1
//Array.prototype.includes()
console.log(arr.includes(6)); //true
console.log(arr.includes(10)); //-false

5.迭代方法

迭代方法非常常用，这里就不列举例子了.

1. Array.prototype.forEach():对数组每一项元素执行给定的函数，没有返回值.
2. Array.prototype.filter():过滤数组，创建符合条件的浅拷贝数组.
3. Array.prototype.map():对数组每个元素执行给定函数映射一个新值，返回新数组.
4. Array.prototype.every():检查数组所有元素是否符合条件，如果符合返回true，不符合返回false;
5. Array.prototype.some():检查数组中是否有元素符合条件，如果有则返回true,不符合返回false
6. Array.prototype.reduce():用指定函数迭代数组每一项，上一次函数返回值作为下一次函数初始值，返回最后一次函数的最终返回值.

6. 迭代器方法

这里就不赘述迭代器对象了.

1. Array.prototype.keys():返回数组索引迭代器对象.
2. Array.prototype.values():返回数组元素的迭代器对象.
3. Array.prototype.entries():返回数组索引和元素构成的迭代器对象.

7.额外重要方法

1. Array.isArray():判断是否是数组.

//都返回true 都是数组
console.log(Array.isArray([]));
console.log(Array.isArray(new Array()));
console.log(Array.isArray(Array.of(1, 2, 3)));
// 也可以用instanceof:true
console.log([] instanceof Array);
console.log(new Array() instanceof Array);
console.log(Array.of(1, 2, 3) instanceof Array);
console.log([].toString());
//惊喜：最后还可以使用Object.prototype.toString()
console.log(Object.prototype.toString.call([])); //[object Array]

2. Array.prototype.toString():将数组去掉左右括号转化为字符串.

const array1 = [1, 2, "a", "1a"];
console.log(array1.toString()); // "1,2,a,1a"