深入探密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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
js实现删除json中指定的元素
Sep 22 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 socket方式提交的post详解
2008/07/19 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
php链表用法实例分析
2015/07/09 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
js实现本地图片文件拖拽效果
2017/07/18 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
岗位职责怎么写
2014/03/14 职场文书
企业趣味活动方案
2014/08/21 职场文书
村道德模范事迹材料
2014/08/28 职场文书
销售会议开幕词
2015/01/28 职场文书
员工辞职信范文
2015/03/02 职场文书
2016大一新生军训感言
2015/12/08 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
django上传文件的三种方式
2021/04/29 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby