《JavaScript高级程序设计》读书笔记之Array类型

Array类型

---

1.特点
（1）数组的每一项都可以保存任何类型的数据
（2）数组大小可动态调整

---

2.创建方式
（1）使用Array构造函数

var color = new Array();                        //创建一个空数组
var color2 = new Array(20);                     //创建一个length值为20的数组
var color3 = new Array("red","blue","green");   //创建一个包含3个字符串值的数组
var color4 = new Array(2,3,4,5);                //创建一个包含4个数值的数组

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

var color = [];                                 //创建一个空数组
var color2 = [2,3,4,5];                 
var color3 = ["red","blue","green"];

---

3.改变length属性会从数组末尾添加或移除项

//移除
var color = ["red","blue","green"];
color.length = 2;
alert(color[2]);    //undefined。因为长度变成2，所以第三项被移除了

//添加
var color = ["red","blue"];
color.length = 6;   //此时color=["red","blue",undefined,undefined,undefined,undefined]
alert(color[5]);    //undefined

---

4.检测数组
（1）确定某个对象是不是数组

if(color instanceof Array)
{
    //do something...
    //但是如果网页包含多个框架，即存在两个以上不同的全局执行环境时不适用
    //因为instanceof操作符假定单一的全局执行环境
}

换种方法：

if(Array.isArray(color))
{   
    //do something...
    //各浏览器有些版本尚未实现该方法
}

---

5.方法

---

（1）栈方法（后进先出）
push()和pop()都是在数组末尾操作
（a）push()
接收任意数量的参数，并把它们逐个添加到数组末尾，并返回修改后的数组长度

var color = ["red","blue"];
var count = color.push("green","yellow");
alert(count);   //4

（b）pop()
从数组末尾移除最后一项，减少数组的length值，然后返回被移除的项

var item = color.pop();     //弹出最后一项并赋值给item
alert(item);                //"yellow"
alert(color.length);        //3

---

（2）队列方法（先进先出）
shift()和unshift()都是在数组前端操作
（a）shift()
从数组前端移除第一项并返回该项，同时将数组长度减一

var colors = new Array();
var count = colors.push("red","blue");  //在数组末尾推入两项
alert(count);           //2（修改后的数组长度）

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

var item = colors.shift();              //移除数组第一项并赋值给item
alert(item);            //"red"
alert(colors.length);   //2

（b）unshift()
在数组前端添加任意个项并返回新数组的长度

var colors = new Array();
var count = colors.unshift("red","blue");   //在数组前端推入两项
alert(count);               //2(修改后的数组长度)

count = colors.unshift("yellow");   //3(修改后的数组长度)
alert(colors[0]);                   //"yellow"

---

（3）重排序方法
（a）reverse()
反转数组项的顺序

var values = [3,5,8,1,9];
values.reverse();
alert(values);              //9,1,8,5,3

（b）sort()
按升序排列数组项，比较的是字符串

//初级
var value = [0,1,5,10,15];
value.sort();
alert(value);               //0,1,10,15,5

//高级用法
var value = [0,1,5,10,15];
value.sort(compare);        //把compare比较函数传递进去
alert(value);               //0,1,5,10,15

function compare(v1,v2)     //升序
{
    if(v1<v2)
    {
        return -1;          //降序：return 1;
    }
    else if(v1>v2)
    {
        return 1;           //降序：return -1;
    }
    else
    {
        return 0;
    }
}

---

（4）操作方法
（a）concat()
创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组（副本）。也就是它并没有改变原数组，所有操作都是在副本上进行的。

var color = ["red","blue"];
var color2 = color.concat("green",["yellow","white"]);

alert(color);   //red,blue
alert(color2);  //red,blue,green,yellow,white

由此例子可见，如果传递给concat()方法的是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。就是所有参数数组都拆分成单个的项，然后作为结果数组的每一项。
（b）slice()
截取出子数组。接收一或两个参数，即返回项的起始和结束位置

var colors = ["red","blue","green","yellow","white","black"];
//省略第二个参数，意思即截取到数组末尾
var colors2 = colors.slice(1);      //从下标为1的项开始截取到数组末尾，把截取到的所有项作为新数组返回
//注意slice(m,n)意思即截取下标从m到n（但不包括n）的n-m项
var colors3 = colors.slice(1,4);    //从下标为1的项开始截取到下标为4的项，把截取到的所有项作为新数组返回

alert(colors2);     //blue,green,yellow,white,black
alert(colors3);     //blue,green,yellow

如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置

在一个包含5项的数组上
slice(-2,-1)
等价于
slice(3,4)

如果结束位置小于起始位置，则返回空数组

（c）splice()
向数组的中部插入项，并返回从数组中删除的项组成的数组。形式：splice(起始位置，要删除的项数，要插入的项)

//删除
splice(0,2);                    //删除数组的前两项
//插入
splice(2,0,"red","green");      //从当前数组的位置2开始删除0项并插入字符串"red"和"green"
//替换
splice(2,1,"red","green");      //从当前数组的位置2开始删除1项（即删除下标为2的项），并插入字符串"red"和"green"

var colors = ["red","blue","green"];
var removed = colors.splice(0,1);   //删除第一项
alert(colors);                      //blue,green
alert(removed);                     //red,返回的数组中只包含一项

removed = colors.splice(1,0,"yellow","white");  //从位置1开始插入两项
alert(colors);          //blue,yellow,white,green
alert(removed);         //返回的是一个空数组，因为并没有删除任何项

removed = colors.splice(1,1,"red","black");     //删除位置1的项并插入两项
alert(colors);          //blue,red,black,white,green
alert(removed);         //yellow，返回的数组中只包含一项

---

（5）位置方法
（a）indexOf()
（b）lastIndexOf()
这两个方法都返回要查找的项在数组中的位置，只不过一个从开头向后找，一个从数组末尾向前找，没找到返回-1

//参数说明：
//第一个参数：要查找的项
//第二个参数：查找的起点位置（可选）
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，从数组下标为4的位置开始往后找
alert(numbers.lastIndexOf(4,4,));   //3，从数组下标为4的位置开始往前找

---

（6）迭代方法
（a）every()、some()、filter()、map()、forEach()

var numbers = [1,2,3,4,5,4,3,2,1];

//every()，查询数组中的每一项是否都满足条件，返回布尔值
var everyResult = numbers.every(function(item,index,array)
{
    return (item>2);
});
alert(everyResult); //false

//some()，查询数组中是否有某一项满足条件，返回布尔值
var someResult = numbers.some(function(item,index,array)
{
    return (item>2);
});
alert(someResult);  //true

//filter(),返回符合条件的项，组成数组
var filterResult = numbers.filter(function(item,index,array)
{
    return (item>2);
});
alert(filterResult);    //[3,4,5,4,3]

//map(),对数组的每一项进行特定操作
var mapResult = numbers.map(function(item,index,array)
{
    return item * 2;
});
alert(mapResult);       //[2,4,6,8,10,8,6,4,2]

//forEach(),迭代数组，没有返回值
numbers.forEach(function(item,index,array)
{
    //do something...
});

---

（7）缩小方法
（a）reduce()
（b）reduceRight()
这两个方法都会迭代数组的所有项，然后构建一个最终返回的值，只不过方向相反而已。每一次迭代返回的值都会作为prev参数传给下一项。

var numbers = [1,2,3,4,5];
var sum = numbers.reduce(function(prev,cur,index,array)
{
    return prev+cur;    //第一次执行回调函数，prev是1，cur是2，以此类推
});
alert(sum);     //15

var sum2 = numbers.reduceRight(function(prev,cur,index,array)
{
    return prev+cur;    //第一次执行回调函数，prev是5，cur是4，以此类推
});
alert(sum2);    //15