1. 檢測(cè)數(shù)組

對(duì)于一個(gè)網(wǎng)頁(yè)，或者一個(gè)全局作用域而言，使用instanceof 操作符就能得到滿意的結(jié)果：

if (value instanceof Array){
//對(duì)數(shù)組執(zhí)行某些操作
}

instanceof操作符的問(wèn)題在于，它假定只有一個(gè)全局執(zhí)行環(huán)境。如果網(wǎng)頁(yè)中包含多個(gè)框架，那實(shí)際上就存在兩個(gè)以上不同的全局執(zhí)行環(huán)境，從而存在兩個(gè)以上不同版本的 Array 構(gòu)造函數(shù)。如果你從 一個(gè)框架向另一個(gè)框架傳入一個(gè)數(shù)組，那么傳入的數(shù)組與在第二個(gè)框架中原生創(chuàng)建的數(shù)組分別具有各自 不同的構(gòu)造函數(shù)。

為了解決這個(gè)問(wèn)題，ECMAScript 5 新增了Array.isArray()方法。這個(gè)方法的目的是最終確定某個(gè)值到底是不是數(shù)組，而不管它是在哪個(gè)全局執(zhí)行環(huán)境中創(chuàng)建的。這個(gè)方法的用法如下。

if (Array.isArray(value)){
//對(duì)數(shù)組執(zhí)行某些操作
}

支持 Array.isArray()方法的瀏覽器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和 Chrome。

2. 轉(zhuǎn)換方法

toLocaleString()、toString()、valueOf()、join()

• 調(diào)用數(shù)組的toString()方法會(huì)返回由數(shù)組中每個(gè)值的字符串形式拼接而成的一個(gè)以逗號(hào)分隔的字符串
• 調(diào)用valueOf()返回的還是數(shù)組

var colors = ["red", "blue", "green"]; // 創(chuàng)建一個(gè)包含3 個(gè)字符串的數(shù)組
console.log(colors.toString()); // red,blue,green
console.log(colors.valueOf()); // ["red", "blue", "green"]

• toLocaleString()方法經(jīng)常也會(huì)返回與toString()和valueOf()方法相同的值，但也不總是如此。當(dāng)調(diào)用數(shù)組的toLocaleString()方法時(shí)，它也會(huì)創(chuàng)建一個(gè)數(shù)組值的以逗號(hào)分隔的字符串。而與前兩個(gè)方法唯一的不同之處在于，這一次為了取得每一項(xiàng)的值，調(diào)用的是每一項(xiàng)的toLocaleString()方法，而不是toString()方法。

var person1 = {
toLocaleString : function () {
return "Nikolaos";
},
toString : function() {
return "Nicholas";
}
};
var person2 = {
toLocaleString : function () {
return "Grigorios";
},
toString : function() {
return "Greg";
}
};
var people = [person1, person2];
alert(people); //Nicholas,Greg
console.log(people.toString()); //Nicholas,Greg
console.log(people.toLocaleString()); //Nikolaos,Grigorios

• 使用join()方法，則可以使用不同的分隔符來(lái)構(gòu)建這個(gè)字符串。join()方法只接收一個(gè)參數(shù)，即用作分隔符的字符串，然后返回包含所有數(shù)組項(xiàng)的字符串

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

• 如果數(shù)組中的某一項(xiàng)的值是null 或者undefined，那么該值在join()、toLocaleString()、toString()和valueOf()方法返回的結(jié)果中以空字符串表示。

3.棧方法

LIFO 后進(jìn)先出， push() 、pop()

• push()方法可以接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組末尾，并返回修改后數(shù)組的長(zhǎng)度
• pop()方法則從數(shù)組末尾移除最后一項(xiàng)，減少數(shù)組的length 值，然后返回移除的項(xiàng)。

var colors = new Array(); // 創(chuàng)建一個(gè)數(shù)組
var count = colors.push("red", "green"); // 推入兩項(xiàng)
alert(count); //2
count = colors.push("black"); // 推入另一項(xiàng)
alert(count); //3
var item = colors.pop(); // 取得最后一項(xiàng)
alert(item); //"black"
alert(colors.length); //2

• 棧方法與其他數(shù)組方法連用

var colors = ["red", "blue"];
colors.push("brown"); // 添加另一項(xiàng)
colors[3] = "black"; // 添加一項(xiàng)
alert(colors.length); // 4
var item = colors.pop(); // 取得最后一項(xiàng)
aler t(item); //"black"

4. 隊(duì)列方法

LIFO（后進(jìn)先出）shift()、unshift()

• shift()，它能夠移除數(shù)組中的第一個(gè)項(xiàng)并返回該項(xiàng)，同時(shí)將數(shù)組長(zhǎng)度減1。

var colors = new Array(); //創(chuàng)建一個(gè)數(shù)組
var count = colors.push("red", "green"); //推入兩項(xiàng)
alert(count); //2
count = colors.push("black"); //推入另一項(xiàng)
alert(count); //3
var item = colors.shift(); //取得第一項(xiàng)
alert(item); //"red"
alert(colors.length); //2

• unshift()與shift()的用途相反,它能在數(shù)組前端添加任意個(gè)項(xiàng)并返回新數(shù)組的長(zhǎng)度。

var colors = new Array(); //創(chuàng)建一個(gè)數(shù)組
var count = colors.unshift("red", "green"); //推入兩項(xiàng)
alert(count); //2
count = colors.unshift("black"); //推入另一項(xiàng)
alert(count); //3
var item = colors.pop(); //取得最后一項(xiàng)
alert(item); //"green"
alert(colors.length); //2

5. 重排序方法

reverse()、sort()

• reverse()和sort()方法的返回值是經(jīng)過(guò)排序之后的數(shù)組。
• reverse()方法會(huì)反轉(zhuǎn)數(shù)組項(xiàng)的順序

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

• sort()排序數(shù)組，默認(rèn)升序，為了實(shí)現(xiàn)排序，sort()方法會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的toString()轉(zhuǎn)型方法，然后比較得到的字符串，以確定如何排序。即使數(shù)組中的每一項(xiàng)都是數(shù)值，sort()方法比較的也是字符串

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

• sort()方法可以接收一個(gè)比較函數(shù)作為參數(shù)，以便我們指定哪個(gè)值位于哪個(gè)值的前面。

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

• 對(duì)于數(shù)值類型或者其valueOf()方法會(huì)返回?cái)?shù)值類型的對(duì)象類型，可以使用一個(gè)更簡(jiǎn)單的比較函數(shù)。這個(gè)函數(shù)只要用第二個(gè)值減第一個(gè)值即可。

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

6. 操作方法

(1)concat()

• concat()方法可以基于當(dāng)前數(shù)組中的所有項(xiàng)創(chuàng)建一個(gè)新數(shù)組
• 在沒(méi)有給concat()方法傳遞參數(shù)的情況下，它只是復(fù)制當(dāng)前數(shù)組并返回副本
• 如果傳遞給concat()方法的是一或多個(gè)數(shù)組，則該方法會(huì)將這些數(shù)組中的每一項(xiàng)都添加到結(jié)果數(shù)組中
• 如果傳遞的值不是數(shù)組，這些值就會(huì)被簡(jiǎn)單地添加到結(jié)果數(shù)組的末尾

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

(2)slice()

• slice()能夠基于當(dāng)前數(shù)組中的一或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組
• slice()方法可以接受一或兩個(gè)參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置
• 在只有一個(gè)參數(shù)的情況下，slice()方法返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)
• 如果有兩個(gè)參數(shù)，該方法返回起始和結(jié)束位置之間的項(xiàng)，但不包括結(jié)束位置的項(xiàng)
• slice()方法不會(huì)影響原始數(shù)組

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

(3)splice()

• splice()的主要用途是向數(shù)組的中部插入項(xiàng),使用方式有如下3種
• 刪除：可以刪除任意數(shù)量的項(xiàng)，只需指定2個(gè)參數(shù)：要?jiǎng)h除的第一項(xiàng)的位置和要?jiǎng)h除的項(xiàng)數(shù)。
• 插入：可以向指定位置插入任意數(shù)量的項(xiàng)，只需提供3個(gè)參數(shù)：起始位置、0（要?jiǎng)h除的項(xiàng)數(shù)）和要插入的項(xiàng)。如果要插入多個(gè)項(xiàng)，可以再傳入第四、第五，以至任意多個(gè)項(xiàng)。
• 替換：可以向指定位置插入任意數(shù)量的項(xiàng)，且同時(shí)刪除任意數(shù)量的項(xiàng)，只需指定3 個(gè)參數(shù)：起始位置、要?jiǎng)h除的項(xiàng)數(shù)和要插入的任意數(shù)量的項(xiàng)。插入的項(xiàng)數(shù)不必與刪除的項(xiàng)數(shù)相等。

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); // 刪除第一項(xiàng)
alert(colors); // green,blue
alert(removed); // red，返回的數(shù)組中只包含一項(xiàng)
removed = colors.splice(1, 0, "yellow", "orange"); // 從位置1 開始插入兩項(xiàng)
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一個(gè)空數(shù)組
removed = colors.splice(1, 1, "red", "purple"); // 插入兩項(xiàng)，刪除一項(xiàng)
alert(colors); // green,red,purple,orange,blue

7. 位置方法

indexOf() 、lastIndexOf()

• 兩個(gè)方法都接收兩個(gè)參數(shù)：要查找的項(xiàng)和（可選的）表示查找起點(diǎn)位置的索引。
• indexOf()方法從數(shù)組的開頭（位置0）開始向后查找
• lastIndexOf()方法則從數(shù)組的末尾開始向前查找
• 兩個(gè)方法都返回要查找的項(xiàng)在數(shù)組中的位置，或者在沒(méi)找到的情況下返回-1。
• 要求查找的項(xiàng)必須嚴(yán)格相等

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

var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0

• 使用indexOf()和lastIndexOf()方法查找特定項(xiàng)在數(shù)組中的位置非常簡(jiǎn)單，支持它們的瀏覽器包括IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。

8. 迭代方法

every()、filter()、forEach()、map()、some()

• 每個(gè)方法都接收兩個(gè)參數(shù)：要在每一項(xiàng)上運(yùn)行的函數(shù)和（可選的）運(yùn)行該函數(shù)的作用域?qū)ο蟆绊憈his 的值

• 傳入這些方法中的函數(shù)會(huì)接收三個(gè)參數(shù)：數(shù)組項(xiàng)的值、該項(xiàng)在數(shù)組中的位置和數(shù)組對(duì)象本身

• 根據(jù)使用的方法不同，這個(gè)函數(shù)執(zhí)行后的返回值可能會(huì)也可能不會(huì)影響方法的返回值

• every()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)每一項(xiàng)都返回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()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回該函數(shù)會(huì)返回true 的項(xiàng)組成的數(shù)組。

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()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。這個(gè)方法沒(méi)有返回值。

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
    //執(zhí)行某些操作
});

• map()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。

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()：對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，如果該函數(shù)對(duì)任一項(xiàng)返回true，則返回true。以上方法都不會(huì)修改數(shù)組中的包含的值。

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

• 這些數(shù)組方法通過(guò)執(zhí)行不同的操作，可以大大方便處理數(shù)組的任務(wù)。支持這些迭代方法的瀏覽器有IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。

9. 歸并方法

reduce()、reduceRight()

• 這兩個(gè)方法都會(huì)迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個(gè)最終返回的值。
• reduce()方法從數(shù)組的第一項(xiàng)開始，逐個(gè)遍歷到最后
• reduceRight()則從數(shù)組的最后一項(xiàng)開始，向前遍歷到第一項(xiàng)
• 這兩個(gè)方法都接收兩個(gè)參數(shù)：一個(gè)在每一項(xiàng)上調(diào)用的函數(shù)和（可選的）作為歸并基礎(chǔ)的初始值
• 傳給reduce()和reduceRight()的函數(shù)接收4個(gè)參數(shù)：前一個(gè)值、當(dāng)前值、項(xiàng)的索引和數(shù)組對(duì)象。這個(gè)函數(shù)返回的任何值都會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)。第一次迭代發(fā)生在數(shù)組的第二項(xiàng)上，因此第一個(gè)參數(shù)是數(shù)組的第一項(xiàng)，第二個(gè)參數(shù)就是數(shù)組的第二項(xiàng)。

使用reduce()方法可以執(zhí)行求數(shù)組中所有值之和的操作。
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
    return prev + cur;
});
alert(sum); //15

使用reduceRight()的作用類似，只不過(guò)方向相反而已。
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
});
alert(sum); //15

• 支持這兩個(gè)歸并函數(shù)的瀏覽器有IE9+、Firefox 3+、Safari 4+、Opera 10.5 和Chrome。

@七七 ， javascript 基礎(chǔ)筆記
《javascript高級(jí)程序設(shè)計(jì)第3版》
百度云下載（鏈接: https://pan.baidu.com/s/1i51mHdb 密碼: b2q4）

好好學(xué)習(xí)