深入探密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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
js正确获取元素样式详解
Aug 07 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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编程中八种常见的文件操作方式
2006/11/19 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JS 控件事件小结
2012/10/31 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
web打印小结
2017/01/11 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python常用模块用法分析
2014/09/08 Python
python编程使用协程并发的优缺点
2018/09/20 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python随机数分布random均匀分布实例
2019/11/27 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Python面向对象编程基础实例分析
2020/01/17 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
资料员岗位职责
2013/11/17 职场文书
主治医师岗位职责
2013/12/10 职场文书
就业协议书范本
2014/04/11 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
自主招生学校推荐信
2014/09/26 职场文书
四年级数学教学反思
2016/02/16 职场文书
高中美术教学反思
2016/02/17 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
python 爬取吉首大学网站成绩单
2021/06/02 Python