JavaScript ES5
- Previous Page JS Version
- Next Page JS 2015 (ES6)
Apa itu 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()
- Property Getter dan Setter
- Objek baru sifat dan kaedah
ECMAScript 5 语法更改
- 对字符串的属性访问 [ ]
- 数组和对象字面量中的尾随逗号
- 多行字符串字面量
- 作为属性名称的保留字
"use strict" 指令
"use strict
" 定义 JavaScript 代码应该以“严格模式”执行。
例如,使用严格模式,不能使用未声明的变量。
您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码,例如阻止您使用未声明的变量。
"use strict
” 只是一个字符串表达式。旧浏览器如果不理解它们就不会抛出错误。
请阅读 JS 严格模式 中的更多内容。
String.trim()
String.trim()
删除字符串两端的空白字符。
Example
var str = " Hello World! "; alert(str.trim());
请在 JS 字符串方法 中阅读更多内容。
Array.isArray()
isArray()
方法检查对象是否为数组。
Example
function myFunction() { var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = document.getElementById("demo"); x.innerHTML = Array.isArray(fruits); }
请在 JS 数组 中阅读更多内容。
Array.forEach()
forEach()
方法为每个数组元素调用一次函数。
Example
var txt = ""; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value) { txt = txt + value + "<br>"; }
请在 Kaedah iterasi array JS 中学习更多内容。
Array.map()
这个例子给每个数组值乘以 2:
Example
var numbers1 = [45, 4, 9, 16, 25]; var numbers2 = numbers1.map(myFunction); function myFunction(value) { return value * 2; }
请在 Kaedah iterasi array JS 中学习更多内容。
Array.filter()
此例用值大于 18 的元素创建一个新数组:
Example
var numbers = [45, 4, 9, 16, 25]; var over18 = numbers.filter(myFunction); function myFunction(value) { return value > 18; }
请在 Kaedah iterasi array JS 中学习更多内容。
Array.reduce()
这个例子确定数组中所有数的总和:
Example
var numbers1 = [45, 4, 9, 16, 25]; var sum = numbers1.reduce(myFunction); function myFunction(total, value) { return total + value; }
请在 Kaedah iterasi array JS 中学习更多内容。
Array.reduceRight()
Contoh ini juga untuk menentukan jumlah keseluruhan semua bilangan di dalam array:
Example
var numbers1 = [45, 4, 9, 16, 25]; var sum = numbers1.reduceRight(myFunction); function myFunction(total, value) { return total + value; }
请在 Kaedah iterasi array JS 中学习更多内容。
Array.every()
Contoh ini memeriksa apakah semua nilai melebihi 18:
Example
var numbers = [45, 4, 9, 16, 25]; var allOver18 = numbers.every(myFunction); function myFunction(value) { return value > 18; }
请在 Kaedah iterasi array JS 中学习更多内容。
Array.some()
Contoh ini memeriksa apakah ada nilai yang melebihi 18:
Example
var numbers = [45, 4, 9, 16, 25]; var allOver18 = numbers.some(myFunction); function myFunction(value) { return value > 18; }
请在 Kaedah iterasi array JS 中学习更多内容。
Array.indexOf()
Mencari nilai suatu elemen di dalam array dan mengembalikan posisinya:
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = fruits.indexOf("Apple");
请在 Kaedah iterasi array JS中学习更多内容。
Array.lastIndexOf()
Array.lastIndexOf()
Dengan Array.indexOf()
Dengan demikian, tetapi mencari dari akhir array.
Example
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = fruits.lastIndexOf("Apple");
请在 Kaedah iterasi array JS 中学习更多内容。
JSON.parse()
Penggunaan biasa JSON adalah untuk menerima data dari pelayan Web.
Tengahkan bayangkan, anda menerima string teks ini dari pelayan Web:
'{"name":"Bill", "age":62, "city":"Seatle"}'
Fungsi JavaScript JSON.parse()
Digunakan untuk mengubah teks ke objek JavaScript:
var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');
Sila lawati di Panduan JSON 中学习更多内容。
JSON.stringify()
Penggunaan biasa JSON adalah untuk menghantar data ke pelayan Web.
Data mesti menjadi string apabila dihantar ke pelayan Web.
Tengahkan bayangkan, kami punya objek ini di JavaScript:
var obj = {"name":"Bill", "age":62, "city":"Seatle"};
Gunakan fungsi JavaScript JSON.stringify() untuk mengubahnya ke string.
var myJSON = JSON.stringify(obj);
Hasilnya akan adalah string yang mengikuti penyenaraian JSON.
myJSON kini adalah string, siap dihantar ke pelayan:
Example
var obj = {"name":"Bill", "age":62, "city":"Seatle"}; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON;
Sila lawati di Panduan JSON 中学习更多内容。
Date.now()
Date.now() mengembalikan bilangan millisecond dari tarikh nol (1 Januari 1970 00:00:00:00).
Example
var timInMSs = Date.now();
Date.now()
kembalikan yang sama seperti keputusan daripada melaksanakan getTime() di objek Tarikh.
请在 Tarikh JS dalam mengambil tahu lebih banyak.
Property Getter dan Setter
ES5 membolehkan anda menggunakan sintaks yang seperti mengambil atau menetapkan sifat untuk mendefinikan kaedah objek.
Contoh ini membuat sifat bernama fullName yang mempunyai getter:
Example
// 创建对象: var person = { firstName: "Bill", lastName : "Gates" get fullName() { return this.firstName + " " + this.lastName; } }); // Gunakan getter untuk tunjukkan data dari objek: document.getElementById("demo").innerHTML = person.fullName;
Contoh ini membuat sifat bahasa yang mempunyai setter dan getter:
Example
var person = { firstName: "Bill", lastName : "Gates" language : "NO", get lang() { return this.language; , set lang(value) { this.language = value; } }); // Gunakan setter untuk menetapkan sifat objek: person.lang = "en"; // Gunakan getter untuk tunjukkan data dari objek: document.getElementById("demo").innerHTML = person.lang;
Contoh ini menggunakan setter untuk memastikan kemas kini huruf besar bahasa:
Example
var person = { firstName: "Bill", lastName : "Gates" language : "NO", set lang(value) { this.language = value.toUpperCase(); } }); // Gunakan setter untuk menetapkan sifat objek: person.lang = "en"; // Tunjukkan data dari objek: document.getElementById("demo").innerHTML = person.language;
请在 Aksesori Objek JS dalam mengambil tahu lebih banyak tentang Getter dan Setter.
Objek baru sifat dan kaedah
Object.defineProperty()
Adalah kaedah objek baru di ES5.
Ia membolehkan anda merakamkan sifat objek dan/atau mengubah nilai dan/atau metadata sifat.
Example
// 创建对象: 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;
下一个例子是相同的代码,但它隐藏了枚举中的语言属性:
Example
// 创建对象: 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 来确保语言的大写更新:
Example
// 创建对象: 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()
方法返回字符串中指定索引(位置)的字符:
Example
var str = "HELLO WORLD"; str.charAt(0); // 返回 H
ECMAScript 5 允许对字符串进行属性访问:
Example
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,]
Multi-line String
If backslashes are used for escaping, ECMAScript 5 allows multi-line string literals (literals):
Example
"Hello \ Kitty!";
The backslash method may not be universally supported.
Older browsers may handle spaces around the backslash in different ways.
Some old browsers do not allow spaces after the backslash character.
A safer way to split string literals is to use string concatenation:
Example
"Hello " + "Kitty!";
Reserved words as property names
ECMAScript 5 allows reserved words to be used as property names:
Object Example
var obj = {name: "Bill", new: "yes"}
ES5 (ECMAScript 5) Browser Support
Chrome 23, IE 10, and Safari 6 are the first batch of browsers that fully support ECMAScript 5:
Chrome 23 | IE10 / Edge | Firefox 21 | Safari 6 | Opera 15 |
September 2012 | September 2012 | April 2013 | July 2012 | July 2013 |
- Previous Page JS Version
- Next Page JS 2015 (ES6)