JavaScript ES5
ES5としても知られるECMAScript2009は、JavaScriptの最初のメジャーリビジョンでした。
この章では、ES5の最も重要な機能について説明します。
ES5の機能
- 「厳密に使用する」
- 文字列[番号]アクセス
- 複数行の文字列
- String.trim()
- Array.isArray()
- 配列forEach()
- 配列map()
- 配列filter()
- 配列reduce()
- 配列reduceRight()
- 配列every()
- 配列some()
- 配列indexOf()
- 配列lastIndexOf()
- JSON.parse()
- JSON.stringify()
- Date.now()
- 日付toISOString()
- 日付toJSON()
- プロパティゲッターとセッター
- プロパティ名としての予約語
- オブジェクトメソッド
- オブジェクトdefineProperty()
- Function.bind()
- 末尾のコンマ
ブラウザのサポート
ES5
最新のすべてのブラウザで完全にサポートされています。
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9.0 | Yes | Yes | Yes | Yes |
「厳密な使用」指令
"use strict"
JavaScriptコードを「厳密モード」で実行する必要があることを定義します。
strictモードでは、たとえば、宣言されていない変数を使用できません。
すべてのプログラムで厳密モードを使用できます。宣言されていない変数を使用できないようにするなど、よりクリーンなコードを作成するのに役立ちます。
"use strict"
単なる文字列式です。古いブラウザは、それを理解していなくてもエラーをスローしません。
詳細については、JS厳密モードをご覧ください。
文字列のプロパティアクセス
このcharAt()
メソッドは、文字列内の指定されたインデックス(位置)にある文字を返します。
例
var str = "HELLO WORLD";
str.charAt(0); // returns H
ES5では、文字列へのプロパティアクセスが許可されています。
例
var str = "HELLO WORLD";
str[0]; // returns H
文字列へのプロパティアクセスは少し予測できないかもしれません。
詳細については、JS文字列メソッドをご覧ください。
複数行にわたる文字列
ES5では、円記号でエスケープした場合、複数行にわたる文字列リテラルを使用できます。例
"Hello \
Dolly!";
\メソッドはユニバーサルサポートを持っていない可能性があります。
古いブラウザでは、円記号の周囲のスペースの扱いが異なる場合があります。
一部の古いブラウザでは、\文字の後ろにスペースを入れることができません。
文字列リテラルを分割するより安全な方法は、文字列加算を使用することです。
例
"Hello " +
"Dolly!";
プロパティ名としての予約語
ES5では、プロパティ名として予約語を使用できます。
オブジェクトの例
var obj = {name: "John", new: "yes"}
文字列trim()
この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アレイをご覧ください。
配列forEach()
このforEach()
メソッドは、配列要素ごとに1回関数を呼び出します。
例
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
詳細については、JS配列反復法をご覧ください。
配列map()
この例では、各配列値に2を掛けます。
例
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
return value * 2;
}
詳細については、JS配列反復法をご覧ください。
配列filter()
この例では、値が18より大きい要素から新しい配列を作成します。
例
var numbers = [45, 4, 9, 16, 25];
var over18 =
numbers.filter(myFunction);
function myFunction(value) {
return value > 18;
}
詳細については、JS配列反復法をご覧ください。
配列reduce()
この例では、配列内のすべての数値の合計を求めます。
例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
return total + value;
}
詳細については、JS配列反復法をご覧ください。
配列reduceRight()
この例では、配列内のすべての数値の合計も求めています。
例
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
return total + value;
}
詳細については、JS配列反復法をご覧ください。
配列every()
この例では、すべての値が18を超えているかどうかを確認します。
例
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.every(myFunction);
function myFunction(value) {
return
value > 18;
}
詳細については、JS配列反復法をご覧ください。
配列some()
この例では、一部の値が18を超えているかどうかを確認します。
例
var numbers = [45, 4, 9, 16, 25];
var allOver18 =
numbers.some(myFunction);
function myFunction(value) {
return
value > 18;
}
詳細については、JS配列反復法をご覧ください。
配列indexOf()
配列で要素値を検索し、その位置を返します。
例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
詳細については、JS配列反復法をご覧ください。
配列lastIndexOf()
lastIndexOf()
と同じですindexOf()
が、配列の最後から検索します。
例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
詳細については、JS配列反復法をご覧ください。
JSON.parse()
JSONの一般的な使用法は、Webサーバーからデータを受信することです。
Webサーバーから次のテキスト文字列を受け取ったとします。
'{"name":"John", "age":30, "city":"New York"}'
JavaScript関数JSON.parse()
は、テキストをJavaScriptオブジェクトに変換するために使用されます。
var obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
詳細については、JSONチュートリアルをご覧ください。
JSON.stringify()
JSONの一般的な使用法は、データをWebサーバーに送信することです。
Webサーバーにデータを送信する場合、データは文字列である必要があります。
JavaScriptにこのオブジェクトがあると想像してください。
var obj = {name:"John", age:30, city:"New York"};
JavaScript関数JSON.stringify()
を使用して文字列に変換します。
var myJSON = JSON.stringify(obj);
結果は、JSON表記に続く文字列になります。
myJSONが文字列になり、サーバーに送信する準備が整いました。
例
var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
詳細については、JSONチュートリアルをご覧ください。
Date.now()
Date.now()
returns the number of milliseconds since zero date (January 1.
1970 00:00:00 UTC).
Example
var timInMSs = Date.now();
Date.now()
returns the same as getTime() performed on a Date
object.
Learn more in JS Dates.
Date toISOString()
The toISOString()
method converts a Date object to a string, using the ISO standard format:
Example
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
Date toJSON()
toJSON()
converts a Date object into a string, formatted as a JSON date.
JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:
Example
d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();
Property Getters and Setters
ES5 lets you define object methods with a syntax that looks like getting or setting a property.
This example creates a getter for a property called fullName:
Example
// Create an object:
var person = {
firstName:
"John",
lastName : "Doe",
get
fullName() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.fullName;
This example creates a setter and a getter for the language property:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
get lang() {
return this.language;
},
set lang(value) {
this.language = value;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object using a getter:
document.getElementById("demo").innerHTML =
person.lang;
This example uses a setter to secure upper case updates of language:
Example
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the
object:
document.getElementById("demo").innerHTML =
person.language;
Learn more about Gettes and Setters in JS Object Accessors
Object.defineProperty()
Object.defineProperty()
is a new Object method in ES5.
It lets you define an object property and/or change a property's value and/or metadata.
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
Next example is the same code, except it hides the language property from enumeration:
Example
// Create an Object:
var person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
This example creates a setter and a getter to secure upper case updates of language:
Example
/// Create an Object:
var person = {
firstName: "John",
lastName :
"Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language;
E5 Object Methods
ES5 added a lot of new Object Methods to JavaScript:
Managing Objects
// Create object with an existing object as prototype
Object.create(parent, donor)
// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)
// Returns enumerable properties as an array
Object.keys(object)
Protecting Objects
// Prevents adding properties to an object
Object.preventExtensions(object)
// Returns true if properties can be added to an object
Object.isExtensible(object)
// Prevents changes of object properties (not values)
Object.seal(object)
// Returns true if object is sealed
Object.isSealed(object)
// Prevents any changes to an object
Object.freeze(object)
// Returns true if object is frozen
Object.isFrozen(object)
Learn more in Object ECMAScript5.
Trailing Commas
ES5 allows trailing commas in object and array definitions:
Object Example
person = {
firstName: "John",
lastName: "
Doe",
age: 46,
}
Array Example
points = [
1,
5,
10,
25,
40,
100,
];
WARNING !!!
JSON does not allow trailing commas.
JSON Objects:
//
Allowed:
var person = '{"firstName":"John", "lastName":"Doe",
"age":46}'
JSON.parse(person)
// Not allowed:
var person = '{"firstName":"John",
"lastName":"Doe", "age":46,}'
JSON.parse(person)
JSON Arrays:
//
Allowed:
points = [40, 100, 1, 5, 25, 10]
// Not allowed:
points =
[40, 100, 1, 5, 25, 10,]