JavaScript ES5

Vad är ECMAScript 5?

ECMAScript 5 kallas också ES5 och ECMAScript 2009.

Detta kapitel introducerar några av de viktigaste funktionerna i ES5.

ECMAScript 5-funktioner

Dessa är nya funktioner som publicerades 2009:

  • "use strict"-instruktionen
  • 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()
  • Egenskaps Getter och Setter
  • Nya objektpropertyer och metoder

ECMAScript 5-språkändringar

  • Egenskapsåtkomst för strängar [ ]
  • Avslutande kommatecken i array- och objektlitteraler
  • Mångradiga stränglitteraler
  • Reserverade ord som egennamn

"use strict"-instruktionen

"use strict"Definiera att JavaScript-kod ska köras i "strict mode".

Till exempel kan du inte använda odeklarerade variabler när du använder strikt mode.

Du kan använda strikt mode i alla dina program. Det hjälper dig att skriva klarare kod, till exempel genom att förhindra att du använder odeklarerade variabler.

"use strict"Detta är bara en stränguttryck. Gamla webbläsare som inte förstår dem kommer inte att kasta fel."

Läs mer JS-strikt mode Mer information här.

String.trim()

String.trim() Ta bort blanka tecken från båda ändarna av strängen.

Exempel

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

Prova själv

请在 JS 字符串方法 Läs mer här.

Array.isArray()

isArray() Metoden kontrollerar om objektet är en array.

Exempel

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

Prova själv

请在 JS-array Läs mer här.

Array.forEach()

forEach() Metoden anropar funktionen en gång för varje element i arrayen.

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

Array.map()

Detta exempel multiplicerar varje värde i arrayen med 2:

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

Array.filter()

Detta exempel skapar en ny array med element som är större än 18:

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

Array.reduce()

Denna exempel bestämmer summan av alla tal i arrayen:

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

Array.reduceRight()

Detta exempel är också för att bestämma summan av alla tal i arrayen：

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

Array.every()

Detta exempel kontrollerar om alla värden överstiger 18：

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

Array.some()

Detta exempel kontrollerar om vissa värden överstiger 18：

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

Array.indexOf()

Sök efter ett element i arrayen och returnera dess position：

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() med Array.indexOf() Liknande, men börjar leta från slutet av arrayen.

Exempel

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

Prova själv

请在 JS-arrayiterationsmetoder 中学习更多内容。

JSON.parse()

En vanlig användning av JSON är att ta emot data från en webbserver。

Tänk dig att du får följande textsträng från en webbserver：

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

JavaScript funktioner JSON.parse() Används för att konvertera text till ett JavaScript-objekt：

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

Prova själv

Vänligen besök vår JSON-tutorial 中学习更多内容。

JSON.stringify()

En vanlig användning av JSON är att skicka data till en webbserver。

När data skickas till en webbserver måste den vara en sträng。

Tänk dig att vi har följande objekt i JavaScript：

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

Använd JavaScript-funktionen JSON.stringify() för att konvertera den till en sträng。

var myJSON = JSON.stringify(obj);

Resultatet kommer att vara en sträng som följer JSON-representationen。

myJSON är nu en sträng, redo att skickas till servern：

Exempel

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

Prova själv

Vänligen besök vår JSON-tutorial 中学习更多内容。

Date.now()

Date.now() returnerar millisekunderna sedan datumet 0 (1 januari 1970 00:00:00:00).

Exempel

var timInMSs = Date.now();

Prova själv

Date.now() återigen är samma som att köra getTime() på ett Date-objekt.

请在 JS datum lär dig mer här.

Egenskaps Getter och Setter

ES5 tillåter dig att definiera objektmetoder med en syntax liknande att hämta eller sätta egenskaper.

Detta exempel skapar en getter:

Exempel

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates"
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Använd getter för att visa data från objektet:
document.getElementById("demo").innerHTML = person.fullName;

Prova själv

Detta exempel skapar en setter och getter:

Exempel

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Använd setter för att sätta objektets egenskap:
person.lang = "en";
// Använd getter för att visa data från objektet:
document.getElementById("demo").innerHTML = person.lang;

Prova själv

Detta exempel använder setter för att säkerställa att språket uppdateras i versal.

Exempel

var person = {
  firstName: "Bill",
  lastName : "Gates"
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Använd setter för att sätta objektets egenskap:
person.lang = "en";
// Visa data från objektet:
document.getElementById("demo").innerHTML = person.language;

Prova själv

请在 JS objektåtkomst lär dig mer om Getter och Setter här.

Nya objektpropertyer och metoder

Object.defineProperty() är en ny objektmetod i ES5.

Det tillåter dig att definiera objektets egenskaper och/eller ändra egenskapens värden och/eller metadata.

Exempel

// 创建对象：
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;

Prova själv

下一个例子是相同的代码，但它隐藏了枚举中的语言属性：

Exempel

// 创建对象：
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;

Prova själv

此例创建一个 setter 和 getter 来确保语言的大写更新：

Exempel

// 创建对象：
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;

Prova själv

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() 方法返回字符串中指定索引（位置）的字符：

Exempel

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

Prova själv

ECMAScript 5 允许对字符串进行属性访问：

Exempel

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

Prova själv

对字符串的属性访问可能有点不可预测。

请在 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-linjiga strängar

Om man använder backslash-escaper, tillåter ECMAScript 5 multi-linjiga strängtexter (litterala):

Exempel

"Hello \

Kitty!";

Prova själv

Backslash-metoden har kanske inte fått allmän stöd.

Gamla webbläsare kan behandla utrymme runt backslash på olika sätt.

Några gamla webbläsare tillåter inte utrymme efter backslash-tecknet.

Ett säkrare sätt att dela upp strängtext är att använda strängaddition:

Exempel

"Hello " + 
"Kitty!";

Prova själv

Reserverade ord som attributnamn

ECMAScript 5 tillåter reserverade ord som attributnamn:

Objekt-exempel

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

Prova själv

ES5 (ECMAScript 5) webbläsarstöd

Chrome 23, IE 10 och Safari 6 var de första webbläsarna som helt stödde ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
2012 september 2012 september 2013 april 2012 juli 2013 juli