JS基础-数组常用方法

156 阅读5分钟

当我们习惯了一种方法,慢慢的会把其他的忘记。但是,不分场合地用同一个方法,可能会产生一些不可预测的副作用,并可能破坏代码的可读性,所以,我们需要总结并记住一些常用的方法,在其适合的场景来使用。提升代码质量

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