JS引用类型 -- Array类型

Posted 2020-08-08

ECMAScript数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，ECMAScript数组的每一项可以保存任何类型的数据。而且ECMAScript数组的大小是可以动态调整的，即可以随着数据的添加自动增长。

创建数组的基本方式有两种：

第一种是使用Array构造函数：

//1. 使用Array构造函数
var colors = new Array();

//2.如果预先知道数组要保存的项目数量，也可以给构造函数传递该数量，改数量会自动变成length的属性值
var colors2 = new Array(20);
alert(colors2.length);    //20

//3.也可以向Array构造函数传递数组中应该包含的项。
var colors3 = new Array("red", "blue", "green");

//4.给构造函数传递一个值时，如果传递的是数值，表示该数组的长度。如果传递的是其他类型，则会创建包含那个值的数组
var colors4 = new Array(3);    // 创建一个包含3项的数组
var colors5 = new Array("Greg");    //创建一个包含1项的数组

//5. 在使用Array构造函数时也可以省略new操作符
var colors6 = Array(3);
var names = Array("Greg");

第二种是使用数组字面量表示法： 数组字面量是由一对包含数组项的方括号表示，多个数组项之间以逗号隔开

var colors = ["red", "blue", "green"];    //创建一个包含三个字符串的数组
var names = [];    //创建一个空数组

//在读取和设置数组的值时，要使用方括号并提供相应值的基于0的数字索引
alert(colors[0]);    //red
colors[2] = "black";
colors[3] = "brown";    //索引大于数组项时，自动增加一个
alert(colors.length);    //4

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

1.检测数组

instanceof ：

Array.isArray(): 确定某个值是否为数组

if(Array.isArray(colors)){
    alert("yes");
}

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

上述代码显示的调用了toString()和valueOf()方法，以便返回数组的字符串表示，每个值的字符串表示拼接成了一个字符串，中间以逗号隔开。最后一行代码直接将数组传递给了alert()。由于alert()要接收字符串参数，所以它会在后台调用toString()方法，由此会得到与直接调用toString()方法相同的结果。

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

var colors = ["red", "blue", "green"];    //创建一个包含三个字符串的数组
alert(colors.join("||"));    //red||blue||green

3. 栈方法

ECMAScript数组也提供了一种让数组的行为类似其他数据结构的方法。

栈是一种LIFO（Last-In-First-Out）的数据结构。也就是最新添加的项最早被移除。栈中项的插入（推入）和移除（弹出），只发生在一个位置上--- 栈的顶部。

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

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

var colors = ["red", "blue"];
var count = colors.push("green");
alert(count);    //3

count = colors.push("black");
alert(count);    //4

var item = colors.pop();
alert(item);    //black

4. 队列方法

队列数据结构的访问规则是FIFO（First-In-First-Out）。队列在列表的末端添加项，从列表的前端移除项。

push() 方法： 向数组末尾中添加项。

shift() 方法： 移除数组中的第一项并返回该项。

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

var colors = new Array();
var count = colors.push("red", "green");
alert(count);    //2

count = colors.push("black");
alert(count);    //3

var item = colors.shift();
alert(item);    //red

count = colors.unshift("summer", "chen");
alert(count);    //4
alert(colors);    //summer,chen,green,black

5.重排序方法

数组中已经存在两个可以直接用来排序的方法：

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

sort()： 方法：在默认情况下，按升序排列数组项。sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串。

var values = [0, 1, 3, 15, 5, 10];
values.reverse();
alert(values);    //10,5,15,3,1,0

values.sort();
alert(values);    //0,1,10,15,3,5

sort()方法可以接收一个比较函数作为参数。

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

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

对于数值类型 或 其valueOf()方法会返回数值类型的对象类型，可以使用下列方法：

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

6.操作方法

concat() 方法： 基于当前数组中的所有项创建一个新数组。具体来说，这个方法会先创建当前数组的一个副本，然后讲接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。如果传递给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() 方法： 基于当前数组中的一个或多个项创建一个新数组。slice()方法可以接受一个或两个参数，即要返回项的起始和结束的位置。slice方法不会影响原始数组。

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

//1. 在只有一个参数的情况下，slice方法返回从该参数位置开始到当前数组末尾的所有项
var colors2 = colors.slice(1);
alert(colors2);    //green,blue,black,brown

//2.有两个参数，该方法返回起始位置和结束位置之间的项，不包括结束位置的项
var colors3 = colors.slice(1,3);
alert(colors3);    //green,blue

var colors4 = colors.slice(3,1);
alert(colors4);    //空数组

var colors5 = colors.slice(1,1);
alert(colors5);    //空数组

var colors6 = colors.slice(5);
alert(colors6);    //空数组

var colors7 = colors.slice(3, 15);
alert(colors7);    //black,brown

splice()方法：主要用途是向数组中部插入项。改方法返回被删除的项。

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

//1. 删除： 可以删除任意数量的项，只需指定第一项的位置和要删除的项数。返回被删除的项
var colors2 = colors.splice(1,3);
alert(colors2);    //green,blue,black
alert(colors);    //red, brown

//2.插入：提供三个参数:起始位置、0（要删除的项数）、要插入的项
var colors3 = colors.splice(1,0, "summer", "holiday");
alert(colors);    //red,summer,holiday,brown

var colors4 = colors.splice(-1,0, "summer", "holiday");//起始位置小于0时，按0计算
alert(colors);    //red,summer,holiday,summer,holiday,brown

var colors5 = colors.splice(10,0, "summer", "holiday");//起始位置大于数组长度时，按数组长度计算
alert(colors);    //red,summer,holiday,summer,holiday,brown,summer,holiday
alert(colors.length);    //8

//3.替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，三个参数：起始位置，要删除的项数，要插入的项
var colors6 = colors.splice(1, 4, "green", "blue", "black");
alert(colors6);    //summer,holiday,summer,holiday
alert(colors);    //red,green,blue,black,brown,summer,holiday

7. 位置方法

ECMAScript提供了两个位置方法，这两个方法都接收两个参数，要查找的项和查找起点位置的索引（可选的）

indexOf() 方法： 从数组的开头（位置0）开始向后查找。

lastIndexOf() 方法：从数组的末尾开始向前查找。

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

alert(numbers.indexOf(6));//-1
alert(numbers.lastIndexOf(6));//-1

var person = {name: "Nicholas"};
var people = [{name: "Nicholas"}];

var morePeople = [person];

alert(people.indexOf(person));    //-1
alert(morePeople.indexOf(person));//0

8. 迭代方法

ECMAScript为数组定义了5个迭代方法。每个方法都接收两个参数： 每一项上运行的函数和运行该函数的作用域对象（可选的）--影响this值。

传入这些方法中的函数接收三个参数：数组项的值、该项在数组中的位置、数组对象本身

every() 方法：  对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true

filter() 方法： 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

forEach() 方法：对数组中的每一项运行给定函数，该函数没有返回值

map() 方法：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

some() 方法：  对数组中的每一项运行给定函数，如果该函数对任一项返回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

var someResult = numbers.some(function(item, index, array){
                                return (item > 2);
                              });
alert(someResult);    //true

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

var mapResult = numbers.map(function(item, index, array){
                                return (item + 2);
                            });
alert(mapResult);    //3,4,5,6,7,6,5,4,3

9.缩小方法

ECMAScript有两个缩小数组的方法。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。这两个方法都接收两个参数，在每一项上调用的函数和作为缩小基础的初始值。

传入这些方法的函数接收四个参数：前一个值、当前值、项的索引、数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

reduce() 方法： 从数组的第一项开始，逐个遍历

reduceRight() 方法： 从数组的最后一项开始，向前遍历到第一项

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

var sum2 = values.reduceRight(function(prev, cur, index, array){
                            　　　　return prev + cur;
                             });
alert(sum2);    //15