よく調べるJavaScript文法まとめ（随時追記）

この記事について

最近、業務でJavaScriptを使うことが多いのですが、その際に何度も何度も調べてしまう文法を、自分の備忘録もかねて書き溜めていこうと思います。
随時追記していく予定です。

配列操作系

配列をカンマ区切りの文字列にする

ソースコード

const array = ['aaa', 'bbb', 'ccc'];

const arrayStr = array.toString();

console.log(arrayStr);

実行結果

aaa,bbb,ccc

配列の要素をひとつずつ取り出す

ソースコード

const array = ['aaa', 'bbb', 'ccc'];

for (const e of array) {
  console.log(e);
} 

実行結果

aaa
bbb
ccc

配列からインデックスと値をひとつずつ取り出す

ソースコード

const arr = ['aaa', 'bbb', 'ccc'];

arr.forEach( (value, index, array) => {   // arrayは何に使うかわからない
  console.log(`index: ${index}, value: ${value}, array: ${array}`)
});

実行結果

index: 0, value: aaa, array: aaa,bbb,ccc
index: 1, value: bbb, array: aaa,bbb,ccc
index: 2, value: ccc, array: aaa,bbb,ccc

配列から条件に合致するものを抽出する（配列に詰める）

ソースコード

const arr = ['150', '75', '200', '99'];

const filtered = arr.filter( value => {
  if (value > 100) return value;
});

console.log(filtered);

実行結果

["150","200"]

配列の各要素に処理をして、新しい配列を作る

ソースコード

const arr = [1, 2, 3, 4, 5]

const square = arr.map( (value, index, array) => {
  return value * value;
})

console.log(square);

実行結果

[1,4,9,16,25]

オブジェクト操作系

オブジェクトのキーを配列として取り出す

ソースコード

const obj = {
  banana: "バナナ",
  apple: "リンゴ",
  peach: "モモ"
};

const keyArray = Object.keys(obj);
console.log(keyArray);

実行結果

["banana","apple","peach"]

オブジェクトのキーをひとつずつ取り出す

ソースコード

const obj = {
  banana: "バナナ",
  apple: "リンゴ",
  peach: "モモ"
};

for (const key of Object.keys(obj)) {
  console.log(key)
}

実行結果

banana
apple
peach

オブジェクトのキーと値をひとつずつ取り出す

ソースコード

const obj = {
  banana: "バナナ",
  apple: "リンゴ",
  peach: "モモ"
};

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

実行結果

banana: バナナ
apple: リンゴ
peach: モモ

オブジェクト内の要素数を取得する

ソースコード

const obj = {
  banana: "バナナ",
  apple: "リンゴ",
  peach: "モモ"
};

const elementsNum = Object.keys(obj).length;
console.log(`number of elements in obj: ${elementsNum}`);

実行結果

number of elements in obj: 3

空判定系

配列の空判定

ソースコード

const array1 = [];
if (array1) console.log('array1 is decleared');           // 配列が定義されていれば、true
if (array1.length > 0) console.log('array1 has element(s)')  // 配列に値が入っていれば、true

const array2 = ['aaa', 'bbb', 'ccc'];
if (array2) console.log('array2 is decleared');
if (array2.length > 0) console.log('array2 has element(s)')

実行結果

array1 is decleared
array2 is decleared
array2 has element(s)

オブジェクトの空判定

ソースコード

const obj1 = {};
if (Object.keys(obj1).length) console.log('obj1 has element(s)'); // オブジェクトに要素があれば、true

const obj2 = {
  banana: "バナナ",
  apple: "リンゴ",
  peach: "モモ"
};
if (Object.keys(obj2).length) console.log('obj2 has element(s)');

実行結果

obj2 has element(s)

その他

ソースコードの書き方を調べていると、本当にこのやり方で自分のやりたいことができるのか確かめたくなる事があると思います。
そんな時は、このようなエディタを使うと、簡単に確認ができて良いと思います。