JavaScript配列方法(2)

📌 いろいろな問題を通して、いろいろな配列方法の使い方を学びましょう.🤔
1. Array.prototype.join() & toString()
Q1. 指定されたアレイを文字列に変換

const fruits = ['apple', 'banana', 'orange'];


// ▼ answer
const result = fruits.join();

console.log(result);  // "apple,banana,orange"

📌 join(separator?: string): string;📌 toString(): string;🔒 join()メソッドは、ソースアレイを変更しません.
✍️
最初はconsole.log(fruits.toString());で書かれていましたが、上記の結果が確認できました.結果は似ていますが、方法が違いますが、2つの違いは何ですか?
(1) join():配列内のすべての要素を接続し、文字列を形成します.パラメータとしてセパレータ(separator)を使用すると、文字列としてリストされるとセパレータとして指定され、省略すると,に自動的に適用されます.
+)パラメータが('')の場合、空の文字列が返され、配列内の各値が区切りなしに接続されます.(例を参照)
(2) toString():配列や他のタイプのオブジェクトに使用できます.オブジェクトの値を文字列に変換します.値はカンマで区切られます.
(toString()は、オブジェクトをどのように上書きするかによって実現される、すなわち、各オブジェクトが同じ結果を得る可能性があり、そうでない可能性があることを示す.)

// ex) join()
const result1 = fruits.join(';');  // "apple;banana;orange"
const result2 = fruits.join('-');  // "apple-banana-orange"
const result3 = fruits.join('');  // "applebananaorange"
const result4 = fruits.join(' or ');  // "apple or banana or orange"

// ex) toSting()
const result = fruits.toString(';');  // "apple,banana,orange"

2. String.prototype.split()
Q2. 指定された文字列を配列に変換

const fruits = '🍎, 🥝, 🍌, 🍒';


// ▼ answer
const result = fruits.split(',');

console.log(result);  // ["🍎", "🥝", " 🍌", " 🍒"]

📌 split(separator: string | RegExp, limit?: number): string[];🔒 split()メソッドは、ソースアレイを変更しません.
✍️split()は合計2種類のparameterを受け取った.
(1)separator(セパレータ)
:必要な区切り文字を渡さない場合は、次の例のように文字列全体が1つの位置にあることがわかります.
(2) limit:戻る配列のサイズを指定します.最初の2つの配列を受け取りたい場合は、次の例のように2を書くことができます.

// ex1.) separator (필수)
const result1 = fruits.split();
console.log(result1);  // ["🍎, 🥝, 🍌, 🍒"]


// ex2.) limit 설정(옵션)
const result2 = fruits.split(',',2);
console.log(result2);  // ["🍎", "🥝"]

3. Array.prototype.reverse() ❗️
Q3. 与えられた配列の順序を反転

const array = [1, 2, 3, 4, 5];


// ▼ answer
const result = array.reverse();

console.log(result);  // [5, 4, 3, 2, 1]
console.log(array);  // [5, 4, 3, 2, 1]

📌 reverse(): T[];¥142メソッドで元の配列を変更します.
✍️reverse()は、配列中のアイテムの順序を逆さまにします.呼び出し関数の配列自体も順序が変わります.
4. Array.prototype.slice() & splice() ❗️
Q4. 最初の要素と2番目の要素を除いて、残りの3つの要素が作成される新しい配列を作成します.

const array = [1, 2, 3, 4, 5];


// ▼ answer
const result = array.slice(2, 5);

console.log(result);  // [3, 4, 5]
console.log(array);  // [1, 2, 3, 4, 5]

📌 reverse()📌 slice(start?: number, end?: number): T[];🔒 splice(start: number, deleteCount: number, ...items: T[]): T[];メソッドは、ソースアレイを変更しません.
¥142メソッドで元の配列を変更します.
✍️
slice()とsplice()の2つの方法は同じ結果を出力することができるが,正解はslice()に限られる.では、両者の違いを理解してみましょう.
(1) slice():配列から所望の部分を返したい場合にのみ使用します.元の配列は変更されません.
最初のパラメータstartに対応するインデックスを持つ要素から、パラメータendに対応するインデックスを持つ要素にコピーします.
(2) splice():アレイ内の既存の要素を削除または置換したり、新しい要素を追加したりして、アレイの内容を変更します.(配列自体を変更せずに新しい配列を作成する必要がありますので、正しくはできません.)

//ex) splice()
const array = [1, 2, 3, 4, 5];
const result = array.splice(1,2,6);

console.log(result);  // [2, 3]
console.log(array);  // [1, 6, 4, 5]

5. Array.prototype.find()
Q5. 点数90点の学生を探します

  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }

  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];


// ▼ answer
const result = students.find((value) => value.score === 90);

/* ▼ arrow function으로 정의하기 전 코드
 * const result = students.find(function(value){
 *   return value.score === 90;
 * });
 */

console.log(result);
// Student {name: 'C', age: 30, enrolled: true, score: 90}

📌 slice()🔒 splice()メソッドでは、元のアレイは変更されません.
✍️find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;は、与えられた判別関数を満たす最初の要素の値を返し、なければ未定義を返します.
問題で渡されたコールバック関数は、アレイ内の各要素を順次呼び出し、学生のスコアが90であればfind()、そうでなければfind()を返します.次に、trueは、falseの対応する配列要素を返す最初のAPIである(所望のコンテンツを検索するために使用される).findの例を作成します.

// ex)
const array1 = [5, 10, 15, 20, 30];


// ▼ answer
const found = array1.find((item) => item > 15);

/* ▼ arrow function으로 정의하기 전 코드
 * const found = array1.find(function(item){
 *  return item > 15;
 * });
 */

console.log(found);  // 20;

✍️
15より大きい数値は、最初に表示された要素を返します.
6. Array.prototype.filter()
Q6. カリキュラム登録学生の配列の作成

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}

const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];


// ▼ answer
const result = students.filter((element) => element.enrolled);

console.log(result); 

📌 true🔒 find()メソッドは、ソースアレイを変更しません.
✍️filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];は、所与の関数テストに合格したすべての要素を収集し、新しい配列に戻る.
7. Array.prototype.map()
Q7. 学生スコアのみを含む配列を作成する

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}

const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];


// ▼ answer
const result = students.map((student) => student.score);

console.log(result);  // [45, 80, 90, 66, 88]

📌 filter()🔒 filter()メソッドは、ソースアレイを変更しません.
✍️map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];は、配列内の各要素が所与の関数を呼び出した結果をまとめ、新しい配列を返す.アレイ内の各要素に渡されるコールバック関数を呼び出すときに、コールバック関数によって加工された異なる方法のデータを作成する場合は、この操作に使用できます.
📌 Point !
コールバック関数に渡されるパラメータはできるだけ分かりやすく書くことが重要です.
上記の5,6題では,コールバック関数が伝達するパラメータをmap(),map(),value,itemと命名し,このような名前が多ければ多いほど可読性が低下する.だから、「student」のような意味のある名前をつけることが大切!😃
8. Array.prototype.some() & every()
Q8. 50点以下の学生がいるかどうかを検査する

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}

const students = [
  new Student('A', 29, true, 45), 
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];


// ▼ answer
const result1 = students.some((student) => student.score < 50);
console.log(result1);  // true

const result2 = !students.every((student) => student.score >= 50);
console.log(result2);  // true (가독성이 좋지 않다.)

📌 element📌 some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;🔒 every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;メソッドは、ソースアレイを変更しません.
🔒 some()メソッドは、ソースアレイを変更しません.
✍️
(1) every():配列内の任意の要素が所定の判別関数を通過することを確認します.
コールバック関数は、配列内の各要素を実行し、配列内の1つがこの条件を満たす場合、trueが返されます.
(2) some():配列内のすべての要素が所定の判別関数を通過することを確認します.
eachの使用は、すべての配列条件が満たされなければならない場合にのみ、可読性に有利である.
9. Array.prototype.reduce()
Q9. 学生の平均点数を計算する

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}

const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];


// ▼ answer
const result = students.reduce((prev, curr) => prev + curr.score, 0);

console.log(result / students.length);  // 73.8

📌 every()🔒 reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;メソッドは、ソースアレイを変更しません.
✍️reduce()は、アレイ内の各要素に対して所与のreducer関数を実行し、結果値を返す.reduce()は、reduceおよびcallbackを伝達し、ある値を積算するために必要な開始点からすべての配列の周りに開始する.
最後の行に結果を出力する場合、学生長を除いて累積値の平均値を求めることができる.
10. map() & filter() & sort() & join()
Q10. 条件付きスコアを含む文字列の作成

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}

const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];


// ▼ answer
const result = students
.map(student => student.score)  // 스코어만 담긴 배열을 만들고,  
.filter((score) => score >= 50)  // (조건) 점수가 50 이상인 아이들만,
.sort((a, b) => a - b)  // 작은 순서부터 차례대로, 
.join(); // 문자열로 바꿔서 출력한다.

console.log(result);  // 66,80,88,90 

✍️
(1)initialValueをstudentとするscoreマッピングstudentは,新しい配列を生成する.(マッピングを使用すると、新しい配列が返されます.)学生たちを点数に変える.
(2)map()を使用する.スコアから再フィルタします.
(3)filter()配列内の要素を適切な位置に並べ替え、配列を返す.a-bではなくb-aと定義されている場合は、大きな順序からソートされます.
(4)リターン配列においてsort()を用いてstringに変更する.
reference
MDN-array dream-coding