深入探密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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 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
我的论坛源代码(八)
2006/10/09 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
微信支付开发发货通知实例
2016/07/12 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
javascript表单验证大全
2015/08/12 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
大韩航空官方网站:Korean Air
2017/10/25 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
公务员的自我鉴定
2013/10/26 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
迟到早退检讨书
2014/02/10 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
求职自荐信的格式
2014/04/07 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js