深入探密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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
javascript实现控制div颜色
Jul 07 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
JavaScript原型对象原理与应用分析
Dec 27 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+html5实现无刷新图片上传教程
2016/01/22 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
新春寄语大全
2014/04/09 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
检讨书格式
2015/01/23 职场文书
北京英语导游词
2015/02/12 职场文书
个人总结怎么写
2015/02/26 职场文书