这些数组的操作方法会改变原来的数组。在使用 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]

JavaScript 数组操作方法的更多相关文章

  1. JavaScript 数组操作方法 和 ES5数组拓展

    JavaScript中数组有各种操作方法,以下通过举例来说明各种方法的使用: 数组操作方法 push 在数组最后添加一个元素 var arr=[3,4,5,6] console.log(arr) // ...

  2. Javascript数组操作方法

    1.shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] ...

  3. JavaScript中的常用的数组操作方法

    JavaScript中的常用的数组操作方法 一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2 ...

  4. JavaScript常用数组操作方法,包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...

  5. javaScript之数组操作方法(一)

    本篇文章主要总结了几个简单的数组操作方法.数组就是一组数据的集合,接下来我们就了解一下几种数组的操作方法. 1. join方法:把数组的所有元素放入一个字符串.举例如下: var arrJoin=[& ...

  6. JavaScript 数组

    JavaScript 数组 简介:数组是值的有序集合,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 一:创建数组 ...

  7. ECMAScript 6中的数组操作方法

    本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性. Note: 我将使用交替使用构造器(constructor)和类(class)两个术语. 类 ...

  8. javascript数组浅谈2

    上次说了数组元素的增删,的这次说说数组的一些操作方法 join()方法: ,,] arr.join("_") //1_2_3 join方法会返回一个由数组中每个值的字符串形式拼接而 ...

  9. javascript数组浅谈1

    最近心血来潮要开始玩博客了,刚好也在看数组这块内容,第一篇就只好拿数组开刀了,自己总结的,有什么不对的地方还请批评指正,还有什么没写到的方面也可以提出来我进行完善,谢谢~~ 首先,大概说说数组的基本用 ...

随机推荐

  1. C#中运算符的使用

    通过学习知道了知道了运算符的分类及使用方法 运算符用于执行程序代码运算,会针对一个或一个以上操作数项目来进行运算.例如:2+3,其操作数是2和3,而运算符则是“+”. C#语言把除了控制语句和输入输出 ...

  2. Visual Studio 2017 Bugs

    Crash report information: Problem signature: Problem Event Name: CLR20r3 Problem Signature 01: deven ...

  3. 多线程爬坑之路--并发,并行,synchonrized同步的用法

    一.多线程的并发与并行: 并发:多个线程同时都处在运行中的状态.线程之间相互干扰,存在竞争,(CPU,缓冲区),每个线程轮流使用CPU,当一个线程占有CPU时,其他线程处于挂起状态,各线程断续推进. ...

  4. View的呈现(一)ActionResult

    ActionResult Http是一个单纯采用请求/回复消息交换模式的网络协议,Web服务器在接收并处理来自客户端的请求后悔根据处理结果对请求予以回应.一般来说针对请求的处理最终体现在对目标Acti ...

  5. 软件测试作业3 — PrintPrimes()

    一.Use the following method printPrimes() for questions a–d. (a) Draw the control flow graph for the p ...

  6. 1934: [Shoi2007]Vote 善意的投票

    1934: [Shoi2007]Vote 善意的投票 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 1174  Solved: 723[Submit][S ...

  7. H5 拖放

    HTML 5 拖放 HTML5 音频 HTML5 画布 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中, ...

  8. python 接口自动化测试--框架整改(五)

    代码结构: 目标架构: 1.用例分析器,自动根据接口的参数,类型生成测试用例 2.数据分析器,自动维护接口参数数据,动态数据自动生成,返回结果自动查询判断 3.核心调用引擎,分SOAP和HTTP两种, ...

  9. iPhone 设置铃声

    每次设置后,长时间不玩就忘记了,把写成博客:好记性不如烂笔头: 第一步:下载喜欢的音乐: 第二步,通过iTunes 文件 下的资料库 导入刚才下载的歌曲: 第三步:截取喜欢的部分,铃声最好设置在30秒 ...

  10. iOS开发之文件(分段)下载

    1.HTTP HEAD方法 NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url cachePolicy:0 t ...