深入探密Javascript数组方法

在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()返回数组对象的原始值

(0)

相关推荐

  • JavaScript数组方法总结分析

    由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaScript教程的整理,具体内容如下: 一.普通方法 1.join() 将数组元素连接在一起,并以字符串形式返回 参数:可选,指定元素之间的分隔符,没有参数则默认为逗号 返回值:字符串 对原数组的影响:无 2.reverse()将数组的元素顺序变成倒序返回 参数:无 返回值:数组 对原数组的影响:原数组被修改为倒序排列之后的数组 3.sort()对数组元素进行排序并返回 参数:可选,排

  • javascript中数组方法汇总

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "ccc"; //alert(arr.length);//3 arr.pop(); //alert(arr.length);//2 //alert(arr[arr.length-1]);//bbb arr.pop(); //al

  • JavaScript学习笔记之ES6数组方法

    ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6给数组添加了一些新特性,而这些新特性到目前为止完全可以运用到自己的业务层.在这一节中将总结有关于ES6给数组提供一些新特性的使用方法. ES6提供

  • Javascript中数组方法汇总(推荐)

    Array.prototype中定义了很多操作数组的方法,下面介绍ECMAScript3中的一些方法 1.Array.join()方法 该方法将数组中的元素都转化为字符串并按照指定符号连接到一起,返回最后生成的字符串,可以包含一个参数,为连接数组元素的符号,默认为逗号. var ay = [1,2,3]; ay.join(); // =>"1,2,3" ay.join("+"); // => "1+2+3" ay.join("

  • 超详细的javascript数组方法汇总

    一.数组的常用方法 1:join(); 将数组转为字符串显示.不输入参数,默认以逗号连接:输入参数,则以参数连接. var arr=[1,2,3]; console.log(arr.join()); // 1,2,3; console.log(arr.join("_")); // 1_2_3; console.log(arr); // [1,2,3]; 原数组不变. 2:reverse(); 将数组逆序排列,原数组被修改. var arr=[1,2,3]; var arr2=arr.r

  • 数组方法解决JS字符串连接性能问题有争议

    1.传统上,字符串连接一直是js中性能最低的操作之一. var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 2.发现这一点后,开发者们利用数组对象进行优化. var buffer=[],i=0; buffer[i++]="Hello";//通过相应索引值添加元素比push方法快 bu

  • javascript对数组的常用操作代码 数组方法总汇

    1. shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 2. unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5] b:7 注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,

  • javascript中FOREACH数组方法使用示例

    Array.prototype.forEach()方法让数组的每一项都执行一次给定的函数. - MDN 假设有这么一个场景,你拿到了这么一个数组 [   { symbol: "XFX", price: 240.22, volume: 23432 },   { symbol: "TNZ", price: 332.19, volume: 234 },   { symbol: "JXJ", price: 120.22, volume: 5323 },

  • JS中的数组方法笔记整理

    push()方法:可以向数组的末尾添加一个或者多个元素,并且返回新的长度 pop()方法:可以删除数组最后一个元素,并且返回被删除的元素,注意:如果数组是空的,该方法不进行任何操作,返回undefined. unshift()方法:可以向数组的开头添加一个或者多个元素,并且返回新的长度 shift()方法:可以删除数组第一个元素,并且返回被删除的元素,注意:如果数组是空的,该方法不进行任何操作,返回undefined. splice()方法:从数组中添加/删除项目,然后返回被删除的项目,该方法会

  • js数组方法扩展实现数组统计函数

    复制代码 代码如下: /*****************************************************CreateBy:joe zhou*Description:数组统计函数****************************************************/$.extend({    max: function (arr) {        return cacl(arr, function (item, max) {            if

  • JavaScript数组方法大全(推荐)

    数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习,下面小编给大家整理了关于数组的操作方法,一起看看吧. 数组创建 JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy&

随机推荐