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 UI AutoComplete 使用说明
Jun 20 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
vue-cli 首屏加载优化问题
Nov 06 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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 冒泡排序算法的实现代码
2010/08/08 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
python找出完数的方法
2018/11/12 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
如何写python的配置文件
2020/06/07 Python
Python可以用来做什么
2020/11/23 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
简短证婚人证婚词
2014/01/09 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
食品安全检查制度
2014/02/03 职场文书
行政部岗位职责范本
2014/03/13 职场文书
《画》教学反思
2014/04/14 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
HTML基础详解(下)
2021/10/16 HTML / CSS
关于MySQL中的 like操作符详情
2021/11/17 MySQL