深入探密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 相关文章推荐
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
jquery分页对象使用示例
Apr 01 Javascript
javascript数组输出的两种方式
Jan 13 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
js实现二级导航功能
Mar 03 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 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
PHP中图片等比缩放的实例
2013/03/24 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
js实现表格筛选功能
2017/01/18 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python中的json总结
2018/10/11 Python
python读写csv文件实例代码
2019/07/05 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
pygame实现非图片按钮效果
2019/10/29 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
Python 爬虫性能相关总结
2020/08/03 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
车间副主任岗位职责
2013/12/24 职场文书
留学推荐信写作指南
2014/01/25 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
见义勇为事迹材料
2014/12/24 职场文书
检讨书模板
2015/01/29 职场文书
大连星海广场导游词
2015/02/10 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
MySQL学习之基础操作总结
2022/03/19 MySQL
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers