• JavaScript中原生Array数组方法详解


    JS中,数组可以通过 Array 构造函数或 [] 字面量的方式创建。数组是一个特殊的对象,继承自 Object 原型,但用 typeof 判断时,并没有一个特定的值,仍然返回 'object'。但使用 [] instanceof Array 返回 true。这说明,JS中存在一个类数组的对象,就像字符串对象或 arguments 对象。arguments 对象不是数组的实例,但仍然有 length 属性,值也可以被索引,因此也可以像数组一样被循环遍历。

    这篇文章中,我将盘点下定义在 Array 原型上的一些常用的方法,并逐一介绍其用法。

    • 循环 .forEach
    • 断言 .some,.every
    • 连接与合并 .join,.concat
    • 栈与队列 .pop, .push, .shift, .unshift
    • 模型映射 .map
    • 过滤 .filter
    • 排序 .sort
    • 聚合 .reduce, .reduceRight
    • 截取 .slice
    • 删除插入 .splice
    • 查找值 .indexOf
    • 查找键 in 操作符
    • 颠倒 .reverse

    native-array-functions

    1.forEach()

    forEach 对数组的所有成员依次执行且只执行一次参数函数,参数函数包含以下3个参数:

    • value 当前值
    • index 当前位置,索引值
    • array 当前数组

    进一步,可以传递一个可选参数用于指定函数里的 this 上下文。

    ['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) {
        this.push(String.fromCharCode(value.charCodeAt() + index + 2))
    }, out = [])
    
    out.join('')
    // <- 'awesome'
    

    forEach的缺陷是既不能中断循环,也不能抛出异常。

    2.some(), every()

    这两个方法类似“断言”(assert),返回一个布尔值,表示判断数组成员是否符合某种条件。
    类似于 forEach,同样接受一个包含 value, index, and array的回调函数作为参数,而且也可以指定 上下文中的this。
    some方法是只要一个成员的返回值是true,则整个some方法的返回值就是true,否则返回false。
    every方法是所有成员的返回值都是true,整个every方法才返回true,否则返回false。

    max = -Infinity
    satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) {
        if (value > max) max = value
        return value < 10
    })
    
    console.log(max)
    // <- 12
    
    satisfied
    // <- true
    

    3.join() and concat()

    这两个方法容易搞混,join是将数组内各个成员用分隔符连接成一个字符串,分隔符默认是 ,,concat用于多个数组的合并。它将新数组的成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。

    var a = { foo: 'bar' }
    var b = [1, 2, 3, a]
    var c = b.concat()
    
    console.log(b === c)
    // <- false
    
    b[3] === a && c[3] === a
    // <- true
    

    4.pop, .push, .shift, and .unshift

    每个人都知道往数组末尾添加一个元素是用push方法,但你知道可以一次性添加多个元素吗,像这样 [].push('a', 'b', 'c', 'd', 'z').
    pop是push方法的逆操作,去除数组最后一个元素同时返回这个元素,如果是空数组则返回 undefined,使用这两个方法很容易实现 LIFO(last in first out) 栈结构。

    function Stack () {
        this._stack = []
    }
    
    Stack.prototype.next = function () {
        return this._stack.pop()
    }
    
    Stack.prototype.add = function () {
        return this._stack.push.apply(this._stack, arguments)
    }
    
    stack = new Stack()
    stack.add(1,2,3)
    
    stack.next()
    // <- 3
    

    相应的,我们可以通过 .unshift and .shift 实现一个 FIFO (first in first out)队列。

    function Queue () {
        this._queue = []
    }
    
    Queue.prototype.next = function () {
        return this._queue.shift()
    }
    
    Queue.prototype.add = function () {
        return this._queue.unshift.apply(this._queue, arguments)
    }
    
    queue = new Queue()
    queue.add(1,2,3)
    
    queue.next()
    // <- 1
    

    使用 .shift (or .pop) 很容易用while循环清空一个数组,如下:

    list = [1,2,3,4,5,6,7,8,9,10]
    
    while (item = list.shift()) {
        console.log(item)
    }
    
    list
    // <- []
    

    5.map()

    map方法将数组的所有成员依次传入回调函数,然后把每一次的执行结果组成一个新数组返回。
    方法签名类似于 forEach,.map(fn(value, index, array), thisArgument).

    values = [void 0, null, false, '']
    values[7] = void 0
    result = values.map(function(value, index, array){
        console.log(value)
        return value
    })
    // <- [undefined, null, false, '', undefined × 3, undefined]
    

    undefined × 3 表明了回调函数不会在已删除或未赋值的成员执行,而是自己返回包含在返回数组中。Map在映射或转换数组时非常有用,比如下面这个例子:

    // casting
    [1, '2', '30', '9'].map(function (value) {
        return parseInt(value, 10)
    })
    // 1, 2, 30, 9
    
    [97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')
    // <- 'awesome'
    
    // a commonly used pattern is mapping to new objects
    items.map(function (item) {
        return {
            id: item.id,
            name: computeName(item)
        }
    })
    

    6.filter()

    filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。

    使用类似于,.filter(fn(value, index, array), thisArgument).

    [void 0, null, false, '', 1].filter(function (value) {
        return value
    })
    // <- [1]
    
    [void 0, null, false, '', 1].filter(function (value) {
        return !value
    })
    // <- [void 0, null, false, '']
    

    7.sort(compareFunction)

    sort方法对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。
    像大多数的排序函数一样,Array.prototype.sort(fn(a,b)) 接受一个回调函数用于比较 a,b 的大小,而且为下面三种情况之一:

    • return value < 0 if a comes before b
    • return value === 0 if both a and b are considered equivalent
    • return value > 0 if a comes after b
    [9,80,3,10,5,6].sort()
    // <- [10, 3, 5, 6, 80, 9]
    
    [9,80,3,10,5,6].sort(function (a, b) {
        return a - b
    })
    // <- [3, 5, 6, 9, 10, 80]
    

    8.reduce(), reduceRight()

    Reduce函数一开始很难理解,这些函数会循环数组,从左向右 (.reduce) 或从右向左 (.reduceRight),每次回调函数执行时会接受之前的部分结果,最终返回值是单个聚合的值。

    两个方法具有相同的语法:

    reduce(callback(previousValue, currentValue, index, array), initialValue)
    

    previousValue 是上次回调函数执行的返回值,或者第一次执行时的初始值;currentValue 是当前值;index 是当前值位置;array 是执行reduce方法数组的引用;initialValue 是初始值;

    .reduce方法的一个典型应用场景是数组成员求和:

    Array.prototype.sum = function () {
        return this.reduce(function (partial, value) {
            return partial + value
        }, 0)
    };
    
    [3,4,5,6,10].sum()
    // <- 28
    

    9.slice()

    slice()方法用于提取目标数组的一部分,返回一个新数组,原数组不变。

    arr.slice(start, end)
    

    它的第一个参数为起始位置(从0开始,会包括在返回的新数组之中),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。

    与concat()类似,slice()如果没有任何参数则返回原数组的浅拷贝。Array.prototype.slice可以用来将类数组的对象转换成真正的数组。

    Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
    // <- ['a', 'b']
    

    concat做不到,它会返回一个包含传入对象的数组。

    Array.prototype.concat.call({ 0: 'a', 1: 'b', length: 2 })
    // <- [{ 0: 'a', 1: 'b', length: 2 }]
    

    10.splice()

    .splice 是我最喜欢的array原生数组方法,它允许你在一次性在同一个位置删除、插入元素,注意:这个函数会改变原数组。

    var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
    var spliced = source.splice(3, 4, 4, 5, 6, 7)
    
    console.log(source)
    // <- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13]
    
    spliced
    // <- [8, 8, 8, 8]
    

    你可能注意到了,它会返回被删除的元素,这个常用于循环被删除的元素,你之前可能忘记了。

    var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
    var spliced = source.splice(9)
    
    spliced.forEach(function (value) {
        console.log('removed', value)
    })
    // <- removed 10
    // <- removed 11
    // <- removed 12
    // <- removed 13
    
    console.log(source)
    // <- [1, 2, 3, 8, 8, 8, 8, 8, 9]
    

    11.indexOf()、lastIndexOf()

    indexOf方法返回给定元素在数组中第一次出现的位置,如果没有出现则返回-1。

    var a = { foo: 'bar' }
    var b = [a, 2]
    
    console.log(b.indexOf(1))
    // <- -1
    
    console.log(b.indexOf({ foo: 'bar' }))
    // <- -1
    
    console.log(b.indexOf(a))
    // <- 0
    
    console.log(b.indexOf(a, 1))
    // <- -1
    
    b.indexOf(2, 1)
    // <- 1
    

    lastIndexOf方法返回给定元素在数组中最后一次出现的位置,如果没有出现则返回-1。

    注意,这两个方法不能用来搜索NaN的位置,即它们无法确定数组成员是否包含NaN。

    这是因为这两个方法内部,使用严格相等运算符(===)进行比较,而NaN是唯一一个不等于自身的值。

    12.in 操作符

    in 用于查找 key 在一个数组中是否存在,indexOf则是查找值。当然速度快于 indexOf.

    var a = [1, 2, 5]
    
    1 in a
    // <- true, but because of the 2!
    
    5 in a
    // <- false
    
    var a = [3, 7, 6]
    
    1 in a === !!a[1]
    // <- true
    

    in 操作符跟把相应位置的值转化为布尔值类似。!! 表达式常用于将一个值取反然后再取反,这是一种高效的将真值转为布尔值的方式。

    13.reverse()

    reverse方法用于颠倒排列数组元素,返回改变后的数组。注意,该方法将改变原数组。

    var a = ['a', 'b', 'c'];
    
    a.reverse() // ["c", "b", "a"]
    
    a // ["c", "b", "a"]
    
  • 相关阅读:
    【题解】直线交点数
    【题解】[TJOI2010] 阅读理解
    清北学堂 2020 国庆J2考前综合强化 Day7
    清北学堂 2020 国庆J2考前综合强化 Day6
    清北学堂 2020 国庆J2考前综合强化 Day5
    清北学堂 2020 国庆J2考前综合强化 Day4
    清北学堂 2020 国庆J2考前综合强化 Day3
    test
    清北学堂 2020 国庆J2考前综合强化 Day2
    清北学堂 2020 国庆J2考前综合强化 Day1
  • 原文地址:https://www.cnblogs.com/jiaoran/p/13753882.html
Copyright © 2020-2023  润新知