Array 常用方法详解

watcher
52 阅读8分钟

原数组会改变的Function：push/pop/unshift/shift/splice/reverse/sort/fill

  • Array.isArray(obj)

    • 判断元素是否为数组类型数据
    Array.isArray(arr) --->  true / false

  • Array.from(arrayLike, mapFn, thisArg)

    • 将伪数组转成数组, 拥有length属性的都可以
    • 可以将类似数组的对象 和 可遍历的对象 转换为真正的数组
    • 可以设置第二个可选参数 mapFn，让你可以在最后生成的数组上再执行一次方法后再返回
    • 应用: 去重
    let str = '12345'
    Array.from(str)  //  [1, 2, 3, 4, 5]
    Array.form(new Set([1, 2, 2, 3]))  // [1, 2, 3]
    [...new Set[1,2,2,3]]  // [1, 2, 3]
    Array.from(str, (value) => value + '1')  // ['11', '21', '31', '41', '51']

  • arr.join(separator)

    • 转字符串方法
    • separator: 字符串, 将数组项分隔符号, 不传默认 ',' !!!
    • 返回拼接的字符串, 原数组不发生变化
    let arr = [1,2,3,4,5]
    arr.join()    // '1,2,3,4,5'
    arr.join('')  // '12345'

  • arr.push()

    1. 栈方法, 末尾插入, 可插入'多'个
    2. 参数：(a, b) --- 插入的项值
    3. 返回修改后的数组长度，原数组发生变化

    let arr = [1,2,3]
    arr.push(4, 5...)  --->  5（length）
    arr  --->  [1,2,3,4,5]

  • arr.pop()

    1. 栈方法, 末尾移出一项
    2. 无参数
    3. 返回移出的项(是项的值)，原数组发生变化

    let arr = [1,2,3]
    arr.pop()  --->  3
    arr  --->  [1,2]

  • arr.unshift()

    1. 队列方法, 前端插入, 可插入'多'个
    2. 参数：(a, b...) --- 插入的项值 【插入多个在前端,新数组排列顺序同参数顺序】
    3. 返回修改后的数组长度, 原数组发生变化

    let arr = [1,2,3]
    arr.unshift(4, 5)  --->  5
    arr  --->  [5,4,1,2,3] !!!

  • arr.shift()

    1. 队列方法, 前端移出一项
    2. 无参数
    3. 返回移出的项(是项的值), 原数组发生变化

    let arr = [1,2,3]
    arr.shift()  --->  1
    arr  --->  [2,3]

  • arr.concat()

    1. 操作方法, 合并项 或 数组
    2. 参数：(a, [b]...) --- 按顺序合并-构成新的数组
    3. 返回合并后的新数组, 原数组不发生变化

    let arr = [1,2,3]
    arr.concat(4, [5])  --->  [1,2,3,4,5]
    [...arr, 4, ...arr2] ---> [1,2,3,4,...arr2]
    arr  --->  [1,2,3]

  • arr.slice()

    1. 操作方法, 截取数组连续项
    2. 参数：(start, end) --- (1) (-1)[截取最后一位]
             start: 必传, 起始位置, 负值-为倒叙位置(从-1往前-2、-3)
             end: 非必传, 结束位置(不包含当前位置), 不传默认到数组结尾
             start > end - 返回空数组
             start/end 为负值 === +length 后的截取位置
    3. 返回截取的【数组】, 原数组不发生变化
    4. 应用：截取特定位置的数组项,可定位

    let arr = [1,2,3,4]
    arr.slice(1)      --->  [2,3,4]
    arr.slice(1, 3)   --->  [2,3](不包含索引3)
    arr.slice(-2, -1) --->  [3]( === (3, 4)(不包含索引-1/4)(截取倒数第二位))

  • arr.splice()

    1. 操作方法, 修改原数组
    2. 参数：(start, num, a...)
             start: 必传, 起始位置, 负值-为倒叙位置
             num: 非必传, 删除项的个数, 为0不删除, 不传删除起始位置到【结尾】
             a... 非必传, 从当前位置插入的新项, 可多个
         注意传参不与slice同，非开始位置与结束位置
    3. 返回删除的项【数组】, 为删除时为空数组, 原数组发生变化
    4. 应用：修改原数组

    let arr = [1,2,3,4]
    arr.splice(1)      --->  [2,3,4]
    arr  --->  [1]
    let arr = [1,2,3,4]
    arr.splice(0, 2)   --->  [1,2]
    arr  --->  [3,4]
    let arr = [1,2,3,4]
    arr.slice(1, 2, 5, 6)  ---> [2,3]
    arr  --->  [1,5,6,4]

  • arr.reverse()

    1. 重排序方法, 原数组倒序
    2. 无参数
    3. 返回倒序的数组, 原数组发生变化

    let arr = [1,2,3,4]
    arr.reverse()   --->  [4,3,2,1]
    arr  --->  [4,3,2,1]

  • arr.sort()

    1. 排序方法, 原数组按一定规则排序
    2. 参数：(function)
            function: 不传, 默认升序(从小到大--按【字符串的比较】, 即使是数字)
            function(value1, value2) {}
                A. 返回正数, 则当前value1 排在 value2 的后面
                B. 返回负数, 则当前value1 排在 value2 的前面
                C. 返回0,    则当前value1 与 value2 相等, 不排序
    3. 返回特定规则排序的数组, 原数组发生变化

    let arr = [1,2,10,4]
    arr.sort()  --->  [1,10,2,4]
    arr.sort((value1, value2) => value1 - value2)  --->  [1,2,4,10]

  • arr.indexOf()

    1. 位置方法, 查找某个项【第一次出现】在数组中的索引
    2. 参数：(a, index) 要查找的项 --- 判断依据是 【全等于(===)】
             a: 要查找的项
             index: 查找的起始位置(包含index), 不传,则从数组开始查起
    3. 返回该项在数组中的索引,不在数组中则返回-1, 原数组不发生变化

    let arr = [1,2,10,4,10]
    arr.indexOf(10)  --->  2
    arr.indexOf(10, 3)  --->  4
    arr --->  [1,2,10,4,10]

  • arr.lastIndexOf()

    1. 位置方法, 同上, 查找某个项【最后一次出现】在数组中的索引
    2. index: 正常位置的索引, 然后往前查找

    let arr = [1,2,10,4,10]
    arr.lastIndexOf(10)  --->  4
    arr.lastIndexOf(10, 3)  --->  2
    arr --->  [1,2,10,4,10]

  • arr.includes() ES7

    1. 位置方法, 判断数组是否包含该项
    2. 参数：(a) ---> 需要判断的项值, 也是【全等于===】的判断
    3. 返回true/false, 原数组不发生变化

    let arr = [1,2,10,4,10]
    arr.includes(10) ---> true
    arr.includes(5)  --->  false
    arr --->  [1,2,10,4,10]

  • arr.find() ES6

    1. 位置方法, 查找第一个符合条件的数组成员
    2. 参数：(function --- 同遍历函数参数)
    3. 返回第一个满足条件的数组项值, 若未找到则返回undefined 原数组不发生变化

    let arr = [1,2,10,4,10]
    arr.find((item, index, arr) => return item > 5) ---> 10
    arr --->  [1,2,10,4,10]

  • arr.findIndex() ES6

    1. 位置方法, 同上, 只是返回第一个满足条件的数组成员【索引】
    2. 返回索引值, 未找到满足条件的则返回-1, 原数组不发生变化
    3. 应用：与.indexOf() .lastIndexOf() .includes() 区别在于
    4. 不是 查找已知道值的数组项 而是在一定范围或规则下 找满足条件的
    5. 与 every() some() 参数相同, 区别在于 不是 不仅判断有没有满足条件的 而且还要返回对应条件的数组项或索引

    let arr = [1,2,10,4,10]
    arr.findIndex((item, index, arr) => return item > 5) ---> 2
    arr --->  [1,2,10,4,10]

  • arr.map()

    1. 迭代方法
    2. 参数：(function - 通过 return 结果来组成新的数组)
    3. function(item, index, arr) ----> 每一项/索引/数组对象本身
    4. [arr] ---> 是原数组的浅拷贝,若在参数函数内对arr进行修改是可以改变原数组的,但不影响迭代
    5. 返回与原数组一一对应的新数组(即长度相同), 原数组不发生变化

    let arr = [1,2,3,4,5]
    arr.map((item, index, arr) => {
        return item + 1
    })  ---> [2,3,4,5,6]
    arr ---> [1,2,3,4,5]

  • arr.forEach()

    1. 迭代方法
    2. 参数：(function - 无返回值)
    3. function(item, index, arr) ----> 每一项/索引/数组对象本身
    4. 无返回值, 原数组不发生变化
    5. 应用：相当于循环数组, 处理一些数组任务

    let arr = [1,2,3,4,5]
    arr.forEach((item, index, arr) => {
        let str = item > 60 ? '及格' : '不及格'
    })  ---> undefined
    arr ---> [1,2,3,4,5]

  • arr.filter()

    1. 迭代方法
    2. 参数：(function - 通过 return true (非boolean型会转换后来判断是不是true) 来组成新的数组)
    3. function(item, index, arr) ----> 每一项/索引/数组对象本身
    4. 返回满足条件的新数组, 原数组不发生变化
    5. 应用：用于对原数组的筛选

    let arr = [1,2,3,4,5]
    arr.filter((item, index, arr) => {
        return item > 3
    })  ---> [4,5]
    arr.filter(item => return 2) ---> [1,2,3,4,5]( 2也是true 故所有项都是true 都返回 )
    arr ---> [1,2,3,4,5]
    !!!
    [1, 0, null, undefined, false, 9, 7].filter(Boolean) ---> [1,9,7]

  • arr.every()

    1. 迭代方法
    2. 参数：(function)
    3. function(item, index, arr) ----> 每一项/索引/数组对象本身
    4. 返回true/false: 参数函数每一个项全返回true,则返回true,有一项返回非true则返回false, 原数组不发生变化
    5. 应用：用于判断数组每一项是否满足条件

    let arr = [1,2,3,4,5]
    arr.every((item, index, arr) => {
        return item > 3
    })  ---> false (判断每一个项是否都是>3的)
    arr.every((item, index, arr) => {
        return item > 0
    })  ---> true (判断每一个项是否都是>0的)
    arr.filter(item => return 2) ---> true (2经过转换也是true故每一项都返回true, 则方法本身返回true)
    arr ---> [1,2,3,4,5]

  • arr.some()

    1. 迭代方法
    2. 参数：(function)
    3. function(item, index, arr) ----> 每一项/索引/数组对象本身
    4. 返回true/false: 至少有一项满足条件 则返回true, 都不满足则返回false, 原数组不发生变化
    5. 应用：用于判断数组是否至少有一项满足条件

    let arr = [10,90,55,34,58]
    arr.some((item, index, arr) => {
        return item > 60
    })  ---> true (判断是否至少有一个人及格)
    arr ---> [1,2,3,4,5]

  • arr.reduce()

    1. 归并方法
    2. 参数：(function, initValue)
    3. function(prev, cur, index, arr) ----> 前一项？/当前项/索引/数组对象本身
           return ...   函数返回值会作为下一次遍历的第一个参数,而cur为当前遍历位置的项
    4. initValue:  归并基础的初始值, 不传则 【prev 为遍历的第一项的值】
    5. 返回：最后位置遍历的最后一项的函数返回值, 原数组不发生变化
    6. 应用：累加器/计算数组中每个元素出现的次数

    let arr = [1,2,3,4]
    arr.reduce((prev, cur, index, arr) => {
        return prev + cur
    })  ---> 10

  • arr.reduceRight()

    1. 归并方法
    2. 同上, 只是遍历方向是从末尾开始, initValue不传 则第一次遍历 prev 为数组最后一项
    3. 应用：累加器/计算数组中每个元素出现的次数

  • arr.fill() ES6

    1. 填充方法
    2. 参数：(target, start, end)
    3. target: 必传, 待填充的元素(可为任意类型)
    4. start:  非必传, 填充的开始位置, 默认从头开始
    5. end:    非必传, 填充的结束位置(不包含该位置), 默认到数组结尾
    5. 返回一个重新填充的新数组, 原数组发生变化并与新数组相同
    6. 应用：用于给【初始化数组】赋初始值

    let arr = [1,2,3,4]
    arr.fill(5) --->  [5,5,5,5]
    arr  ---> [5,5,5,5]
    arr.fill(0, 2, 3) ---> [5,5,0,5](不包含索引位置3)
    new Array(5).fille(3) ---> [3,3,3,3,3]
    Array.from({length: 5}).fill(3) ---> [3,3,3,3,3]
avatar
文章
阅读
粉丝