🚕 アレイ

これは、変数名の下にデータ・アイテムのリストを格納する簡単な方法です.

🛴 アレイの宣言

방법 1)
const food = new Array('🍕', '🍔', '🍗');
---------------------------------------------------
방법 2)
const fruits = ['🍎', '🍌', '🍐'];
---------------------------------------------------
빈 배열 생성하기)
const food = new Array(); // or
const fruits = [];
-> 이 때의 배열의 원소는 undefined이다.
---------------------------------------------------
배열이 3개인 빈 배열 생성하기)
const boom = ['','','']; // or
const boom2 = new Array(3); // n은 정수값을 입력한다.
-> length가 3인 배열이 생성되었다.

✋🏻 ここで待って!

🙋🏻‍♀️フルーツステーキのコンソールでりんごを見たいです.

console.log(fruits[1]);

それをするには、次のようにすべきでしょう.
🙅🏻‍♀️NO!!!
cssは1からインデックスを開始します.
JavaScriptではindexは0から始まります.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits[0]); // 🍎

🛴 アレイの確認

1번째 방법) console.log 사용
const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits); // 🍎, 🍌, 🍐
------------------------------------------------
2번째 방법) forEach 사용
fruits.forEach((fruits) => console.log(fruits));
// 🍎, 🍌, 🍐

🛴 アレイ関連API

🔺length
配列の大きさを教える.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits.length);
// 3

🔺forEach
各配列要素に対して指定された関数を実行します.

const fruits = ["🍎", "🍌", "🍐"];
/*
for문을 통해서도 가능하지만 forEach를 사용할 수도 있다.
---------------------------------------------------
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
*/
fruits.forEach(fruits => {
  console.log(fruits)
});

🔺indexOf
選択した配列要素が配列の数番目にあることを示します.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits.indexOf('🍌'));
// 1
// -1이 찍힌다면 배열에 없는 원소라는 의미이다.

🔺lastIndexOf
私が選択した要素は、最後に現れたインデックスがどれだけあるかを教えてくれます.

const fruits = ['🍎', '🍌', '🍐', '🍎'];
console.log(fruits.lastIndexOf('🍎'));
// 3

🔺includes
配列に特定の要素が含まれているかどうかを判別します.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits.includes('🍎'));
// true
console.log(fruits.includes('🥝'));
// false

🔺push
配列に要素を追加します.

const fruits = ['🍎', '🍌', '🍐'];
fruits.push('🍓', '🍑');
// ['🍎', '🍌', '🍐', '🍓', '🍑']

🔺unshift
前から要素を追加します.

const fruits = ['🍎', '🍌', '🍐'];
fruits.unshift('🍓', '🍑');
// ['🍓', '🍑', '🍎', '🍌', '🍐']

🔺shift
前から要素を1つずつ削除します.

const fruits = ['🍎', '🍌', '🍐'];
fruits.shift(); // 🍎 삭제
// ['🍌', '🍐']

🔺pop
後から要素を1つずつ削除します.

const fruits = ['🍎', '🍌', '🍐'];
fruits.pop(); // 🍐 삭제
// ['🍎', '🍌']

🔺splice
必要な要素がいくつ目のインデックスであるかを見つけたら削除できます.

const fruits = ['🍎', '🍌', '🍐'];
// const index = fruits.indexOf('🍌'); => 1
fruits.splice(index, 1);
// ['🍎', '🍐']

🔺slice
接合と似ていますが、既存の配列に触れないことが重要です.

const fruits = ['🍎', '🍌', '🍐'];
const sliced = fruits.slice(0, 1); // 0부터 1까지
console.log(sliced); // ['🍐']
console.log(fruits); // ['🍎', '🍌', '🍐']

🔺concat
配列を組み合わせて新しい配列を形成する.

const fruits = ['🍎', '🍌', '🍐'];
const fruits2 = ['🥝', '🍈'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);
// ['🍎', '🍌', '🍐', '🥝', '🍈']

🔺filter
配列から特定の条件を満たす値のみを抽出し、新しい配列を作成します.

const fruits = [
  {
    id: 1,
    name: '🍎',
    done: true
  },
    {
    id: 2,
    name: '🍌',
    done: false
  },
    {
    id: 3,
    name: '🍐',
    done: true
  }
];
const newFruits = fruits.filter(fruits => fruits.done === false);
console.log(newFruits); // ['🍌']

🔺map
指定した関数を呼び出した結果を配列内の各要素に集約し、新しい配列を返します.

const number = [1, 2, 3, 4];
const double = [];
for (let i = 0; i < number.length; i++) {
  double.push(array[i] * array[i]);
}
console.log(double); // [1, 4, 9, 16]

🔺join
配列内の値を文字列形式に結合します.

const number = [1, 2, 3, 4];
const numberStr = number.join();
console.log(number); // [1, 2, 3, 4]
console.log(numberStr); // 1,2,3,4

🔺find
メソッドは、与えられた判別関数を満たす最初の要素の値を返します.これらの要因がない場合はundefinedを返します.

const fruits = [
  {
    id: 1,
    name: "🍎",
    done: true,
  },
  {
    id: 2,
    name: "🍌",
    done: true,
  },
  {
    id: 3,
    name: "🍒",
    done: true,
  },
  {
    id: 3,
    name: "🍉",
    done: true
  }
];
const fruit = fruits.find((fruit) => fruit.id === 3);
console.log(fruit);

🔺findIndex
配列の値が数値、文字列、booleanの場合、indexOfを使用して、検索するアイテムがいくつかの要素であるかを決定できます.ただし、配列の値がオブジェクトまたは配列の場合はindexOfで検索できません.満足できる要因がない場合は、-1を返します.

const fruits = [
  {
    id: 1,
    text: '🍎',
    done: true
  },
  {
    id: 2,
    text: '🍌',
    done: true
  },
  {
    id: 3,
    text: '🍉',
    done: true
  },
  {
    id: 4,
    text: '🍒',
    done: false
  }
];
const index = fruits.findIndex(fruits => fruits.id === 3);
console.log(index);
// 2

🔺reduce
配列内の各要素に対して指定されたreducer関数を実行し、結果値を返します.
(reduceはまだ理解できませんが...😥)
👉🏻 reduceコメントリンク

const number = [1, 2, 3, 4, 5];
/*
let sum = 0;
number.forEach(n => {
  sum += n;
});
*/
let sum = number.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);
// 15

👉🏻 アレイ参照リンク