深入探密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 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
react如何快速设置文件路径别名
Apr 28 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数据集构建JSON格式及新数组的方法
2012/11/07 PHP
解析isset与is_null的区别
2013/08/09 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
微信小程序 上传头像的实例详解
2017/10/27 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
详解Python中where()函数的用法
2018/03/27 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
机械设计专业应届生求职信
2013/11/21 职场文书
黄金酒广告词
2014/03/21 职场文书
五年级下册复习计划
2015/01/19 职场文书