JavaScript之Array类型

1. 介绍

1.1 定义
//第一种方法:通过构造函数 Array //注:可以省略 new 关键字
var colors = new Array();
var colors = new Array(20);
var colors = new Array();
//第二种方法:数组字面量
var colors = [];
var colors = ["blue","black","green"];
1.2 使用和赋值
var colors = ["blue","black","green"];
alert(colors[0]);    //使用
colors[2] = "black"; //赋值
colors[3] = "brown"; //新增
1.3 length属性

length属性不是只读的!
通过设置此属性可以从数组的末尾添加或删除项,新增的项默认为undefined
利用length属性可以方便的向数组的末尾添加项。

var colors = ["blue","black","green"];
colors[colors.length] = "black";
colors[colors.length] = "brown";

colors[99] = "white";
alert(colors.length); //100

2. 检测数组:Array.isArray()

使用instanceof操作符的问题在于它是假定只有一个全局执行环境。如果项目中使用了多个框架,就存在两个以上的全局执行环境,从而存在两个以上版本的Array构造函数。
为了解决这个问题,ECMASsript5新增了Array.isArray()。这个方法的目的是最终确定某个值到底是不是数组。

var bool = value instanceof Array;
var bool = Array.isArray(value);

3. 转换方法:toLocaleString()、toString()、valueOf()、join()

JS中每个对象都有转换方法:toLocaleString()、toString()和valueOf()方法。

  • toString() 返回由数组中每个值得字符串形式拼接而成的一个以逗号分隔的字符串,为了创建这个字符串,会调用每一项的toString()方法;
  • toLocaleString() 返回由数组中每个值得字符串形式拼接而成的一个以逗号分隔的字符串,为了创建这个字符串,toLocaleString()方法;
  • valueOf() 返回的还是数组;
  • join() 可以使用不同的分隔符来构建数组字符串;

4.添加删除:push()、pop()、shift()、unshift()

  • push() :末尾添加
  • pop() :末尾删除
  • shift():前端移除
  • unshift():前端添加
  • :后进先出 (LIFO),栈中项的操作只发生在一个位置——栈的顶部。可使用push()、pop()实现。
  • 队列:先进先出 (FIFO),末尾添加、前端移除。可使用push()、shift()实现。

5.重排序方法:reverse()、sort()

  • reverse():反转
  • sort():排序
    返回值是排序后的数组
最简单的例子:
var array = [1,2,3,4,5];
var first = array.reverse();  //[5,4,3,2,1]
var second = first.reverse();  //[1,2,3,4,5]

在上面的例子,reserse()方法直观明了,但不够灵活,不能满足我们自定义排序规则的需求。因此才有了sort()方法。sort()方法默认按照升序排列。为了实现排序,该方法会自动调用每个数组项的toString()方法,比较字符串进行排序。如:

var array = [0,1,5,10,15];
var result = array.sort(); //[0,1,10,15,5]
//在这里会得到以外的结果,因为并不是按照数字比较的

sort()方法强大之处在于其可以接受一个比较函数作为参数,从而实现我们自定义排序规则。比较函数接收两个参数,表示的是数组中的两项,暂用a,b表示,如果a应该位于b之前,则返回一个负数(表示不用交换位置);如果a应该位于b之后,则返回一个正数(表示需要交换位置);如果a等于b,则返回0。例:

//比较方法
function compare(a,b){
    if(a<b){
        return -1;
    } else if(a>b){
        return 1;
    } else {
        return 0
    }
}

//使用以上比较方法实现升序
var array = [0,1,5,10,15];
var result = array.sort(compare); //[0,1,5,10,15]

通过以上形式,可以实现更复杂的排序效果。

6.操作方法:concat()、slice()、splice()

  • concat():合并数组,不影响原数组
    concat()方法会先创建当前数组的一个副本,然后将接收到的参数添加到副本的末尾,最后返回新建的数组。

    var colors1 = ['red','green'];
    var colors2 = colors1.concat('yellow',['blue','black']);
    //colors2 = ['red','green','yellow','blue','black']
    
  • slice():剪切数组,不影响原数组
    slice()基于当前数组的一个或多项组建新数组。接受一个或者两个参数.

    var colors1 = ['red','green','yellow','blue','black'];
    //若只有一个参数,则返回从该参数指定位置到结束位置之间项的数组
    var colors2 = colors1.slice(1);     //['green','yellow','blue','black']
    //若有两个参数,则返回第一个参数指定位置项至第二个参数指定项(不包含)之间的项的数组
    var colors3 = colors1.slice(1,4);   //['green','yellow','blue']
    //若参数中有负数,则用数组长度加上该参数确定位置
    var colors4 = colors1.slice(-4,-1); //['green','yellow','blue']
    //若第二个参数小于第一个参数,则返回空数组
    var colors5 = colors1.slice(2,1);   //[]
    
    
  • splice():剪接(删除、插入、替换),对原数组操作
    使用splice可以实现对原数组的删除、插入、替换操作,始终返回一个数组,该数组中包含从原始数组中删除的项。

    • 删除:接收两个参数:要删除的第一项位置和要删除的项数;
    • 插入:接收三个以上参数:起始位置、0(要删除的项数)、要插入的项;
    • 替换:接收三个以上参数:起始位置、要删除的项数、要插入的项;
      var colors = ['red','green','yellow','blue','black'];
      //删除
      var removed = colors.splice(0,1);  //['red']
      //colors = ['green','yellow','blue','black']
      
      //插入
      var removed = colors.splice(1,0,'white','orange'); //[]
      //colors = ['green','white','orange','yellow','blue','black']
      
      //替换
      var removed = colors.splice(1,1,'red'); //['white']
      //colors = ['green','red','orange','yellow','blue','black']
      

7.位置方法:indexOf()、lastIndexOf()

EXMAScript增加了两个位置方法。这两个方法都接收两个参数:要查找的项和开始查找的位置索引。返回值是要查找的项在数组中的位置,没找到返回-1.在查找的过程中使用全等操作符。

  • indexOf() 正序

  • lastIndexOf() 反序

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

8.迭代方法:every()、filter()、forEach、map()、some()

5个迭代方法,都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(影响this)。传入的函数接收三个参数:当前数组项的值,该项在数组中位置,数组本身。

  • every() :对数组中每一项运行给定函数,若结果全都是true,则返回true;

  • some() :对数组中每一项运行给定函数,有一项结果为true就返回true;

  • filter() :对数组中每一项运行给定函数,返回结果为true的数组项组合的新数组;

  • forEach() :对数组中每一项运行给定函数,没有返回值;

  • map() :对数组中每一项运行给定函数,返回每一项的运行结果数组;
    以上方法都不会修改原数组

    var number = [1,2,3,4,5,4,3,2,1];
    var everyResult =  number.every(function(item,index,array){
        return (item>2);
    });   //false
    
    var someResult = number.some(functon(item,index,array){
        return (item>2);
    });   //true
    
    var filterResult = number.filter(function(item,index,array){
        return (item>2);
    })   //[3,4,5,4,3]
    
    var mapResult = number.map(function(item,index,array){
        return (item*2);
    });  //[2,4,6,8,10,8,6,4,2]
    
    //forEach方法没有返回值
    number.forEach(function(item,index,array){
        //执行操作
    });
    

9.归并方法:reduce()、reduceRight()

ECMAScript5新增方法。这两个方法都会迭代数组所有项,构建一个最终返回值。接受两个参数:一个在每一项上调用的函数和作为归并基础的初始值。其中接受的第一个参数是函数,它接收4个参数:==前一个值,当前值,项索引,数组对象==;这个函数返回的任何值都会作为第一个参数自动传给下一项.两个函数执行方向不同,除此之外完全相同。

  • reduce() 正序
  • reduceRight() 反序
    //数组求和:
    var number = [1,2,3,4,5];
    var sum = number.reduce(function(prev, cur, index, array){
        return prev + cur;
    });    //15
    
    var sum = number.reduceRight(function(prev, cur, index, array){
        return prev + cur;
    });    //15
    
image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容