深入探密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 浏览器判断实现函数
Aug 20 Javascript
javascript json2 使用方法
Mar 16 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
这样回答继承可能面试官更满意
Dec 10 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Python实现字典的key和values的交换
2015/08/04 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python创建自己的加密货币的示例
2021/03/01 Python
如何将字串String转换成整数int
2015/02/21 面试题
《乡愁》教学反思
2014/02/18 职场文书
洗发露广告词
2014/03/14 职场文书
工作作风承诺书
2014/08/30 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android
Nginx报404错误的详细解决方法
2022/07/23 Servers