本文繼續(xù)對JavaScript高級程序設(shè)計第四版 第六章 集合引用類型 進(jìn)行學(xué)習(xí)
一逢艘、Object
1.創(chuàng)建
顯式地創(chuàng)建 Object 的實例有兩種方式。第一種是使用 new 操作符和 Object 構(gòu)造函數(shù)画恰，如下所示：
let person = new Object();
person.name = "Nicholas";
person.age = 29;
另一種方式是使用對象字面量（object literal）表示法锦担。在使用對象字面量表示法定義對象時，并不會實際調(diào)用 Object 構(gòu)造函數(shù)失都。
let person = {
name: "Nicholas",
age: 29
};
雖然使用哪種方式創(chuàng)建 Object 實例都可以，但實際上開發(fā)者更傾向于使用對象字面量表示法幸冻。這是因為對象字面量代碼更少粹庞，看起來也更有封裝所有相關(guān)數(shù)據(jù)的感覺。
2.讀取
雖然屬性一般是通過點語法來存取的洽损，這也是面向?qū)ο笳Z言的慣例庞溜，但也可以使用中括號來存取屬性。在使用中括號時趁啸，要在括號內(nèi)使用屬性名的字符串形式强缘，比如：
console.log(person["name"]); // "Nicholas"
console.log(person.name); // "Nicholas"
從功能上講，這兩種存取屬性的方式?jīng)]有區(qū)別。使用中括號的主要優(yōu)勢就是可以通過變量訪問屬性，就像下面這個例子中一樣：
let propertyName = "name";
console.log(person[propertyName]); // "Nicholas"
另外，如果屬性名中包含可能會導(dǎo)致語法錯誤的字符，或者包含關(guān)鍵字/保留字時宫静，也可以使用中括號語法扭粱。比如：
person["first name"] = "Nicholas";
因為"first name"中包含一個空格博其，所以不能使用點語法來訪問峰髓。不過，屬性名中是可以包含非字母數(shù)字字符的拂檩，這時候只要用中括號語法存取它們就行了。通常，點語法是首選的屬性存取方式，除非訪問屬性時必須使用變量。
第 8 章將更全面、深入地介紹 Object 類型费韭。
二揪垄、Array
除了 Object堰汉，Array 應(yīng)該就是 ECMAScript 中最常用的類型了。ECMAScript 數(shù)組跟其他編程語言的數(shù)組有很大區(qū)別。跟其他語言中的數(shù)組一樣擅笔，ECMAScript 數(shù)組也是一組有序的數(shù)據(jù)弯淘，但跟其他語言不同的是废登，數(shù)組中每個槽位可以存儲任意類型的數(shù)據(jù)虎韵。這意味著可以創(chuàng)建一個數(shù)組测萎，它的第一個元素是字符串颂暇，第二個元素是數(shù)值捌省，第三個是對象工闺。ECMAScript 數(shù)組也是動態(tài)大小的像棘，會隨著數(shù)據(jù)添加而自動增長瓶摆。
1.創(chuàng)建數(shù)組(Array.from/Array.of)
和Object類似口渔，可以使用new或數(shù)組字面量兩種方式創(chuàng)建數(shù)組知举。與對象一樣，在使用數(shù)組字面量表示法創(chuàng)建數(shù)組不會調(diào)用 Array 構(gòu)造函數(shù)。
創(chuàng)建數(shù)組時可以給構(gòu)造函數(shù)傳一個值。這時候就有點問題了伙窃，因為如果這個值是數(shù)值确徙，則會創(chuàng)建一個長度為指定數(shù)值的數(shù)組；而如果這個值是其他類型的，則會創(chuàng)建一個只包含該特定值的數(shù)組良狈。
let colors = new Array(3); // 創(chuàng)建一個包含 3 個元素的數(shù)組
let names = new Array("Greg"); // 創(chuàng)建一個只包含一個元素严嗜，即字符串"Greg"的數(shù)組
let colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含 3 個元素的數(shù)組
let names = []; // 創(chuàng)建一個空數(shù)組
let values = [1,2,]; // 創(chuàng)建一個包含 2 個元素的數(shù)組
Array 構(gòu)造函數(shù)還有兩個 ES6 新增的用于創(chuàng)建數(shù)組的靜態(tài)方法：from()和 of()睦优。
Array.from()的第一個參數(shù)是一個類數(shù)組對象踢俄，即任何可迭代的結(jié)構(gòu)歼培，或者有一個 length 屬性和可索引元素的結(jié)構(gòu)倔监。這種方式可用于很多場合：
// 字符串會被拆分為單字符數(shù)組
console.log(Array.from("Matt")); // ["M", "a", "t", "t"]
// 可以使用 from()將集合和映射轉(zhuǎn)換為一個新數(shù)組
const m = new Map().set(1, 2)
.set(3, 4);
const s = new Set().add(1)
.add(2)
.add(3)
.add(4);
console.log(Array.from(m)); // [[1, 2], [3, 4]]
console.log(Array.from(s)); // [1, 2, 3, 4]
// Array.from()對現(xiàn)有數(shù)組執(zhí)行淺復(fù)制
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1);
console.log(a1); // [1, 2, 3, 4]
alert(a1 === a2); // false
// 可以使用任何可迭代對象
const iter = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
yield 4;
}
};
console.log(Array.from(iter)); // [1, 2, 3, 4]
// arguments 對象可以被輕松地轉(zhuǎn)換為數(shù)組
function getArgsArray() {
return Array.from(arguments);
}
console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]
// from()也能轉(zhuǎn)換帶有必要屬性的自定義對象
const arrayLikeObject = {
0: 1,
1: 2,
2: 3,
3: 4,
length: 4
};
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]
Array.from()還接收第二個可選的映射函數(shù)參數(shù)。這個函數(shù)可以直接增強新數(shù)組的值菌仁，而無須像調(diào)用 Array.from().map()那樣先創(chuàng)建一個中間數(shù)組浩习。還可以接收第三個可選參數(shù)，用于指定映射函數(shù)中 this 的值济丘。但這個重寫的 this 值在箭頭函數(shù)中不適用谱秽。
const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1, x => x**2);
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2});
console.log(a2); // [1, 4, 9, 16]
console.log(a3); // [1, 4, 9, 16]
Array.of()可以把一組參數(shù)轉(zhuǎn)換為數(shù)組。這個方法用于替代在 ES6之前常用的 Array.prototype. slice.call(arguments)摹迷，一種異常笨拙的將 arguments 對象轉(zhuǎn)換為數(shù)組的寫法：
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
console.log(Array.of(undefined)); // [undefined]
2.數(shù)組空位
使用數(shù)組字面量初始化數(shù)組時疟赊，可以使用一串逗號來創(chuàng)建空位（hole）。ES6 新增的方法和迭代器與早期 ECMAScript 版本中存在的方法行為不同峡碉。ES6 新增方法普遍將這些空位當(dāng)成存在的元素近哟，只不過值為 undefined：
const options = [1,,,,5];
for (const option of options) {
console.log(option === undefined);
}
// false
// true
// true
// true
// false
注意 由于行為不一致和存在性能隱患，因此實踐中要避免使用數(shù)組空位异赫。如果確實需要空位椅挣，則可以顯式地用 undefined 值代替。
3.數(shù)組索引
要取得或設(shè)置數(shù)組的值塔拳，需要使用中括號并提供相應(yīng)值的數(shù)字索引鼠证，如下所示：
let colors = ["red", "blue", "green"]; // 定義一個字符串?dāng)?shù)組
alert(colors[0]); // 顯示第一項
colors[2] = "black"; // 修改第三項
colors[3] = "brown"; // 添加第四項
在中括號中提供的索引表示要訪問的值。如果索引小于數(shù)組包含的元素數(shù)靠抑，則返回存儲在相應(yīng)位置的元素量九，就像示例中 colors[0]顯示"red"一樣。
設(shè)置數(shù)組的值方法也是一樣的，就是替換指定位置的值荠列。如果把一個值設(shè)置給超過數(shù)組最大索引的索引类浪，就像示例中的 colors[3]肌似，則數(shù)組長度會自動擴展到該索引值加 1（示例中設(shè)置的索引 3费就，所以數(shù)組長度變成了 4）。
數(shù)組中元素的數(shù)量保存在 length 屬性中川队，這個屬性始終返回 0 或大于 0 的值力细，如下例所示：
let colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含 3 個字符串的數(shù)組
let names = []; // 創(chuàng)建一個空數(shù)組
alert(colors.length); // 3
alert(names.length); // 0
數(shù)組 length 屬性的獨特之處在于，它不是只讀的固额。通過修改 length 屬性眠蚂，可以從數(shù)組末尾刪除或添加元素。來看下面的例子：
let colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含 3 個字符串的數(shù)組
colors.length = 2;
alert(colors[2]); // undefined
這里斗躏，數(shù)組 colors 一開始有 3 個值逝慧。將 length 設(shè)置為 2，就刪除了最后一個（位置 2 的）值啄糙，因此 colors[2]就沒有值了笛臣。如果將 length 設(shè)置為大于數(shù)組元素數(shù)的值，則新添加的元素都將以undefined 填充迈套，如下例所示：
let colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含 3 個字符串的數(shù)組
colors.length = 4;
alert(colors[3]); // undefined
這里將數(shù)組 colors 的 length 設(shè)置為 4捐祠，雖然數(shù)組只包含 3 個元素。位置 3 在數(shù)組中不存在桑李，因此訪問其值會返回特殊值 undefined踱蛀。
使用 length 屬性可以方便地向數(shù)組末尾添加元素，如下例所示：
let colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含 3 個字符串的數(shù)組
colors[colors.length] = "black"; // 添加一種顏色（位置 3）
colors[colors.length] = "brown"; // 再添加一種顏色（位置 4）
數(shù)組中最后一個元素的索引始終是 length - 1贵白，因此下一個新增槽位的索引就是 length率拒。每次在數(shù)組最后一個元素后面新增一項，數(shù)組的 length 屬性都會自動更新禁荒，以反映變化猬膨。這意味著第二行的 colors[colors.length]會在位置 3 添加一個新元素，下一行則會在位置 4 添加一個新元素呛伴。新的長度會在新增元素被添加到當(dāng)前數(shù)組外部的位置上時自動更新勃痴。換句話說，就是 length 屬性會更新為位置加上 1热康，如下例所示：
let colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含 3 個字符串的數(shù)組
colors[99] = "black"; // 添加一種顏色（位置 99）
alert(colors.length); // 100
這里沛申，colors 數(shù)組有一個值被插入到位置 99，結(jié)果新 length 就變成了 100（99 + 1）姐军。這中間的所有元素铁材，即位置 3~98尖淘，實際上并不存在，因此在訪問時會返回 undefined著觉。
4.Array.isArray
一個經(jīng)典的 ECMAScript 問題是判斷一個對象是不是數(shù)組村生。在只有一個網(wǎng)頁（因而只有一個全局作用域）的情況下，使用 instanceof 操作符就足矣：
if (value instanceof Array){
// 操作數(shù)組
}
使用 instanceof 的問題是假定只有一個全局執(zhí)行上下文饼丘。如果網(wǎng)頁里有多個框架趁桃，則可能涉及兩個不同的全局執(zhí)行上下文，因此就會有兩個不同版本的 Array 構(gòu)造函數(shù)葬毫。如果要把數(shù)組從一個框架傳給另一個框架镇辉，則這個數(shù)組的構(gòu)造函數(shù)將有別于在第二個框架內(nèi)本地創(chuàng)建的數(shù)組。
為解決這個問題贴捡，ECMAScript 提供了 Array.isArray()方法。這個方法的目的就是確定一個值是否為數(shù)組村砂，而不用管它是在哪個全局執(zhí)行上下文中創(chuàng)建的烂斋。來看下面的例子：
if (Array.isArray(value)){
// 操作數(shù)組
}
5.迭代器方法
在 ES6 中，Array 的原型上暴露了 3 個用于檢索數(shù)組內(nèi)容的方法：keys()础废、values()和entries()汛骂。keys()返回數(shù)組索引的迭代器，values()返回數(shù)組元素的迭代器评腺，而 entries()返回索引/值對的迭代器：
const a = ["foo", "bar", "baz", "qux"];
// 因為這些方法都返回迭代器帘瞭，所以可以將它們的內(nèi)容
// 通過 Array.from()直接轉(zhuǎn)換為數(shù)組實例
const aKeys = Array.from(a.keys());
const aValues = Array.from(a.values());
const aEntries = Array.from(a.entries());
console.log(aKeys); // [0, 1, 2, 3]
console.log(aValues); // ["foo", "bar", "baz", "qux"]
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]
使用 ES6 的解構(gòu)可以非常容易地在循環(huán)中拆分鍵/值對：
const a = ["foo", "bar", "baz", "qux"];
for (const [idx, element] of a.entries()) {
alert(idx);
alert(element);
}
// 0
// foo
// 1
// bar
// 2
// baz
// 3
// qux
6.復(fù)制和填充方法(copyWithin/fill)
ES6 新增了兩個方法：批量復(fù)制方法 copyWithin()，以及填充數(shù)組方法 fill()蒿讥。這兩個方法的函數(shù)簽名類似蝶念，都需要指定既有數(shù)組實例上的一個范圍，包含開始索引芋绸，不包含結(jié)束索引媒殉。使用這個方法不會改變數(shù)組的大小。
使用 fill()方法可以向一個已有的數(shù)組中插入全部或部分相同的值摔敛。開始索引用于指定開始填充的位置廷蓉，它是可選的。如果不提供結(jié)束索引马昙，則一直填充到數(shù)組末尾桃犬。負(fù)值索引從數(shù)組末尾開始計算。也可以將負(fù)索引想象成數(shù)組長度加上它得到的一個正索引：
const zeroes = [0, 0, 0, 0, 0];
// 用 5 填充整個數(shù)組
zeroes.fill(5);
console.log(zeroes); // [5, 5, 5, 5, 5]
zeroes.fill(0); // 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3);
console.log(zeroes); // [0, 0, 0, 6, 6]
zeroes.fill(0); // 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3);
console.log(zeroes); // [0, 7, 7, 0, 0];
zeroes.fill(0); // 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1)
// (-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes); // [0, 8, 8, 8, 0];
fill()靜默忽略超出數(shù)組邊界行楞、零長度及方向相反的索引范圍：
const zeroes = [0, 0, 0, 0, 0];
// 索引過低攒暇，忽略
zeroes.fill(1, -10, -6);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引過高，忽略
zeroes.fill(1, 10, 15);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引反向敢伸，忽略
zeroes.fill(2, 4, 2);
console.log(zeroes); // [0, 0, 0, 0, 0]
// 索引部分可用扯饶，填充可用部分
zeroes.fill(4, 3, 10)
console.log(zeroes); // [0, 0, 0, 4, 4]
與 fill()不同，copyWithin()會按照指定范圍淺復(fù)制數(shù)組中的部分內(nèi)容，然后將它們插入到指定索引開始的位置尾序。開始索引和結(jié)束索引則與 fill()使用同樣的計算方法：
let ints,
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 從 ints 中復(fù)制索引 0 開始的內(nèi)容钓丰，插入到索引 5 開始的位置
// 在源索引或目標(biāo)索引到達(dá)數(shù)組邊界時停止
ints.copyWithin(5);
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();
// 從 ints 中復(fù)制索引 5 開始的內(nèi)容，插入到索引 0 開始的位置
ints.copyWithin(0, 5);
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();
// 從 ints 中復(fù)制索引 0 開始到索引 3 結(jié)束的內(nèi)容
// 插入到索引 4 開始的位置
ints.copyWithin(4, 0, 3);
alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();
// JavaScript 引擎在插值前會完整復(fù)制范圍內(nèi)的值
// 因此復(fù)制期間不存在重寫的風(fēng)險
ints.copyWithin(2, 0, 6);
alert(ints); // [0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset();
// 支持負(fù)索引值每币，與 fill()相對于數(shù)組末尾計算正向索引的過程是一樣的
ints.copyWithin(-4, -7, -3);
alert(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]
copyWithin()靜默忽略超出數(shù)組邊界携丁、零長度及方向相反的索引范圍：
let ints,
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引過低，忽略
ints.copyWithin(1, -15, -12);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引過高兰怠，忽略
ints.copyWithin(1, 12, 15);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引反向梦鉴，忽略
ints.copyWithin(2, 4, 2);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引部分可用，復(fù)制揭保、填充可用部分
ints.copyWithin(4, 7, 10)
alert(ints); // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];
7.轉(zhuǎn)換方法
前面提到過肥橙，所有對象都有 toLocaleString()、toString()和 valueOf()方法秸侣。其中存筏，valueOf()返回的還是數(shù)組本身。而 toString()返回由數(shù)組中每個值的等效字符串拼接而成的一個逗號分隔的字符串味榛。也就是說椭坚，對數(shù)組的每個值都會調(diào)用其 toString()方法，以得到最終的字符串搏色。來看下面的例子：
let colors = ["red", "blue", "green"]; // 創(chuàng)建一個包含 3 個字符串的數(shù)組
alert(colors.toString()); // red,blue,green
alert(colors.valueOf()); // red,blue,green
alert(colors); // red,blue,green
8.push/pop
9.shift/unshift
10.reverse/sort
顧名思義善茎，reverse()方法就是將數(shù)組元素反向排列。這個方法很直觀频轿，但不夠靈活垂涯，所以才有了 sort()方法。
默認(rèn)情況下略吨，sort()會按照升序重新排列數(shù)組元素集币，即最小的值在前面，最大的值在后面翠忠。為此鞠苟，sort()會在每一項上調(diào)用 String()轉(zhuǎn)型函數(shù)，然后比較字符串來決定順序秽之。即使數(shù)組的元素都是數(shù)值当娱，也會先把數(shù)組轉(zhuǎn)換為字符串再比較、排序考榨。比如：
let values = [0, 1, 5, 10, 15];
values.sort();
alert(values); // 0,1,10,15,5
一開始數(shù)組中數(shù)值的順序是正確的跨细，但調(diào)用 sort()會按照這些數(shù)值的字符串形式重新排序。因此河质，即使 5 小于 10冀惭，但字符串"10"在字符串"5"的前頭震叙，所以 10 還是會排到 5 前面。很明顯散休，這在多數(shù)情況下都不是最合適的媒楼。為此，sort()方法可以接收一個比較函數(shù)戚丸，用于判斷哪個值應(yīng)該排在前面划址。
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
這個比較函數(shù)可以適用于大多數(shù)數(shù)據(jù)類型，可以把它當(dāng)作參數(shù)傳給 sort()方法限府，如下所示：
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15
在給 sort()方法傳入比較函數(shù)后夺颤，數(shù)組中的數(shù)值在排序后保持了正確的順序。當(dāng)然胁勺，比較函數(shù)也可以產(chǎn)生降序效果世澜，只要把返回值交換一下即可：
function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 15,10,5,1,0
此外，這個比較函數(shù)還可簡寫為一個箭頭函數(shù)：
let values = [0, 1, 5, 10, 15];
values.sort((a, b) => a < b ? 1 : a > b ? -1 : 0);
alert(values); // 15,10,5,1,0
在這個修改版函數(shù)中署穗，如果第一個值應(yīng)該排在第二個值后面則返回 1宜狐，如果第一個值應(yīng)該排在第二個值前面則返回?1。交換這兩個返回值之后蛇捌，較大的值就會排在前頭，數(shù)組就會按照降序排序咱台。當(dāng)然络拌，如果只是想反轉(zhuǎn)數(shù)組的順序，reverse()更簡單也更快回溺。
注意 reverse()和 sort()都返回調(diào)用它們的數(shù)組的引用春贸。
如果數(shù)組的元素是數(shù)值，或者是其 valueOf()方法返回數(shù)值的對象（如 Date 對象）遗遵，這個比較函數(shù)還可以寫得更簡單萍恕，因為這時可以直接用第二個值減去第一個值：
function compare(value1, value2){
return value2 - value1;
}
比較函數(shù)就是要返回小于 0、0 和大于 0 的數(shù)值车要，因此減法操作完全可以滿足要求允粤。
11.concat/slice/splice
12.indexOf()、lastIndexOf()和 includes()
其中翼岁，前兩個方法在所有版本中都可用类垫，而第三個方法是 ECMAScript 7 新增的。indexOf()和 lastIndexOf()都返回要查找的元素在數(shù)組中的位置琅坡，如果沒找到則返回-1悉患。
includes()返回布爾值，表示是否至少找到一個與指定元素匹配的項榆俺。在比較第一個參數(shù)跟數(shù)組每一項時售躁，會使用全等（===）比較坞淮，也就是說兩項必須嚴(yán)格相等。下面來看一些例子：
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
alert(numbers.indexOf(4)); // 3
alert(numbers.lastIndexOf(4)); // 5
alert(numbers.includes(4)); // true
alert(numbers.indexOf(4, 4)); // 5
alert(numbers.lastIndexOf(4, 4)); // 3
alert(numbers.includes(4, 7)); // false
let person = { name: "Nicholas" };
let people = [{ name: "Nicholas" }];
let morePeople = [person];
alert(people.indexOf(person)); // -1
alert(morePeople.indexOf(person)); // 0
alert(people.includes(person)); // false
alert(morePeople.includes(person)); // true
13.find/findIndex
ECMAScript 也允許按照定義的斷言函數(shù)搜索數(shù)組陪捷，每個索引都會調(diào)用這個函數(shù)回窘。斷言函數(shù)的返回值決定了相應(yīng)索引的元素是否被認(rèn)為匹配。
斷言函數(shù)接收 3 個參數(shù)：元素揩局、索引和數(shù)組本身毫玖。其中元素是數(shù)組中當(dāng)前搜索的元素，索引是當(dāng)前元素的索引凌盯，而數(shù)組就是正在搜索的數(shù)組付枫。斷言函數(shù)返回真值，表示是否匹配驰怎。
find()和 findIndex()方法使用了斷言函數(shù)阐滩。這兩個方法都從數(shù)組的最小索引開始。find()返回第一個匹配的元素县忌，findIndex()返回第一個匹配元素的索引掂榔。這兩個方法也都接收第二個可選的參數(shù)，用于指定斷言函數(shù)內(nèi)部 this 的值症杏。
const people = [
{
name: "Matt",
age: 27
},
{
name: "Nicholas",
age: 29
}
];
alert(people.find((element, index, array) => element.age < 28));
// {name: "Matt", age: 27}
alert(people.findIndex((element, index, array) => element.age < 28));
// 0
找到匹配項后装获，這兩個方法都不再繼續(xù)搜索。
const evens = [2, 4, 6];
// 找到匹配后厉颤，永遠(yuǎn)不會檢查數(shù)組的最后一個元素
evens.find((element, index, array) => {
console.log(element);
console.log(index);
console.log(array);
return element === 4;
});
// 2
// 0
// [2, 4, 6]
// 4
// 1
// [2, 4, 6]
14.迭代方法
ECMAScript 為數(shù)組定義了 5 個迭代方法穴豫。每個方法接收兩個參數(shù)：以每一項為參數(shù)運行的函數(shù)，以及可選的作為函數(shù)運行上下文的作用域?qū)ο螅ㄓ绊懞瘮?shù)中 this 的值）逼友。傳給每個方法的函數(shù)接收 3個參數(shù)：數(shù)組元素精肃、元素索引和數(shù)組本身。因具體方法而異帜乞，這個函數(shù)的執(zhí)行結(jié)果可能會也可能不會影響方法的返回值司抱。數(shù)組的 5 個迭代方法如下。
- every()：對數(shù)組每一項都運行傳入的函數(shù)黎烈，如果對每一項函數(shù)都返回 true习柠，則這個方法返回 true。
- filter()：對數(shù)組每一項都運行傳入的函數(shù)怨喘，函數(shù)返回 true 的項會組成數(shù)組之后返回津畸。
- forEach()：對數(shù)組每一項都運行傳入的函數(shù)，沒有返回值必怜。
- map()：對數(shù)組每一項都運行傳入的函數(shù)肉拓，返回由每次函數(shù)調(diào)用的結(jié)果構(gòu)成的數(shù)組。
- some()：對數(shù)組每一項都運行傳入的函數(shù)梳庆，如果有一項函數(shù)返回 true暖途，則這個方法返回 true卑惜。
這些方法都不改變調(diào)用它們的數(shù)組。
在這些方法中驻售，every()和 some()是最相似的露久，都是從數(shù)組中搜索符合某個條件的元素。對 every()來說欺栗，傳入的函數(shù)必須對每一項都返回 true毫痕，它才會返回 true；否則迟几，它就返回 false消请。而對 some()來說，只要有一項讓傳入的函數(shù)返回 true类腮，它就會返回 true臊泰。下面是一個例子：
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
alert(everyResult); // false
let someResult = numbers.some((item, index, array) => item > 2);
alert(someResult); // true
以上代碼調(diào)用了 every()和 some()，傳入的函數(shù)都是在給定項大于 2 時返回 true蚜枢。every()返回 false 是因為并不是每一項都能達(dá)到要求缸逃。而 some()返回 true 是因為至少有一項滿足條件。
下面再看一看 filter()方法厂抽。這個方法基于給定的函數(shù)來決定某一項是否應(yīng)該包含在它返回的數(shù)組中需频。比如，要返回一個所有數(shù)值都大于 2 的數(shù)組筷凤，可以使用如下代碼：
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
alert(filterResult); // 3,4,5,4,3
這里贺辰，調(diào)用 filter()返回的數(shù)組包含 3、4嵌施、5、4莽鸭、3吗伤，因為只有對這些項傳入的函數(shù)才返回 true。這個方法非常適合從數(shù)組中篩選滿足給定條件的元素硫眨。
接下來 map()方法也會返回一個數(shù)組足淆。這個數(shù)組的每一項都是對原始數(shù)組中同樣位置的元素運行傳入函數(shù)而返回的結(jié)果。例如礁阁，可以將一個數(shù)組中的每一項都乘以 2巧号，并返回包含所有結(jié)果的數(shù)組，如下所示：
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
alert(mapResult); // 2,4,6,8,10,8,6,4,2
以上代碼返回了一個數(shù)組姥闭，包含原始數(shù)組中每個值乘以 2 的結(jié)果丹鸿。這個方法非常適合創(chuàng)建一個與原始數(shù)組元素一一對應(yīng)的新數(shù)組。
最后棚品，再來看一看 forEach()方法靠欢。這個方法只會對每一項運行傳入的函數(shù)廊敌，沒有返回值。本質(zhì)上门怪，forEach()方法相當(dāng)于使用 for 循環(huán)遍歷數(shù)組骡澈。比如：
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach((item, index, array) => {
// 執(zhí)行某些操作
});
數(shù)組的這些迭代方法通過執(zhí)行不同操作方便了對數(shù)組的處理。
15.歸并方法reduce/reduceRight
ECMAScript 為數(shù)組提供了兩個歸并方法：reduce()和 reduceRight()掷空。這兩個方法都會迭代數(shù)組的所有項肋殴，并在此基礎(chǔ)上構(gòu)建一個最終返回值。reduce()方法從數(shù)組第一項開始遍歷到最后一項坦弟。而 reduceRight()從最后一項開始遍歷至第一項护锤。
這兩個方法都接收兩個參數(shù)：對每一項都會運行的歸并函數(shù)，以及可選的以之為歸并起點的初始值减拭。傳給 reduce()和 reduceRight()的函數(shù)接收 4 個參數(shù)：上一個歸并值蔽豺、當(dāng)前項、當(dāng)前項的索引和數(shù)組本身拧粪。這個函數(shù)返回的任何值都會作為下一次調(diào)用同一個函數(shù)的第一個參數(shù)修陡。如果沒有給這兩個方法傳入可選的第二個參數(shù)（作為歸并起點值），則第一次迭代將從數(shù)組的第二項開始可霎，因此傳給歸并函數(shù)的第一個參數(shù)是數(shù)組的第一項魄鸦，第二個參數(shù)是數(shù)組的第二項。
可以使用 reduce()函數(shù)執(zhí)行累加數(shù)組中所有數(shù)值的操作癣朗，比如：
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
alert(sum); // 15
第一次執(zhí)行歸并函數(shù)時拾因，prev 是 1，cur 是 2旷余。第二次執(zhí)行時绢记，prev 是 3（1 + 2），cur 是 3（數(shù)組第三項）正卧。如此遞進(jìn)蠢熄，直到把所有項都遍歷一次，最后返回歸并結(jié)果炉旷。reduceRight()方法與之類似签孔，只是方向相反。來看下面的例子：
let values = [1, 2, 3, 4, 5];
let sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
});
alert(sum); // 15
在這里窘行，第一次調(diào)用歸并函數(shù)時 prev 是 5饥追，而 cur 是 4。當(dāng)然罐盔，最終結(jié)果相同但绕，因為歸并操作都是簡單的加法。
究竟是使用 reduce()還是 reduceRight()惶看，只取決于遍歷數(shù)組元素的方向壁熄。除此之外帚豪，這兩個方法沒什么區(qū)別。
