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 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
字节飞书面试promise.all实现示例
Jun 16 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
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
理解JS事件循环
2016/01/07 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
webpack多页面开发实践
2017/12/18 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
详解Python self 参数
2019/08/30 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python装饰器练习题及答案
2019/11/01 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
仓管岗位职责范本
2014/02/08 职场文书
家长建议怎么写
2014/05/15 职场文书
女生节标语
2014/06/26 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2019学校运动会开幕词
2019/05/13 职场文书