深入探密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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
Javascript实现单选框效果
Dec 09 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简单生成一组与多组随机字符串的方法
2017/05/09 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
Angular2库初探
2017/03/01 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python关键字and和or用法实例
2015/05/28 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python中range()与xrange()用法分析
2016/09/21 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python实现月食效果实例代码
2019/06/18 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书