Array相关方法的使用

413 阅读8分钟

Hello!掘金的小伙伴们大家好,我是 摸鱼小公举 ,上一篇文章是我2021的年终总结# 2021年终总结 | 这一切都是最好的安排!,今天是总结了Array相关方法的使用。

Array相关方法的使用详情如下

1,Array.concat()

合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

示例:
const arr1=[1,2,3]
const arr2=[4,5,6]
arr1.concat( arr2 ) // [1,2,3,4,5,6]

2,Aarry.copyWithin()

浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

示例:
const arr1=[1,2,3,4,5]
arr1.copyWithin(0,3) // [4,5,3,4,5]

3,Array.entries()

返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对

示例:
const arr1 = ['a', 'b', 'c'];
const iterators = arr1.entries();
iterators .next().value // [ 0,'a' ]
iterators .next().value // [ 1,'b' ]

4,Array.every()

测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

示例:
const arr1=[10,20,30,40]
arr1.every((item)=> item/10) //true

5,Array.fill( val,star,end)

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

val用来填充数组元素的值。 star起始索引,默认值为0,可选。 end终止索引,默认值为 this.length,可选。

示例:
const arr1=[1,2,3,4,5]
arr1.fill(0,3) // [ 1,2,3,0,0 ]

6,Array.filter()

创建一个新数组, 其包含通过符合条件的所有元素。 返回一个新数组

示例:
const arr1=[1,2,3,4,5]
arr1.filter( item=>item>3 ) // [ 4,5]

7,Array.find()

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

示例:
const arr1=[1,2,3,4,5]
arr1.find( item=>item>3 ) // 4

8,Array.findIndex()

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

示例:
const arr1=[1,2,3,4,5]
arr1.findIndex( item=>item>3 ) // 3

9,Array.flat()

会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

示例:
const arr1=[1,2,3,[ 4,5 ] ]
const arr2=[1,2,3,[[[4,5 ]]] ]
arr1.flat( ) // [1,2,3, 4,5 ]
arr2.flat( 2 ) // [1,2,3,[ 4,5 ] ]

10,Array.flatMap() 

首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

示例
const arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 3]); // [[3], [6], [9], [12]]
arr1.flatMap(x => [x * 3]); // [3, 6, 9, 12]

11,Array.forEach() 

对数组的每个元素执行一次给定的函数。return不会终止此函数的循环

示例:
const arr1 = [1, 2, 3];
arr1 .forEach(item=>{
console.log(item)
})  // 1 //2 //3

12,Array.from() 

对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

示例:
console.log(Array.from('123')); // ["1", "2", "3"]
console.log(Array.from([1, 2, 3], x => x *2)); //[ 2,4,6 ]
用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。

13,Array.includes() 

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

示例:
const arr1 = [1, 2, 3];
arr1.includes(3) //true

14,Array.indexOf()

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

示例:
const arr1 = [1, 2, 3];
arr1.indexOf(3) //2

15,Array.isArray() 

用于确定传递的值是否是一个 Array

示例:
Array.isArray([1, 2, 3]);// true 
Array.isArray({num: 123});// false

16,Array.join()

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

示例
const arr1 = ['1',' 2', '3'];
arr1.join() // 1,2,3
arr1.join(' '// 123

17, Array.keys()

返回一个包含数组中每个索引键的Array Iterator对象。

示例:
const arr1 = ['a',' b', 'c'];
const objs=arr1.keys() 
for (const key of objs) {
  console.log(key);
} //0  //1   //2

18, Array.lastIndexOf()

返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

示例:
const arr1 = [1,2,3,4];
arr1.lastIndexOf(2) //2
arr1.lastIndexOf(5) //-1

19, Array.map()

返回一个新数组,可用于普通遍历,也可以用于提取数组对象中某个key的value。

示例:
const arr1=[{name:'Amy',id:1},{name:'Tom',id:2}]
arr1.map(item=>item.id) //[1, 2]

20,Array.of()

创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of() 和Array构造函数之间的区别在于处理整数参数: Array.of(2) 创建一个单个元素的数组,而 Array(2) 创建一个长度为2的空数组

示例:
Array.of(2) //[2]
Array.of(2,3,4) //[2,3,4]
Array(2)    //['','']

21,Array.pop()

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

示例:
const arr1 = [1,2,3,4];
arr1.pop()  //[1,2,3]

22,Array.push()

将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

示例:
const arr1 = [1,2,3,4];
arr1.push(5,6) //[1,2,3,4,5,6]

23,Array.prototype.reduce()

对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值,也就是常说的累加。

示例:
const arr1 = [1,2,3,4];
arr1.reduce((a,b)=>a+b) //10

24,Array.reduceRight()

接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

示例:
const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (a, b) => a.concat(b)
);  //[ [4, 5],[2, 3],[0, 1]]

array.reduceRight(function(accumulator, currentValue, index, array) {
 callback 一个回调函数,用于操作数组中的每个元素,它可接受四个参数:
 accumulator 累加器:上一次调用回调函数时,回调函数返回的值。
 currentValue 当前元素:当前被处理的元素。
 index,可选 ,数组中当前被处理的元素的索引。
 array,可选,调用 `reduceRight()` 的数组。
 initialValue,可选 首次调用 `callback` 函数时,累加器 `accumulator` 的值。
});

25,Array.reverse()

该方法会改变原数组。数组翻转,最后一个到第一个,第一个到最后一个依此类推

示例:
const arr1 = [1,2,3,4];
arr1.reverse() // [4,3,2,1]

26,Array.shift()

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

示例:
const arr1 = [1,2,3,4];
arr1.shift()  // [2,3,4]

27,Array.slice()

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

示例:
const arr1 = [1,2,3,4];
arr1.slice(2) //[3,4]
console.log(arr1) //[1,2,3,4]

28,Array.some()

测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

示例:
const arr1 = [1,2,3,4];
arr1.some(item=>item/2) //true

29, Array.sort()

数组升序,改变原数组

示例:
这是大于0的正整数
const arr1 = [4,3,2,1];
arr1.sort() //[1,2,3,4]

这里是小于0的负整数
const arr2 = [-1,2,-3,4];
let num=  arr2.sort(function (a, b) {
 return a - b;
}); // [-3, -1, 2, 4]

30,Array.splice()

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

示例:
const arr1 = [1,2,3,4,5];
arr1.splice(1,1) //[1,3,4,5]
或 arr1.splice(1,1,6) ////[1,6,3,4,5]
或 arr1.splice(1,0,6) ////[1,6,2,3,4,5]

31,Array.toLocaleString()

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

示例:
const arr1 = [A,2,3,4,5];
arr1.toLocaleString() //'1,2,3,4,5'

32,Array.toString()

返回一个字符串,表示指定的数组及其元素。

示例:
const arr1 = [1,2,3,4,5];
arr1.toString() // '1,2,3,4,5'

Array.toLocaleString()与Array.toString() 有什么区别?
在数字转换成字符串的时候,并没有感觉这两个方法有什么区别
区别一:当数字是四位及以上时,toLocaleString()会让数字三位三位一分隔
var a=1234
a.toString() // '1234'
a.toLocaleString() // '1,234'
区别二:转换时间格式上有区别
var sd=new Date() // Thu Dec 23 2021 14:55:19 GMT+0800 (中国标准时间)
sd.toString() // 'Thu Dec 23 2021 14:55:59 GMT+0800 (中国标准时间)'
sd.toLocaleString() // 2021/12/23 下午2:56:58

33,Array.unshift()

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

示例:
const arr1 = [1,2,3];
arr1.unshift(4,5) //[4,5,1,2,3]

34,Array.values()

返回一个新的 Array Iterator对象,该对象包含数组每个索引的值

示例:
const arr1 = [1,2,3];
const objs=arr1.values() 
for (const value of objs) {
  console.log(key);
} //1   //2  //3

结语

总结这些方法时我自己又重新复习了一边,记忆更加深刻了,同时也是温故而知新;这篇文章希望对大家有帮助;( 点赞+评论+关注 ) 有问题可以来互相交流一下