Javascript数组方法探究一二
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]
使用以下方法也可将类数组转换为真实数组:
(1). [].concat.apply([], 类数组);
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数组方法探究一二的更多相关文章
- JavaScript数组方法--every、some、fill
接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...
- 【译】你应该了解的JavaScript数组方法
让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...
- JavaScript数组方法大全(推荐)
原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...
- JavaScript 数组方法处理字符串 prototype
js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...
- 2018.2.27 JavaScript数组方法应用
JavaScript数组方法应用 1.找出元素item在给定数组arr中的位置 function indexOf(arr,item){ return arr.indexOf(item); } func ...
- JavaScript数组方法详解
JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...
- JavaScript数组方法速查,32个数组的常用方法和属性
JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...
- JavaScript数组方法大集合
JavaScript数组方法集合 本文总结一下js数组处理用到的所有的方法.自己做个笔记. 数组方法 concat() 合并两个或多个数组 concat()能合并两个或者多个数组,不会更改当前数组,而 ...
- 一站式超全JavaScript数组方法大全
一站式JavaScript数组方法大全(建议收藏) 方法一览表 详细操作 本人总结了JavaScript中有关数组的几乎所有方法(包含ES6之后新增的),并逐一用代码进行演示使用,希望可以帮助大家! ...
随机推荐
- IHS怎么通过80端口连接WAS——<转>
IHS如何通过80端口连接WAS? 经常看到有朋友问这个问题,所以简单总结一下基本步骤: IHS和WAS之间是通过Plugin来实现的,一般的Plugins和IHS安装在同一物理机器上,WAS安装 ...
- Firebase能改变什么(对SaaS,BaaS,PaaS,IaaS的解释比较清楚)
作为Google Cloud对标Amazon AWS重要的一环,Firebase能改变什么? 雷锋网 2016-05-25 12:18:49 查看源网址 阅读数:12 按:本文作者刘之,野狗CEO.野 ...
- linux 发布 qt(更新ld命令的路径依赖)
PATH 错误解决error while loading shared libraries: libXXX.so.X: cannot open shared object file: No such ...
- Maven实战四
转载:http://www.iteye.com/topic/1123231 为什么要定义Maven坐标 在我们开发Maven项目的时候,需要为其定义适当的坐标,这是Maven强制要求的.在这 ...
- 「Poetize3」Heaven Cow与God Bull
描述 Description 给定一个整数n,求一个整数m,满足m<=n,并且m/phi(m)的值最大.注:phi(m)代表m的欧拉函数,即不大于m且与m互质的数的个数. 题解:m/phi(m) ...
- 【转】java 容器类使用 Collection,Map,HashMap,hashTable,TreeMap,List,Vector,ArrayList的区别
原文网址:http://www.360doc.com/content/15/0427/22/1709014_466468021.shtml java 容器类使用 Collection,Map,Hash ...
- 【转】Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
原文网址:http://www.cnblogs.com/skywang12345/p/3308556.html 上一章,我们学习了Collection的架构.这一章开始,我们对Collection的具 ...
- 【模拟】Codeforces 671B Robin Hood
题目链接: http://codeforces.com/problemset/problem/671/B 题目大意: N个人,每个人有Ci钱,现在有一个人劫富济贫,从最富的人之一拿走1元,再给最穷的人 ...
- Directx 3D编程实例:随机绘制的立体图案旋转
最近朋友建议我写一些关于微软云技术的博客留给学校下一届的学生们看,怕下一届的MSTC断档.于是我也觉的有这个必要. 写了几篇博客之后,我觉得也有必要把这一年的学习内容放在博客做个纪念,就这样写了本篇博 ...
- WdatePicker 控制选择范围
1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...