面试官：数组的哪些方法有副作用，哪些是没有副作用的？
共 4918字，需浏览 10分钟
· 2021-01-17
如题，笔者之前在面试去哪时还真被问到过，由于平时只是在用，没有太注意哪些方法有无副作用，回答的略微有点尴尬，所以今天就来做个详细的总结。
另外在工作中对数组的应用也是非常多的，而且es6也新增了很多新的方法，这次也会找一些高频的整理出来。
有副作用的（改变原数组）
push()
push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
const arr = ['1', '2', '3'];
const length = arr.push('4');
console.log(length);
// 4
console.log(arr);
// ["1", "2", "3", "4"]
shift()
方法从数组中删除第一个元素，并返回该元素。此方法更改数组的长度。
const arr = [1, 2, 3];
const firstElement = arr.shift();
console.log(arr);
// [2, 3]
console.log(firstElement);
// 1
unshift()
在数组的首部添加一个或者多个元素,返回的是插入元素后数组的长度
var arr = [1, 2, 3, 4];
arr.unshift() //4 如果没有插入的值那么返回的长度是当前数组的原长度
var a1 = [1, 2, 3, 4];
a1.unshift(1,2,3) //7
a1 //[1, 2, 3, 1, 2, 3, 4]
splice()
对数组进行增、删、改。此方法会改变原数组。
//增
var arr = [1, 2, 3, 4];
arr.splice(2,0,'插入') //返回的是空数组 []
arr //[1, 2, "插入", 3, 4]
//删
var a1 = [1, 2, 3, 4];
a1.splice(2,1) // 返回被删除的元素 [3]
a1 // [1, 2, 4] //返回的是删除后剩余的数组元素
//改
var a1 = [1, 2, 3, 4];
a1.splice(2,1,'改') //返回的是被替换删除掉的元素 [3]
a1 //[1, 2, "改", 4]
pop()
从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
const arr = [1, 2, 3];
console.log(arr.pop());
//3
console.log(arr);
//[1,2]
reverse()
方法将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组。
const arr = ['1', '2', '3'];
console.log(arr.reverse());
// ["3", "2", "1"]
console.log(arr)
// ["3", "2", "1"]
sort()
对数组的元素进行排序，并返回数组。默认排序顺序是将元素转换为字符串，然后比较它们的 Unicode 码。
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]
fill()
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
const arr = [1, 2, 3, 4];
console.log(arr.fill(0, 2, 4));
//[1, 2, 0, 0]
console.log(arr.fill(5, 1));
// [1, 5, 5, 5]
console.log(array1.fill(6));
// [6, 6, 6, 6] //无beigin 和 end 则全部填充
无副作用 （不改变原数组）
concat（）
用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// ["a", "b", "c", "d", "e", "f"]
join()
该方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
const elements = ['1', '2', '3'];
console.log(elements.join());
// "1,2,3"
console.log(elements.join(''));
//"123"
console.log(elements.join('-'));
//"1-2-3"
indexOf() , lastIndexOf()
indexOf 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
lastIndexOf 返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找。
//indexOf
const arr = ['1', '2', '3'];
console.log(arr.indexOf('2'));
// 1
console.log(arr.indexOf('0'));
//-1
//lastIndexOf
const arr = ['1', '2', '3', '1'];
console.log(arr.lastIndexOf('1'));
// 3
console.log(arr.lastIndexOf('2'));
// 1
slice()
返回截取后的新数组，截取数组中的一部分，从开始到结束，截取原则是，包括开始索引不包括结束索引值.
第二个参数可选：不写或大于数组的 length，取将从开始索引到最后一个参数
let a=[1,2,3,4,5]
let b=a.slice(1,2)
b //2
let a=[1,2,3,4,5]
let b=a.slice(1,1)
b //undefined
let a=[1,2,3,4,5]
let b=a.slice(1)
b //[2, 3, 4, 5]
entries()
返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
// [0, "a"]
console.log(iterator1.next().value);
// [1, "b"]
keys()
返回一个包含数组中每个索引的Array Iterator对象。
const arr = ['a', 'b', 'c'];
const iterator = arr.keys();
for (const key of iterator) {
console.log(key);
}
// 0
// 1
// 2
values()
返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value);
}
// "a"
// "b"
// "c"
every()
测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
若收到一个空数组，此方法在一切情况下都会返回 true。
const check = (currentValue) => currentValue < 40;
const arr = [1, 30, 39, 29, 10, 13];
console.log(arr.every(check));
// true 数组元素都<40
filter()
创建一个新数组, 返回符合条件的元素。
const arr = [1, 2, 3];
const result = arr.filter(item => item > 1);//过滤方法，条件 值长度>6
console.log(result);
// [2, 3]
forEach()
对数组的每个元素执行一次给定的函数,但传入的回调里是可以更改原数组的。当然不推荐这样做。
const array1 = [{a:100}];
array1.forEach(element =>{
element.a=200 //不推荐，此处应该是一个纯函数
});
console.log(array1)
// [Object { a: 200 }]
includes()
用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
onst array1 = [1, 2, 3];
console.log(array1.includes(2));
// true
some()
检测数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean。
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0; //是否能整除2
console.log(array.some(even));
// true
reducer()
相当于一个累加器，第一个参数表示上一次累计的返回值，第二个参数表示当前元素值
const arr = [1, 2, 3, 4];
const reducer = (sum, currentValue) => sum + currentValue;
console.log(arr.reduce(reducer));
// 10
console.log(arr.reduce(reducer, 5));
// 15
map()
返回一个新数组，新数组的结果是旧数组中的每个元素是调用一次提供的函数后的返回值。
let a=[1,2,3,4,5]
let b=a.map(item=>item*2)
a //[1, 2, 3, 3, 5]
b //[2, 4, 6, 8, 10]
find() , findIndex()
find: 返回数组中满足提供的过滤函数的第一个元素的值。否则返回 undefined。
findIndex: 和find方法功能一致，但返回的是元素的索引
//find
const arr = [5, 12, 8, 130, 44];
const found = arr.find(item => item > 10);
console.log(found);
//12
//findIndex
const arr = [5, 12, 8, 130, 44];
const found = arr.findIndex(item => item > 10);
console.log(found);
//1
flat()
返回一个扁平化的新数组，接收一个数组（这个数组中的某些item本身也是一个数组），返回一个新的一维数组(如果没有特别指定depth参数的话返回一维数组)。
const arr = [ "a", ["b", "c"], ["d", ["e", "f"]]];
// .flat() 接收一个可选的深度参数
const reuslt = arr.flat(2);
console.log( reuslt );
// [ "a", "b", "c", "d", "e", "f" ]
分享到此，希望对大家有所帮助 ^_^
点个『在看』支持下 