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之后新增的),并逐一用代码进行演示使用,希望可以帮助大家! ...
随机推荐
- 【HDOJ】2217 Visit
挺好的一道DP. /* 2217 */ #include <iostream> #include <cstdio> #include <cstring> #incl ...
- 【HDOJ】2896 病毒侵袭
AC自动机模板题. #include <iostream> #include <cstdio> #include <cstring> #include <qu ...
- C Looooops(扩展欧几里得求模线性方程)
http://poj.org/problem?id=2115 题意:对于C的循环(for i = A; i != B; i+=C)问在k位存储系统内循环多少次结束: 若循环有限次能结束输出次数,否则输 ...
- -_-#【CSS】注释
- 数据结构(树套树):ZJOI 2013 K大数查询
有几个点卡常数…… 发现若第一维为位置,第二维为大小,那么修改时第一维修改区间,查询时第一维查询区间,必须挂标记.而这种情况下标记很抽象,而且Push_down不是O(1)的,并不可行. 那要怎么做呢 ...
- 用Myeclipse 编写struts.xml时,自动提示
之所以不自动提示,是因为这个xml它不知道自己的xml格式是什么有哪些标签,所以不知道该怎么提示 所以就要给它引入格式,所以要引入XSD或者DTD文件 1.首先打开MyEclipse的窗口,选择“Wi ...
- iOS 关于枚举的使用
枚举值 它是一个整形(int) 并且,它不参与内存的占用和释放,枚举定义变量即可直接使用,不用初始化. 在代码中使用枚举的目的只有一个,那就是增加代码的可读性. 使用: 枚举的定义如下: typed ...
- HDU 4628 多校第三场1008 dp
这题就没什么好说的了.直接枚举2 ^ 16 的状态,用1表示拿这位,0表示不拿,每次判断是否可以这么拿. #include <iostream> #include <cstdio&g ...
- Android下 scrollview的滚动停止事件的监听方法
使用递归调用的方法,每隔5毫秒检查一下是否已经停止,如果已经停止,就拿到事件啦! 不扯蛋,直接上代码. scrollContent就是我的scrollview. [代码]java代码: ? 1 2 3 ...
- 你好,C++(12)怎样管理多个类型同样性质同样的数据?3.6 数组
3.6 数组 学过前面的基本数据类型之后,我们如今能够定义单个变量来表示单个的数据.比如,我们能够用int类型定义变量来表示公交车的216路:能够用float类型定义变量来表示西红柿3.5元一斤. ...