天天看点

JavaScript高级程序设计阅读笔记—引用类型(Array)

    Array类型也是我们在开发中最常用的类型之一。当然ECMAScript中的数组与其他许多语言有一个极大的区别就是ECMAScript数组中的每一项值能够保存任意类型的数据,也就是说数组中的第一项可以保存字符串,第二项可以保存数值,第三项可以保存对象以此类推。而且ECMAScript中的数组大小是可以动态调整的,即可以随着数据的添加而自动增长。

    创建数组的方式有两种:

    第一种是通过Array构造函数创建。

var ages = new Array();
var names = new Array(20);
var colors = new Array("red", "blue", "green")
           

   如果你确定数组的长度时,则可以构造函数传入你想创建长度的数组,当然你也可以通过构造函数传入数组中应该包含的项。另外在使用Array构造函数时也可以省略new操作符。

var colors = Array(3);
var names = Array("jiaojiao");
           

    创建数组的第二种基本方法是使用数组的字面量表示法。

var colors = ["red", "blue", "green"];
var names = [];
var values = [1, 2,]; // 最好不要这么做,这样会导致创建2或3项的数组
           

    在读取和设置数组的值时,要使用方括号并提供相应值的基于0的索引值。当索引值小于数组的长度时,则会返回对应项的值,如果设置数组的值也使用同样的语法则会替换指定位置的值。如果设置某个值但索引值超过数组的长度时,那么数组就会自动增加该值到数组中,数组长度加1。

var colors = ["red", "blue", "green"]; // 定义一个字符串数组
alert(colors[0]); // 显示第一项
colors[2] = "black"; // 修改第三项
colors[3] = "brown"; // 新增第四项
           

    数组的项数保存在length中,这个属性始终返回0或者更大项,但这个属性并不是只读的。我们可以通过设置这个属性添加或删除数组末尾项。

var colors = ["red", "blue", "green"]; //创建一个包含3项的数组
colors.length = 2;
alert(colors[2]); // undefined
           
var colors = ["red", "blue", "green"];
colors.length = 4;
alert(colors[3]); // undefined
           

    这里我们设置了一个3项的数组,但是我们将length属性设置成了4,这个数组不存在位置3,所以我们访问它时就得到了特殊值undefined。

检测数组

    通常我们检测数组都是通过instanceof操作符来检测结果。但是这是在对于一个网页或者一个全局作用域中才有用,如果这个网页包含多个框架,那实际上就存在两个以上不同全局执行环境,因此会存在两个以上不同版本的Array构造函数。

    因此在ECMAScript5中新增了Array.isArray()方法。

转换方法

    所有对象都具有toString()、toLocaleString()和valueOf()方法。

    toString()和toLocaleString()这两个方法没有很大的区别都是获取值的字符串格式。

    valueOf()是获取对象的值。

    join():使用join()方法,可以使用不同的分隔符来构建这个字符串。join()方法只接收一个参数,即用作分隔符的字符串,然后返回包含所有数组的字符串。如果不给join()方法传入任何值,或者给他传入undefined,则使用都好作为分隔符。

栈方法

栈:栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构,也就是最新添加项最早被移除。

push():该方法可以接收任意数量的参数,把他们逐个添加到数组末尾,并返回修改后数组的长度。

pop():该方法则是从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

队列方法

队列:队列数据结构的访问规则是FIFO(First-In-Fist-Out,先进先出)。队列在列表的末尾添加项,从列表的前端移除项。

shift():它能够移除数组中的第一项并返回该项,同时将数组长度减1。结合使用shift()和push()方法。可以像使用队列一样使用数组。

unshift():它能在数组前端添加任意个项并返回新数组的长度。可以同时使用unshift()和pop()方法,可以从相反方向来模拟队列。

重排序方法

reverse():反转数组的顺序。

sort():在默认情况下,sort()方法按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的也是字符串。因此sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。

var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); // 0, 1, 10, 15, 5
           
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
           

    reverse()和sort()方法的返回值是经过排序之后的数组。

操作方法

    concat():基于当前数组中的所有项创建一个新数组。

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

    slice():它能够基于当前数组中的一或多项创建一个新数组。该方法可以接收一或者两个参数,即要返回项的起始和结束位置。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。并且slice()方法不会影响原始数组。

splice():主要用途是向数组中部插入项。

             删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。

             插入:可以向指定位置插入任意数量的项,只需要提供3个参数:起始位置、0(要删除的项数)和要插入的项(可以插入多个项)。

             替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项。

    splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

var colors = ["red", "blue", "green"]
var remove = colors.splice(0, 1);
alert(remove); // red
           

位置方法

    indexOf():从前往后查询需要查询的项的索引。

    lastIndexOf():从后往前查询需要查询的项的索引。

    这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。

迭代方法

    every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyResult = numbers.every(function(item, index, array) {
    return (item > 2);
})
alert(everyResult); // false
           

    filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

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

    forEach():对数组中的每一项运行给定函数,这个方法没有返回值。

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

    map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var mapResult = numbers.map(function(item, index, array) {
    return item * 2;
})
alert(mapResult); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
           

    some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var someResult = numbers.some(function(item, index, array) {
    return (item > 2);
})
alert(everyResult); // true
           

归并方法

    reduce():从数组的第一项开始,逐个遍历到最后。

    reduceRight():从数组的最后一项开始,向前遍历到第一项。

    这两个方法都接收两个参数:一个在每一项上调用的函数和(可选)作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。

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

继续阅读