JS演習　配列のメソッドとプロトタイプ　★1～4

初めまして。今回は配列を上手く使えるようになるための問題です。じゃあ頑張ってね。

for文で足し算　★☆☆☆☆

sumという、配列の合計を出すメソッドを作ってください！
for文で合計を出した後はしっかり値を返してくださいね。

let arr = [4, 7, 6, 9];
arr.sum = () => {
    // arrの合計を返す。
};
console.log(arr.sum());// > 26

ヒント　for文の使い方

n回処理を繰り返す文はこう書きます。

for (let cnt = 0; cnt < 回数; cnt++) {
    // 繰り返す処理
}

今回は配列の長さだけ繰り返したいので、Array.lengthプロパティを使って

for (let cnt = 0; cnt < arr.length; cnt++) {
    // 配列の長さに応じて、繰り返される処理
}

このように書きます。

プロトタイプと配列操作　★★★☆☆

値が大きいか判定するメソッドを作ってください。全て大きいならtrue、全て小さいならfalse、どちらかに決まらければ各要素を比較してみましょう。
値が同じ場合はfalseを返してください。

// ここにコードを書いてね。

let a = [12, 3, 6, 2];
let b = [8, 1, 4, 1];
console.log(a.isBigger(b));// > true

// a [12, 3, 6, 2]
let c = [17, 6, 8, 7];
console.log(a.isBigger(c));// > false

// a [12, 3, 6, 2]
let d = [10, 7, 2, 1];
console.log(a.isBigger(d));// > [true, false, true, true]

// b [8, 1, 4, 1]
// d [10, 7, 2, 1]
console.log(b.isBigger(d));// > [false, false, true, false]

ヒント　使う配列のメソッド

Array.map()
mapメソッドは配列から新しい配列を作り出します。

[].map((値, インデックス, 配列) => {});// -> 返り値を集めた配列

[3, 5, 2, 8].map(value => value + 1);// -> [4, 6, 3, 9]
// もとの配列の値に1足した配列が返される。

[3, 5, 2, 8].map((value, index) => value + index);// -> [3, 6, 4, 11]
// もとの値にそのインデックスを足した配列が返される。

[3, 5, 2, 8].map((val, idx, arr) => val + (arr[idx - 1] ?? 0));// -> [3, 8, 7, 10]
// 前の値を足す。arrは元の配列を参照する。

Array(5).map((value, index) => index);// -> [empty x 5]
// emptyには動作しないので注意

Array(5).fill(/* undefined */).map((value, index) => index);// -> [0, 1, 2, 3, 4]
// undefinedには反応

Array.every()
全てtrueが返されたらtrue,それ以外ならfalseが返されます。

[].every((値, インデックス, 配列) => trueかfalse);

[3, 5, 2, 4].every(value => value < 6);// -> true
// 全ての要素は6より小さいのでtrue

[true, true, false, true].every((value, index) => {
    console.log(index);
    return value;
});// > 0  1  2, -> false
// 途中にfalseがあるときはそこで処理を中断

[true, true, false, true].some(value => value);// -> true
[false, false, false].some(value => value);// -> false
// 一つでもtrueの場合にtrueを返したいときはArray.someを使う。

ヒント　配列全てにメソッド定義

今回は配列一つずつにメソッドを設定せずに、全ての配列に付けてみましょう。プロトタイプに設定することで全ての配列へ適用できます。

Array.prototype.メソッド名 = (a, b) => {};
[].メソッド名(A, B);// 新たに作られた配列でも使える。

ただし、既存のプロトタイプに上書きしないように注意です。

Array.prototype.sum = function(start = 0, end = this.length) {
    let part = this.slice(start, end);
    let sum = 0;
    for (value of part) {
        sum += value;
    }
    return sum;
};// startからendまでの合計を求める。

[4, 2, 3, 1].sum();// -> 10
[3, 2, 1, 6].sum(1, 3);// -> 3
[6, 2, 1, 4].sum(2);// -> 5
// どんな配列でも使えるメソッド

配列のマスターとゲッター　★★★★☆

配列のデータ分析をしてみてください。英語わからないと混乱しそう。めんどくさいなら中央値と最頻値だけでもいいよ。

// ここにコードを書いてね。

// average 平均　　sum 合計　　sorted 並び替え
console.log([5, 3, 1].analysis.average);// > 3
console.log([2, 3, 4, 1].analysis.sum);// > 10
console.log([3, 5, 9, 1].analysis.sorted);// > [1, 3, 5, 9]

// median 中央値　　range 範囲　　mode 最頻値
console.log([2, 6, 3, 1].analysis.median);// > 2.5
console.log([3, 2, 5, 6].analysis.range);// > 4
console.log([3, 3, 6, 2, 6, 1].analysis.mode);// > [3, 6]

ヒント　ゲッターを後から追加

Object.defineProperty()を使う事でオブジェクトにインスタンスプロパティの追加が出来ます。

Object.defineProperty(オブジェクト, "プロパティ名", {
    get() {
        // やりたい処理
        return 返す値;
    }
});
// 値が呼び出されたときにやりたいことを書く。

ゲッターを設定したのではなく、getというプロパティを作ったので注意してね。

const triangle = {
    a: { x: 1, y: 1 },
    b: { x: 4, y: 5 },
    c: { x: 7, y: 1 }
};

Object.defineProperty(triangle, "area", {
    get() {
        const { a, b, c } = this;
        return Math.abs((a.x * (b.y - c.y) + b.x * (c.y - a.y) + c.x * (a.y - b.y)) / 2);
    }
    // 三角形の面積を求めるゲッター
});
console.log(triangle.area);// > 12