前端ES6和JavaScript数组的方法汇总

文章目录

前端ES6和JavaScript数组的方法汇总前言一、首先我们来看看数组是如何创建：1.直接创建数组2.利用构造函数创建数组3.使用Set直接创建数组，创建的数组会自动去重，不会出现重复的元素(后面数组也有方法实现该效果)4.使用map创建数组，一个元素是键值对的数组或其他可迭代对象它的每个键值对都被添加到新的Map中

二、数组的方法1.数组基础静态方法1-1.Array.from()1-2.Array.isArray()

2.数组的实例方法2-1.Array.prototype.at()2-2.Array.prototype.concat()2-3.Array.prototype.copyWithin()2-4.Array.prototype.entries()2-5.Array.prototype.every()2-6.Array.prototype.fill()2-7.Array.prototype.filter()2-8.Array.prototype.find()2-9.Array.prototype.findIndex()2-10.Array.prototype.findLast()2-11.Array.prototype.findLastIndex()2-12.Array.prototype.flat(num)2-13.Array.prototype.flatMap(num)2-14.Array.prototype.forEach()2-15.Array.prototype.includes(num)2-16.Array.prototype.indexOf(num)2-17.Array.prototype.join()2-18.Array.prototype.keys()2-19.Array.prototype.lastIndexOf(num)2-20.Array.prototype.pop()2-21.Array.prototype.push(element)2-22.Array.prototype.reduce()2-23.Array.prototype.reduceRight()2-24.Array.prototype.reverse()2-25.Array.prototype.shift()2-26.Array.prototype.slice(start,end)2-27.Array.prototype.some()2-28.Array.prototype.sort()2-29.Array.prototype.splice()2-30.Array.prototype.toLocaleString()2-31.Array.prototype.toReversed()2-32.Array.prototype.toSorted()2-33.Array.prototype.unshift()2-34.Array.prototype.values()2-35.Array.prototype.with()

前言

这是本人汇总的前端操作数组的所有方法，如有错误感谢指正！

一、首先我们来看看数组是如何创建：

1.直接创建数组

<code>let arr = [1, 2, 3, 4, 5];

console.log(arr);//输出[1,2,3,4,5]

2.利用构造函数创建数组

let arr2 = new Array(1, 2, 3, 4, 5);

console.log(arr2);//输出[1,2,3,4,5]

3.使用Set直接创建数组，创建的数组会自动去重，不会出现重复的元素(后面数组也有方法实现该效果)

let arr3 = new Set([1, 1, 4, 5, 1, 4]);

console.log(arr3);//输出[1,4,5]

4.使用map创建数组，一个元素是键值对的数组或其他可迭代对象它的每个键值对都被添加到新的Map中

let myMap = new Map(

[

['1', 'one'],

['2', 'two'],

['3', 'three'],

]

)

console.log(myMap);//{'1' => 'one', '2' => 'two', '3' => 'three'}

//再通过Array.from()方法将其转变为数组

let newArr2 = Array.from(myMap);

console.log(newArr2);// 输出: [[1, 'one'], [2, 'two'], [3, 'three']]

二、数组的方法

1.数组基础静态方法

1-1.Array.from()

作用：将可迭代或者类数组的对象创建一个新的浅拷贝的数组实例

将字符串的每个字符变为一个一个数组的元素

console.log(Array.from('abcde'));//['a','b','c','d','e']

对现有数组进行操作，这里让数组的每个元素自己加上自己

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

从类数组对象中构建数组

function fn() {

return Array.from(arguments);

}

console.log(fn(1, 2, 3, 'iu'));//[1, 2, 3, 'iu']

1-2.Array.isArray()

作用：判断传递的值是不是数组,返回布尔值true或者false

console.log(Array.isArray([1, 3, 5]));//true

console.log(Array.isArray('cxk'));//false

2.数组的实例方法

2-1.Array.prototype.at()

at方法

该方法接受一个整数值并返回改索引对应的元素，可以传正整数和负整数。负整数会从数组最后一个开始。该方法就是根据下标找数组对应的元素然后下标是正整数就从前往后查找，反之从后往前。

注意点：从前往后的话下标从0开始，但从后往前就是从1开始

let arr = [1, 2, 3, 4, 5];

let index1 = 1;

console.log(arr.at(index1));//2

let index2 = -1;

console.log(arr.at(index2));//5

2-2.Array.prototype.concat()

concat方法

该方法用于合并两个数组，不会改变原数组，而是返回一个新数组。

let arr1 = [1, 2, 3];

let arr2 = ['cxk', 567];

let newArr = arr1.concat(arr2);

//原数组均未改变

console.log(arr1);//[1,2,3]

console.log(arr2);//['cxk', 567]

console.log(newArr);//[1, 2, 3, 'cxk', 567]

2-3.Array.prototype.copyWithin()

copyWithin方法

该方法可以浅复制数组的一部分到这个数组中的另一个位置，并返回他，不会改变原数组的长度。

默认写法arr.copyWithin(target, start, end)/target（必需）：从该位置开始替换数据。

start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

end（可选）：到该位置前停止读取数据，默认为数组长度。如果为负值，表示倒数。

let arr = [1, 2, 3, 4, 5];

let newArr = arr.copyWithin(0, 2, 4);

console.log(newArr); // 输出: [3, 4, 3, 4, 5]

arr.copyWithin(0, 2, 4) //表示从索引 2 开始复制，复制到索引 4（不包括索引 4），然后将复制的元素覆盖到索引 0 开始的位置。

2-4.Array.prototype.entries()

entries方法

该方法返回一个新的数组迭代器对象，包含数组的每个键值对。

let arr1 = ['a', 'b', 'c'];

let iter1 = arr1.entries();

console.log(iter1);

console.log(iter1.next().value);//[0, 'a']

console.log(iter1.next().value);//[1, 'b']

2-5.Array.prototype.every()

every方法

该方法将查找数组的各个元素，如果所有元素全部符合指定条件返回true，有一个元素不满足就返回false。

let arr = [1, 2, 3, 4, 5];

let bool1 = arr.every(function (item, index) {

return item > 3;

})

console.log(bool1);//false

let bool2 = arr.every(function (item, index) {

return item >= 1;

})

console.log(bool2);//true

2-6.Array.prototype.fill()

fill方法

方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。

语法：array.fill(value, start, end);

value：要填充的值。

start：开始填充的索引，默认为0。

end：停止填充的索引（不包含该索引），默认为数组长度。

let arr = [1, 2, 3, 4, 5];

arr.fill('cxk', 2, 4)//[2,4) -- 包前不包后

console.log(arr);//[1, 2, 'cxk', 'cxk', 5]

2-7.Array.prototype.filter()

filter方法

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

let arr = [1, 2, 3, 4, 5];

let newArr = arr.filter(function (item, index) {//item是数组的每一项元素，index是数组对应的下标

return item > 3

})

console.log(newArr);//[4,5]

2-8.Array.prototype.find()

find方法

返回数组中满足条件的第一个元素的值。没有则返回undefined。

let arr = [1, 2, 3, 4, 5];

let newArr1 = arr.find(function (item, index) {

return item > 3;

})

console.log(newArr1);//4

let newArr2 = arr.find(function (item, index) {

return item > 6;

})

console.log(newArr2);//undefined

该方法用法和上面的filter方法有点像，但find方法是只返回第一个符合条件的值，而filter方法会返回所有符合体条件的值。

2-9.Array.prototype.findIndex()

findIndex方法

顾名思义，上面的find方法是返回组中满足条件的第一个元素的值，那么findIndex是返回数组中满足条件的第一个元素的下标/索引.没有则返回-1.

let arr = [1, 2, 3, 4, 5];

let newArr1 = arr.findIndex(function (item, index) {

return item > 3;

})

console.log(newArr1);//3

let newArr2 = arr.findIndex(function (item, index) {

return item > 6;

})

console.log(newArr2);//-1

2-10.Array.prototype.findLast()

findLast方法

并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素，则返回 undefined。

可以理解为将find的查找顺序反过来，变为从后往前查找，但是要注意从后往前查找下标从数组最后一个开始，而不是0。

let arr = [1, 2, 3, 4, 5];

let newArr1 = arr.findLast(function (item, index) {

return item > 3;

})

console.log(newArr1);//5

let newArr2 = arr.findLast(function (item, index) {

return item > 6;

})

console.log(newArr2);//undefined

2-11.Array.prototype.findLastIndex()

findLastIndex方法

反向迭代数组，并返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素，则返回 -1。

let arr = [1, 2, 3, 4, 5];

let newArr1 = arr.findLastIndex(function (item, index) {

return item > 3;

})

console.log(newArr1);//4

let newArr2 = arr.findLastIndex(function (item, index) {

return item > 6;

})

console.log(newArr2);//-1

2-12.Array.prototype.flat(num)

flat方法

创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中.

说白点就是可以将数组内嵌套数组的样式展开。

这里数组里面嵌套了一个数组。

let arr = [1, 2, 3, 4, 5, [6, 6, 6, 6]];

let newArr = arr.flat();

console.log(newArr);//[1, 2, 3, 4, 5, 6, 6, 6, 6]

//可以在flat()的括号里面传值，表示分解多少层嵌套数组，如果填入Infinity(注意首字母I要大写)就是将数组完全变成平面无嵌套数组，不管数组呦多少层

let arr2 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];

let newArr2 = arr2.flat(Infinity);

console.log(newArr2);

2-13.Array.prototype.flatMap(num)

flatMap方法

对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(…args).flat()），但比分别调用这两个方法稍微更高效一些。

let arr = [1, 2, 1];

let result = arr.flatMap((num) => (num === 2 ? [2, 2] : 1));

console.log(result);[1, 2, 2, 1]

2-14.Array.prototype.forEach()

forEach方法

对数组每个元素循环遍历

let arr = [1, 2, 3, 4, 5];

arr.forEach(function (item, index) {//item数组元素，index下标/索引

console.log('元素是' + item);//1, 2, 3, 4, 5

console.log('下标是' + index);//0,1,2,3,4

})

2-15.Array.prototype.includes(num)

includes方法

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false，num为你指定的值

let arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3));//true -- 数组里有3这个元素则返回true

console.log(arr.includes('cxk'));//false -- 么有则返回false

2-16.Array.prototype.indexOf(num)

indexOf方法

返回数组中第一次出现给定元素的下标，如果不存在则返回 -1，num为你指定的值来查找num的下标

let arr = [1, 2, 3, 4, 5, 3, 2, 1];

console.log(arr.indexOf(3));//2 -- 有就返回该元素的下标

console.log(arr.indexOf(9));//-1 -- 没有该元素就返回固定-1

2-17.Array.prototype.join()

join方法

将数组转化为字符串

let arr = [1, 2, 3, 4, 5];

let str = arr.join();

console.log(str);//1,2,3,4,5

2-18.Array.prototype.keys()

keys方法

返回一个新的数组迭代器对象，其中包含数组中每个索引的键

let arr = [1, 2, 3, 4, 5];

let newArr = arr.keys();

for (let key of newArr) {

console.log(key);//0,1,2,3,4

}

2-19.Array.prototype.lastIndexOf(num)

lastIndexOf方法,

从后往前返回数组中第一次出现给定元素的下标，但是下标依然是从前往后的顺序，如果不存在则返回 -1，num为你指定的值来查找num的下标

let arr = [1, 2, 3, 4, 5];

console.log(arr.lastIndexOf(3));//2 -- 有就返回该元素的下标

console.log(arr.lastIndexOf(6));//-1 -- 没有该元素就返回固定-1

2-20.Array.prototype.pop()

pop方法

删除原数组的最后一个元素(会改变原数组)

let arr = [1, 2, 3, 4, 5];

arr.pop();

console.log(arr);//[1,2,3,4]

2-21.Array.prototype.push(element)

push方法

添加指定元素到数组末尾，element就是你要指定的元素(会改变原数组)

let arr = [1, 2, 3, 4, 5];

arr.push('cxk');

console.log(arr);//[1, 2, 3, 4, 5,'cxk']

2-22.Array.prototype.reduce()

reduce方法

数组按照顺序将每个元素执行一次reduce函数里的方法，返回一个新数组

let arr = [1, 2, 3, 4, 5];

let newArr = arr.reduce((item, index) => item + index)//这是指将每个元素相加

console.log(newArr);//15

2-23.Array.prototype.reduceRight()

reduceRight方法

同2-22,但是是从右到左进行遍历

let arr = [1, 2, 3, 4, 5];

let newArr = arr.reduceRight((item, index) => item + index)//这是指将每个元素相加

console.log(newArr);//15

2-24.Array.prototype.reverse()

reverse方法

将数组反转

let arr = [1, 2, 3, 4, 5];

arr.reverse();

console.log(arr);//[5, 4, 3, 2, 1]

2-25.Array.prototype.shift()

shift方法

删除数组第一个开头元素(会改变原数组)

let arr = [1, 2, 3, 4, 5];

arr.shift();

console.log(arr);//[1,2, 3, 4, 5]

2-26.Array.prototype.slice(start,end)

slice方法

截取数组中指定的范围内的元素并构建为一个新数组

注意：[start,end)包前不包后

let arr = [1, 2, 3, 4, 5];

let newArr = arr.slice(2, 4);

console.log(newArr);//[3,4]

2-27.Array.prototype.some()

some方法

查找数组中的第一个符合条件元素是否是指定元素，是返回true，不是返回false

let arr = [1, 2, 3, 4, 5, 6];

let Bool1 = arr.some((item, index) => item > 3);

console.log(Bool1);//true

let Bool2 = arr.some((item, index) => item > 100);

console.log(Bool2);//false

2-28.Array.prototype.sort()

sort方法

数组排序，按照指定要求顺序后倒序排序数组

sort()括号里面不传参数默认是顺序排列数组

传入函数，函数传出你a和b,a-b就是顺序,b-a就是倒序

let arr = [3, 2, 78, 900, 56, 88, 1];

console.log(arr.sort());//[1, 2, 3, 56, 78, 88, 900]

console.log(arr.sort(function (a, b) {

return a - b

}));//[1, 2, 3, 56, 78, 88, 900]

console.log(arr.sort(function (a, b) {

return b - a

}));//[900, 88, 78, 56, 3, 2, 1]

2-29.Array.prototype.splice()

splice方法

删除已有元素或添加新的元素

同样也是包前不包后

删除语法:数组.splice(开始的索引,要删除的元素)

添加语法:数组.splice(开始的索引,要删除的元素(默认为0),要添加的具体元素)

//删除

let arr1 = [1, 2, 3, 4, 5,];

arr1.splice(0, 2)

console.log(arr1);//[3,4,5]

//添加 -- 添加的元素在占用下标后会把原改下表以及它后面的元素往后挤一格

let arr2 = [1, 2, 3, 4, 5];

arr2.splice(0, 0, 'cxk')

console.log(arr2);//['cxk', 1, 2, 3, 4, 5]

2-30.Array.prototype.toLocaleString()

toLocaleString方法

将数组中的每个元素转换为字符串

let arr = [1, 2, 3, 4, 5];

let newArr = arr.toLocaleString();

console.log(newArr);//1,2,3,4,5

2-31.Array.prototype.toReversed()

toReversed方法

返回该数组元素顺序相反的新数组

let arr = [1, 2, 3, 4, 5];

let newArr = arr.toReversed();

console.log(newArr);//[5, 4, 3, 2, 1]

2-32.Array.prototype.toSorted()

toSorted方法

它返回一个新数组，元素升序排列

注意：升序排列是按照数组元素的首字母的大小来的

let arr = [1, 2, 4, 47, 543, 33, 12, 45, 56, 'b', 'c', 'a'];

let newArr = arr.toSorted();

console.log(newArr);//[1, 12, 2, 33, 4, 45, 47, 543, 56, 'a', 'b', 'c']

2-33.Array.prototype.unshift()

unshift方法

将指定元素添加到数组的开头，并返回数组的新长度

let arr = [1, 2, 3, 4, 5];

let newArrLength = arr.unshift(0);

console.log(newArrLength);//6

2-34.Array.prototype.values()

values方法

该对象迭代数组中每个元素的值

let arr = [1, 2, 3, 4, 5];

let newArr = arr.values()

for (let items of newArr) {

console.log(items);//1,2,3,4,5

}

2-35.Array.prototype.with()

with方法

使用方括号表示法修改指定索引值的复制方法版本。它会返回一个新数组，其指定索引处的值会被新值替换。

let arr = [1, 2, 3, 4, 5];

let newArr = arr.with(2, 'cxk');

console.log(newArr);//[1, 2, 'cxk', 4, 5]