zoukankan      html  css  js  c++  java
  • JavaScript 数组操作方法

    这些数组的操作方法会改变原来的数组。在使用 Vue 或者 Angular 等框架的时候会非常实用,使用这些方法修改数组会触发视图的更新。

    Array.prototype.push

    该方法可以在数组末尾添加元素,接受一个或者多个元素作为参数。该方法返回数组新的长度。

    使用方式为:array.push(item1, item2, ...)

    添加单个元素到数组末尾:

    var arr = [1, 2, 3]
    var a = arr.push(4) // arr = [1, 2, 3, 4], a = 4
    

    添加多个元素到数组末尾:

    var arr = [1, 2, 3]
    var a = arr.push(4, 5) // arr = [1, 2, 3, 4, 5], a = 5
    

    将另外一个数组里的每一个元素依次添加到原数组末尾:

    // 使用 Function.prototype.apply 方法
    var arr = [1, 2, 3]
    var a = [].push.apply(arr, [4, 5]) // arr = [1, 2, 3, 4, 5], a = 5
    
    // 使用 ES2015 Spread Operator
    var b = arr.push(...[6, 7]) // arr = [1, 2, 3, 4, 5, 6, 7], b = 7
    

    Array.prototype.unshift

    该方法可以在数组开头添加元素,接受一个或者多个元素作为参数。该方法返回数组新的长度。

    使用方式为:array.unshift(item1, item2, ...)

    添加单个元素到数组开头:

    var arr = [1, 2, 3]
    var a = arr.unshift(0) // arr = [0, 1, 2, 3], a = 4
    

    添加多个元素到数组开头:

    var arr = [1, 2, 3]
    var a = arr.unshift(4, 5) // arr = [4, 5, 1, 2, 3], a = 5
    

    将另外一个数组里的每一个元素依次添加到原数组开头:

    // 使用 Function.prototype.apply 方法
    var arr = [1, 2, 3]
    var a = [].unshift.apply(arr, [4, 5]) // arr = [4, 5, 1, 2, 3], a = 5
    
    // 使用 ES2015 Spread Operator
    var b = arr.unshift(...[6, 7]) // arr = [6, 7, 4, 5, 1, 2, 3], b = 7
    

    Array.prototype.shift

    该方法删除数组的第一个元素,没有参数,并返回被删除的元素:

    var arr = [1, 2, 3]
    var a = arr.shift() // arr = [2, 3], a = 1
    

    如果数组已经为空,则数组不会有任何变化,返回值为 undefined。

    Array.prototype.pop

    该方法删除数组的最后一个元素,没有参数,并返回被删除的元素:

    var arr = [1, 2, 3]
    var a = arr.pop() // arr = [1, 2], a = 3
    

    如果数组已经为空,则数组不会有任何变化,返回值为 undefined。

    上面两个方法一次只能删除一个元素。

    Array.prototype.splice

    该方法可以在数组指定位置删除零个或多个元素,并用参数列表中声明的一个或多个值来替换那些被删除的元素。该方法返回被删除的元素组成的新数组,如果没有删除元素则返回一个空数组。

    使用方式为:array.splice(start, deleteCount, item1, item2, ...)

    • 参数 start 表示指定的位置,从 0 开始
    • 参数 deleteCount 表示删除元素的个数,为 0 表示不删除,该参数是可选的,如果不传,则 deleteCount = array.length - start
    • 参数 item1, item2, ... 表示将要添加的元素

    在指定位置删除一个元素:

    var arr = [1, 2, 3, 4, 5]
    var a = arr.splice(2, 1) // arr = [1, 2, 4, 5], a = [3]
    

    在指定位置删除多个元素:

    var arr = [1, 2, 3, 4, 5]
    var a = arr.splice(2, 2) // arr = [1, 2, 5], a = [3, 4]
    

    删除指定位置后面所有的元素,不传第二个参数:

    var arr = [1, 2, 3, 4, 5]
    var a = arr.splice(2) // arr = [1, 2], a = [3, 4, 5]
    

    清空数组:

    var arr = [1, 2, 3, 4, 5]
    var a = arr.splice(0) // arr = [], a = [1, 2, 3, 4, 5]
    

    在指定位置添加一个或者多个元素,第二个参数为 0:

    var arr = [1, 2, 3]
    var a = arr.splice(2, 0, 4, 5) // arr = [1, 2, 4, 5, 3], a = []
    

    在指定位置删除一个或者多个元素并添加一个或者多个元素:

    var arr = [1, 2, 6, 7, 5]
    var a = arr.splice(2, 2, 3, 4) // arr = [1, 2, 3, 4, 5], a = [6, 7]
    

    上面例子等同于修改数组中 arr[2] 和 arr[3] 的值。

    将另外一个数组里的每一个元素依次插入到原数组的指定位置:

    var arr = [1, 2, 5]
    var arr2 = [3, 4]
    
    // 使用 ES2015 Spread Operator
    arr.splice(2, 0, ...arr2) // arr = [1, 2, 3, 4, 5]
    
    // 使用 Function.prototype.apply 方法
    ;[].splice.apply(arr, [2, 0].concat(arr2)) // arr = [1, 2, 3, 4, 3, 4, 5]
    

    Array.prototype.reverse

    该方法颠倒数组中元素的顺序,没有参数,并返回原数组的引用:

    var arr = [1, 2, 3]
    var a = arr.reverse() // arr = [3, 2, 1], a === arr
    

    Array.prototype.sort

    该方法对数组进行排序,并返回原数组的引用。

    按字符顺序进行排序:

    var arr = [10, 5, 50, 15, 1, 25]
    var a = arr.sort() // arr = [1, 10, 15, 25, 5, 50], a === arr
    

    按数字从小到大进行排序:

    var arr = [10, 5, 50, 15, 1, 25]
    arr.sort((a, b) => a - b) // arr = [1, 5, 10, 15, 25, 50]
    

    按数字从大到小进行排序:

    var arr = [10, 5, 50, 15, 1, 25]
    arr.sort((a, b) => b - a) // arr = [50, 25, 15, 10, 5, 1]
    
  • 相关阅读:
    4星|《激荡十年,水大鱼大》:过去十年间国内商业简史
    4星|《三联生活周刊》2017年47期:所谓“嬉皮精神”,说白了就是让每一个人都能在不影响其他人的前提下,过自己想要的生活
    3星|《三联生活周刊》2017年48期:联大外文系主任叶公超让学生念一句英语就能判断出学生的籍贯
    3星|《终身成长》:成长型思维让人进步,固定型思维让人固步自封。有新意的励志书,但有锤子模式的嫌疑。
    4星|《癌症新知:科学终结恐慌》:非常新鲜的癌症科普
    PL/SQL Developer使用技巧
    Oracle数据导入导出imp/exp sp2-0734:未知的命令开头'imp...解决方法
    oracle数据库导入导出命令!
    如何完全卸载VS2010
    Oracle命令(一):Oracle登录命令
  • 原文地址:https://www.cnblogs.com/xyzhanjiang/p/6678339.html
Copyright © 2011-2022 走看看