速習ECMAScript2018を勉強する 組み込みオブジェクト編(includes, assign)

組み込みオブジェクトのメソッド追加分

  • String / Math / Object / Array についてもメソッドがいくつか追加されているみたいなので、便利になったものをピックアップしたいと思います。

Array

  • 追加メソッドは複数ありますが、includes はよく使うことになりそうです。
  • アレイの中に、その値が存在するかの判定を、indexOfで数式を使って判断していましたが、includes で判定できるようになりました。
const array = ['A', 'B', 'C', 'D'];
const str = 'B'

if (array.indexOf(str) > 0) {
    console.log(array[array.indexOf(str)])
} else {
    console.log('Nothing')
}

if (array.includes(str)) {
    console.log(array[array.indexOf(str)])
} else {
    console.log('Nothing')
}

Object

  • assign は、オブジェクトの結合時に使われます。
const id_1 = { aaa: 'AAA', bbb: 'BBB'};
const id_2 = { ccc: 'CCC', ddd: 'DDD'};
const id_3 = { eee: 'EEE', fff: 'FFF'};

const id = Object.assign({}, id_1, id_2, id_3);
console.log(id);
{ aaa: 'AAA',
  bbb: 'BBB',
  ccc: 'CCC',
  ddd: 'DDD',
  eee: 'EEE',
  fff: 'FFF' }
  • 一つのオブジェクトとして、扱えます。 注意点として同じキーを結合させると、後から結合した値に書き換えられます。

  • 新しいクラス定義にも役に立ちます

class Member {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  getInfo() {
     return `${this.lastName} ${this.firstName} ${this.age}`
  }
}

let m = new Member('切磋', '琢磨', 25);
console.log(m.getInfo());
  • これを、assign を使うと、少しスマートにconstructorを記載できます。 ついでに分割代入も使ってみます.

class Member {
  constructor({ firstName, age, lastName }) {
    Object.assign(this, { firstName, lastName, age })
  }

  getInfo() {
     return `${this.lastName} ${this.firstName} ${this.age}`
  }
}

const man = {
    lastName: '切磋',
    firstName: '琢磨',
    age: 25,
}

let m = new Member({ ...man });
console.log(m.getInfo());
  • 脇道にそれますが、Objectの結合は,スプレッド演算子でできます。
const id_1 = { aaa: 'AAA', bbb: 'BBB'};
const id_2 = { ccc: 'CCC', ddd: 'DDD'};
const id_3 = { eee: 'EEE', fff: 'FFF'};

const id = { ...id_1, ...id_2, ...id_3 }
console.log(id);
  • たくさんに組み込みメソッドが追加されいるみたいですが、私が便利そうなものをピックアップしました。