面试官让你谈谈，js数组上面的方法 如何详细的列出所有的方法呢？

当面试官问你 数组上面有哪些方法

哈喽哈喽，我是你们的金樽清酒。我们知道数组上面是有很多的方法的，很难记的全面，再加上面试比较紧张，脑子里会一片空白，当你零零星星的把你所记得的告诉面试官，可能会让面试官对你有不好的评价，觉得你基础不够扎实，那么我们怎样去有条不紊的把所有的方法给罗列出来呢？可能下面的内容能够帮到你？记住增、删、改、查、转换、迭代。

数组上增的方法

• push() 在数组的末尾添加元素

let arr=[1,2,3,4]
arr.push(5,6,7,8)
console.log(arr)

我们可以看到在原数组中添加了5，6，7，8.所以push方法会改变原数组。

• unshift() 方法将指定元素添加到数组的开头，并返回数组的新长度。

const arr = [1, 2, 3, 4]
console.log(arr.unshift(-2, -1, 0))
console.log(arr)

• splice() splice()  方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。

增

//增
const arr=[1,2,3,4,6]
console.log(arr.splice(4,0,5))//4为开始下标  0为删除元素个数  5为新增元素
console.log(arr)

splice()的返回值是一个删除元素的新数组，如果没有删除元素，则返回一个空数组。

删

//删
const arr=[1,2,3,4,6]
console.log(arr.splice(1，2))//1为开始下标  0为删除元素个数 
console.log(arr)

const arr=[1,2,3,4,6]
console.log(arr.splice(1))//1为开始下标，删除所有元素
console.log(arr)

从下标1开始,删除两个元素，返回值为删除元素的数组。

从下标1开始删除所有元素。返回值为被删除的数组。

改

const arr = [1, 2, 3, 4, 4, 6]
console.log(arr.splice(4, 1, 5))//4为开始下标  0为删除元素个数 
console.log(arr)

从下标4开始，删除一个元素，并插入一个元素 返回值为删除元素的数组

语法

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

用splice可以实现增的方法，但是实质为删除，添加元素。

• concat() concat()  方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
console.log(array1)
console.log(array2)

将两个数组拼接起来也属于数组增长的办法

数组上删的办法

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

let arr = [1, 2, 3, 4]
console.log(arr.pop())
console.log(arr)

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

let arr = [1, 2, 3, 4]
console.log(arr.shift())
console.log(arr)

• splice()可以实现删的功能，上面已列出，此处不赘叙。

• slice() slice()  方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

let arr = [1, 2, 3, 4, 5]
console.log(arr.slice(1))
console.log(arr.slice(2, 4))

区间左闭右开，返回的是一个新的数组对象，不会修改原数组。实用性强，可以截取想要的数组段且不改变原数组。

数组上改的方法

• reverse reverse()  方法就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。

let arr=[1,2,3]
console.log(arr.reverse())
consle.log(arr)

很明显，reverse()的作用是反转数组且改变原数组。返回值为原数组的新的引用。

• sort() sort()  方法就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。

let arr=[1,4,6,3,7,9]
arr.sort((a,b)=>a-b)
console.log(arr)

sort()里面可以接受一个回调函数，两个参数，按照参数的顺序，a-b为从小到大排序，b-a为从大到小排序，接受参数则然后按照它们的 UTF-16 码元值升序排序。若存在负数，负数的UTF-16值越小UTF-16越大会出现排序出错。所以最好是接受回调函数。

let arr = [1, 4, 6, 3, 7, 9]
arr.sort((a, b) => b - a)
console.log(arr)

数组上查的方法

• indexOf() indexOf()  方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

let arr=[1,2,2,3,3]
console.log(arr.indexOf(2))
console.log(arr)

• lastIndexOf() lastIndexOf()  方法返回数组中给定元素最后一次出现的索引，如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。

let arr[1,2,3,4,1]
console.log(arr.lastIndexOf(1))

• filter() filter()  方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);

• find()  方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found);

可以看到它是返回提供符合测试函数的第一个元素值

• includes includes()  方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。可以看到它的返回是一个布尔值。

const array1 = [1, 2, 3];

console.log(array1.includes(2));

数组中的转换

• join() join()  方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());

数组上面的迭代

• forEach() forEach()  方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));

• reduce() reduce()  方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被用作初始值，迭代器将从第二个元素开始执行（即从索引为 1 而不是 0 的位置开始）。

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

Array.from()

Array.from()  静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]

可以将类数组转变为数组。

参考文献

本文章数组上面的方法的名词解释和部分实例取自MDN web Docs。