js数组

149 阅读2分钟

数组方法

写作背景:

工作中由于太久时间没有回顾这些基础,导致开发中时有忘记的一些数组方法的具体用法。因此需要查阅文档,影响了部分需求的开发效率,因此本文章为数组方法全面详细的复盘。

静态方法

  • from(arrayLike[, mapFn[, thisArg]])

将一个类似数组或可迭代对象 转换成真数组。 通常用于将set迭代器对象、arguments对象、dom或者元素的伪数组集合等 转换成真数组

  • isArray(value)

判断一个value是否为数组

  • of(...args)

创建一个由形参组成的数组

实例方法

  • at(index)

接受正数,返回指定下标的数组元素, 接收负数,则返回从模块开始算起的下标位置的元素

//例
var arr = [1,2,3,4,5]
var a1 = arr.at(2)
var a2 = arr.at(-2)
console.log("test", a1, a2) // test 3 4

concat(array/value)

入参可为数组或值,把原数组与形参(数组或值)拼接起来成一个新数组并返回

copyWithin(target[, start, end])

返回新数组不会改变原数组,target为正数时,下标从左开始,负数时则从右;
start可选,不填则默认为0end默认为arr.length;
var arr = [1,2,3,4,5]
var a1 = arr.copyWithin(2)
var a2 = arr.copyWithin(-2)
var a3 = arr.copyWithin(-3, 1, 2)
console.log("test", a1, a2) 
// test
// 1 2 1 2 3
// 1 2 3 1 2
// 1 2 2 4 5

every()

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

//例
var arr = [1,2,3,4,5]
var fn = function (item) {

    return item < 6
}
console.log(arr.every(fn)) // true

fill(value[, start, end])

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

filter(fn)

形参为函数,用于过滤满足条件的元素,并返回一个新数组

//例
var arr = [1,2,3,4,5]
var fn = function (item) {

    return item < 3
}
console.log(arr.every(fn)) //[1, 2]

find(fn)

形参为函数,用于查找符合条件的第一个子元素

//例
var arr = [1,2,3,4,5]
var fn = function (item) {

    return item < 3
}
console.log(arr.find(fn)) // 1

findIndex(fn)

形参为函数,用于查找符合条件的第一个子元素的下标

flat(deepNum = 1)

形参为整数,默认值为1,表示深复制的层级。返回一个新数组,用于数组的扁平化

//例
var arr1 = [1,2,3,[4,5]]
var arr2 = [1,2,3,[[4,5]]]
var a1 = arr1.flat()
var a2 = arr2.flat()
var a3 = arr2.flat(2)
console.log(a1, a2, a3)
//[1, 2, 3, 4, 5]
//[1, 2, 3, [4, 5]]
//[1, 2, 3, 4, 5]

forEach(fn)

无返回值,对数组的每个元素执行一次给定的函数。 var fn = function(item, index, arr){}

includes(value)

判断数组是否包含一个指定的值。返回bool

indexOf(value)

从左往右 查找数组指定元素第一次出现的下标,如果不存在,则返回-1

lastIndexOf(value)

从右往左 查找数组指定元素第一次出现的下标,如果不存在,则返回-1

join(str)

将数组的所有元素用一个指定的字符串拼接起来成一个新的字符串,并返回这个字符串

keys()

返回由数组中每个索引键组成的新的可迭代的对象(数组)

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key); 
}
// 0 1 2 

map(fn)

创建一个新数组, 新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1); // 2, 8, 18, 32

pop()

删除数组的最后一个元素

push(value)

向数组的最后添加一个元素

shift()

删除数组的第一个元素

unshift(value)

向数组的的最前面添加一个元素

reduce((res, item, index, arr)=>{}, initRes)

总共两个形参,第一个为fn, 第二为第一个形参函数第一次执行的res的值。 该方法会将每个数组元素都调用一遍fn,并返回处理后的结构作为下一次元素调用fn的第一个形参。 一般用于求和、多个数组求交集等需要累计迭代的数据

reverse()

数组反转。将数组中元素的位置颠倒,并返回该数组。

sort()

排序,默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

splice(start[, end, newArr])

在数组指定下标位置删除/替换/新增数组元素 此方法可实现数组的增删改

toString()

将数组所有元素由“,”拼接成字符串并返回

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
//"1,2,a,1a"