当我们习惯了一种方法,慢慢的会把其他的忘记。但是,不分场合地用同一个方法,可能会产生一些不可预测的副作用,并可能破坏代码的可读性,所以,我们需要总结并记住一些常用的方法,在其适合的场景来使用。提升代码质量
Array.of
定义: 该方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
const arr = Array.of(8,0)
// arr = [8, 0]
// 没有参数返回一个空数组
Array.fill(value, start, end)
定义:该方法将一个固定值填充到一个数组内,value为填充值,start为指定填充数组的起始索引(默认0),end为指定填充数组的终止索引(默认为数组的长度)
const arrA = [1,2,3,4,5,6,7];
const arrB = [1,2,3,4,5,6,7];
arrA.fill(8);
// arr [8, 8, 8, 8, 8, 8, 8]
arrB.fill(8, 3, 5);
// arrB [1, 2, 3, 8, 8, 6, 7];
Array.from(arrayLike, fn, thisArg)
定义:方法从一个类似数组或可迭代对象(string, Set, Map, arguments, )创建一个新的,浅拷贝的数组实例。fn和thisArg为可选参,如果指定的这两个参数,新数组的每个元素都会执行fn, thisArg为执行fn时的this对象
const arr = Array.from('12345', x => x*2);
//arr = [2, 4, 6, 8, 10]
Array.concat()
定义: 该方法用于用并两个或多个数组,不会改变原数组,而是返回一个新数组 适用场景: 合并数组
const arrA = [1, 2, 3];
const arrB = [4, 5, 6];
const arrC = arrA.concat(arrB);
// arrC [1, 2, 3, 4, 5, 6]
// arrA [1, 2, 3]
// arrB [4, 5, 6]
Array.flat(deep)
定义:将具有深层嵌套的数据按照deep的层级进行展开(默认为1),并且会去除数组内的空项,传入Infinity可展开任意深度的嵌套数组
const arr = [1,[2,3,[,4,5,[6,7],8],9],10, ,11];
arr.flat()
// [1, 2, 3,[4, 5,[6, 7], 8], 9, 10, 11]
arr.flat(1)
// [1, 2, 3, [4, 5,[6, 7], 8], 9, 10, 11]
arr.flat(2)
// [1, 2, 3, 4, 5, [6,7], 8, 9, 10, 11]
arr.flat(Infinity)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
Array.map(fn(value, index, array), thisArg)
定义:该方法返回一个新数组,其结果是该数组中的每个元素都调用一次提供的函数后的返回值, 总是会返回一个数组, 原数组不会改变。 适用场景:将原数组按照fn的规则生成新一个新数组
const arr = [1, 2, 3, 4, 5];
const result = arr.map((value, index) => {
return value > 4
});
/// result [false, false, false, false, true]
Array.forEach(fn(value, index, array), thisArg)
定义:该方法是对数组内的每一个元素执行一次给定的方法,没有返回值,操作不会改变原数组, 适用场景:外层变量赋值
const arrA = [1, 2, 3, 4, 5]
const arrB = arr.forEach((item, index) => {
return item*10;
})
// arrA [1, 2, 3, 4, 5]
// arrB undefined
Array.filter(fn(value, index, array), thisArg)
定义:该方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素,无符用返回空数组。 适用场景:列表筛选,数据筛选
const arrA = [1, 2, 4, 5, 6]
arrB = arrA.filter(item => item > 4)
// arrA = [1, 2, 4, 5, 6]
// arrB = [5, 6]
Array.find(fn, this.Arg)
定义:该方法返回数组中满足测试函数的第一个元素,无匹配返回undefined 适用场景:查找数组内特定元素
const arrA = [1, 2, 3, 4, 5]
const find = arrA.find(item => item > 4)
// arrA [1, 2, 3, 4, 5]
// find 5
Array.every(fn(value, index, array), thisArg)
定义:该方法测试当前数组内的所有元素是否满足指定函数的检测,返回一个布尔值,数组内所有元素都通过测试会返回true,反之返回false(如果是空数组,则回始终返回true)。 适用场景:数据检测
const arrA = [1, 2, 3, 4, 5]
const arrB = [1, 2, 3, 4, '5']
function isNumber(item) {
return typeof item === 'number'
}
let testA = arrA.every(isNumber)
let testB = arrB.every(isNumber)
//testA true
//testB false
Array.some(fn(value, index, array), thisArg)
定义:该方法测试数组中是否包含至少一个可以通过fn检测的元素,如果找到一个通过的元素会立即返回true并终止后面的检测,否则会将数组检测完,返回false
适用场景:检测数据是否满足最小要求
const arrA = [1, 2, 3, 4, 5];
let flagA = arrA.some((value, index) => {
console.log(value)
return value > 5;
})
// console 1, 2, 3, 4, 5
/// flagA: false
let flagB = arrA.some((value, index) => {
console.log(value)
return value > 2;
})
// console.log: 1, 2, 3
// flagB: true
Array.includes(value, formIndex)
定义:该方法检测数组中是否含有对应的value,返回布尔值,value为检测的值,fromIndex用于指定从数组的fromIndex索引位开始检测。
适用场景:特定状态的判断
const arrA = [1, 2, 3, 4, 5];
arrA.includes(5) // true
arrA.includes(6) //false
arrA.includes(5, 5) //false
Array.reduce(fn(accumulator, currentValue, index, array), initValue)
定义:该方法对数组中的每个元素都执行一次传入的fn,并将执行结果汇总为单个值并返回,accumulator为数组内上一个元素执行fn后的结果,currentValue为当前执行的元素,index为当前执行元素在数组内的索引,array为执行该方法的数组,initValue为第一次调用fn时的accumulator,如果没有传入initValue,那么数组的第一个元素作为初始值,该方法不可在空数组上使用(没有初始值会报错)。
const arrA = [1, 2, 3, 4];
const arrB = [];
let countA, countB;
function add(accumulator, currentValue) {
return accumulator + currentValue
}
countA = arrA.reduce(add);
// countA 1 + 2 + 3 + 4 = 10
countA = arrA.reduce(add, 10)
// countA 10 + 1 + 2 + 3 + 4 = 20
countB = arrB.reduce(add)
// countB : TypeError
countB = arrB.reduce(add, 10);
// countB 10