JavaScript原生数组Array常用方法


Posted in Javascript onApril 06, 2017

栈方法

push方法和pop方法, 可以使数组的行为类似于栈, 先进后出, 并且推入和弹出操作只发生在一端.

push方法

push方法可以接收一个或多个参数, 把它们追加到数组末尾, 并返回修改后数组的长度.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.push('f');
console.info('temp: ' + temp); // temp: 6
console.info(arr); // ["a", "b", "c", "d", "e", "f"]

temp = arr.push('g', 'h');
console.info('temp: ' + temp); // temp: 8
console.info(arr); // ["a", "b", "c", "d", "e", "f", "g", "h"]

合并两个数组

我们可以通过Array.prototype.push.apply()来合并两个数组, 示例如下:

var arr1 = ['a', 'b', 'c'],
  arr2 = ['x', 'y', 'z'];
var temp = Array.prototype.push.apply(arr1, arr2);
console.info(arr1); // ["a", "b", "c", "x", "y", "z"]
console.info(arr2); // ["x", "y", "z"]
console.info(temp); // 6

pop方法

pop方法是将数组的最后一项移除, 将数组长度减1, 并返回移除的项.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.pop();
console.info('temp: ' + temp); // temp: e
console.info('length: ' + arr.length); // length: 4

如果在一个空数组上使用pop方法, 则返回undefined

队列方法

队列的访问规则是先进先出, 并且队尾添加项, 队头移除项. push方法和shift方法结合使用, 就可以像操作队列一样操作数组.

shift方法

shift方法将移除数组的第一项, 将数组长度减1, 并返回移除的项.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.shift();
console.info('temp: ' + temp); // temp: a
console.info('length: ' + arr.length); // length: 4

unshift方法

相反地, 还有一个unshift方法, 它的用途与shift方法相反
unshift也可以在接收一个或多个参数, 把它们依次添加到数组的前端, 并返回修改后数组的长度.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.unshift('x', 'y', 'z');
console.info('temp: ' + temp); // temp: 8
console.info(arr); // ["x", "y", "z", "a", "b", "c", "d", "e"]

重排序方法

sort方法和reverse方法

sort方法和reverse方法是可以直接用来重排序的两个方法.
其中, reverse方法是用来反转数组的.

var arr = [1, 3, 2, 5, 4];
arr.reverse();
console.info(arr); // [4, 5, 2, 3, 1]

关于sort方法, 默认情况下, 它是对数组的每一项进行升序排列, 即最小的值在前面. 但sort方法会调用toString方法将每一项转成字符串进行比较(字符串通过Unicode位点进行排序), 那么这种比较方案在多数情况下并不是最佳方案. 例如:

var arr = [1, 3, 2, 5, 4];
arr.sort();
console.info(arr); // [1, 2, 3, 4, 5]

arr = [1, 5, 10, 20, 25, 30];
arr.sort();
console.info(arr); // [1, 10, 20, 25, 30, 5]

因此, sort方法可以接收一个比较函数作为参数, 由我们来决定排序的规则. 比较函数接收两个参数, 如果第一个参数小于第二个参数(即第一个参数应在第二个参数之前)则返回一个负数, 如果两个参数相等则返回0, 如果第一个参数大于第二个参数则返回一个正数, 例如:

var arr = [1, 5, 10, 20, 25, 30];
arr.sort(function(value1, value2){
  if(value1 < value2) {
    return -1;
  } else if(value1 > value2) {
    return 1;
  } else {
    return 0;
  }
});
console.info(arr); // [1, 5, 10, 20, 25, 30]

操作方法

concat方法

concat方法可以将多个数组合并成一个新的数组. concat可以接收的参数可以是数组, 也可以是非数组值.

var arr1 = ['a', 'b', 'c'],
  arr2 = ['x', 'y', 'z'],
  val = 'hello';
var temp = arr1.concat(val, arr2);
console.info('arr1: ' + arr1); // arr1: a,b,c
console.info('arr2: ' + arr2); // arr2: x,y,z
console.info('val: ' + val); // val: hello
console.info('temp: ' + temp); // temp: a,b,c,hello,x,y,z

concat方法并不操作原数组, 而是新创建一个数组, 然后将调用它的对象中的每一项以及参数中的每一项或非数组参数依次放入新数组中, 并且返回这个新数组.

concat方法并不操作调用它的数组本身, 也不操作各参数数组, 而是将它们的每个元素拷贝一份放到新创建的数组中. 而拷贝的过程, 对于对象类型来说, 是将对象引用复制一份放到新数组中, 而对于基本类型来说, 是将其值放到新数组中.

slice方法

slice方法可以基于源数组中的部分元素, 对其进行浅拷贝, 返回包括从开始到结束(不包括结束位置)位置的元素的新数组.

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp1 = arr.slice(),
  temp2 = arr.slice(1),
  temp3 = arr.slice(1, 2);
console.info(arr); // ["a", "b", "c", "d", "e"]
console.info(temp1); // ["a", "b", "c", "d", "e"]
console.info(temp2); // ["b", "c", "d", "e"]
console.info(temp3); // ["b"]

从示例中可以看出:

  1. slice方法并没有操作原数组, 而是创建了一个新的数组.
  2. 当没有传参数给slice方法时, 则返回从索引0开始拷贝的新数组.
  3. 传入一个参数, 如: arr.slice(1), 表示从索引1位置开始拷贝, 一直到原数组的最后一个元素.
  4. 传入两个参数, 如: arr.slice(1, 2), 表示从索引1位置开始拷贝, 一直拷贝到位置2但不包括位置2上的元素.

参数如果为负数, 表示从数组最后面的元素可以算起.

slice方法同样不操作调用它的数组本身, 而是将原数组的每个元素拷贝一份放到新创建的数组中. 而拷贝的过程, 也于concat方法相同.

splice方法

splice方法可以用途删除或修改数组元素. 它有如下几种用法:

删除:
当给splice方法中传入一个或两个参数时, 就可以从数组中删除任意元素.
传入一个参数: 要删除的的第一个元素的位置, 此时将会删除从要删除的第一个元素的位置起, 后面的所有元素.
传入两个参数: 要删除的第一个元素的位置和要删除的项数,
返回值均为删除的元素组成的数组, 例如:

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.splice(2);
console.info(arr); // ["a", "b"]
console.info(temp); // ["c", "d", "e"]

arr = ['a', 'b', 'c', 'd', 'e'];
temp = arr.splice(2, 2);
console.info(arr); // ["a", "b", "e"]
console.info(temp); // ["c", "d"]

插入:
使用splice方法可以向数组的指定位置插入任务数量的元素, 此时需要提供三个参数: 起始位置(要插入的位置), 0(表示要删除的项数, 0为不删除), 要插入的元素, 如果要插入多个元素可以添加更多的参数, 例如:

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.splice(2, 0, 'x', 'y', 'z');
console.info(arr); // ["a", "b", "x", "y", "z", "c", "d", "e"]
console.info(temp); // [], 并没有删除元素

替换:
当splice接收三个参数, 且第二个参数不为0时, 可达到在数组中替换元素的效果. 例如:

var arr = ['a', 'b', 'c', 'd', 'e'];
var temp = arr.splice(2, 2, 'x', 'y', 'z');
console.info(arr); // ["a", "b", "x", "y", "z", "e"]
console.info(temp); // ["c", "d"]

此示例表示, 从arr数组的位置为2的元素起, 删除2个元素, 并在位置2添加三个元素.
如果移除的元素个数不等于添加的元素个数, 那么数组的长度将发生变化.

另外,
从ECMAScript5开始, 还提供了数组的迭代方法, 归并方法等, 这些方法将在后面做出补充.

Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 #Javascript
微信小程序 下拉菜单的实现
Apr 06 #Javascript
微信小程序五星评分效果实现代码
Apr 06 #Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 #Javascript
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
vue.js指令和组件详细介绍及实例
Apr 06 #Javascript
javascript闭包功能与用法实例分析
Apr 06 #Javascript
You might like
Thinkphp关闭缓存的方法
2015/06/26 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
用Django写天气预报查询网站
2018/10/21 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
教师一岗双责责任书
2014/04/16 职场文书
北京奥运会口号
2014/06/21 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
同学会演讲稿
2019/04/02 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Python实现滑雪小游戏
2021/09/25 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js