JavaScript的Array类型总结

Array类型

数组是数据的有序列表。
JS中的数组每一项都能保存任何类型的数据。
JS数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增的数据。

创建方式
使用Array构造函数

var colors = new Array();//创建一个空数组 
var colors = new Array(20);//创建一个包含20项的数组
var colors = new Array("red","blue","green");//创建包含3个字符串值的数组

使用数组字面量表示法

var colors = [];    //创建一个空数组
var colors = ["red","green","blue"];    //创建一个包含3项的数组

读取设置数组值

var colors = ["red","green","blue"];
alert(colors[0]);//"red"
colors[2] = "black";//修改第三项
colors[3] = "brown";//新增第四项

length属性
特点：不只是读，通过设定length属性的值，可以移除某些项或者添加新项（新项的值为undefined）。

colors[colors.length] = "black";    //在数组末尾添加新项

var colors = ["red","green","blue"];
colors.length = 2;
alert(colors[2]);//undefined   移除了第三项

var colors = ["red","green","blue"];
colors.length = 4;
alert(colors[3]);//undefined 3位置无值，所以为undefined

var colors = ["red","green","blue"];
colors[99] = 99;
alert(colors.length);//100  3~98为undefined

数组最多创建 4294967295 个项，接近上限，会导致运行时间超长的脚本错误。

检测数组

一个全局执行环境   alert(value instanceof Array);    //true
多个全局执行环境   alert(Array.isArray(value));    //true

转换方法

var colors = ["red","green","blue"];
alert(colors.toString());//red,green,blue
alert(colors.valueOf());//red,green,blue
alert(colors);//red,green,blue

数组的toString()方法，返回的是一个字符串；由数组中的每一项的字符串形式拼接起来，中间以逗号分割；
数组的valueOf()方法，返回指定对象的原始值，是一个数组；
alert()接收字符串参数，上会在后台调用数组的每一项的toString()方法，因此返回的值与调用toString()方法返回的值一样；
一般而言，toLocaleString()方法返回的值与toString()方法与valueOf()方法返回的值相同，但不总是这样，当显式地定义toLocaleString()方法和toString()方法，并设置不同的返回值时，这两个方法返回的值是不一样的。

特殊情况：

var person1 = {
    toLocaleString : function(){
        return "Mike";
    },
    toString : function(){
        return "Jeo";
    }
};
var person2 = {
    toLocaleString : function(){
        return "Lee";
    },
    toString : function(){
        return "Amy";
    }
};

var people = [person1,person2];
alert(people);              //Jeo,Amy
alert(people.toString());       //Jeo,Amy
alert(peo.toLocaleString());    //Mike,Lee

数组继承的toLocaleString()、toString(）和valueOf()方法，默认情况下逗号分隔，返回数组值，而 join (),可接收分隔字符串，然后返回包含所有数组项的字符串。

var colors = ["red","green","blue"];
alert(colors.join("||"));//red||green||blue

栈方法

栈是一种后进先出的数据结构，也就是最新添加的最早被移除；
栈中项的插入（叫推入）和移除（叫弹出），只发生在栈的顶部；
ECMAScript为数组提供push()和pop()方法，实现类似栈的行为；
push()方法可接收任意数量的参数，将其逐个添加到数组末尾，并返回修改后数组长度；
pop()方法从数组末尾移除最后一项，减少数组长度，然后返回移除的项；

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

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

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

这里写图片描述
队列方法

队列是一种先进先出的数据结构；（类似于地铁安检那样^.^）
队列在列表末尾添加项，从列表前端移除项；

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"
alert(colors.length);   //2

这里写图片描述

同时使用unshift()和pop(),从相反方向模拟队列

var colors = new Array();
var count = colors.unshift("red","green");  //从前端推入两项
alert(colors);  //2  

count = colors.unshitf("black");  //推入另一项
alert（count);  //3

var item = colors.pop();   //取得最后一项
alert(item);  //"green"
alert(colors.length);  //2

重排序方法

reverse()方法：反转数组项；
sort()方法：默认升序排列数组项，会调用每个数组项的toString()转型方法。即使每项为数字，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

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

对于数值类型或其valueOf()方法会返回数值类型的对象类型，可以使用更简单的比较函数。
升序

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

操作方法

concat()方法，创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新建的数组。最后返回新构建的数组。新旧数组没有关系。

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

alert(colors2);   //red,reen,blue,yellow,black,brown

slice()方法，能够基于当前数组中的一个或多个项创建一个新数组。可接收一或两个参数。一个参数时，返回从该参数指定位置到数组末尾的所有项；两个参数时，返回起始和结束位置之间的所有项，但不包括结束位置的项。

如果参数中有负值，则用该数组长度加上该数来确定相应位置；如果结束位置小于起始位置，则返回空数组。

var colors =  ["red","green","blue"，"yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2);//green,blue,yellow,purple
alert(colors3);//green,blue,yellow

splice()方法
删除：可以删除任意数量的项；指定两个参数，要删除的第一项的位置和要删除的项数。返回删除的项。splice(0,2)删除前两项；
插入：可以向指定位置插入任意数量的项；接收三个参数：起始位置，0（要删除的项数）和要插入的项。返回空数组。
替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项；接收三个参数：起始位置、要删除的项数和要插入的任意数量的项。插入删除项不必相等。返回删除项。

位置方法

indexOf()，从数组开头向后查找；
lastIndexOf()，从数组末尾向前查找；
接收两个参数：查找的项、（可选的）查找起点位置的索引；返回要查找的项在数组中的位置，在没找到时返回-1；

迭代方法

every()方法，对数组中的每一项都运行给定函数，如果该数组中的每一项都返回true，则返回true；
some()方法，对数组中的每一项都运行给定函数，如果该数组中有任何一项返回true，则返回true；
filter()方法，对数组中的每一项都运行给定函数，返回该数组中返回true的项；用于筛选。
map()方法，对数组中的每一项都运行给定函数，返回每一项运行函数后的结果；用于计算的循环。
forEach()方法，对数组中的每一项都运行给定函数，没有返回值。用于执行一些操作，并不返回值。
- 这些方法接收两个参数：给定的函数、（可选）运行该函数的作用域对象——影响this的值。
- 其中函数接收三个参数：数组项的值，数组项的索引和数组对象本身。

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

归并方法

reduce()方法：从头遍历；
reduceRight()方法：从最后一项向前遍历。
两个方法都接收两个参数：在每一项上都调用的函数、（可选）作为归并基础的初始值。
迭代数组中的所有项，然后构建一个最终返回的值；
函数接收4个参数：前一个值、当前值、项的索引和数组对象。
这个函数返回的任何值都会作为第一个参数传给下一项。第一次迭代发生在数组的第二项，因此第一个参数是数组的第一项，第二个参数是数组的第二项。

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

JavaScript的Array类型总结

Array类型

猜你喜欢