• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JavaScript原生数组Array常用方法

JavaScript原生数组Array常用方法

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了javascript array,javascript inarray,javascript new array,javascript中array,javascript array add等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

栈方法

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"]
</div>

合并两个数组

我们可以通过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
</div>

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
</div>

如果在一个空数组上使用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
</div>

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"]
</div>

重排序方法

sort方法和reverse方法

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

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

关于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]
</div>

因此, 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]
</div>

操作方法

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
</div>

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"]
</div>

从示例中可以看出:

  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"]
</div>

插入:
使用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); // [], 并没有删除元素
</div>

替换:
当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"]
</div>

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • javascript 中关于array的常用方法详解
  • JavaScript原生数组Array常用方法
  • JavaScript中数组Array方法详解

相关文章

  • 2017-05-11js 性能优化之快速响应的用户界面
  • 2017-05-11node.js入门学习之url模块
  • 2017-05-11Nodejs 获取时间加手机标识的32位标识实现代码
  • 2017-05-11Javascript中的prototype与继承
  • 2017-08-19js onclick函数传入参数问题
  • 2017-05-11jQuery元素选择器实例代码
  • 2017-05-11详谈jQuery unbind 删除绑定事件 / 移除标签方法
  • 2017-05-11jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
  • 2017-08-31react按需加载
  • 2017-05-11nodejs入门教程六:express模块用法示例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 详解AngularJS 路由 resolve用法
    • JS实现css hover操作的方法示例
    • 详解Weex基于Vue2.0开发模板搭建
    • js实现漫天星星效果
    • EasyUI为Numberbox添加blur事件的方法
    • Javascript中引用类型传递的知识点小结
    • angularjs实现下拉列表的选中事件示例
    • JavaScript简单验证码
    • AngularJS $http模块POST请求实现
    • 基于JavaScript实现的希尔排序算法分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有