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]
补充:
使用以下方法也可将类数组转换为真实数组:
(1). [].concat.apply([], 类数组); 
(2). var arr = [];   [].push.apply(arr, 类数组);

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数组方法探究一二的更多相关文章

  1. JavaScript数组方法--every、some、fill

    接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...

  2. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  3. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  4. JavaScript 数组方法处理字符串 prototype

    js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...

  5. 2018.2.27 JavaScript数组方法应用

    JavaScript数组方法应用 1.找出元素item在给定数组arr中的位置 function indexOf(arr,item){ return arr.indexOf(item); } func ...

  6. JavaScript数组方法详解

    JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...

  7. JavaScript数组方法速查,32个数组的常用方法和属性

    JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...

  8. JavaScript数组方法大集合

    JavaScript数组方法集合 本文总结一下js数组处理用到的所有的方法.自己做个笔记. 数组方法 concat() 合并两个或多个数组 concat()能合并两个或者多个数组,不会更改当前数组,而 ...

  9. 一站式超全JavaScript数组方法大全

    一站式JavaScript数组方法大全(建议收藏) 方法一览表 详细操作 本人总结了JavaScript中有关数组的几乎所有方法(包含ES6之后新增的),并逐一用代码进行演示使用,希望可以帮助大家! ...

随机推荐

  1. PSoC电容式触摸感应技术

    PSoC是由Cypress半导体公司推出的具有数字和模拟混合处理能力的可编程片上系统芯片,某些系列的PSoC(如CY8C21X34系列),由于其内部配备的特殊资源,使得它可以很容易地实现电容式触摸感应 ...

  2. 5. repeater图片放大

    当把鼠标放在一张小图片上时,图片会自动放大,离开时它变小. 我们在静态页面中可以用jQuery来操作.如下为html中的源码. <!DOCTYPE html PUBLIC "-//W3 ...

  3. IAR FOR ARM 各版本,需要的大家可以收藏了

    原创,原帖地址是在阿莫论坛:http://www.amobbs.com/thread-5400051-1-1.html,这里也在博客贴上来供大家参考. 用过Keil和IAR,个人感觉是IAR还是很不错 ...

  4. ZOJ-1508Intervals(差分约束)

    题意: 有一个序列,题目用n个整数组合 [ai,bi,ci]来描述它,[ai,bi,ci]表示在该序列中处于[ai,bi]这个区间的整数至少有ci个.如果存在这样的序列,请求出满足题目要求的最短的序列 ...

  5. 解决wordpress的fonts.googleapis.com在国内无法访问的问题

    因为wordpress及主题的样式中几乎都使用了fonts.googleapis.com,而国内因为你知道的原因,是无法正常使用google服务的,因此导致在很多国内设备上打不开wordpress页面 ...

  6. varnish esi出现no esi processing, first char not ‘<’的错误处理方式

    大致意思是varnish的ESI使用mod_deflate来处理可以接受含有请求头Accept-Encoding的请求,这样转发到后端服务器后,后端服务器返回的响应内容就不是一个格式良好的XML或ht ...

  7. bootstrap 仿实例

    bootstrap实现一个网页 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta ...

  8. kubernetes kubeadm部署高可用集群

    k8s kubeadm部署高可用集群 kubeadm是官方推出的部署工具,旨在降低kubernetes使用门槛与提高集群部署的便捷性. 同时越来越多的官方文档,围绕kubernetes容器化部署为环境 ...

  9. Linux 下实现控制屏幕显示信息和光标的状态

    //display.h /************************************************************* FileName : display.h File ...

  10. Linux中date命令的各种实用方法--转载

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,自己也曾经为时间的各种表示方法和如何修改时间而困惑,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的 ...