JavaScript之数组(Array)详解

ECMAScript的数组与其他语言中的数组有着相当大的区别。虽然ECMAScript中的数组也是有序列表,但是它数组你的每一项可以保存任何类型的数据。ECMAScript数组的大小是可以动态调整的。
    创建数组的基本方式有两种。第一种是使用Array构造函数,如下所示:

代码如下:

var colors = new Array();

如果知道数组要保存的项目数量,也可以给构造函数传递参数,而该参数会自动变成length属性的值,如下:

代码如下:

var colors = new Array(20);

也可以向Array构造函数中传递数组中应包含的项,如下代码所示:

代码如下:

var colors = new Array("red","blue");

另外,使用Array构造函数时也可以省略new操作符,如下所示:

代码如下:

var colors = Array(20);

创建数组的第二种方式是使用数组字面量表示法。数组字面量由一对包含数组项的方括号表示,多个数组项之间用逗号隔开,如下所示:

代码如下:

var color = ["red","blue"];
var names = [];
var values = [1,2,]//IE8及之前3项,其他2项,不建议使用

与对象一样,在使用数字字面量表示法时,也不会调用Array的构造函数。
   在读取和设置数组的值时,要使用方括号并提供相应值的基于0的数字索引,如下所示:

代码如下:

var colors = ["red","blue"]; //定义数组
alert(colors[0]); //red
colors[1] = "black" //修改第2项
colors[2] = "brown" //新增第3

数组的项数保存在其length属性中,这个属性始终会返回0或更大的数字,如下所示:

代码如下:

var colors = ["red","blue"]; //定义数组
var names=[];
alert(colors.length);        //3
alert(names.length)          //0

值得注意的是,数组的length值不是只读的。因此,通过设置此值,可以从数组的末尾移出项或向数组添加项,如下:

代码如下:

var colors = ["red","blue"];
colors.length = 1;
alert(colors[1]); //undefined

利用length属性也可以方便的向数组末尾添加数据:

代码如下:

var colors = ["red","blue"];
colors[colors.length] = "black"; //在位置2新增
colors[colors.length] = "brown"; //在位置3新增

1、检测数组

对于一个网页或一个全局作用域而言,使用instanceof操作符可以做到:

代码如下:

if(value instanceof Array){
  // 执行操作
}

instanceof操作符局限性在于全局作用域,如果网页包含多个框架,就存在两个以上的全局执行环境。为了解决这个问题,ECMAScript5新增了Array.isArray()方法,使用如下:

代码如下:

if(Array.isArray(value)){
    // 执行操作
}

2、转化方法
    调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而调用valueOf()返回还是数组。如下所示:

代码如下:

var colors = ['red', 'blue', 'green'];
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors)            //red,blue,green

数组继承的toLocalString()、tiString()和valueOf()方法,在默认情况下都会以逗号分隔符的字符串形式返回数组项。而如果使用join()方法,则可以使用不同的分隔符来构建这个字符串。join()方法只接受一个参数,即用作分隔符的字符串,如下所示:

代码如下:

var colors = ['red', 'blue', 'green'];
alert(colors.join(',')); //red,blue,green
alert(colors.join('|')); //red|blue|green

如果数组中的某一项值为null或者undefied,那么该值在join()、toLocalString()、tiString()和valueOf()方法返回结果以空字符串表示。

3、栈方法

Javascript专门为数组提供了push()和pop()操作,以便实现类似栈的行为。

push()方法可以接收任意数量的参数,把他们逐个添加到数组末尾,并返回修改后数组的长度。pop()方法则从数组末尾溢出最后一项,减少数组的length值,然后返回移出的项。

代码如下:

var colors = new Array(); //定义数组
var count = colors.push("red", "blue"); //压入两项
alert(count); //2
count = colors.push("black"); //压入另一项
alert(count); //3
var item = colors.pop(); //弹出最后一项
alert(item); //"black"
alert(colors.length); //2

4、队列方法

栈数据结构的访问规则是LIFO(后进先出),而队列的访问规则是FIFO(先进先出)。队列在列表末端添加项,在前端移出项。

shift()方法能够移除数组中的第一项,并返回该项,数组的length-1。结合push()和shift()方法,可以像使用队列一样使用数组,如下所示:

代码如下:

var colors = new Array();
var count = colors.push("red", "blue");
count = colors.push("black");
alert(count);
var item = colors.shift(); //取得第一项
alert(item); //"red"
alert(color.length); //2

ECMAScript还为数组提供了unshift()方法。unshift()和shift()方法用途相反:它在数组前端添加任意个项并返回新数组的长度。因此,同时使用unshift()和shift()方法,可以从相反方向来模拟队列,即在数组前端添加新项,从数组末端移出项,如下所示:
 

代码如下:

var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
count = colors.unshift("black"); //推入另一项
alert(count); //3
var item = colors.pop(); //取得最后一项
alert(item) //green
alert(colors.length) //2

 5、重排序方法
    数组中已经存在两个可以直接用来重排序的方法:reverse()和sort()。reverse()方法会按照反转数组项的排序。

代码如下:

var values = [2, 1, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1

默认情况下,sort()方法按照升序排列数组项,调用每一项的toString()方法,比较字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的都是字符串。
 

代码如下:

var values = [12, 11, 3, 4, 5];
values.sort();
alert(values); //12,11,3,4,5

我们可以通过一个比较函数当作参数传递给sort()方法。如下:

代码如下:

function compare(value1, value2) {
    if (value1 < value2) {
        return -1
    } else if (value1 > value2) {
        return 1
    } else {
        return 0
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    //0,1,5,10,15

6、操作方法
    ECMAScript为操作在数组中提供了很多方法。其中,concat()方法可以基于当前数组中的所有项创建一个新数组。

代码如下:

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

slice()方法,它能够基于当前数组的一个项或多个项创建新数组,它可以接收一个或两个参数,即要返回项的起始和结束位置。一个参数时,返回该参数指定位置开始到当前数组末尾的所有项。两个参数则返回起始到指定位置的所有项——不包括结束位置的项。注意,slipe()方法不影响原始数组。

代码如下:

var colors=["red","green","blue","black","brown"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
alert(colors2); //green,blue,black,brown
alert(colors3); //green,blue,black

slice()方法删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。
    slice()方法插入:可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)和要插入的项。
    slipe()方法替换:可以项指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项。

代码如下:

var colors = ["red", "green", "blue"];
//删除
var removed = colors.slice(0, 1); //删除第1项
var colors3 = colors.slice(1, 4);
alert(colors); //green,blue
alert(removed); //red
//插入
removed = colors.slice(1, 0,"yellow","orange"); //从位置1开始插入
alert(colors); //green,yellow,orange,blue
alert(removed); //空数组
//替换
removed = colors.slice(1, 1,"red","purple"); //从位置1开始插入
alert(colors); //green,"red","purple",orange,blue
alert(removed); //"yellow"

7、位置方法
    ECMAScript5为数组提供了两个位置方法:indexOf()和lastIndexOf()。这两个方法都接收两个参数:要查找的项和表示查找起点位置的索引(可选)。其中indexOf()方法从数组的开头开始先后查找,lastIndexOf()方法则从数组的末尾开始向前查找。
    这两个方法都返回要查找的项在数组中的位置,在没有找到的情况下返回-1。

代码如下:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)) //3
alert(numbers.lastIndexOf(4)) //5
alert(numbers.indexOf(4, 4)) //5
alert(numbers.lastIndexOf(4, 4)) //3

8、迭代方法

ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数,第一个是进行迭代的函数,第二个是该函数的作用域对象【可选】。

进行迭代的函数接受三个参数,第一个是数组中要进行迭代的元素的值,第二个是数组候总要进行迭代的元素的位置,第三个是迭代数组本身。

1. every()      对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true    
 2. filter()       对数组中的每一项运行给定的函数,返回该函数返回true的项组成的数组。    
 3. forEach()  对数组中的每一项运行给定的函数,这个方法没有返回值    4. map()       对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组
    5. some()     对数组中的每一项运行给定的函数,如果该函数对任意一项返回true,则返回true
    这些迭代方法支持的浏览器有,IE9+,Firefox2+,Safari3+,Opera 9.5+,chrome
    在这些方法中,最相似的是every()和some(),它们都是用于查询数组中的项是否满足某个条件。对every()来说,传入的函数必须对每一项都返回true,这个方法才返回true;否则,他就返回false。而some()方法则是只要传入的函数对数组中某一项返回true,就返回true。

代码如下:

var num = [1,2,3,4,5,6,7,8,9];
var everyResult = num.every(function(item, index, array) {
    if(item > 2) {
        return true;
    }
});
alert(everyResult); //false
var someResult = num.some(function(item) {
    if(item > 2) {
        return true;
    }
});
alert(someResult); //true

filter()是利用指定的函数确定是否在返回的数组中包含某一项。

代码如下:

var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
    if(item > 2) {
        return true;
    }
});
alert(filterResult);  //[3,4,5,4,3]

map()也返回一个数组,而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。
 

代码如下:

var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
    if(item > 2) {
        return true;
    }
}); //[2,3,6,8,10,8,6,4,2]

forEach()是对数组中的每一项运行传入的函数。这个方法没有返回值,本质上与使用for循环迭代数组一样。

代码如下:

var num = [1,2,3,4,5,4,3,2,1];
num.forEach(function(item) {
  // 执行操作
});

9、归并方法

ECMAScript5中新增了两个方法:reduceRight() 和 reduce()。这两个方法都接受两个参数:第一个是用来迭代的数组的函数,这个函数有四个参数分别是,前一个值,当前值,项的索引,数组对象。然而这个函数的任何值都会作为第一个参数自动传给下一项。第二个是作为第一个函数中第一个参数的初始值 。

代码如下:

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array) {
    return prev + cur;
});
alert(sum);//15

(0)

相关推荐

  • javascript版的in_array函数(判断数组中是否存在特定值)

    我们经常会用到这个一样逻辑,判断一个字符串或者数字是否在数组内,很多程序语言都有这样一样专门的函数,比如PHP的in_array().那么JS有木有呢,很遗憾,JS木有这样的函数,于是想到伟大的JQ是否封装了这个函数,找到了API,JQ的确封装了这个函数jQuery.inArray( value, array ) 搜索数组中指定值并返回它的索引(如果没有找到则返回-1).value要搜索的值.array一个数组,通过它来搜索. 当然,处于学习,自己也去写了这样的函数: 复制代码 代码如下: fu

  • Javascript中Array用法实例分析

    本文实例讲述了Javascript中Array用法.分享给大家供大家参考.具体分析如下: JavaScript中的Array对象就是数组,首先是一个动态数组,而且是一个像C#.Java中"数组.List.HashMap/Dictionary"等的超强综合体. Array数组 使用方式: 例1: var citys = new Array(); //创建数组对象,无需初始化长度,动态 citys[0] = '上海'; citys[1] ='北京'; citys[2] = '深圳'; fo

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

    本文实例总结了JavaScript数组Array对象增加和删除元素方法.分享给大家供大家参考.具体分析如下: pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 undefined. shift 方法 移除数组中的第一个元素并返回该元素. arrayObj.shift( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 shift 方法可移除数组中的第一

  • JavaScript实现的in_array函数

    在JS中要判断一个值是否在数组中并没有函数直接使用,如PHP中就有in_array()这个函数.但我们可以写一个类似in_array()函数来判断是一个值否在函数中. /** * JS判断一个值是否存在数组中 */ // 定义一个判断函数 var in_array = function(arr){ // 判断参数是不是数组 var isArr = arr && console.log( typeof arr==='object' ? arr.constructor===Array ? ar

  • Javascript基础教程之数组 array

    字符串,数值,布尔值都属于离散值(scalar),如果某个变量是离散的,那么任何时候它只有一个值. 如果想使用变量存储一组值,就需要使用数组(array). 数组是由多个名称相同的树值构成的集合,集合中每个数组都是数组的元素(element),可以使用变量team存储团队里每个成员的名字. 在JavaScript中,数组使用关键字 Array声明创建,同事还可以声明变量的长度length.例如 复制代码 代码如下: var aTeam = new Array(12);//声明变量的长度 在无法预

  • javascript自定义in_array()函数实现方法

    本文实例讲述了javascript自定义in_array()函数实现方法.分享给大家供大家参考.具体如下: function in_array( what, where ){ var a=false; for(var i=0;i<where.length;i++){ if(what == where[i]){ a=true; break; } } return a; } 希望本文所述对大家的javascript程序设计有所帮助.

  • javascript模拟php函数in_array

    js 中判断某个元素是否存在于某个 js 数组中,相当于 php 语言中的 in_array 函数. Array.prototype.S=String.fromCharCode(2); Array.prototype.in_array=function(e){ var r=new RegExp(this.S+e+this.S); return (r.test(this.S+this.join(this.S)+this.S)); }; 用法如下: var arr=new Array(["b&quo

  • JavaScript实现数组降维详解

    二维数组降维 二维数组只有两个维度,降维比较简单,也不用考虑太复杂的算法逻辑,我们看一下二维数组降维的几种方法: 遍历降维 var arr = [ ['h', 'e', 'l', 'l', 'o'], ['m', 'y'], ['w', 'o', 'r', 'l', 'd'], ['!'] ]; var result = []; for (var r = 0; r < arr.length; r++) { for (var c = 0; c < arr[r].length; c++) { re

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

  • JavaScript async/await使用详解

    目录 一.简介 二.async 三.await 四.案例 附-直接量/字面量 一.简介 async/await是ES20717引入的,主要是简化Promise调用操作,实现了以异步操作像同步的方式去执行,async外部是异步执行的,同步是await的作用. 二.async async,英文意思是异步,当函数(包括函数语句.函数表达式.Lambda表达式)前有async关键字的时候,并且该函数有返回值,函数执行成功,那么该函数就会调用Promise.resove()并隐式的返回一个Promise对

  • JavaScript数据结构链表知识详解

    最近在看<javascript数据结构和算法>这本书,补一下数据结构和算法部分的知识,觉得自己这块是短板. 链表:存储有序的元素集合,但不同于数组,链表中的元素在内存中不是连续放置的.每个元素由一个存储元素本身的节点和一个指向下一个元素的引用(也称指针或链接)组成. 好处:可以添加或移除任意项,它会按需扩容,且不需要移动其他元素. 与数组的区别: 数组:可以直接访问任何位置的任何元素: 链表:想要访问链表中的一个元素,需要从起点(表头)开始迭代列表直到找到所需的元素. 做点小笔记. funct

  • JavaScript里 ==与===区别详解

    1.对于string,number等基础类型,==和===是有区别的 1)不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否相等,===如果类型不同,其结果就是不等 2)同类型比较,直接进行"值"比较,两者结果一样 2.对于Array,Object等高级类型,==和===是没有区别的 进行"指针地址"比较 3.基础类型与高级类型,==和===是有区别的 1)对于==,将高级转化为基础类型,进行"值&quo

  • JavaScript String 对象常用方法详解

    字符串是不可变的.字符串方法,不会改变原有字符串的内容,而是返回一个新字符串. charAt():返回在指定位置的字符. concat():连接两个字符串文本,并返回一个新的字符串. indexOf(): indexOf() 方法返回指定值在字符串对象中首次出现的位置. match(): 使用正则表达式与字符串相比较. replace(): 被用来在正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串. slice(): 摘取一个字符串区域,返回一个新的字符串. split(): 通过分

  • jQuery数组处理详解(含实例演示)

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代

  • 对python产生随机的二维数组实例详解

    最近找遍了python的各个函数发现无法直接生成随机的二维数组,其中包括random()相关的各种方法,都没有得到想要的结果.最后在一篇博客中受到启发,通过列表解析的方法得到随机的二维数组. 具体如下: a = [[random.randint(1, 4) for j in range(1, 3)] for i in range(1, 11)] print(array(a)) 其中random.randint(1, 4)用来产生一个随机整数.此时创建了一个10行2列的数组. [[1 3] [1

  • JavaScript This指向问题详解

    这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下,

  • javascript异常处理实现原理详解

    这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是例外处理 当 JavaScript程序在运行中发生了诸如数组索引越界.类型不匹配或者语法错误时,JavaScript解释器就会引发例外处理. ECMAScript定义了六种类型的错误,除此之外,我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息. 通过运用例外处理技术,我们可以实现用结构化的方式来响应错误事

随机推荐