React,Vue.jsの前にJavaScriptを習得すべし！(mapやfilterの配列処理)

資料

はじめに

実際に動かしたコードです。自分で色々出力を変えて動かしてみてください。
体で覚えるといいと先輩に言われました。

この記事の対象

JSを触ったばかりの初心者でこれからReactやVue.jsを触りたい人。

map

mapを使っていきます。配列の順番通りに一度ずつ呼び出し新しい配列を作るものです。

const array_name = ["ルフィ", "悟空", "炭治郎"];

const array_name2 = array_name.map((name) => {
  return name;
});

console.log(array_name2);

//["ルフィ", "悟空", "炭治郎"]

もっと簡単に書けます。

const array_name = ["ルフィ", "悟空", "炭治郎"];
array_name.map((name) => console.log(name));

//ルフィ 
//悟空 
//炭治郎

const array_score = [70, 80, 50, 90];
const new_array_score = array_score.filter((sum) => {
  return sum % 2 === 0;
});
console.log(new_array_score);

// [70, 80, 50, 90]

const array_name = ["ルフィ", "悟空", "炭治郎"];

const array_name_new = array_name.map((name) => {
  if (name === "ルフィ") {
    return name;
  } else {
    return `${name}さん`;
  }
});

console.log(array_name_new);

//(3) ["ルフィ", "悟空さん", "炭治郎さん"]

main.js

const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  newArray.push(array[i] * 5);
}

console.log(newArray);
//[50, 100, 150, 200]

//mapを使う
const newArray2 = array.map((val) => val * 2);
console.log(newArray2);
//[50, 100, 150, 200]

main.js

const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  newArray.push(array[i] * 5);
}

console.log(newArray);

//const newArray2 = array.map((val) => val * 2);
const newArray2 = array.map((val, i) => {
  console.log(val, i);
  console.log(array);
  return val * 3;
});
console.log(newArray2);

filterを使う

filterは条件に合う（trueを返す）要素全て抽出して、新しい配列を作ります。

const array_score = [7, 8, 5, 10];
const new_array_score = array_score.filter((sum) => {
  return sum % 2 === 1;
});
console.log(new_array_score);
//[7, 5]

引数も使ってみる

const array_name = ["ルフィ", "悟空", "炭治郎"];
array_name.map((name, index) => console.log(`${index + 1}番目は${name}だぞ`));

//1番目はルフィだぞ 
//2番目は悟空だぞ 
//3番目は炭治郎だぞ

const array_name = ["ルフィ", "悟空", "炭治郎"];
array_name.map((name) => console.log(`${name}だぞ`));

//ルフィだぞ 
//悟空だぞ 
//炭治郎だぞ 

main.js

const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  const val = array[i] * 2;
  if (val > 50) {
    newArray.push(array[i] * 5);
  }
}

console.log(newArray);

//const newArray2 = array.map((val) => val * 2);
const newArray2 = array.map((val, i) => {
  return val * 3;
});
console.log(newArray2);

mapを使ってからfilterを使います。

main.js

const array = [10, 20, 30, 40];
const newArray = [];

for (let i = 0; i < array.length; i++) {
  const val = array[i] * 2;
  if (val > 50) {
    newArray.push(array[i] * 5);
  }
}

console.log(newArray);

//const newArray2 = array.map((val) => val * 2);
const newArray2 = array.map((val, i) => {
  return val * 3;
});
const newArray3 = newArray2.filter((val) => val > 50);
console.log(newArray2);

資料