第五章 引用类型(2.Array类型)

  ·   JS高设(第三版)   ·   JavaScript     浏览量:
  • ECMAScript数组与其他语言相同点在于,都是数据的有序列表。
  • 不同点在于:
    ECMAScript数组每一项可以保存任何数据类型。
    ECMAScript数组的大小可以动态调整,随着数据添加自动增长

创建数组有两种方法

1.new Array()

    var colors1 = new Array();
    var colors2 = new Array(20); // 创建长度为20的数组
    var colors3 = new Array("red", "yellow", "blue"); // 创建包含三个字符串的数组

2.字面量

    var colors  = ["red", "yellow", "blue"]; // 创建包含三个字符串的数组
    var name    = []; // 创建一个空数组
    var values  = [1, 2,]; // 请不要这样做!可能会创建一个2或3项的数组
    var options = [,,,,,]; // 请不要这样做!可能会创建一个5或6项的数组

在使用字面量定义数组时,同样也不会调用Array构造函数(Firefox3以及更早版本除外)

读取和设置值

使用[ ]并提供相应从0开始的索引数字编号,如下图
6

数组长度

  • 数组长度通过.length获取
  • 数组最多可以包含4 294 967 295个项
  • 数组长度不是只读的,可以手动设置

7

如上图,
最开始colors数组只有三个元素,也就是0,1,2三项
将第四项colors[3]设置为black之后自动变为四项,
然后将colors的长度手动设置为2之后,便将前两项之后的元素全部删除掉了

检测数组

  • 对于一个网页或者一个全局作用域而言,使用instanceofOK了
  • 如果包含框架即存在两个以上不同全局环境,使用Array.isArray(value)

8

转换方法

  • 所有对象都有toLocaleString()toString()valurOf()方法
  • 数组调用toString(),返回 数组中的值和逗号拼接成的字符串
  • 数组valueOf()返回的还是数组

9

  • toLacaleString()方法也经常返回与toString()valurOf()相同的值,但也不总是如此,当数组调用时他也会创建一个数组值以逗号隔开的字符串,与另两个不同之处在于,这一次为了取得每一项的值,调用的是每一项的toLacaleString()而不是toString()

10

如上图中,先定义两个对象,并未他们定义了各自的toLocaleString()toString()方法,
然后创建一个包含他们的数组,
打印出数组的toLocaleString()toString()结果
从结果可以看出,数组的toLocaleString()toString()方法调用的是数组每一项的toLocaleString()toString()方法

  • join方法可以返回数组的自定义间隔字符串

11

数组中的某一项是nullundefinedjointoLocaleString()toString()valurOf()中会被转化成空字符串

栈方法

栈就像一个桶,后面放进去的先拿出来

  • push()
    接受任意数量的参数,逐个添加到数组尾,并返回修改后数组长度
    12
  • pop()
    移除数组最后一项,减少数组长度length,返回被移除的项
    13

队列方法

队列则是像排队,先进去的先出来

  • 进入队列依然是push()

  • 出队列shift()
    从数组最前端移除一项,length减少1,并返回该项
    14

    ECMASCript还提供了unshift方法,与shift方法相反,在数组最前面添加任意个项,并返回长度(IE7及更早版本会返回undefined,IE8非兼容模式返回长度值)

重排序方法

  • reverse()

反转数组顺序
15

  • sort()
    直接使用:会调用数组每个项的toString()方法再进行比较,即使他的每项是数字
    传比较函数使用:比较函数接受两个参数,如果第一个参数应该位于第二个之前,返回负数,相等返回0,在之后返回整数,一下就是一个简单的比较函数例子
    16

    对于数值类型或者valueOf(),会返回数值类型的对象类型,比较函数更加简单

        function compare(value1, value2) {
            retuen value1 - value2;
        }
    

操作方法

  • contact()
    创建一个新的数组,并将1个或多个数组或者非数组拼接到原数组尾部,不会改变原数组
    21

  • slice()
    1.接受一或两个参数
    2.一个参数,返回该起使位置到末尾的所有项
    3.两个参数,返回第一个参数位置到第二个参数之间(不包括结束位置)的项
    4.传入复数后,会加上该数组长度来确定位置,结束位置小于开始位置,返回空数组
    5.不会对原数组进行改变
    18

  • splice()
    1.删除:传入两个参数,删除的第一项和项数
    2.插入:三个参数,起始位置,0(要删除的项数),要插入的项(可以是任意个)
    3.替换:三个参数,起始位置,要删除的项,要插入的任意思数的项
    4.splice()始终会返回一个数组,包含从原始数组中删除的项(可能为空)
    5.会对原数组进行改变
    20
    第一次 ,在第0个位置开始,删除1项,removed值为删除的第一项,colors少了第一个项["黄", "蓝", "绿", "青"]
    第二次 ,在第1个位置,删除0项,添加两项橙 、紫,所以返回值为空,colors为["黄", "橙", "紫", "蓝", "绿", "青"]
    第三次, 在第1个位置,删除1项,插入"白", "黑" ,返回值,最后colors结果为["黄", "白", "黑", "紫", "蓝", "绿", "青"]

位置方法

indexOf、lastindexOf()

  • 共同点:都接受两个参数,要查找的项和(可选)起始位置索引、都返回查找项在数组中的位置,没找到返回-1
  • 不同点:indexOf从数组开头(位置0)向后查找,lastIndexOf相反

1

迭代方法

共五种,都可传入两个参数,要在每一项上运行的函数和(可选)运行该函数的作用于对象--影响this的值
传入的函数有三个参数,数组该项的值,该项在数组中的位置和数组对象本身。
他们都会对数组每一项运行传入的函数。
以下为五个方法的详细区别,根据中文翻译很好区分:

  • every():(译:每一个)函数每次都返回true,则返回true。
  • filter():(译:过滤)返回函数结果为true的项组成的数组。
  • forEach():仅执行传入的函数,没有返回值。
  • map():(译:映射)返回每次调用函数结果组成的数组。
  • some():(译:一些)该函数对数组中任一项返回true,就返回true。

some和every最相似,都用于查询数组中的项是否满足某个条件,every是所有项满足返回true,some是有一项满足返回true,这就是逻辑(&&)与和或(||)的关系吧。
2

归并方法

ECMAScript还新增了两个归并数组的方法(还新增?那之前的就不介绍了吗。。。)。
reduce()和reduceRight(),都会迭代数组的每一项,reduce从第一项开始,另一个相反。
两个方法都接受两个参数,一个没想上都调用的函数和(可选)作为归并基础的初始值。
函数接受4个参数,前一个值,当前值,索引和数组对象,函数返回值会作为第一个参数传给下一项

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

第一次执行回调函数,prev是1,cur是。
第二次prev是3(第一次1+2的结果),cur是3。
这个过程会把数组中每一项都访问一遍,最后返回结果。
reduceRight()则是从最后一项开始往前遍历



收起 >>
第五章 引用类型(2.Array类型)