web

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.操作数组方法

Array.prototype.concat():用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组.
Array.prototype.copyWithin():浅复制数组的一部分到同一数组中的另一个位置，并返回该数组，不会改变原数组的长度.
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 ]

Array.prototype.flat():展开嵌套数组,默认嵌套深度为1，不改变原数组，返回新数组.
Array.prototype.join():用逗号或指定分隔符将数组连接成字符串.
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]

Array.prototype.slice():截取数组，返回一个新数组，不改变原数组.
Array.prototype.sort():排序数组，改变原数组，默认排序规则是将数组每一项转化为字符串，根据utf-16码升值排序.
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.查找元素或索引方法

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

Array.prototype.indexOf():返回数组中给定元素第一次出现的下标，如果不存在则返回-1.
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.迭代方法

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

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

6. 迭代器方法

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

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

7.额外重要方法

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]

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

const array1 = [1, 2, "a", "1a"];

console.log(array1.toString()); // "1,2,a,1a"

作者：樊阳子
来源：juejin.cn/post/7288234800563961917

0

2023-10-13

0 个评论

要回复文章请先登录或注册

js数组方法分类

js数组方法分类

0.前言

1.创建数组方法

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

3.操作数组方法

4.查找元素或索引方法

5.迭代方法

6. 迭代器方法

7.额外重要方法

0 个评论

发起人