深入探密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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
深入理解vue路由的使用
Mar 24 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
用模版生成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代码
2008/09/10 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
python 字符串split的用法分享
2013/03/23 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python飞机大战游戏实例讲解
2020/12/04 Python
销售自我评价
2013/10/22 职场文书
战友聚会主持词
2014/04/02 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
工作岗位职责范本
2015/02/15 职场文书
销售员自我评价
2015/03/11 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
js不常见操作运算符总结
2021/11/20 Javascript
python周期任务调度工具Schedule使用详解
2021/11/23 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技