ECMAScript 5 (ES5) 新機能 まとめ

2016年6月5日 21:15 1 件のコメント

最新は ECMAScript2015 が出ていますが…ECMAScript3から知識が止まっているので少しずつ更新したいと思います。 まずは、ECMAScript5について見ていきます。 すべて見ても ECMAScript3 と被る部分が多いので、ECMAScript3 と ECMAScript5 の差分に絞ってまとめます。

差分だけでも結構な量になってしまいましたが…それだけ新規機能が増えたということですね。 今まで JavaScript で上手くいかずにもどかしかったもろもろが、そこそこ解決されている気がします。

目次

strictモード

strictモードとは、もともと曖昧な記載でも動くようになっていた JavaScript に対して、厳格なコード記述を求めるようにすることで、 少しでもましなコードを書けるようにする仕組み…と言ったところでしょうか。

strictモードを利用すると、以下のようなことができるようになります。

  • JavaScript で エラーにはならないが問題となりそうなコードを厳格にエラーとする
  • strictモードでない実装に比べて速く処理できる可能性があります

strictモード の 適用

実際に strictモード を適用する方法は 以下にあげる 2通り があります。 基本的にはどんな処理よりも先に 'use strict' を宣言することで利用できます。

strictモード を スクリプト全体 に 適用する

読み込まれる JavaScriptファイル の先頭で宣言することで、その JavaScriptファイル 全体に対して strictモード を強制できます。 

// JavaScript file.
'use strict';

var message = 'Oh, my god !!';

// ... 以下にコードが続く ...

この適用方法の場合、ファイルに記載されているコードすべてが対象となるため、1ファイルに自動マージするケースやコードが多すぎる場合、 予期しない場所でエラーとなる可能性があるので、以下に記載する 関数毎 に strictモード を適用して順次移行を行う方が良いと思います。

strictモード を 特定関数のみ に 適用する

関数の先頭に 'use strict' を記載することで、該当関数内に関して strictモード を強制することができます。 こちらは関数内なので気を付ける範囲が限られるため、順次取り組むと良いと思います。 

// ... ここまでにコードがいろいろ ...

var hoge = function () {
  'use strict';
  
  var message = 'Hello World !';
  
  // ... 何か処理
}

// ... 以下にもコードが続く ...

オブジェクト

getter / setter

オブジェクトのプロパティに対して getter / setter が作成できるようになりました。

構文

{ get [expression]() { ... } }
expression
getterプロパティ名を指定。
{ set [expression](value) { ... } }
expression
setterプロパティ名を指定。
value
プロパティを設定するために引き渡された値。Object.defineProperties の第2引数と同じ値。
利用例

var user = {
  firstName: '',
  lastName: '',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  set fullName(val) {
    var arr = (val || '').split(' ');
    this.firstName = arr[0];
    this.lastName = arr.length > 1 ? arr[1] : '';
  }
};

user.firstName = 'Saya';
user.lastName = 'Sasamiya';
console.log(user.fullName);   // -> 'Saya Sasamiya'

user.fullName = 'Kirin Toudou';
console.log(user.fullName);   // -> 'Kirin Toudou'

末尾 カンマ を無視

ES5 から 末尾のカンマ が無視されるようになります。 これにより、オブジェクト内の順序入れ替えでカンマの付け忘れ、消し忘れによるエラーの心配がなくなります。 

var obj = {
  firstName: 'Ayato',
  lastName: 'Amagiri',
  age: 16,    // <-末尾のカンマが無視される 
};

予約後 を プロパティ名 に指定可能

予約後（var, if, for 等）がプロパティ名として利用できるようになりました。 

var obj = {
  if: 'Hello World.'
};

console.log(obj.if);    // -> 'Hello World.'

メソッド の 追加

オブジェクトに以下にあげる新規メソッドが追加されました。 詳しくは各メソッドの説明で見ていきます。

Object.create

指定されたプロトタイプを元に新しいオブジェクトを生成します。

構文
Object.create(proto [, propertiesObject])
引数
proto
{object}
新しく生成するオブジェクトのプロトタイプを指定します。
propertiesObject
{object}
省略可能。オブジェクトが指定されていた場合、指定されたオブジェクトのプロパティを新しく生成するオブジェクトのプロパティに追加します。
戻り値
 
{object}
新しく生成されたオブジェクト。
利用例
// 基本クラスを準備
var Animal = function () {
  this.message = '';
};
Animal.prototype.say = function () {
  return this.message + '!!';
};

// プロトタイプを継承してオブジェクト生成
// 以下のコードは「var o = new Animal();」と同じ。
var o = Object.create(Animal.prototype);

Object.defineProperty

指定されたオブジェクトにプロパティを新規作成、または 指定された既存のプロパティを変更します。

構文
Object.defineProperty(obj, prop, descriptor)
引数
obj
{object}
プロパティが定義されたオブジェクト
prop
{string}
作成または変更したいプロパティ名
descriptor
{object}
作成または変更するプロパティのディスクリプタ
戻り値
 
{object}
プロパティ追加されたオブジェクト。元のオブジェクトと同じ。

descriptor に設定できるプロパティおよびその概要は以下の通りです。

configurable
規定値は false。プロパティを変更または削除できるかどうかを指定します。
enumerable
規定値は false。プロパティ列挙に現れるかどうかを指定します。
value
規定値は undefined。プロパティの値を設定します。
writable
規定値は false。プロパティに関連付けられた値を変更できるかどうかを指定します。
get
規定値は undefined。getter関数を定義します。
set
規定値は undefined。setter関数を定義します。
利用例
var obj = {};

// データディスクリプタによるプロパティ追加
Object.defineProperty(
  obj,
  'value', {
    configurable: true,
    enumerable: true,
    writable: true,
    value: 10
  });

// アクセサディスクリプタによるプロパティ追加
Object.defineProperty(
  obj,
  'size', {
    configurable: true,
    enumerable: true,
    get: function () { return this.value * 2; },
    set: function (value) { this.value = value / 2; }
  });

console.log(obj.value);   // -> 10
console.log(obj.size);    // -> 20

Object.defineProperties

Object.defineProperty を複数同時指定するメソッドです。 内容は前述の Object.defineProperty とほぼ被るので詳細は割愛します。

構文
Object.defineProperties(obj, props)
引数
obj
{object}
プロパティを追加または変更したいオブジェクト。
props
{object}
追加または変更したいプロパティのディスクリプタを列挙したオブジェクト。
戻り値
 
{object}
プロパティ追加されたオブジェクト。元のオブジェクトと同じ。
利用例
var obj = {};

// obj に 'key1' および 'key2' のプロパティをまとめて追加
Object.defineProperties(obj, {
                          'key1': {
                            writable: true,
                            value: 'Hello'
                          },
                          'key2': {
                            writable: true,
                            value: 'こんにちは'
                          }
                        });

Object.getPrototypeOf

指定したオブジェクトのプロトタイプを取得します。

構文
Object.getPrototypeOf(obj)
引数
obj
{object}
プロトタイプを取得したいオブジェクト。
戻り値
 
{object}
プロトタイプオブジェクト。
利用例
var proto = Object.getPrototypeOf(Animal);
proto.say = function () {
  console.log('Hello World.');
};
// ↑実際にこのような実装をすると、参照先の書き換えで処理速度の低下が懸念されるので行いません。
//   あくまでサンプルコードです。。

Object.keys

指定されたオブジェクト自身に存在するプロパティのうちプロパティディスクリプタで enumerable: true の指定があるプロパティを列挙します。 for ... in との違いは プロトタイプチェーン を含まない点です。 Object.getOwnPropertyNames との違いは enumerable: true のみを列挙する点です。

構文
Object.keys(obj)
引数
obj
{object}
プロパティリストを取得したいオブジェクト。
戻り値
 
{string[]}
キーを格納した配列。
利用例
// 元となる car インスタンス を生成
var car = Object.create(
  {}, {
    _name: {
      writable: true,
      value: ''
    },
    name: {
      get: function () { return this._name; },
      set: function (value) { this._name = value; }
    },
    move: {
      enumerable: true,
      value: function () {
        console.log('zoom zoom ...');
      }
    }
  });

// car インスタンス を拡張して mycar インスタンス を生成
var mycar = Object.create(
  car, {
    number: {
      value: 123456
    },
    owner: {
      enumerable: true,
      value: 'foobar'
    }
  });

// 生成後にプロパティ追加
mycar.old = 10;

// Object.keys でプロパティ抽出
// 抽出されるのは ["owner", "old"] の 2プロパティ。
var keys = Object.keys(mycar);

Object.seal

指定されたオブジェクトを封印して新しいプロパティの追加と既存プロパティの削除を抑止します。 プロパティに対する変更は抑止対象外です。

構文
Object.seal(obj)
引数
obj
{object}
プロパティの追加削除を禁止したいオブジェクト。
戻り値
 
{object}
封印されたオブジェクト。元のオブジェクトと同じ。
利用例
// 元オブジェクト
var user = {
  id: '123456789'
};

// 封印前はプロパティの追加・変更・削除ができる。
user.name = 'Saya Sasamiya'

// オブジェクトを封印する。
Object.seal(user);

// 封印後はプロパティの追加・削除ができなくなる。
user.age = 16;                  // プロパティ追加はできない。
delete user.name;               // 削除もできない。

// 封印後にプロパティ変更はできる。
user.name = 'Kirin Toudou';

Object.freeze

指定されたオブジェクトのプロパティ追加・変更・削除を抑止します。 実質的に何もできなくなります。

構文
Object.freeze(obj)
引数
obj
{object}
凍結したいオブジェクト。
戻り値
 
{object}
凍結したオブジェクト。元のオブジェクトと同じ。
利用例
// 元のオブジェクト
var user = {
  id: '123456789',
  _name: 'Saya Sasamiya',
  get name() { return this._name;  },
  set name(value) { this._name = value; }
};

// オブジェクトのプロパティ追加・変更・削除を禁止
Object.freeze(user);

// プロパティの追加・変更・削除ができなくなる
user.age = 16;                  // 追加したようで実際には追加されていない。
user.name = 'Kirin Toudou';     // setterは呼び出されるが、_name の変更ができない。
delete user._name;              // プロパティ削除もできない。

Object.preventExtensions

指定されたオブジェクトの拡張を抑止します。 拡張は抑止しますが、プロパティの変更・削除は出来る点に注意してください。

構文
Object.preventExtensions(obj)
引数
obj
{object}
拡張を抑止したいオブジェクト。
戻り値
 
{object}
拡張を抑止したオブジェクト。元のオブジェクトと同じ。
利用例
// 元のオブジェクト
var user = {
  id: '123456789',
  name: 'Saya Sasamiya'
};

// オブジェクトの拡張を禁止
Object.preventExtensions(user);

// プロパティの追加ができなくなる
user.action = function () {
  // 何か処理...
};

Object.isSealed

指定されたオブジェクトが封印されているかどうかを検証します。

構文
Object.isSealed(obj)
引数
obj
{object}
封印されているかどうか検証したいオブジェクト。
戻り値
 
{boolean}
指定されたオブジェクトが封印されている場合 true、それ以外の場合 false。
利用例
if (Object.isSealed(user)) {
  console.log('sealed.');
}

Object.isFrozen

指定されたオブジェクトが凍結されているかどうかを検証します。

構文
Object.isFrozen(obj)
引数
obj
{object}
凍結されているかどうか検証したいオブジェクト。
戻り値
 
{boolean}
指定されたオブジェクトが凍結されている場合 true、それ以外の場合 false。
利用例
if (Object.isFrozen(user)) {
  console.log('frozen.');
}

Object.isExtensible

指定されたオブジェクトの拡張が可能かどうかを検証します。

構文
Object.isExtensible(obj)
引数
obj
{object}
拡張可能かどうか検証したいオブジェクト。
戻り値
 
{boolean}
指定されたオブジェクトが拡張可能な場合 true、それ以外の場合 false。
利用例
if (Object.isExtensible(user)) {
  console.log('extensible.');
}

Object.getOwnPropertyDescriptor

指定されたオブジェクトのプロパティに関するプロパティディスクリプタを取得します。 取得したプロパティディスクリプタは元のインスタンスのコピーとなるため、変更しても元のオブジェクトの設定は変更されません。 変更したい場合は Object.defineProperty を利用して変更します。

構文
Object.getOwnPropertyDescriptor(obj, prop)
引数
obj
{object}
プロパティディスクリプタを取得したいプロパティを持つオブジェクト。
prop
{string}
プロパティディスクリプタを取得したいプロパティ名。
戻り値
 
{object}
プロパティディスクリプタ情報がまとめられたオブジェクト。
利用例
// 元のオブジェクト
var user = {
  id: '123456789',
  name: 'Saya Sasamiya'
};

// プロパティディスクリプタの取得
var propdesc = Object.getOwnPropertyDescriptor(user, 'name');

// propdesc -> Object {value: "Saya Sasamiya", writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyNames

指定されたオブジェクトで列挙可能および列挙不可能なプロパティをすべて取得します。

構文
Object.getOwnPropertyNames(obj)
引数
obj
{object}
列挙可能不可能にかかわらずプロパティを列挙したいオブジェクト。
戻り値
 
{string[]}
プロパティ名の配列
利用例
// 元のオブジェクト
var user = Object.create({
    id: '123456789',
    name: 'Saya Sasamiya'
  }, {
    age: {
      enumerable: false,
      value: 16
    },
    action: {
      enumerable: true,
      value: function () {
        // 何か処理...
      }
    }
  });

// "getOwnPropertyNames" は指定されたオブジェクト直属のプロパティはすべて列挙する
Object.getOwnPropertyNames(user);
// -> ["age", "action"]

// "keys" は指定されたオブジェクトのプロパティのうち enumerable:true を列挙する
Object.keys(user);
// -> ["action"]

配列

末尾 カンマ を 無視

オブジェクト同様に配列も末尾のカンマを無視するようになります。 

var arr = [1,2,3,4,,,];

メソッド の 追加

Array に以下のメソッドが追加されました。 詳しくは各メソッドの説明で見ていきます。

Array.isArray

指定されたオブジェクトが配列かどうかを検証します。 配列であれば true を、配列でなければ false を返します。

構文
Array.isArray(obj)
引数
obj
{object}
配列かどうか判定したいオブジェクト。
戻り値
{boolean}
指定されたオブジェクトが配列の場合 true、それ以外の場合 false。
利用例
var arr = [1,2,3];
Array.isArray(arr)    // -> true

Array.prototype.indexOf

配列中から指定されたオブジェクトと一致する最初のインデックスを取得します。

構文
var index = array.indexOf(target [, fromIndex]);

引数

target
{object}
配列中から検索したい値。
fromIndex
{number}
検索を始めるインデックス。

戻り値

 
{number}
配列中に指定されたオブジェクトが見つかった場合、該当のインデックス。見つからなかった場合 -1。
利用例
var arr = [3,1,4,1,5,9,2];

// 配列の先頭から 1 を探す
arr.indexOf(1);       // -> 1

// 配列インデックス 2 から 1 を探す
arr.indexOf(1, 2);    // -> 3

Array.prototype.lastIndexOf

配列中から指定されたオブジェクトと一致する最後のインデックスを取得します。

構文
var index = array.lastIndexOf(target [, fromIndex])
target
{object}
配列中から検索したい値。
fromIndex
{number}
逆向きに検索を始めるインデックス。負の値を指定した場合、配列末尾からの開始インデックスになる。
利用例
var arr = [3,1,4,1,5,9,2];

// 先頭から探して一番最後に 1 がある配列インデックス
arr.lastIndexOf(1);     // -> 3 

// 配列インデックス 2 から先頭に向かって検索して最初に 1 がある配列インデックス
arr.lastIndexOf(1, 2);  // -> 1

// 配列インデックスが後ろから 2番目 (=5) から先頭に向かって検索して最初に 1 がある配列インデックス
arr.lastIndexOf(1, -2); // -> 3

Array.prototype.every

配列に含まれる要素が指定されたチェック条件をすべて満たすかどうかを検証します。

構文
var valid = array.every(callback [, thisObject])
引数
callback
{Function (Object item, Number index, Array array)}
検証処理を行う関数を指定します。
thisObject
{object}
検証処理を行う関数の this オブジェクト を指定します。
戻り値
 
{boolean}
すべての要素が条件を満たしていた場合 true、それ以外の場合 false。
利用例
var arr = [3,1,4,1,5,9,2];

var valid = arr.every(function (item, index, array) {
  return item % 2;
});    // -> false

Array.prototype.some

配列に含まれる要素に指定されたチェック条件を満たすものが存在するかどうかを検証します。 要素中に１つでも満たすものがあれば true を返します。

構文
var valid = array.some(callback [, thisObject])
引数
callback
{Function (Object item, Number index, Array array)}
検証処理を行う関数を指定します。
thisObject
{object}
検証処理を行う関数の this オブジェクト を指定します。
戻り値
 
{boolean}
条件を満たす要素があれば true、それ以外の場合 false。
利用例
var arr = [3,1,4,1,5,9,2];

var valid = arr.some(function (item, index, array) {
  return item % 2;
});    // -> true

Array.prototype.forEach

与えられた関数を配列の各要素に対して一度ずつ実行します。 元の配列を変更することはありません。

構文
array.forEach(callback [, thisObject]);
引数
callback
{Function (Object item, Number index, Array array)}
検証処理を行う関数を指定します。
thisObject
{object}
検証処理を行う関数の this オブジェクト を指定します。
戻り値
 
なし
利用例
var arr = [3,1,4,1,5,9,2];

// コンソールに配列の内容を表示する
arr.forEach(function (item, index, array) {
  console.log(item);
});

Array.prototype.map

与えられた関数を配列のすべての要素に対して実行し、その戻り値から新しい配列を作成します。

構文
var convert = array.map(callback [, thisObject]);
引数
callback
{Function (Object item, Number index, Array array)}
変換処理を行う関数を指定します。
thisObject
{object}
変換処理を行う関数の this オブジェクト を指定します。
戻り値
 
{Array}
変換関数で変換された配列。
利用例
var arr1 = [3,1,4,1,5,9,2];

var arr2 = arr1.map(function (item, index, array) {
  return item * item;
});

console.log(arr2);    // -> [9, 1, 16, 1, 25, 81, 4]

Array.prototype.filter

与えられた関数を配列のすべての要素に対して実行し、合格した要素だけからなる新しい配列を作成します。

構文
var valid = array.filter(callback [, thisObject]);
引数
callback
{Function (Object item, Number index, Array array)}
フィルター処理を行う関数を指定します。
thisObject
{object}
フィルター処理を行う関数の this オブジェクト を指定します。
戻り値
 
{Array}
フィルター関数でフィルターされた配列。
利用例
var arr1 = [3,1,4,1,5,9,2];

var arr2 = arr1.map(function (item, index, array) {
  return item * item;
});

console.log(arr2);    // -> [9, 1, 16, 1, 25, 81, 4]

Array.prototype.reduce

隣り合う2つの配列要素に対してインデックスが小さい方から大きい方へ順（左から右の順）に指定された関数を実行します。 数学で言うところの漸化式処理が実行できます。 処理に置いて元の配列の値が変化することはありません。

構文
var result = array.reduce(callback [, initial]);
引数
callback
{Function (Object previousItem, Object currentItem, Number index, Array array)}
処理を行いたい関数を指定します。
initial
{object}
初期値として与える値を指定します。
戻り値
 
{object}
処理結果。
利用例
var arr = [3,1,4,1,5,9,2];

var result = arr.reduce(function (previousItem, currentItem, index, array) {
  var message = '';
  message += '[' + array.toString() + '] ';
  message += 'No.' + index + ' :';
  message += previousItem;
  message += '+';
  message += currentItem;
  message += '=';
  message += (previousItem + currentItem);
  console.log(message);

  return previousItem + currentItem;
});

/*
// ログ出力結果は以下の通り
> [3,1,4,1,5,9,2] No.1 :3+1=4
> [3,1,4,1,5,9,2] No.2 :4+4=8
> [3,1,4,1,5,9,2] No.3 :8+1=9
> [3,1,4,1,5,9,2] No.4 :9+5=14
> [3,1,4,1,5,9,2] No.5 :14+9=23
> [3,1,4,1,5,9,2] No.6 :23+2=25

// 結果値(=result)は以下の通り
> 25
*/

Array.prototype.reduceRight

隣り合う2つの配列要素に対してインデックスが大きい方から小さい方へ順（右から左の順）に指定された関数を実行します。 処理自体は Array.prototype.reduce を逆順に実行するものになります。

構文
var result = array.reduceRight(callback [, initial]);
引数
callback
{Function (Object previousItem, Object currentItem, Number index, Array array)}
処理を行いたい関数を指定します。
initial
{object}
初期値として与える値を指定します。
戻り値
 
{object}
処理結果。
利用例
var arr = [3,1,4,1,5,9,2];

var result = arr.reduceRight(function (previousItem, currentItem, index, array) {
  var message = '';
  message += '[' + array.toString() + '] ';
  message += 'No.' + index + ' :';
  message += previousItem;
  message += '+';
  message += currentItem;
  message += '=';
  message += (previousItem + currentItem);
  console.log(message);

  return previousItem + currentItem;
});

/*
// ログ出力結果は以下の通り
> [3,1,4,1,5,9,2] No.5 :2+9=11
> [3,1,4,1,5,9,2] No.4 :11+5=16
> [3,1,4,1,5,9,2] No.3 :16+1=17
> [3,1,4,1,5,9,2] No.2 :17+4=21
> [3,1,4,1,5,9,2] No.1 :21+1=22
> [3,1,4,1,5,9,2] No.0 :22+3=25

// 結果値(=result)は以下の通り
> 25
*/

文字列

プロパティアクセス

文字列に対してブラケットを用いた配列のようなアクセスができるようになりました。 ただし、この記法を用いて文字を削除したり書き換えたりはできません。

利用例
"Hello World !"[3];  // -> 'l'

メソッド の 追加

String にも以下のメソッドが追加されました。

String.prototype.trim

文字列の前後にある空白を削除した文字列を取得します。 その文字自身が変更されることはありません。 全角空白やタブを削除できるかどうかはブラウザに依存するようです（Chrome 50 では削除していました）。

構文
text.trim();
引数
 
なし
戻り値
 
{string}
両端の空白が削除された文字列
利用例
"   foobar   ".trim();  // -> "foobar"

日付

メソッド の 追加

Dateオブジェクトに以下のメソッドが追加されました。 詳細はそれぞれの関数についての記載で見ていきます。

Date.now

UTC（協定世界時）における 1970 年 1 月 1 日 00 時 00 分 00 秒 から現在までの経過ミリ秒を取得します。

構文
var time = Date.now();
引数
 
なし
戻り値
 
{number}
UTC（協定世界時）における 1970 年 1 月 1 日 00 時 00 分 00 秒 から現在までの経過ミリ秒。
利用例
var time = Date.now(); // (new Date()).getTime(); と同じ。

Date.prototype.toISOString

Webアプリケーションではよく使われる ISO8601 形式 (W3C-DTF 形式) の文字列で日付を取得します。 以前はこの形式に変換する実装が必要（ string→Date 、 Date→string ）でしたが、ネイティブ化は嬉しいです。

構文
var text = date.toISOString();
引数
 
なし
戻り値
 
{string}
グリニッジ天文時（Z）における W3C-DTF (ISO8601) 形式の文字列を取得。
利用例
(new Date()).toISOString();    // "2016-06-05T07:03:22.407Z"

Date.prototype.toJSON

Dateオブジェクトを JSONシリアライズ した値を取得します。 実際は Date.prototype.toISOString() と同じ値が取得できます。

構文
var json = date.toJSON();
引数
 
なし
戻り値
 
{string}
グリニッジ天文時（Z）における W3C-DTF (ISO8601) 形式の文字列を取得。
利用例
(new Date()).toJSON();         // "2016-06-05T07:03:22.407Z"

関数

メソッド の 追加

Function にも 以下のメソッドが追加されました。 apply や call にも似ている this 問題を解決する手段です。

  • Function.prototype.bind

Function.prototype.bind

構文
func.bind(thisObject [, arg1, arg2, ...]);
引数
thisObject
{object}
関数が呼び出された際に this へ設定するオブジェクト。
arg1, arg2, ...
{object...}
関数を呼び出す際に先頭に引数として渡す値。
戻り値
 
{Function}
呼び出した際の this を固定化した関数
利用例
var Timer = function () {
};

Timer.prototype._num = 0;

/**
* window.setTimeout から呼ばれるこの関数の this は
* bind() を用いない場合、 this = window。
* bind() で固定化した場合、 this = t (<- インスタンス化されたオブジェクト)。
*/
Timer.prototype.tick = function () {
  this._num += 1;
  console.log('tick : ' + this._num);
  this.start();
};

Timer.prototype.start = function () {
  // bind() で this を固定化する
  window.setTimeout(this.tick.bind(this), 1000);
};

var t = new Timer();
t.start();

JSON

ネイティブオブジェクト の 追加

新規ネイティブオブジェクトとして JSON が追加されました。

JSON.parse

指定された JSON文字列 を オブジェクト に変換します。

構文
var obj = JSON.parse(data);
引数
data
{string}
オブジェクトに変換したいJSON文字列。
戻り値
 
{object}
オブジェクト
利用例
// サーバーから受信した JSONテキスト 等。
var data = '{"id":"123456789","name":"Saya Sasamiya"}';

// parse() で オブジェクト に変換。
var obj = JSON.parse(data);

JSON.stringify

オブジェクト を JSON文字列 に 変換します。

構文
var data = JSON.stringify(obj);
引数
obj
{object}
JSON文字列に変換したいオブジェクト。
戻り値
 
{string}
JSON文字列
利用例
// クライアント側で作ったデータ
var obj = {
  id: '123456789',
  name: 'Saya Sasamiya'
};

// JSON文字列に変換 ... → AjaxでサーバーにPOST送信
var data = JSON.stringify(obj);

以上が "ECMAScript 3" と "ECMAScript 5" の違いになります。

実はすべてをあげきれているわけではなく、メインどころとなりそうな部分をピックアップしてのまとめです。 今後は毎年 ECMAScript の改変を行っていくというウワサを小耳に挟んだのですが…どうなんでしょう？ 毎年改変されると JavaScript の仕様についていくのが大変ですが、改良が続けられているということはその分見込みもある気もします。 今後も適当なタイミングでまとめていきたいと思います。

ではでは、本記事はここまでで…。

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

 

  1. 加藤太朗2020年7月16日 9:23

    Array.filterのサンプルコードがArray.mapのコピーになっています。

    返信削除