深入探密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 相关文章推荐
javascript题目,重写函数让其无限相加
Feb 15 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
vue弹窗组件使用方法
Apr 28 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
Python中的作用域规则详解
2015/01/30 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python输入多行字符串的方法总结
2019/07/02 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
20岁生日感言
2014/01/13 职场文书
简历自我评价模版
2014/01/31 职场文书
英语国培研修感言
2014/02/13 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
自我鉴定总结
2014/03/24 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
重阳节标语大全
2014/10/07 职场文书
国情备忘录观后感
2015/06/04 职场文书
情况说明书怎么写
2015/10/08 职场文书
数据库连接池
2021/04/06 MySQL