深入探密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
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
jcrop基本参数一览
Jul 16 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
angular内置provider之$compileProvider详解
Sep 27 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 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 FPDF类库应用实现代码
2009/03/20 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
php表单敏感字符过滤类
2014/12/08 PHP
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
JS中的phototype详解
2017/02/04 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
知识竞赛主持词
2014/03/26 职场文书
工作说明书格式
2014/07/29 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
琅琊山导游词
2015/02/05 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
走近毛泽东观后感
2015/06/04 职场文书
九年级数学教学反思
2016/02/17 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers