Javascript 數(shù)組方法

reverse

arr.reverse 方法用于顛倒 ?arr? 中元素的順序。

例如：

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

它也會返回顛倒后的數(shù)組 arr。

split 和 join

舉一個現(xiàn)實生活場景的例子。我們正在編寫一個消息應用程序，并且該人員輸入以逗號分隔的接收者列表：John, Pete, Mary。但對我們來說，名字數(shù)組比單個字符串舒適得多。怎么做才能獲得這樣的數(shù)組呢？

str.split(delim) 方法可以做到。它通過給定的分隔符 delim 將字符串分割成一個數(shù)組。

在下面的例子中，我們用“逗號后跟著一個空格”作為分隔符：

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `A message to ${name}.` ); // A message to Bilbo（和其他名字）
}

split 方法有一個可選的第二個數(shù)字參數(shù) —— 對數(shù)組長度的限制。如果提供了，那么額外的元素會被忽略。但實際上它很少使用：

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

拆分為字母

調用帶有空參數(shù) s 的 split(s)，會將字符串拆分為字母數(shù)組：

let str = "test";

alert( str.split('') ); // t,e,s,t

arr.join(glue) 與 split 相反。它會在它們之間創(chuàng)建一串由 glue 粘合的 arr 項。

例如：

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 使用分號 ; 將數(shù)組粘合成字符串

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight

當我們需要遍歷一個數(shù)組時 —— 我們可以使用 forEach，for 或 for..of。

當我們需要遍歷并返回每個元素的數(shù)據時 —— 我們可以使用 map。

arr.reduce 方法和 arr.reduceRight 方法和上面的種類差不多，但稍微復雜一點。它們用于根據數(shù)組計算單個值。

語法是：

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

該函數(shù)一個接一個地應用于所有數(shù)組元素，并將其結果“搬運（carry on）”到下一個調用。

參數(shù)：

• ?accumulator ?—— 是上一個函數(shù)調用的結果，第一次等于 ?initial?（如果提供了 ?initial ?的話）。
• ?item ?—— 當前的數(shù)組元素。
• ?index ?—— 當前索引。
• ?arr ?—— 數(shù)組本身。

應用函數(shù)時，上一個函數(shù)調用的結果將作為第一個參數(shù)傳遞給下一個函數(shù)。

因此，第一個參數(shù)本質上是累加器，用于存儲所有先前執(zhí)行的組合結果。最后，它成為 ?reduce? 的結果。

聽起來復雜嗎？

掌握這個知識點的最簡單的方法就是通過示例。

在這里，我們通過一行代碼得到一個數(shù)組的總和：

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

傳遞給 reduce 的函數(shù)僅使用了 2 個參數(shù)，通常這就足夠了。

讓我們看看細節(jié)，到底發(fā)生了什么。

1. 在第一次運行時，?sum ?的值為初始值 ?initial?（?reduce ?的最后一個參數(shù)），等于 0，?current ?是第一個數(shù)組元素，等于 ?1?。所以函數(shù)運行的結果是 ?1?。
2. 在第二次運行時，?sum = 1?，我們將第二個數(shù)組元素（?2?）與其相加并返回。
3. 在第三次運行中，?sum = 3?，我們繼續(xù)把下一個元素與其相加，以此類推……

計算流程：

或者以表格的形式表示，每一行代表的是對下一個數(shù)組元素的函數(shù)調用：

在這里，我們可以清楚地看到上一個調用的結果如何成為下一個調用的第一個參數(shù)。

我們也可以省略初始值：

let arr = [1, 2, 3, 4, 5];

// 刪除 reduce 的初始值（沒有 0）
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

結果是一樣的。這是因為如果沒有初始值，那么 reduce 會將數(shù)組的第一個元素作為初始值，并從第二個元素開始迭代。

計算表與上面相同，只是去掉第一行。

但是這種使用需要非常小心。如果數(shù)組為空，那么在沒有初始值的情況下調用 ?reduce ?會導致錯誤。

例如：

let arr = [];

// Error: Reduce of empty array with no initial value
// 如果初始值存在，則 reduce 將為空 arr 返回它（即這個初始值）。
arr.reduce((sum, current) => sum + current);

所以建議始終指定初始值。

arr.reduceRight 和 arr.reduce 方法的功能一樣，只是遍歷為從右到左。

Array.isArray

數(shù)組是基于對象的，不構成單獨的語言類型。

所以 ?typeof ?不能幫助從數(shù)組中區(qū)分出普通對象：

alert(typeof {}); // object
alert(typeof []); // object（相同）

……但是數(shù)組經常被使用，因此有一種特殊的方法用于判斷：Array.isArray(value)。如果 value 是一個數(shù)組，則返回 true；否則返回 false。

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

大多數(shù)方法都支持 “thisArg”

幾乎所有調用函數(shù)的數(shù)組方法 —— 比如 find，filter，map，除了 sort 是一個特例，都接受一個可選的附加參數(shù) thisArg。

上面的部分中沒有解釋該參數(shù)，因為該參數(shù)很少使用。但是為了完整性，我們需要講講它。

以下是這些方法的完整語法：

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg 是可選的最后一個參數(shù)

thisArg 參數(shù)的值在 func 中變?yōu)?nbsp;this。

例如，在這里我們使用 army 對象方法作為過濾器，thisArg 用于傳遞上下文（passes the context）：

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// 找到 army.canJoin 返回 true 的 user
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

如果在上面的示例中我們使用了 users.filter(army.canJoin)，那么 army.canJoin 將被作為獨立函數(shù)調用，并且這時 this=undefined，從而會導致即時錯誤。

可以用 users.filter(user => army.canJoin(user)) 替換對 users.filter(army.canJoin, army) 的調用。前者的使用頻率更高，因為對于大多數(shù)人來說，它更容易理解。

總結

數(shù)組方法備忘單：

• 添加/刪除元素：
• ?push(...items)? —— 向尾端添加元素，
• ?pop()? —— 從尾端提取一個元素，
• ?shift()? —— 從首端提取一個元素，
• ?unshift(...items)? —— 向首端添加元素，
• ?splice(pos, deleteCount, ...items)? —— 從 ?pos? 開始刪除 ?deleteCount? 個元素，并插入 ?items?。
• ?slice(start, end)? —— 創(chuàng)建一個新數(shù)組，將從索引 ?start? 到索引 ?end?（但不包括 ?end?）的元素復制進去。
• ?concat(...items)? —— 返回一個新數(shù)組：復制當前數(shù)組的所有元素，并向其中添加 ?items?。如果 ?items? 中的任意一項是一個數(shù)組，那么就取其元素。
• 搜索元素：
• ?indexOf/lastIndexOf(item, pos)? —— 從索引 ?pos? 開始搜索 ?item?，搜索到則返回該項的索引，否則返回 ?-1?。
• ?includes(value)? —— 如果數(shù)組有 ?value?，則返回 ?true?，否則返回 ?false?。
• ?find/filter(func)? —— 通過 ?func? 過濾元素，返回使 ?func? 返回 ?true? 的第一個值/所有值。
• ?findIndex? 和 ?find? 類似，但返回索引而不是值。
• 遍歷元素：
• ?forEach(func)? —— 對每個元素都調用 ?func?，不返回任何內容。
• 轉換數(shù)組：
• ?map(func)? —— 根據對每個元素調用 ?func? 的結果創(chuàng)建一個新數(shù)組。
• ?sort(func)? —— 對數(shù)組進行原位（in-place）排序，然后返回它。
• ?reverse()? —— 原位（in-place）反轉數(shù)組，然后返回它。
• ?split/join? —— 將字符串轉換為數(shù)組并返回。
• ?reduce/reduceRight(func, initial)? —— 通過對每個元素調用 ?func? 計算數(shù)組上的單個值，并在調用之間傳遞中間結果。
• 其他：
• ?Array.isArray(value)? 檢查 ?value? 是否是一個數(shù)組，如果是則返回 ?true?，否則返回 ?false?。

請注意，sort，reverse 和 splice 方法修改的是數(shù)組本身。

這些是最常用的方法，它們覆蓋 99％ 的用例。但是還有其他幾個：

• arr.some(fn)/arr.every(fn) 檢查數(shù)組。

與 map 類似，對數(shù)組的每個元素調用函數(shù) fn。如果任何/所有結果為 true，則返回 true，否則返回 false。


這兩個方法的行為類似于 || 和 && 運算符：如果 fn 返回一個真值，arr.some() 立即返回 true 并停止迭代其余數(shù)組項；如果 fn 返回一個假值，arr.every() 立即返回 false 并停止對其余數(shù)組項的迭代。


我們可以使用 every 來比較數(shù)組：


function arraysEqual(arr1, arr2) {
  return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
}

alert( arraysEqual([1, 2], [1, 2])); // true

• arr.fill(value, start, end) —— 從索引 ?start? 到 ?end?，用重復的 ?value? 填充數(shù)組。

• arr.copyWithin(target, start, end) —— 將從位置 ?start? 到 ?end? 的所有元素復制到 自身 的 ?target? 位置（覆蓋現(xiàn)有元素）。

• arr.flat(depth)/arr.flatMap(fn) 從多維數(shù)組創(chuàng)建一個新的扁平數(shù)組。
• Array.of(element0[, element1[, …[, elementN]]]) 基于可變數(shù)量的參數(shù)創(chuàng)建一個新的 ?Array? 實例，而不需要考慮參數(shù)的數(shù)量或類型。

有關完整列表，請參閱 手冊。

乍看起來，似乎有很多方法，很難記住。但實際上這比看起來要容易得多。

瀏覽這個備忘單，以了解這些方法。然后解決本章中的習題來進行練習，以便讓你有數(shù)組方法的使用經驗。

然后，每當你需要對數(shù)組進行某些操作，而又不知道怎么做的時候，請回到這兒，查看這個備忘單，然后找到正確的方法。示例將幫助你正確編寫它。用不了多久，你就自然而然地記住這些方法了，根本不需要你死記硬背。

任務

將 border-left-width 轉換成 borderLeftWidth

重要程度: 5

編寫函數(shù) camelize(str) 將諸如 “my-short-string” 之類的由短劃線分隔的單詞變成駱駝式的 “myShortString”。

即：刪除所有短橫線，并將短橫線后的每一個單詞的首字母變?yōu)榇髮憽?/p>

示例：

camelize("background-color") == 'backgroundColor';
camelize("list-style-image") == 'listStyleImage';
camelize("-webkit-transition") == 'WebkitTransition';

提示：使用 split 將字符串拆分成數(shù)組，對其進行轉換之后再 join 回來。

解決方案

function camelize(str) {
  return str
    .split('-') // splits 'my-long-word' into array ['my', 'long', 'word']
    .map(
      // capitalizes first letters of all array items except the first one
      // converts ['my', 'long', 'word'] into ['my', 'Long', 'Word']
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    )
    .join(''); // joins ['my', 'Long', 'Word'] into 'myLongWord'
}

過濾范圍

重要程度: 4

寫一個函數(shù) filterRange(arr, a, b)，該函數(shù)獲取一個數(shù)組 arr，在其中查找數(shù)值大于或等于 a，且小于或等于 b 的元素，并將結果以數(shù)組的形式返回。

該函數(shù)不應該修改原數(shù)組。它應該返回新的數(shù)組。

例如：

let arr = [5, 3, 8, 1];

let filtered = filterRange(arr, 1, 4);

alert( filtered ); // 3,1（匹配值）

alert( arr ); // 5,3,8,1（未修改）

解決方案

function filterRange(arr, a, b) {
  // 在表達式周圍添加了括號，以提高可讀性
  return arr.filter(item => (a <= item && item <= b));
}

let arr = [5, 3, 8, 1];

let filtered = filterRange(arr, 1, 4);

alert( filtered ); // 3,1（匹配的值）

alert( arr ); // 5,3,8,1（未經改動的數(shù)組中的值）

原位（in place）過濾范圍

重要程度: 4

寫一個函數(shù) filterRangeInPlace(arr, a, b)，該函數(shù)獲取一個數(shù)組 arr，并刪除其中介于 a 和 b 區(qū)間以外的所有值。檢查：a ≤ arr[i] ≤ b。

該函數(shù)應該只修改數(shù)組。它不應該返回任何東西。

例如：

let arr = [5, 3, 8, 1];

filterRangeInPlace(arr, 1, 4); // 刪除了范圍在 1 到 4 之外的所有值

alert( arr ); // [3, 1]

解決方案

function filterRangeInPlace(arr, a, b) {

  for (let i = 0; i < arr.length; i++) {
    let val = arr[i];

    // 如果超出范圍，則刪除
    if (val < a || val > b) {
      arr.splice(i, 1);
      i--;
    }
  }

}

let arr = [5, 3, 8, 1];

filterRangeInPlace(arr, 1, 4); // 刪除 1 到 4 范圍之外的值

alert( arr ); // [3, 1]

降序排列

重要程度: 4

let arr = [5, 2, 1, -10, 8];

// ……你的代碼以降序對其進行排序

alert( arr ); // 8, 5, 2, 1, -10

解決方案

let arr = [5, 2, 1, -10, 8];

arr.sort((a, b) => b - a);

alert( arr );

復制和排序數(shù)組

重要程度: 5

我們有一個字符串數(shù)組 arr。我們希望有一個排序過的副本，但保持 arr 不變。

創(chuàng)建一個函數(shù) copySorted(arr) 返回這樣一個副本。

let arr = ["HTML", "JavaScript", "CSS"];

let sorted = copySorted(arr);

alert( sorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (no changes)

解決方案

我們可以使用 slice() 來創(chuàng)建一個副本并對其進行排序：

function copySorted(arr) {
  return arr.slice().sort();
}

let arr = ["HTML", "JavaScript", "CSS"];

let sorted = copySorted(arr);

alert( sorted );
alert( arr );

創(chuàng)建一個可擴展的 calculator

重要程度: 5

創(chuàng)建一個構造函數(shù) Calculator，以創(chuàng)建“可擴展”的 calculator 對象。

該任務由兩部分組成。

1. 首先，實現(xiàn) ?calculate(str)? 方法，該方法接受像 ?"1 + 2"? 這樣格式為“數(shù)字 運算符 數(shù)字”（以空格分隔）的字符串，并返回結果。該方法需要能夠理解加號 ?+? 和減號 ?-?。

用法示例：

let calc = new Calculator;

alert( calc.calculate("3 + 7") ); // 10

2. 然后添加方法 ?addMethod(name, func)?，該方法教 calculator 進行新操作。它需要運算符 ?name? 和實現(xiàn)它的雙參數(shù)函數(shù) ?func(a,b)?。

例如，我們添加乘法 ?*?，除法 ?/? 和求冪 ?**?：

let powerCalc = new Calculator;
powerCalc.addMethod("*", (a, b) => a * b);
powerCalc.addMethod("/", (a, b) => a / b);
powerCalc.addMethod("**", (a, b) => a ** b);

let result = powerCalc.calculate("2 ** 3");
alert( result ); // 8

• 此任務中沒有括號或復雜的表達式。
• 數(shù)字和運算符之間只有一個空格。
• 你可以自行選擇是否添加錯誤處理功能。

解決方案

• 請注意方法的存儲方式。它們只是被添加到 ?this.methods? 屬性中。
• 所有檢測和數(shù)字轉換都通過 ?calculate? 方法完成。將來可能會擴展它以支持更復雜的表達式。

function Calculator() {

  this.methods = {
    "-": (a, b) => a - b,
    "+": (a, b) => a + b
  };

  this.calculate = function(str) {

    let split = str.split(' '),
      a = +split[0],
      op = split[1],
      b = +split[2];

    if (!this.methods[op] || isNaN(a) || isNaN(b)) {
      return NaN;
    }

    return this.methods[op](a, b);
  };

  this.addMethod = function(name, func) {
    this.methods[name] = func;
  };
}

映射到 names

重要程度: 5

你有一個 user 對象數(shù)組，每個對象都有 user.name。編寫將其轉換為 names 數(shù)組的代碼。

例如：

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let users = [ john, pete, mary ];

let names = /* ... your code */

alert( names ); // John, Pete, Mary

解決方案

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let users = [ john, pete, mary ];

let names = users.map(item => item.name);

alert( names ); // John, Pete, Mary

映射到對象

重要程度: 5

你有一個 user 對象數(shù)組，每個對象都有 name，surname 和 id。

編寫代碼以該數(shù)組為基礎，創(chuàng)建另一個具有 id 和 fullName 的對象數(shù)組，其中 fullName 由 name 和 surname 生成。

例如：

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = /* ... your code ... */

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // John Smith

所以，實際上你需要將一個對象數(shù)組映射到另一個對象數(shù)組。在這兒嘗試使用箭頭函數(shù) => 來編寫。

解決方案

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ); // 1
alert( usersMapped[0].fullName ); // John Smith

請注意，在箭頭函數(shù)中，我們需要使用額外的括號。

我們不能這樣寫：

let usersMapped = users.map(user => {
  fullName: `${user.name} ${user.surname}`,
  id: user.id
});

我們記得，有兩種箭頭函數(shù)的寫法：直接返回值 value => expr 和帶主體的 value => {...}。

JavaScript 在這里會把 { 視為函數(shù)體的開始，而不是對象的開始。解決方法是將它們包裝在普通括號 () 中：

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));

這樣就可以了。

按年齡對用戶排序

重要程度: 5

編寫函數(shù) sortByAge(users) 獲得對象數(shù)組的 age 屬性，并根據 age 對這些對象數(shù)組進行排序。

例如：

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let arr = [ pete, john, mary ];

sortByAge(arr);

// now: [john, mary, pete]
alert(arr[0].name); // John
alert(arr[1].name); // Mary
alert(arr[2].name); // Pete

解決方案

function sortByAge(arr) {
  arr.sort((a, b) => a.age - b.age);
}

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let arr = [ pete, john, mary ];

sortByAge(arr);

// 排序后的數(shù)組為：[john, mary, pete]
alert(arr[0].name); // John
alert(arr[1].name); // Mary
alert(arr[2].name); // Pete

譯注：解決方案的代碼還可以更短一些

function sortByAge(arr) {
  arr.sort((a, b) => a.age - b.age);
}

因為 sort() 方法的語法為 arr.sort([compareFunction])，如果沒有指明 compareFunction，那么元素會被按照轉換為的字符串的諸個字符的 Unicode 編碼進行排序，如果指明了 compareFunction，那么數(shù)組會按照調用該函數(shù)的返回值排序。即 a 和 b 是兩個將要被比較的元素：

• 如果 ?compareFunction(a, b)? 小于 ?0?，那么 ?a? 會被排列到 ?b? 之前；
• 如果 ?compareFunction(a, b)? 等于 ?0?，那么 ?a? 和 ?b? 的相對位置不變。備注：ECMAScript 標準并不保證這一行為，而且也不是所有瀏覽器都會遵守（例如 Mozilla 在 2003 年之前的版本）；
• 如果 ?compareFunction(a, b)? 大于 ?0?，那么 ?b? 會被排列到 ?a? 之前。

因此，升序排列的函數(shù)可以簡寫為：(a, b) => a.age - b.age。

隨機排列數(shù)組

重要程度: 3

編寫函數(shù) ?shuffle(array)? 來隨機排列數(shù)組的元素。

多次運行 ?shuffle? 可能導致元素順序的不同。例如：

let arr = [1, 2, 3];

shuffle(arr);
// arr = [3, 2, 1]

shuffle(arr);
// arr = [2, 1, 3]

shuffle(arr);
// arr = [3, 1, 2]
// ...

所有元素順序應該具有相等的概率。例如，可以將 [1,2,3] 重新排序為 [1,2,3] 或 [1,3,2] 或 [3,1,2] 等，每種情況的概率相等。

解決方案

簡單的解決方案可以是：

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

let arr = [1, 2, 3];
shuffle(arr);
alert(arr);

這樣是可以的，因為 Math.random() - 0.5 是一個可能是正數(shù)或負數(shù)的隨機數(shù)，因此排序函數(shù)會隨機地對數(shù)組中的元素進行重新排序。

但是，由于排序函數(shù)并非旨在以這種方式使用，因此并非所有的排列都具有相同的概率。

例如，請考慮下面的代碼。它運行 100 萬次 shuffle 并計算所有可能結果的出現(xiàn)次數(shù)：

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

// 所有可能排列的出現(xiàn)次數(shù)
let count = {
  '123': 0,
  '132': 0,
  '213': 0,
  '231': 0,
  '321': 0,
  '312': 0
};

for (let i = 0; i < 1000000; i++) {
  let array = [1, 2, 3];
  shuffle(array);
  count[array.join('')]++;
}

// 顯示所有可能排列的出現(xiàn)次數(shù)
for (let key in count) {
  alert(`${key}: ${count[key]}`);
}

示例結果（取決于 Javascript 引擎）：

123: 250706
132: 124425
213: 249618
231: 124880
312: 125148
321: 125223

我們可以清楚地看到這種傾斜：123 和 213 的出現(xiàn)頻率比其他情況高得多。

使用不同的 JavaScript 引擎運行這個示例代碼得到的結果可能會有所不同，但是我們已經可以看到這種方法是不可靠的。

為什么它不起作用？一般來說，sort 是一個“黑匣子”：我們將一個數(shù)組和一個比較函數(shù)放入其中，并期望其對數(shù)組進行排序。但是由于比較的完全隨機性，這個黑匣子瘋了，它發(fā)瘋地確切程度取決于引擎中的具體實現(xiàn)方法。

還有其他很好的方法可以完成這項任務。例如，有一個很棒的算法叫作 Fisher-Yates shuffle。其思路是：逆向遍歷數(shù)組，并將每個元素與其前面的隨機的一個元素互換位置：

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); // 從 0 到 i 的隨機索引

    // 交換元素 array[i] 和 array[j]
    // 我們使用“解構分配（destructuring assignment）”語法來實現(xiàn)它
    // 你將在后面的章節(jié)中找到有關該語法的更多詳細信息
    // 可以寫成：
    // let t = array[i]; array[i] = array[j]; array[j] = t
    [array[i], array[j]] = [array[j], array[i]];
  }
}

讓我們以相同的方式測試一下：

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

// 所有可能排列的出現(xiàn)次數(shù)
let count = {
  '123': 0,
  '132': 0,
  '213': 0,
  '231': 0,
  '321': 0,
  '312': 0
};

for (let i = 0; i < 1000000; i++) {
  let array = [1, 2, 3];
  shuffle(array);
  count[array.join('')]++;
}

// 顯示所有可能排列的出現(xiàn)次數(shù)
for (let key in count) {
  alert(`${key}: ${count[key]}`);
}

示例輸出：

123: 166693
132: 166647
213: 166628
231: 167517
312: 166199
321: 166316

現(xiàn)在看起來不錯：所有排列都以相同的概率出現(xiàn)。

另外，在性能方面，F(xiàn)isher — Yates 算法要好得多，沒有“排序”開銷。

獲取平均年齡

重要程度: 4

編寫 ?getAverageAge(users)? 函數(shù)，該函數(shù)獲取一個具有 ?age? 屬性的對象數(shù)組，并返回平均年齡。

平均值的計算公式是 ?(age1 + age2 + ... + ageN) / N?。

例如：

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 29 };

let arr = [ john, pete, mary ];

alert( getAverageAge(arr) ); // (25 + 30 + 29) / 3 = 28

解決方案

function getAverageAge(users) {
  return users.reduce((prev, user) => prev + user.age, 0) / users.length;
}

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 29 };

let arr = [ john, pete, mary ];

alert( getAverageAge(arr) ); // 28

數(shù)組去重

重要程度: 4

?arr? 是一個數(shù)組。

創(chuàng)建一個函數(shù) ?unique(arr)?，返回去除重復元素后的數(shù)組 ?arr?。

例如：

function unique(arr) {
  /* your code */
}

let strings = ["Hare", "Krishna", "Hare", "Krishna",
  "Krishna", "Krishna", "Hare", "Hare", ":-O"
];

alert( unique(strings) ); // Hare, Krishna, :-O

解決方案

讓我們先遍歷數(shù)字：

• 對于每個元素，我們將檢查結果數(shù)組是否已經有該元素。
• 如果有，則忽略，否則將其添加到結果中。

function unique(arr) {
  let result = [];

  for (let str of arr) {
    if (!result.includes(str)) {
      result.push(str);
    }
  }

  return result;
}

let strings = ["Hare", "Krishna", "Hare", "Krishna",
  "Krishna", "Krishna", "Hare", "Hare", ":-O"
];

alert( unique(strings) ); // Hare, Krishna, :-O

代碼有效，但其中存在潛在的性能問題。

方法 ?result.includes(str)? 在內部遍歷數(shù)組 ?result?，并將每個元素與 ?str? 進行比較以找到匹配項。

所以如果 ?result? 中有 ?100? 個元素，并且沒有任何一項與 ?str? 匹配，那么它將遍歷整個 ?result? 并進行 ?100? 次比較。如果 ?result? 很大，比如 ?10000?，那么就會有 ?10000? 次的比較。

這本身并不是問題，因為 JavaScript 引擎速度非?？?，所以遍歷一個有 ?10000? 個元素的數(shù)組只需要幾微秒。

但是我們在 ?for?循環(huán)中對 ?arr? 的每個元素都進行了一次檢測。

因此，如果 ?arr.length? 是 ?10000?，我們會有 ?10000 * 10000? = 1 億次的比較。那真的太多了。

所以該解決方案僅適用于小型數(shù)組。

進一步，在后面的 Map and Set（映射和集合） 一章中，我們將看到如何對該方法進行優(yōu)化。

從數(shù)組創(chuàng)建鍵（值）對象

重要程度: 4

假設我們收到了一個用戶數(shù)組，形式為：?{id:..., name:..., age:... }?。

創(chuàng)建一個函數(shù) ?groupById(arr)? 從該數(shù)組創(chuàng)建對象，以 ?id? 為鍵（key），數(shù)組項為值。

例如:

let users = [
  {id: 'john', name: "John Smith", age: 20},
  {id: 'ann', name: "Ann Smith", age: 24},
  {id: 'pete', name: "Pete Peterson", age: 31},
];

let usersById = groupById(users);

/*
// 調用函數(shù)后，我們應該得到：

usersById = {
  john: {id: 'john', name: "John Smith", age: 20},
  ann: {id: 'ann', name: "Ann Smith", age: 24},
  pete: {id: 'pete', name: "Pete Peterson", age: 31},
}
*/

處理服務端數(shù)據時，這個函數(shù)很有用。

在這個任務里我們假設 ?id? 是唯一的。沒有兩個具有相同 ?id? 的數(shù)組項。

請在解決方案中使用數(shù)組的 ?.reduce? 方法。

解決方案

function groupById(array) {
  return array.reduce((obj, value) => {
    obj[value.id] = value;
    return obj;
  }, {})
}