JavaScript ES5

ECMAScript 5 とは何ですか？

ECMAScript 5 は ES5 または ECMAScript 2009 と呼ばれます。

この章では、ES5 の最も重要な機能を紹介します。

ECMAScript 5 特徴

これらは 2009 年に発表された新しい機能です：

  • "use strict" 指令
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • 属性getterとsetter
  • 新しいオブジェクト属性とメソッド

ECMAScript 5 语法変更

  • 文字列の属性アクセス [ ]
  • 配列やオブジェクトリテラルの末尾のコンマ
  • 多行文字列リテラル
  • 属性名としての予約語

"use strict" 指令

"use strict" 严格モードで JavaScript コードを実行するべきです。

例えば、严格モードを使用すると、未宣言の変数を使用することができません。

すべてのプログラムで严格モードを使用できます。それは、よりクリアなコードの作成を助け、未宣言の変数の使用を防ぐことができます。

"use strict” は単なる文字列式です。古いブラウザでは理解されず、エラーが投げられません。

読んでください JS 严格モード もっと詳しくはこちらを参照してください。

String.trim()

String.trim() 文字列の両端の空白文字を削除します。

インスタンス

var str = "       Hello World!        ";
alert(str.trim());

実際に試してみる

以下で JS 文字列メソッド もっと詳しくはこちらを参照してください。

Array.isArray()

isArray() このメソッドは、オブジェクトが配列かどうかをチェックします。

インスタンス

function myFunction() {
  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var x = document.getElementById("demo");
  x.innerHTML = Array.isArray(fruits);
}

実際に試してみる

以下で JS 配列 もっと詳しくはこちらを参照してください。

Array.forEach()

forEach() 各配列要素に対して一度だけ関数を呼び出します。

インスタンス

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

Array.map()

この例では、配列の各値に 2 を乗算します：

インスタンス

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

Array.filter()

この例では、値が 18 より大きい要素を使用して新しい配列を作成します：

インスタンス

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

Array.reduce()

この例では、配列内のすべての数の合計を決定します：

インスタンス

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

Array.reduceRight()

この例では、配列内のすべての数の合計を確認しています：

インスタンス

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

Array.every()

この例では、すべての値が 18 を超えているかどうかを確認しています：

インスタンス

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

Array.some()

この例では、いくつかの値が 18 を超えているかどうかを確認しています：

インスタンス

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

Array.indexOf()

配列内の特定の要素の値を検索し、その位置を返します：

インスタンス

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

実際に試してみる

以下で JS 配列イテレーションメソッド詳しくはこちらで学んでください。

Array.lastIndexOf()

Array.lastIndexOf() および Array.indexOf() 同様ですが、配列の末尾から検索を開始します。

インスタンス

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

実際に試してみる

以下で JS 配列イテレーションメソッド 詳しくはこちらで学んでください。

JSON.parse()

JSON の一般的な用途は、Web サーバーからデータを受信することです。

Web サーバーからこのテキスト文字列を受け取ったと想像してみてください：

'{"name":"Bill", "age":62, "city":"Seatle"}'

JavaScriptの関数 JSON.parse() テキストを JavaScript オブジェクトに変換するために使用されます：

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

実際に試してみる

私たちの JSONチュートリアル 詳しくはこちらで学んでください。

JSON.stringify()

JSON の一般的な用途は、データを Web サーバーに送信することです。

Web サーバーにデータを送信する場合、データは文字列でなければなりません。

JavaScript でこのオブジェクトがあると想像してみてください：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

JSON.stringify() ジェスチャーを使用してその文字列に変換してください。

var myJSON = JSON.stringify(obj);

結果は JSON 表示法に従った文字列になります。

myJSON は今や文字列であり、サーバーに送信準備が整っています：

インスタンス

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

実際に試してみる

私たちの JSONチュートリアル 詳しくはこちらで学んでください。

Date.now()

Date.now()は、1970年1月1日00:00:00:00からのミリ秒数を返します。

インスタンス

var timInMSs = Date.now();

実際に試してみる

Date.now() の結果はDateオブジェクト上でgetTime()を実行した結果と同じです。

以下で JS日付 の詳細について学ぶために中で。

属性getterとsetter

ES5では、属性の取得や設定の文法に似た方法でオブジェクトメソッドを定義できます。

この例では、fullNameという名前の属性に getter：

インスタンス

// オブジェクト作成：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// getterを使用してオブジェクトからのデータを表示：
document.getElementById("demo").innerHTML = person.fullName;

実際に試してみる

この例では、言語属性に setter と getter：

インスタンス

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// setterを使用してオブジェクト属性を設定：
person.lang = "en";
// getterを使用してオブジェクトからのデータを表示：
document.getElementById("demo").innerHTML = person.lang;

実際に試してみる

この例ではsetterを使用して、言語の大文字更新を確実にする：

インスタンス

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// setterを使用してオブジェクト属性を設定：
person.lang = "en";
// オブジェクトからのデータを表示：
document.getElementById("demo").innerHTML = person.language;

実際に試してみる

以下で JSオブジェクトアクセサ getterとsetterの詳細について学ぶために中で。

新しいオブジェクト属性とメソッド

Object.defineProperty() ES5での新しいオブジェクトメソッドです。

オブジェクトの属性を定義したり、属性の値やメタデータを変更することができます。

インスタンス

// オブジェクト作成：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// 属性変更：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true;
  configurable : true
});
// 属性リスト
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

実際に試してみる

次の例では、同じコードですが、リストに含まれる言語属性を隠します：

インスタンス

// オブジェクト作成：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO", 
});
// 属性変更：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 属性リスト
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

実際に試してみる

// この例では、大文字に更新するためにsetterとgetterを作成します：

インスタンス

// オブジェクト作成：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO"
});
// 属性変更：
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// 言語変更
person.language = "en";
// 言語表示
document.getElementById("demo").innerHTML = person.language;

実際に試してみる

ES5の新しいオブジェクトメソッド

ECMAScript 5はJavaScriptに多くの新しいオブジェクトメソッドを追加しました：

// オブジェクト属性を追加または変更します
Object.defineProperty(object, property, descriptor)
// 複数のオブジェクト属性を追加または変更します
Object.defineProperties(object, descriptors)
// 属性アクセス
Object.getOwnPropertyDescriptor(object, property)
// 全ての属性を配列として返します
Object.getOwnPropertyNames(object)
// 可変長属性を配列として返します
Object.keys(object)
// 原型アクセス
Object.getPrototypeOf(object)
// オブジェクトに属性を追加することを防ぎます
Object.preventExtensions(object)
// オブジェクトに属性を追加できる場合、true を返します
Object.isExtensible(object)
// オブジェクトの属性（値ではなく）への変更を防ぎます
Object.seal(object)
// オブジェクトが密封されている場合、true を返します
Object.isSealed(object)
// オブジェクトへの変更を防ぎます
Object.freeze(object)
// オブジェクトが凍結されている場合、true を返します
Object.isFrozen(object)

以下で ECMAScript5 オブジェクト 詳しくはこちらで学んでください。

文字列の属性アクセス

charAt() メソッドは指定されたインデックス（位置）の文字を返します：

インスタンス

var str = "HELLO WORLD";
str.charAt(0);            // 返却 H

実際に試してみる

ECMAScript 5 は文字列に対する属性アクセスを許可しています：

インスタンス

var str = "HELLO WORLD";
str[0];                   // 返却 H

実際に試してみる

文字列の属性アクセスは少し予測不可能かもしれません。

以下で JS 文字列メソッド 詳しくはこちらで学んでください。

末尾のカンマ(Trailing Commas)

ECMAScript 5 はオブジェクトと配列の定義に末尾のカンマを使用することが許可しています：

Object インスタンス

person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

Array インスタンス

points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

警告！！！

Internet Explorer 8 はクラッシュします。

JSON は末尾のカンマを使用することが許可されていません。

JSON 对象：

// 允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 不允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON 数组：

// 允许：
points = [40, 100, 1, 5, 25, 10]
// 不允许：
points = [40, 100, 1, 5, 25, 10,]

多行文字列

反斜線でエスケープを使用すると、ECMAScript 5では多行の文字列リテラル（文字列リテラル）を多行にすることができます：

インスタンス

"Hello \
Kitty!";

実際に試してみる

\メソッドは一般的にサポートされていません。

古いブラウザでは、アンダースコアの周りのスペースが異なる方法で処理されることがあります。

一部の古いブラウザでは、\文字の後ろにスペースが許可されていません。

文字列リテラルを分解するより安全な方法は、文字列を追加を使用することです：

インスタンス

"Hello " + 
"Kitty!";

実際に試してみる

キーワードを属性名として使用

ECMAScript 5では、キーワードを属性名として使用することができます：

オブジェクトインスタンス

var obj = {name: "Bill", new: "yes"}

実際に試してみる

ES5（ECMAScript 5）ブラウザサポート

Chrome 23、IE 10、Safari 6はECMAScript 5を完全にサポートする最初のブラウザです：

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
2012年9月 2012年9月 2013年4月 2012年7月 2013年7月