ES2015以降でよく使われるものを学ぶ2

学んだこと

オブジェクトの省略記法

従来では

• 以下の様にオブジェクト宣言時に、プロパティと設定する変数名を設定していた。

const name = 'User';
const age = 20;

const myprofile = {
  name: name,
  age: age,
};
console.log(myprofile);

オブジェクトの省略記法を使うと

• 以下の様に、設定する変数をそのままオブジェクトに設定するだけで OK

const name = 'User';
const age = 20;

const myprofile = { name, age };
console.log(myprofile);

スプレット構文

配列の展開

• 配列名の前に…を使うことで、配列の中身をすべて出力することができる。

const arr = [1, 2];
console.log(...arr);

const arr = [1, 2];
const sumfunc = (num1, num2) => console.log(num1 + num2);
sumfunc(arr[0], arr[1]);
sumfunc(...arr);
// どちらも実行結果として3が出力される。

まとめる

• 配列を分割代入時に、…でまとめることができる。

const arr = [1, 2, 3, 4, 5];
// num1 = 1 num2 = 2 arr3 = [3,4,5]というようになる。
const [num1, num2, ...arr3] = arr;

console.log(num1);
console.log(num2);
console.log(arr3);
// num1 = 1 num2 = 2 arr3 = [3,4,5]で出力されている。

配列のコピーや結合

• スプレット構文を使うことで、配列のコピーや結合を簡単に行うことができる。

const arr1 = [10, 20];
const arr2 = [30, 40];

// 配列のコピー
const arr3 = [...arr1];
console.log(arr3);
// [10, 20]が出力


// 配列の結合
const arr4 = [...arr1, ...arr2];
console.log(arr4);
// [10, 20, 30, 40]が出力

間違えやすいところ

• arr3 に arr1 をコピーしてそうに見えるが、実は arr3 は arr1 を参照しているためコピーではない。
• この状態で arr3 を書き換えると、arr1 も書き換わってしまう。

const arr1 = [10, 20];
const arr2 = [30, 40];

const arr3 = arr1;

• スプレット構文でコピーした場合は、コピーのためコピー元の変数は書き換わらない。

const arr1 = [10, 20];
const arr2 = [30, 40];

const arr3 = [...arr1];
arr3[0] = 100;
console.log(arr3);
console.log(arr1);
// [100, 20]
// [10, 20]が出力

map

従来の配列操作

• 以下の様な記述方法で配列操作を行っていた。
• 書く量は多い

const namearr = ['田中', '山田', '佐藤'];
for (let i = 0; i < namearr.length; i++) {
  console.log(namearr[i]);
}
// 田中、山田、佐藤が出力

現在では

• map を使うと簡単に配列操作を行うことができる。
  • 配列名.map((配列から取り出した要素)=>{処理});

const namearr = ['田中', '山田', '佐藤'];

namearr.map((name) => {
  console.log(name);
});
// 田中、山田、佐藤が出力

• map を使って新しい配列を作成することもできる。

const namearr = ['田中', '山田', '佐藤'];

const namearr1 = namearr.map((name) => {
  return name;
});

• 配列を返さない場合は、以下の様に省略して書くこともできる。

const namearr = ['田中', '山田', '佐藤'];

namearr.map((name) => console.log(name));
// 田中、山田、佐藤が出力

• index 情報も取得することも可能
• 以下の通り、新しく index を追加しインデックスを取得することができる。

const namearr = ['田中', '山田', '佐藤'];

namearr.map((name, index) => console.log(`${index + 1}番目は${name}です`));
// 1番目は田中です
// 2番目は山田です
// 3番目は佐藤です

filter

• 配列内の特定の条件に該当する値のみ、配列化を行う場合に使用する。

const numarr = [1, 2, 3, 4, 5];
const newarr = numarr.filter((num) => {
  return num % 2 == 1;
});

console.log(newarr);
// 奇数の値のみ配列化する処理
// 1,3,5