アレイ関数

15897 ワード
アレイ関数 ES6 JavaScript テキストリンク

アレイ関数

  • pop():末尾の項目を削除し、削除した項目値
    • を返します.
  • push('아이템'):タイルの最後にアイテムを追加し、タイルの最終長さ
    • に戻ります.
  • includes('아이템'):アレイにアイテムが含まれているかどうかを確認します.含まれる場合はtrueまたはfalse return
  • indexOf('아이템'):配列にアイテムが存在するインデックス番号を返す

    • 💡 せん断配列の関数)

  • slice(시작점, 끝점):配列を始点から終点(含まない)にコピーして返します.
    -slice(시작점):1つの値が受信された場合、開始点以降のすべての値が切り取られます.
    -既存のアレイの出力に影響を与えない新しいアレイを作成します
  • splice(시작점, 개수):開始点から実数で削除
    -クリップされた配列を返します.
    -既存シナリオに触れ、既存シナリオを切り取る
    • **length:配列の長さを返しますが、配列関数ではなく、文字列の長さを返すためにも使用できます.

    アレイ関数リスト(ES 6)

  • forEach():(重複文)戻り値がなく、操作が簡単な文
  • map():(繰り返し)戻り値を配列に入れて戻り
  • filter():条件を満たす(true)物品のみをアレイに入れて返却
  • some():条件を満たす項目があればtrueを返し、そうでなければfalse
    • を返します.
  • every():アレイ内のすべてのアイテムが条件を満たしている場合はtrueを返し、そうでない場合はfalse
    • を返します.
  • find():条件を満たす1つのアイテムのみを返します(複数ある場合は1つ目のみを返します)
  • findIndex():条件を満たす項目のインデックス値を返します(複数ある場合は最初の項目のインデックス番号のみを返します)
  • reduce():アレイ内の各要素を巡回し、累積コールバック関数の実行値によって結果値を返します.
  • callback function
  • アキュムレータ:累積callback関数の戻り値
  • currentValue:配列内の現在の要素
  • index(オプション):配列内の現在の要素のインデックス
  • array(オプション):呼び出し配列
  • initialValue (Optional)
  • 最初のコールバック関数を実行するときにアキュムレータパラメータに与えられる値
  • 初期値が指定されていない場合は、アレイの最初の要素が使用されます.空のアレイに初期値がない場合は、エラー
    • コールバック関数の戻り値はアキュムレータに割り当てられ、アキュムレータでループされ、最後に1つの値しか返されません.
    [アプリケーションコード]
    let names = [
  "Steven Paul Jobs",
  "Bill Gates",
  "Mark Elliot Zuckerberg",
  "Elon Musk",
];

/* map 사용 예시 */
let newArr1 = names.map((a) => a.split(" ")[0]);
console.log(newArr1); // [ 'Steven', 'Bill', 'Mark', 'Elon' ]

let newArr2 = names.map((a) => {
  const arr = a.split(" ");
  let str = ""
  arr.map((b) => str += b[0])
  return str;
});
console.log(newArr2); // [ 'SPJ', 'BG', 'MEZ', 'EM' ]


/* filter 사용 예시 */
let newArr3 = names.filter((a) => a.includes("a"));
console.log(newArr3); // [ 'Steven Paul Jobs', 'Bill Gates', 'Mark Elliot Zuckerberg' ]


/* some 사용 예시 */
let newArr4 = names.some(a => { return (a.length) >= 20 });
console.log(newArr4); // true


/* every 사용 예시 */
let newArr5 = names.every(a => { return (a.length) >= 20 });
console.log(newArr5); // false


/* find 사용 예시 */
let newArr6 = names.find((e) => (e.length) >= 20);
console.log(newArr6); // Mark Elliot Zuckerberg


/* findIndex 사용 예시 */
let newArr7 = names.findIndex((e) => (e.length) >= 20);
console.log(newArr7); // 2


/* reduce 사용 예시 */
let newArr8 = names.reduce((accumulator, currentItem) => { return accumulator + currentItem}, "");
console.log(newArr8); // Steven Paul JobsBill GatesMark Elliot ZuckerbergElon Musk

    📚 forEachとMapの違い


    1) forEach

  • パラメータとしてコールバック関数を受け入れ、アレイ内の要素ごとにコールバック関数を実行します.値は返されません
  • 提供された関数のみを使用してArray要素を1回実行
  • callbackは呼び出したArrayを変更できますが、forEach文は構文の外で戻り値を受信できません.
    • [アプリケーションコード]
    let arr = [1, 2, 3, 4, 5]
arr.forEach((i) => {
  console.log(i)
}) // 1, 2, 3, 4, 5 출력

let newArr = arr.forEach((i) => {
  return i*i
})
console.log(newArr) // undefined

    2) Map

  • 既存のアレイを使用して新しいアレイを作成
  • 提供された関数としてすべてのArray要素が呼び出されると、新しいArray
    • が作成される
  • パラメータとしてコールバック関数を受信し、アレイ内の要素ごとに実行された結果
    • を返します.
  • 新しい値を作成して返すことができ、戻り値自体
  • データ変更時に使用map()
    • [アプリケーションコード]
    let arr = [1, 2, 3, 4, 5]
arr.map((i) => {
  console.log(i)
}) // 1, 2, 3, 4, 5 출력

let newArr = arr.map((i) => {
  return i*i
})
console.log(newArr) // [ 1, 4, 9, 16, 25 ] 출력
    Member var and Static var.
    swingマウスボックス選択を実現