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]
JavaScript 数组操作方法的更多相关文章
- JavaScript 数组操作方法 和 ES5数组拓展
JavaScript中数组有各种操作方法,以下通过举例来说明各种方法的使用: 数组操作方法 push 在数组最后添加一个元素 var arr=[3,4,5,6] console.log(arr) // ...
- Javascript数组操作方法
1.shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] ...
- JavaScript中的常用的数组操作方法
JavaScript中的常用的数组操作方法 一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2 ...
- JavaScript常用数组操作方法,包含ES6方法
一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...
- javaScript之数组操作方法(一)
本篇文章主要总结了几个简单的数组操作方法.数组就是一组数据的集合,接下来我们就了解一下几种数组的操作方法. 1. join方法:把数组的所有元素放入一个字符串.举例如下: var arrJoin=[& ...
- JavaScript 数组
JavaScript 数组 简介:数组是值的有序集合,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 一:创建数组 ...
- ECMAScript 6中的数组操作方法
本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性. Note: 我将使用交替使用构造器(constructor)和类(class)两个术语. 类 ...
- javascript数组浅谈2
上次说了数组元素的增删,的这次说说数组的一些操作方法 join()方法: ,,] arr.join("_") //1_2_3 join方法会返回一个由数组中每个值的字符串形式拼接而 ...
- javascript数组浅谈1
最近心血来潮要开始玩博客了,刚好也在看数组这块内容,第一篇就只好拿数组开刀了,自己总结的,有什么不对的地方还请批评指正,还有什么没写到的方面也可以提出来我进行完善,谢谢~~ 首先,大概说说数组的基本用 ...
随机推荐
- groovy学习(二)map
names = ['Ken' : 'Barclay', 'John' : 'Savage']divisors = [4 : [2], 6 : [3, 2], 12 : [6, 4, 3, 2]]pri ...
- Linux系统(四)负载均衡LVS集群之NAT模式
序言 提到LVS,就从章文嵩博士开始吧,反正也不知道如何下笔来写这一篇.章大博士,读博时候创建这个lvs软件项目,但是他提倡开源精神,在用户的建议和反馈中,这个花了他两周时间开发的开源软件不断得到改建 ...
- 【PHP系列】PHP推荐标准之PSR-3,日志记录器接口
上节聊完了PHP官方的相关代码规范,下面给大家带来了PHP系列的PHP推荐标准的另外两个,PSR-3,PSR-4. 首先,我们先来了解下PSR-3是怎么回事. PHP-FIG发布的第三个推荐规范与前两 ...
- 【openstack N版】——可视化服务horizon
一. openstack可视化服务horizon 1.1dashboard介绍 仪表盘依赖于功能核心服务,包括身份,图像服务,计算和网络两种(neutron)或传统网络(nova-neutron)与独 ...
- git全部使用步骤
今天要讲的内容:项目管理和工具 Git:版本控制系统 Less:动态的css语言,提高编写CSS的效率 Gulp:项目自动构建工具,对html,css,js,image进行压缩,合并等操作. 一.什么 ...
- 屏幕适配基础——了解:ppi、dpi、px、sp、dp
做android开发绕不开的几个名词:ppi.dpi.px.sp.dp.那么它们的定义.区别和联系都是什么呢?这篇博客系统的做一个概述和总结. 1.基本概念 px:pixel,像素,电子屏幕上组成一幅 ...
- .NET中利用反射来实现自动映射两个对象中的数据成员
在以前的项目开发之中,经常会遇到这样一个问题:比如在外面项目的架构设计之中,我们采用MVC和EntityFramework来构建一个Web应用程序.比如我们采用常用的多层架构,例如有Presentat ...
- 面向对象 "一"
1:面向对象不是所有情况都适用. 2面向对象编程 a:定义类 calss Foo: 注意顶一个类的时候首字母必须是大写 def (方法一)(self,bb) pass b:根据创建对象,创建和Foo实 ...
- Eclipse标准版安装J2EE插件
WTP 使用Eclipse IDE for Java EE Developers是非常方便,但是太大,我喜欢按需配置.首先我们来了解什么是WTP. WTP(Web Tools Platform )项目 ...
- Nginx+IIS+Redis 处理Session共享问题 2
接下来主要说下利用nginx来测试 两台Windows server 1.10.120.131.210 - 端口84部署demo 2.10.120.131.211 - 端口84部署demo ngi ...