[[📗TDQ-016 配列の変換 その１]]の続きです。前回よりも少しクセのあるメソッドを扱います。 ## Reference - [配列 · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/array/) ## Lesson ### concat [[配列 (JavaScript)|配列]]同士の結合には[[Array.prototype.concat (JavaScript)|Array.prototype.concat]]を使います。 ```js const xs = [1, 2]; const ys = [3, 4, 5]; xs.concat(ys); // [ 1, 2, 3, 4, 5 ] xs.concat(ys, ys); // [ 1, 2, 3, 4, 5, 3, 4, 5 ] ``` ### toSorted [[配列 (JavaScript)|配列]]のソートには[[Array.prototype.toSorted (JavaScript)|Array.prototype.toSorted]]を使います。 ```js ["c", "d", "a", "b"].toSorted() // [ "a", "b", "c", "d" ] ``` ### toReversed [[配列 (JavaScript)|配列]]の順番逆転には[[Array.prototype.toReversed (JavaScript)|Array.prototype.toReversed]]を使います。 ```js ["a", "b", "c", "d"].toReversed() // [ "d", "c", "b", "a" ] ``` ### toSpliced [[配列 (JavaScript)|配列]]の一部要素を挿入したり、削除したりするには[[Array.prototype.toSpliced (JavaScript)|Array.prototype.toSpliced]]を使います。 ```js ["1", "2", "3", "4"].toSpliced(2, 0, "new") // 挿入 // ["1", "2", "new", "3", "4"] ["1", "2", "3", "4"].toSpliced(1, 2) // 削除 // ["1", "4"] ``` ### reduce [[配列 (JavaScript)|配列]]の値を1つに畳み込むには[[Array.prototype.reduce (JavaScript)|Array.prototype.reduce]]を使います。 ```js [1, 10, 100].reduce((acc, x) => acc + x) // 初期値が配列1つ目の要素 // 111 [1, 10, 100].reduce((acc, x) => acc + x, 100) // 初期値が指定値(100) // 211 ``` ## Mission 1 #😁EASY [[Array.prototype.reduce (JavaScript)|Array.prototype.reduce]]を使って1から5の和を求めるコードを書いてください。 %% 解答例 ```js [1, 2, 3, 4, 5].reduce((acc, x) => acc + x) ``` %% ## Mission 2 #🙂NORMAL 以下のコードを[[Array.prototype.flat (JavaScript)|Array.prototype.flat]]を使わずに、[[Array.prototype.concat (JavaScript)|Array.prototype.concat]]と[[Array.prototype.reduce (JavaScript)|Array.prototype.reduce]]を使って実装しなおしてください。 ```js const box = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; box.flat(); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] ``` %% 解答例 ```js const box = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; box.reduce((acc, xs) => acc.concat(xs)); ``` %% > [!hint]- Hint 1 > [[#Mission 1]]と基本的な流れは同じです。 ## Mission 3 #🙂NORMAL 以下のテストが失敗する理由を説明してください。 ```js import { expect } from "jsr:@std/expect"; Deno.test("元の配列の最後の要素は逆転配列の先頭と等しい", () => { const xs = [1, 2, 3, 4, 5]; const reversedXs = xs.reverse(); expect(reversedXs.at(0)).toEqual(xs.at(-1)); }); ``` %% 解答例 [[Array.prototype.reverse (JavaScript)|Array.prototype.reverse]]は元の[[配列 (JavaScript)|配列]]を破壊的に変更してしまう (元の配列の順番も逆転してしまう) から。 %% ## Mission 4 #🙂NORMAL [[#Mission 3]]のコードをテストが通るように**1行だけ**修正してください。 %% 解答例 ```js import { expect } from "jsr:@std/expect"; Deno.test("元の配列の最後の要素は逆転配列の先頭と等しい", () => { const xs = [1, 2, 3, 4, 5]; const reversedXs = xs.toReversed(); expect(reversedXs.at(0)).toEqual(xs.at(-1)); }); ``` %% ## Mission 5 #🙂NORMAL 以下のコードをFIXMEコメントの制約に従って完成させてください。 ```js import { expect } from "jsr:@std/expect"; Deno.test("3番目の要素を除外してから文字数をキーとしてグルーピングする", () => { const xs = ["one", "two", "three", "four", "five"]; // FIXME: xxxとyyyに適切なメソッドを指定する const r = Object.xxx(xs.yyy(2, 1), (x) => x.length); expect(r).toEqual({ 3: ["one", "two"], 4: ["four", "five"] }); expect(xs).toEqual(["one", "two", "three", "four", "five"]); }); ``` %% 解答例 ```js import { expect } from "jsr:@std/expect"; Deno.test("3番目の要素を除外してから文字数をキーとしてグルーピングする", () => { const xs = ["one", "two", "three", "four", "five"]; const r = Object.groupBy(xs.toSpliced(2, 1), (x) => x.length); expect(r).toEqual({ 3: ["one", "two"], 4: ["four", "five"] }); expect(xs).toEqual(["one", "two", "three", "four", "five"]); }); ``` %% > [!hint]- Hint 1 > 要素の削除には[[#toSpliced]]を使います。 --- *NEXT* >> [[📗TDQ-018 配列の条件判定]]