深入探密Javascript数组方法

2014-08-29  来源:本站原创  分类:基础知识  人气:2 

这篇文章主要详细介绍了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()返回数组对象的原始值

相关文章
  • 深入探密Javascript数组方法 2014-08-29

    这篇文章主要详细介绍了Javascript数组方法,十分的全面详尽,有需要的小伙伴可以来研究下,希望对大家能有所帮助 在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. 1. Array.prototype.slice方法 数组的 slice 方法通常用来从一个数组中抽取片断.不过,它还有将"类数组"(比如arguments和​HTMLCo

  • JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法) 2013-10-07

    在数组插入字符,添加数组,删除数组可以用slice自带的方法.操作比较方便,这个代码是作者通过push与shift方法实现,只能是个思路,但不推荐这样的方法. Array.prototype.ArrayInsertAfter=function(Num,obj) { var tempArr=new Array(); var l=this.length; for(var i=0;i<l;i++) { tempArr.push(this.shift()); } l=tempArr.length; fo

  • JavaScript数组前面插入元素的方法 2014-03-04

    这篇文章主要介绍了JavaScript数组前面插入元素的方法,涉及javascript中unshift方法的使用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JavaScript数组前面插入元素的方法.分享给大家供大家参考.具体如下: JS数组带有一个unshift方法可以再数组前面添加若干个元素,下面是详细的代码演示 <!DOCTYPE html> <html> <body> <p id="demo">Click the

  • Javascript 更新 JavaScript 数组的 uniq 方法 2014-04-26

    上次写的一篇<JavaScript 数组的 uniq 方法>,发现代码的问题还是存在.比如如果数组内有 undefined 元素就无法过滤等. 昨天看见 Lazy 兄弟重新更新了函数,现在他是这样子写的: Array.prototype.uniq = function() { var resultArr = [], returnArr = [], origLen = this.length, resultLen; function include(arr, value) { for (var

  • javascript数组去重方法汇总 2014-06-28

    数组去重复是一个常见的需求,我们暂时考虑同类型的数组去重复.主要是理清思路和考虑下性能.以下方法,网上基本都有,这里只是简单地总结一下. javascript数组去重方法汇总 Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if

  • javascript数组去重方法终极总结 2014-08-15

    这篇文章主要介绍了javascript数组去重终极总结,本文列举了3种javascript数组去重方法,并分别分析了它们的优缺点,需要的朋友可以参考下 有时会碰上这种需求,需要将数组中重复的元素删除掉,而只保留一个.最先想到的办法很可能就是用2个for循环来做比较然后去除掉重复的元素,代码如下所示: 方法1: Array.prototype.distinct = function(){ var arr = [], len = this.length; for ( var i = 0; i < l

  • JavaScript数组Array对象增加和删除元素方法总结 2014-09-30

    这篇文章主要介绍了JavaScript数组Array对象增加和删除元素方法,实例总结了pop方法.push方法.splice方法.concat方法等的使用技巧,需要的朋友可以参考下 本文实例总结了JavaScript数组Array对象增加和删除元素方法.分享给大家供大家参考.具体分析如下: pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 undefined. shif

  • javascript数组操作总结和属性.方法介绍 2015-02-26

    这篇文章主要介绍了javascript数组操作总结,例如数组的创建.添加.删除.合并等操作方法,同时总结了属性和操作函数.方法等,需要的朋友可以参考下 一.数组的操作 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN

  • JavaScript数组问题解决的多种方法 2015-03-21

    JavaScript数组问题多种方法小结,众多blueidea高手联袂打造 a1=['020','021',..........'025',..........]; a2=['上海','天津',..........'南京',..........]; length一样长,并且一一对应,怎么得到a1里面025对应的a2的南京? 自己想了个办法,但是用到了很多eval还有循环,感觉不是很好: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 只要你确定了编号位置为三位,, 然后就ok! [C

  • 合并JavaScript数组的N种方法 2014-10-09

    By Kyle Simpson on 2014年9月9号 这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];var b = [ "foo", "bar", "baz", "bam", "bun", "fun&

  • 判断javascript数组的方法 2013-06-06

    判断javascript数组的方法 var is_array=function(){ return value && typeof value==='object' && value.constructor===Array; } 我们知道,javascript是一种弱类型的语言,并且,javascript中的一切实质上都是对象.那么,在javascript中如何进行对象的类型检查将是一个非常重要的话题. 这里,我将介绍两种在js中经常使用的用于类型检测的方法. 第一种方法是

  • javascript 数组Array的深入实践和方法解析 2014-11-26

    javascript常用的数据结构有数组和JSON,其中对于JSON而言,其相当于一个Map映射,javascript将JSON对象内置为浏览器对象,我们之前也讨论过,在这里不在多说. javascript数组是一种数据结构,另外也是一种对象 构建array对象的方式有2种,数据可以存储任何类型的数据 /**第一种方式**/ var arr = [1, 2, 3, "a", "b", 12.3, 6, new Object(),[1,2,3]]; /**第二种方式*

  • javascript数组使用调用方法汇总 2014-03-02

    JS数组方法汇总 shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 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下测试返回值

  • Javascript数组操作函数总结 2013-10-09

    这篇文章主要给大家汇总介绍了Javascript数组操作函数,需要的朋友可以参考下 其实平时用的比较多的应该是push和pop,不过还是都记下来,以便后面使用. shift :删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift :将参数添加到原数组开头,并返回数组的长度 复制代码 代码如下: var a = [1,2,3,4,5]; var

  • JavaScript数组随机排列实现随机洗牌功能 2014-02-23

    这篇文章主要介绍了JavaScript数组随机排列实现随机洗牌功能的方法,涉及javascript中基于list.sort方法实现数组随机排列的技巧,可应用于随机洗牌,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JavaScript数组随机排列实现随机洗牌功能的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以对数组内的元素进行随机排列,这个非常有用,比如我们在玩扑克牌的时候可以让扑克牌进行排列,也就是电脑洗牌. var list = [1,2,3,4,5,6,7,8,9];

  • javascript数组遍历for与for in区别详解 2014-02-25

    这篇文章主要介绍了javascript数组遍历for与for in区别,是篇非常不错的文章,这里推荐给小伙伴们. js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //foreach循环 for(var i in array){ alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是numbe

  • JavaScript数组常用操作技巧汇总 2014-03-29

    这篇文章主要介绍了JavaScript数组常用操作技巧,以实例形式汇总了针对数组的查找.连接.排序及迭代等各种常见操作技巧,非常具有实用价值,需要的朋友可以参考下 本文实例汇总了JavaScript数组的常用操作技巧.分享给大家供大家参考.具体如下: 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里主要汇总一下JavaScript数组操作的常用A

  • JavaScript splice()方法详解 2014-04-03

    这篇文章介绍了JavaScript splice()方法,有需要的朋友可以参考一下 定义和用法 splice() 方法用于插入.删除或替换数组的元素. 语法 arrayObject.splice(index,howmany,element1,.....,elementX) 参数 描述 index 必需.规定从何处添加/删除元素. 该参数是开始插入和(或)删除的数组元素的下标,必须是数字. howmany 必需.规定应该删除多少元素.必须是数字,但可以是 "0". 如果未规定此参数,则删

  • JavaScript数组函数unshift.shift.pop.push使用实例 2014-04-26

    这篇文章主要介绍了JavaScript数组函数unshift.shift.pop.push使用实例,本文先是讲解了声明数组的方法,然后对4个函数使用给出了一些例子,需要的朋友可以参考下 如何声明数组 s中数组的声明可以有几种方式声明 var tmp = []; // 简写模式 var tmp = new Array(); // 直接new一个 var tmp = Array(); // 或者new也可以 在new数组的时候可以传入一个参数,表示数组的初始化长度 复制代码 代码如下: // new

  • 解析javascript 数组以及json元素的添加删除 2014-06-01

    本篇文章是对javascript 数组以及json元素的添加删除进行了详细的分析介绍,需要的朋友参考下 javasscript删除数组的3种方法 1,用shift()方法shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var chaomao=[1,2,3,4,5] var chaomao.shift()//得到1 alert(chaomao)//[2,3,4,5] 2,用pop()方法pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回und