JavaScript的Array数组类型

目录

1. 创建数组

1）使用Array构造函数（可以省略new操作符）

2）使用数组字面量表示法

2. 数组的length属性

3. 检测是否是数组

4. toLocaleString()、toString()、valueOf()、join()方法

5. 栈方法

6. 队列方法

7. 重排序方法

8. 操作数组元素的方法

1）concat()方法

2）slice()方法

3）splice()方法

9. 位置方法：indexOf()和lastIndexOf()

10. 迭代方法

11. 归并方法reduce()和reduceRight()

---

ECMAScript中的数组和其他语言的数组有着相当大的区别：

• ECMAScript 数组的每一项可以保存任何类型的数据；
• ECMAScript数组的大小可以动态调整，可向数组添加元素或者删除元素；

1. 创建数组

基本方式有两种；

1）使用Array构造函数（可以省略new操作符）

如果预先知道数组要保存的元素个数，可以给构造函数传递一个元素个数值，程序会自动将该值设置数组的长度length属性；

也可以向构造函数传递数组中包含的元素；

var colors = new Array();
console.log(colors.length);     //0
//设定初始数组的大小
var colors2 = new Array(20);
//给定数组的初始元素值
var colors3 = new Array("red", "blue", "green");
console.log(colors3);       //[ 'red', 'blue', 'green' ]

2）使用数组字面量表示法

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];        //中括号，元素之间用逗号隔开

在读取和设置数组的某个元素时，要使用方括号并提供相应值的基于0 的数字索引；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(singers[1]);        //周杰伦
console.log(singers[10]);       //undefined     如果访问超过最大索引值的索引，返回undefined
console.log(singers.length);    //4
//如果设置超过最大索引值的索引对应的元素时，数组的长度会自动变为该索引值+1
singers[10] = "田馥甄";
console.log(singers.length);    //11

2. 数组的length属性

length不是只读的，可以通过手动设置length进而删除数组的元素或者添加元素；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(singers.length);        //4
//手动设置length
singers.length = 10;
console.log(singers);               //[ '林俊杰', '周杰伦', '五月天', '邓紫棋', <6 empty items> ]
singers.length = 2;
console.log(singers);               //[ '林俊杰', '周杰伦' ]

//可以使用length索引在数组末尾添加新项
for(var i=0; i<4; i++){
    singers[singers.length] = i;
}
console.log(singers);               //[ '林俊杰', '周杰伦', 0, 1, 2, 3 ]

3. 检测是否是数组

检测数据类型一般使用instanceof操作符；

但是检测数组最好使用Array.isArray()方法；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(Array.isArray(singers));        //true
console.log(singers instanceof Array);      //true

4. toLocaleString()、toString()、valueOf()、join()方法

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

调用数组的toString()方法会返回由数组中每个元素的字符串形式拼接而成的一个以逗号分隔的字符串；（实际上，为了创建这个字符串会调用数组每一个元素的toString()方法）

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(singers.toString());            //林俊杰,周杰伦,五月天,邓紫棋
console.log(typeof(singers.toString()));    //string

调用valueOf()方法返回的还是数组；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(singers.valueOf());                 //[ '林俊杰', '周杰伦', '五月天', '邓紫棋' ]
console.log(Array.isArray(singers.valueOf()));  //true    表示返回值为数组

toLocaleString()方法经常也会返回与toString()方法相同的值，但也不总是如此（因为调用的函数不同，假如在对象中对这两个函数做了重载，返回结果可能不同）。当调用数组的toLocaleString()方法时，它也会创建一个数组元素以逗号分隔的字符串。而与toString()方法唯一的不同之处在于，调用的是每一元素的toLocaleString()方法，而不是toString()方法。

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(singers.toLocaleString());      //林俊杰,周杰伦,五月天,邓紫棋
console.log(typeof singers.toLocaleString());   //string

数组继承的toLocaleString()、toString()和valueOf()方法，在默认情况下都会以逗号分隔的字符串的形式返回数组项。而如果使用join()方法，则可以使用不同的分隔符来构建这个字符串。join()方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串。

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(singers.join("||"));        //林俊杰||周杰伦||五月天||邓紫棋

5. 栈方法

ECMAScript 为数组专门提供了push()和pop()方法，以便实现类似栈的行为；

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

pop()方法则从数组末尾移除最后一项，减少数组的length 值，然后返回移除的项；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
singers.push("许嵩", "田馥甄");
console.log(singers);               //[ '林俊杰', '周杰伦', '五月天', '邓紫棋', '许嵩', '田馥甄' ]
console.log(singers.length);        //6
console.log(singers.pop());         //田馥甄

6. 队列方法

shift()，它能够移除数组中的第一个元素并返回该项，同时将数组长度减1；

结合使用shift()和push()方法，可以像使用队列一样使用数组；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
singers.push("许嵩", "田馥甄");
console.log(singers);               //[ '林俊杰', '周杰伦', '五月天', '邓紫棋', '许嵩', '田馥甄' ]
console.log(singers.length);        //6
console.log(singers.shift());       //林俊杰
console.log(singers.length);        //5

unshift()方法能在数组前端添加任意个项并返回新数组的长度；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
console.log(singers.unshift("许嵩", "田馥甄"));      //6
console.log(singers);       //[ '许嵩', '田馥甄', '林俊杰', '周杰伦', '五月天', '邓紫棋' ]

7. 重排序方法

两个可以直接用来重排序的方法：reverse()和sort()；

reverse()方法会反转数组项的顺序；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
singers.reverse();
console.log(singers);   //[ '邓紫棋', '五月天', '周杰伦', '林俊杰' ]

默认情况下，sort()方法按升序排列数组项，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串；

var nums = [1, 11, 21, 5, 77, 9];
nums.sort();
console.log(nums);      //[ 1, 11, 21, 5, 77, 9 ]    比较对应数值的字符串

为了改变这种比较数值也要通过字符串来比较的窘境，我们可以将一个比较函数作为参数传递给sort()函数；

比较函数接收两个参数，如果第一个参数位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数位于第二个之后则返回一个正数。

function compare(value1, value2){
    if( value1 < value2 )
        return -1;
    else if( value1 > value2 )
        return 1;
    else
        return 0;
}

var nums = [1, 11, 21, 5, 77, 9];
nums.sort(compare);
console.log(nums);      //[ 1, 5, 9, 11, 21, 77 ]

8. 操作数组元素的方法

1）concat()方法

不会对原数组产生影响；

先创建一个数组副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组；（如果参数为数组，则将数组中的每一个元素都添加到结果数组中；如果没有参数，只是创建一个副本）

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
var singers2 = singers.concat("陈奕迅", "许嵩");
console.log(singers2);      //[ '林俊杰', '周杰伦', '五月天', '邓紫棋', '陈奕迅', '许嵩' ]

2）slice()方法

不会对原数组产生影响；

可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项组成的新数组。如果有两个参数，该方法返回起始和结束位置之间的项组成的数组，但不包括结束位置的项。

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
var singers2 = singers.slice(1,3);
console.log(singers2);      //[ '周杰伦', '五月天' ]

3）splice()方法

改变原数组：

向数组的中部插入或者删除项；

• 删除：需要两个参数，要删除的第一个元素的位置索引和删除的元素个数；返回删除的元素；

var singers = ["林俊杰", "周杰伦", "五月天", "邓紫棋"];
var singers2 = singers.splice(1,2);
console.log(singers2);      //[ '周杰伦', '五月天' ]
console.log(singers);       //[ '林俊杰', '邓紫棋' ]

• 插入：至少需要三个参数：起始位置、0（要删除的元素个数）、要插入的元素；
• 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3 个参数：起始位置、要删除的项数和要插入的任意数量的项。

9. 位置方法：indexOf()和lastIndexOf()

这两个方法都接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，indexOf()方法从数组的开头（位
置0）开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1；

10. 迭代方法

ECMAScript 5 为数组定义了5 个迭代方法：

• every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
• filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
• forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
• map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
• some()：对数组中的每一项运行给定函数，如果该函数存在一项返回true，则返回true。

每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象；

做参数的函数需要接收三个参数：数组项的值、该项在数组中的位置和数组对象本身；

function compare(item, index, array) {
    return item > 30;
}

var nums = [11, 2, 35, 24, 15, 36, 77, 48, 29];
console.log(nums.every(compare));            //false
console.log(nums.some(compare));            //true
console.log(nums.filter(compare))；        //[ 35, 36, 77, 48 ]
console.log(nums.map(compare));            //[ false, false, true, false, false, true, true, true, false ]
console.log(nums.forEach(compare));       //undefined

11. 归并方法reduce()和reduceRight()

reduce()方法从数组的第一项开始，逐个遍历到最后；而reduceRight()则从数组的最后一项开始，向前遍历到第一项；

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4 个参数：前一个值、当前值、项的索引和数组对象；

使用reduce()还是reduceRight()，主要取决于要从哪头开始遍历数组，除此之外，它们完全相同；