【ワンピースで覚えるJavaScript】第１７回 配列 応用編 (プログラミング入門講座)

今回もJavaScriptの配列処理です。さらに、応用した内容となっています。

ただ今回も必ず覚えておいて欲しいことばかりです。

違いを明確にしていきましょう！

/* 配列
①配列の要素をコピー・移動したい
②配列の中身を順に処理したい
③配列の中身を加工して新しい配列を作成したい
④特定の条件で絞り込む
⑤条件にすべて合致するか判定したい
⑥条件に１つでも合致するか判定したい
⑦任意の条件で検索したい
⑧要素を順に処理して、１つの結果にまとめたい
*/

//①配列の要素をコピー・移動したい copyWithin
// copyWithin(target [,start [,end]])
//            移動先     コピー位置
console.log("--初期化--");
let straw_hat_pirates = ["ルフィ", "ゾロ", "ナミ", "ボン"];
console.log(straw_hat_pirates);

console.log("--copyWithin(3, 2, 3)--");
console.log(straw_hat_pirates.copyWithin(3, 2, 3));
console.log("--copyWithin(3, 0, 1)--");
console.log(straw_hat_pirates.copyWithin(3, 0, 1));

//②配列の中身を順に処理したい forEach
// 配列.forEach(関数(要素))
straw_hat_pirates = ["ルフィ", "ゾロ", "ナミ", "ボン"];
console.log("--forEach--");
straw_hat_pirates.forEach(
    (value) => console.log(value)
);

let admiral_members = [
    { name: "赤犬", devil_fruit: "マグマグの実" },
    { name: "青雉", devil_fruit: "ヒエヒエの実" },
    { name: "黄猿", devil_fruit: "ピカピカの実" },
];
console.log("--forEach--");
admiral_members.forEach(function (value) {
  console.log(value.name + "は" + value.devil_fruit);
});

//③配列の中身を加工して新しい配列を作成したい  map
// 配列.map(関数(要素))
console.log("--初期化--");
let devil_fruits = ["マグ", "ヒエ", "ピカ"];
console.log(devil_fruits);
let new_devil_fruits = devil_fruits.map(function(value){
    return value.repeat(2) + "の実"
});
console.log("--map後--");
console.log(new_devil_fruits);

//④特定の条件で絞り込む filter(関数(要素))
  //true のものだけ返し新しい配列を作成
console.log("--初期化--");
let devil_fruit_and_character = [
    "バクバクの実",
    "メロメロの実",
    "チョッパー",
    "イトイトの実",
    "パンダマン"
];
console.log(devil_fruit_and_character);
let devil_fruit_only =
  devil_fruit_and_character.filter(function(value){
    return (value.includes("実"))
  });
console.log("--filter後--");
console.log(devil_fruit_only);

//⑤条件にすべて合致するか判定したい every
console.log("--初期化--");
devil_fruit_and_character = [
    "バクバクの実",
    "メロメロの実",
    "チョッパー",
    "イトイトの実",
    "パンダマン"
];
console.log(devil_fruit_and_character);
let result = 
  devil_fruit_and_character.every(function (value) {
    return (value.includes("実"))
  });
console.log("--everyの結果--");
console.log(result);
console.log("--devil_fruit_only--");
console.log(devil_fruit_only);
console.log("--everyの結果--");
result =
  devil_fruit_only.every(function (value) {
    return (value.includes("実"))
  });
console.log(result);

//⑥条件に１つでも合致するか判定したい some
console.log("--devil_fruit_and_character--");
console.log(devil_fruit_and_character);
result =
  devil_fruit_and_character.some(function (value) {
    return (value.includes("実"))
  });
console.log("--someの結果--");
console.log(result);
let character = ["チョッパー", "パンダマン"];
console.log("--character--");
console.log(character);
result =
    character.some(function (value) {
        return (value.includes("実"))
    });
console.log("--someの結果--");
console.log(result);

//⑦任意の条件で検索したい find
//最初に合致した要素を取得
console.log("--devil_fruit_and_character--");
console.log(devil_fruit_and_character);
result =
    devil_fruit_and_character.find(function (value) {
        return (value.includes("実"))
    });
console.log("--findの結果--");
console.log(result);

//⑧要素を順に処理して、１つの結果にまとめたい reduce
//  配列.reduce(関数(result, value))
//          resultに直前行った関数の結果が入っている
devil_fruits = [
    "バクバクの実",
    "メロメロの実",
    "イトイトの実"
];
// 「バクバクの実」「メロメロの実」「イトイトの実」
console.log("--reduceの結果--")
result =
    devil_fruits.reduce(function (result, value) {
        return (result + "「" + value + "」")
    });
console.log(result);
/* １回目        result
             "バクバクの実" + "「" + "メロメロの実" + "」"
   ２回目        result
   "バクバクの実「メロメロの実」"+ "「" + "イトイトの実" + "」"
*/
console.log("--初期値設定--")
result =
    devil_fruits.reduce(function (result, value) {
        return (result + "「" + value + "」")
    }, "");
console.log(result);