深入探密Javascript数组方法


Posted in Javascript onJanuary 08, 2015

在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法。数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'。

1. Array.prototype.slice方法
数组的 slice 方法通常用来从一个数组中抽取片断。不过,它还有将“类数组”(比如arguments和​HTMLCollection​)转换为真正数组的本领。

 var nodesArr = Array.prototype.slice.call(document.forms);

 var argsArr = Array.prototype.slice.call(arguments);

我就好奇了为什么数组的slice方法有这样的本领,它在javascript引擎中是如何实现的?slice的兄弟方法有没有这样的本领?

带着好奇心,下载Google的V8 javascript引擎源码到本地,V8源码的下载地址:https://github.com/v8/v8。

在v8-master/src/array.js中查找“Array.prototype.slice”:

function ArraySlice(start, end) {

  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");

  ...

  var result = []; // 这句是关键

  if (end_i < start_i) return result;

  if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) {

     ...

    SparseSlice(array, start_i, end_i - start_i, len, result);

  } else {

    SimpleSlice(array, start_i, end_i - start_i, len, result);

  }

  ...

  return result;

接着猜想调用“类数组”走的应该是SimpleSlice方法,然后在源码查找“SimpleSlice“,发现Array.prototype.splice源码中也调用了SimpleSlice方法,且结果变量也初始化为空数组。不过,想用splice方法把“类数组”转化为真正数组,必须要传入起始位置参数为0,即:

 var nodesArr = Array.prototype.splice.call(document.forms, 0);

因为它的实现原理就是将被删除的数组项组成新数组。感兴趣的童鞋可以看下Array.prototype.splice的源码实现。
此外,slice还可以克隆一个数组:

 var arr = [1, 2, 3];

 var cloneArr = arr.slice(); // cloneArr:  [1, 2, 3]

2. Array.prototype.push 方法
使用 push方法可以合并数组:

 var arr1 = [1, 'str', {name: 'lang'}];

 var arr2 = [2, 'ing'];

 Array.prototype.push.apply(arr1, arr2);

 // 返回结果:[1, "str", {name: 'lang'}, 2, "ing"]

3. Array.prototype.sort 方法
先上代码:

var arr = ['1', '2', '10', '12'];

arr.sort();

// 返回结果:["1", "10", "12", "2"]

上面的结果通常不是我们想要的,那么如何按数值大小排序:

arr.sort(function(a, b) {

  return a - b;

})

// 返回结果:["1", "2", "10", "12"]

有了排序比较器函数之后,就可以自定义很多比较器,从而实现个性化的排序。

4. length 属性
数组的length属性,不是只读的,也就说还可写哦,比如使用length属性去截断数组:

 var arr = [1, 2, 3, 4];

 arr.length = 2;

 // arr: [1, 2]

 arr.length = 0;

 // arr: []

与此同时,如果把length属性变大,数组的长度值变会增加,且使用undefined来作为新的元素填充。

 var arr = [];

 arr.length = 3;

 // arr: [undefined, undefined, undefined]

好了,今天就总结到这里了,已经凌晨了,以后有什么新发现再append到这里。
之前,没有写博客的习惯,只习惯把平时的总结放到有道云笔记中,没想到把观点写出来着实要花点心思的,因为要考虑如何表达,才能让别人更好地理解。

有什么表达不对或理解错误的地方,还望大家帮忙指正出来。

另附上一些常用的javascript数组方法

concat()连接两个或更多的数组,并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素,并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素
sort()对数组的元素进行排序
splice()删除元素,并向数组添加新元素。
toSource()返回该对象的源代码
toString()把数组转换为字符串,并返回结果。
toLocaleString()把数组转换为本地数组,并返回结果。
unshift()向数组的开头添加一个或更多元素,并返回新的长度。
valueOf()返回数组对象的原始值

Javascript 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 #Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 #Javascript
jQuery中parents()方法用法实例
Jan 07 #Javascript
jQuery中parent()方法用法实例
Jan 07 #Javascript
jQuery中nextUntil()方法用法实例
Jan 07 #Javascript
jQuery中nextAll()方法用法实例
Jan 07 #Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
对盗链说再见...
2006/10/09 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
Javascript----文件操作
2007/01/18 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
vue 中几种传值方法(3种)
2019/11/12 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python pymongo模块用法示例
2018/03/31 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python字典遍历操作实例小结
2019/03/05 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
承诺书模板
2014/08/30 职场文书
运动员加油词
2015/07/18 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技