js数组方法详解汇总

Array.from:转数组是将所有字符进行切割转为数组。

 

flat：按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。参数代表指定要提取嵌套数组的深度，默认值为 1,Infinity为相当于扁平化最深层次的数组。

例：arr = [1,2,[3,[4,[5]]]];arr.flat()//[1, 2, 3, [4,[5]]]   =>  arr.flat(Infinity) //[1,2,3,4,5]

 

split：将字符串按照指定的分隔符，分割为数组。返回一个数组，根据传入的参数分割字符串。

例：var str = "I lover you too"; var aa = str.split(" ");// ['I','lover','you','too]

 

includes：返回一个布尔值，表示某个数组是否包含给定的值，采用的是==比对。

例：[1,2,3].includes(3)  //true

 

indexOf:返回给定值在数组的索引，找不到返回-1，采用是的===比对

例：[1,2,3].indexOf(1)  //1

 

array.forEach(callback(currentValue, index, arr), thisArg):给数组的每一个元素执行回调函数，如果对数组元素（引用数据类型）的属性执行改变的操作会改变原数组，否则不该变原数组,使用break不能中断循环，使用return也不能返回到外层函数。

callback:为数组中每个元素执行的函数，该函数接收一至三个参数 currentValue 数组中正在处理的当前元素 ，index (可选) 数组中正在处理的，当前元素的索引 arr (可选)

注意：

1.使用forEach对数组进行增加和删除：遍历顺序是数组索引升序，在回调函数内执行对数组增加的数据不会在回调函数执行的范围内，减少数组内的数组则可能打乱回调函数执行顺序。

2.修改原数组的数据：

　　2.1数组中是基本数据类型：string、number、boolean等，只使用回调函数的第一个参数修改数组中的值是不会影响原数组的

　　正确方法：

const arr = [1,2,3,4,5]
arr.forEach((item, index, array) => {
    item+=1; // [1,2,3,4,5]
    // arr[index]+=1; // [2,3,4,5,6]
    // array[index]+=1; // [2,3,4,5,6]
})
console.log(arr);

　　2.2如果数组中的是引用数据类型：object等，直接替换数组项是不会影响原数组的，数组对象在遍历时，实际上是将数组项的引用地址赋值给item，如果将另一个对象的引用地址重新赋值给item，并不会改变原引用地址的数据，也就不会影响原数组（图1）。如果只修改数组项的某一个属性，这个时候是会影响原数组的（图2）。

　　正确方法：

const arr = [
    {name: '张三', id: 1},
    {name: '李四', id: 2}
]
arr.forEach((item, index, array) => {
    if (item.id === 2) {
        item = {name: '王五', id: item.id}; // 张三、李四
        // Object.assign(item, {name: '王五', id: item.id}); // 张三、王五
        // arr[index] = {name: '王五', id: item.id}; // 张三、王五
        // array[index] = {name: '王五', id: item.id}; // 张三、王五
    }
})
console.log(arr);

const arr = [
    {name: '张三', id: 1},
    {name: '李四', id: 2}
]
arr.forEach((item, index, array) => {
if (item.id === 2) {
    item.name = '王五';
    // arr[index].name = '王五'; // 张三、王五
    // array[index].name = '王五'; // 张三、王五
}
})
console.log(arr); // 张三、王五

　　

every():测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值,不改变原数组，同上callback参数。

例：function isBigEnough(element, index, array) { return element >= 10; } [12, 5, 8, 130, 44].every(isBigEnough); // false [12, 54, 18, 130, 44].every(isBigEnough); // true

 

some():测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值,不改变原数组，同上callback参数。

例：function isBiggerThan10(element, index, array) { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true

 

filter():创建一个新数组, 其包含通过所提供函数实现的测试的所有元素,不改变原数组，同上callback参数。

例：function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]

 

map():创建一个新数组，其结果是该数组中的每个元素是调用一次提供的回调函数后的返回值（类似forEach），是否改变原数组同foreach，同上callback参数。

例：var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2; }); // doubles数组的值为： [2, 8, 18] // numbers数组未被修改： [1, 4, 9]

 

find():返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined，同上callback参数。

findIndex()：数组中通过提供测试函数的第一个元素的索引。否则，返回-1，同上callback参数。

 

Object.keys(): 传⼊对象，返回属性名:var obj1 = { 100: "a", 2: "b", 7: "c"}; console.log(Object.keys(obj1)); // console: ["2", "7", "100"]

传⼊字符串，返回索引:var str = 'ab1234';console.log(Object.keys(obj)); //[0,1,2,3,4,5]

传入数组 ，返回索引：var arr = ["a", "b", "c"];console.log(Object.keys(arr)); // console: ["0", "1", "2“]

object.value(): 对应的是返回值，返回的是数组形式。

object.entries():对应的是返回完整的键值对。

 

reduce(callback(accumulator, currentValue, currentIndex, array), initialValue):对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值,，不改变原数组。

callback:为数组中每个元素执行的函数，该函数接收一至4个参数 accumulator 累计器 currentValue 当前值 currentIndex 当前索引 array 数组 initialValue 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

 

reduceRight():同reduce，但是累加顺序是从右到左。

splice():通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容，注意此方法会改变原数组,返回的是修改的内容。array.splice(start,deleteCount,item1,.....,itemX)

例：从第 2 位开始删除 0 个元素，插入“drum” var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 0, "drum"); // 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]

 

sort():对数组的元素进行排序，并返回数组，注意此方法会改变原数组。不传入function时默认排序顺序是在将元素转换为字符串按照Unicode 编码，从小到大进行排序。

arr.sort([compareFunction])

例：let arr = [5, 2, 11, 3, 4, 1]; // 自定义排序规则 let result = arr.sort(function (a, b) { return a - b; // 升序排列 // return b - a; // 降序排列 });

 

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

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

unshift():将一个或多个元素添加到数组的开头，并返回该数组的新长度。该方法修改原有数组。

push():将一个或多个元素添加到数组的末尾，并返回该数组的新长度。该方法修改原有数组。

reverse():将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

 

fill():用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。返回的是修改后的数组。

arr.fill(value, start, end )：value 1. 用来填充数组元素的值。 start (可选) 1. 起始索引，默认值为0。 end (可选) 1. 终止索引，默认值为 this.length。

例：var arr = Array(3).fill({}) // [{}, {}, {}]; arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] ；[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]

 

slice():返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

例：var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; var citrus = fruits.slice(1, 3); // fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] // citrus contains ['Orange','Lemon']

 

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

例：var a = ['Wind', 'Rain', 'Fire']; var myVar1 = a.join(); // myVar1的值变为"Wind,Rain,Fire"

var myVar2 = a.join(', '); // myVar2的值变为"Wind, Rain, Fire"

var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"

var myVar4 = a.join(''); // myVar4的值变为"WindRainFire"

 

toString():返回一个字符串，表示指定的数组及其元素。

例：const array1 = [1, 2, 'a', '1a']; console.log(array1.toString()); // expected output: "1,2,a,1a"

 

 cocat():用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
例:var alpha = ['a', 'b', 'c']; var numeric = [1, 2, 3]; alpha.concat(numeric); // result in ['a', 'b', 'c', 1, 2, 3]

 

indexof():返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。(跟findIndex区别是寻找参数为一个值，findeIndex为一个函数）
例：var array = [2, 5, 9]; array.indexOf(2); // 0 array.indexOf(7); // -1
lastIndexOf：倒序寻找

参考：https://juejin.cn/post/6846687601806557192#heading-38