JavaScript ES5

Hvad er ECMAScript 5?

ECMAScript 5 kaldes også ES5 og ECMAScript 2009.

Dette kapitel introducerer nogle af de vigtigste funktioner i ES5.

ECMAScript 5 funktioner

Disse er nye funktioner, der blev offentliggjort i 2009:

  • "use strict" instruktion
  • 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()
  • Egenskabs Getter og Setter
  • nye objekt egenskaber og metoder

ECMAScript 5语法更改

  • Egenskabsadgang til strenge [ ]
  • Trailing commas i array- og objektliterals
  • Multilinje strengliterals
  • Reserverede ord som attributnavne

"use strict" instruktion

"use strict"Definerer, at JavaScript-kode skal køres i Strict Mode."

For eksempel kan du ikke bruge udeklarede variabler i Strict Mode.

Du kan bruge Strict Mode i alle dine programmer. Det hjælper dig med at skrive klarere kode, f.eks. forhindre dig i at bruge udeklarede variabler.

"use strict"Det er kun en strengudtryk. Gamle browsere, der ikke forstår dem, vil ikke kaste fejl."

Læs venligst JS Strict Mode Læs mere her.

String.trim()

String.trim() Fjerner blanke tegn fra begge sider af strengen.

Eksempel

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

Prøv det selv

请在 JS 字符串方法 Læs mere her.

Array.isArray()

isArray() Metoden tjekker om objektet er et array.

Eksempel

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

Prøv det selv

请在 JS Array Læs mere her.

Array.forEach()

forEach() Metoden kaldes én gang for hvert element i arrayet.

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

Array.map()

Dette eksempel multiplicerer hver værdi i arrayet med 2:

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

Array.filter()

Dette eksempel opretter en ny array med elementer med værdier større end 18:

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

Array.reduce()

Denne eksemplet bestemmer summen af alle tal i arrayet:

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

Array.reduceRight()

Dette eksempel er også til at bestemme summen af alle tal i arrayet：

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

Array.every()

Dette eksempel tjekker, om alle værdier overstiger 18：

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

Array.some()

Dette eksempel tjekker, om nogle værdier overstiger 18：

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

Array.indexOf()

Søger efter en bestemt elementværdi i arrayet og returnerer dens position：

Eksempel

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

Prøv det selv

请在 JS array iteration metoder中学习更多内容。

Array.lastIndexOf()

Array.lastIndexOf() med Array.indexOf() Lignende, men søger fra arrayets ende ud.

Eksempel

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

Prøv det selv

请在 JS array iteration metoder 中学习更多内容。

JSON.parse()

En almindelig anvendelse af JSON er at modtage data fra en webserver。

Forestil dig, at du modtager denne tekststreng fra en webserver：

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

JavaScript funktion JSON.parse() Bruges til at konvertere tekst til et JavaScript-objekt：

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

Prøv det selv

venligst besøg vores JSON vejledning 中学习更多内容。

JSON.stringify()

En almindelig anvendelse af JSON er at sende data til en webserver。

Når data sendes til en webserver, skal dataene være en streng。

Forestil dig, at vi har dette objekt i JavaScript：

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

Brug JavaScript-funktionen JSON.stringify() til at konvertere den til en streng。

var myJSON = JSON.stringify(obj);

Resultatet vil være en streng, der følger JSON-repræsentationen。

myJSON er nu en streng, klar til at sendes til serveren：

Eksempel

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

Prøv det selv

venligst besøg vores JSON vejledning 中学习更多内容。

Date.now()

Date.now() returnerer millisekunder siden den 1. januar 1970 kl. 00:00:00:00.

Eksempel

var timInMSs = Date.now();

Prøv det selv

Date.now() s returnerer det samme som resultatet af at køre getTime() på Date-objektet.

请在 JS dato for at lære mere.

Egenskabs Getter og Setter

ES5 giver dig mulighed for at definere objektmetoder ved hjælp af syntaks, der ligner at få fat i eller sætte egenskaber.

Dette eksempel opretter en getter:

Eksempel

// Opret objekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Brug getter til at vise data fra objektet:
document.getElementById("demo").innerHTML = person.fullName;

Prøv det selv

Dette eksempel opretter en setter og en getter:

Eksempel

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Brug setter til at sætte objektets egenskab:
person.lang = "en";
// Brug getter til at vise data fra objektet:
document.getElementById("demo").innerHTML = person.lang;

Prøv det selv

Dette eksempel bruger setter til at sikre, at sprogets store bogstaver opdateres:

Eksempel

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Brug setter til at sætte objektets egenskab:
person.lang = "en";
// Vis data fra objektet:
document.getElementById("demo").innerHTML = person.language;

Prøv det selv

请在 JS objekt tilgangere for at lære mere om Getter og Setter.

nye objekt egenskaber og metoder

Object.defineProperty() er en ny objektmetode i ES5.

det giver dig mulighed for at definere objektets egenskaber og/eller ændre værdierne og/eller metadata for egenskaber.

Eksempel

// Opret objekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Ændr egenskab:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable: true,
  configurable : true
});
// Enumerér egenskaber
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Prøv det selv

Næste eksempel er samme kode, men det skjuler sprogegenskaben i enumerationen:

Eksempel

// Opret objekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Ændr egenskab:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Enumerér egenskaber
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Prøv det selv

// Dette eksempel opretter en setter og getter for at sikre, at sproget opdateres med store bogstaver:

Eksempel

// Opret objekt:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// Ændr egenskab:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Ændr sprog
person.language = "en";
// Vis sprog
document.getElementById("demo").innerHTML = person.language;

Prøv det selv

Nye objektmetoder i ES5

ECMAScript 5 tilføjede mange nye objektmetoder til JavaScript:

// Tilføj eller ændr objektegenskab
Object.defineProperty(object, property, descriptor)
// Tilføj eller ændr flere objektegenskaber
Object.defineProperties(object, descriptors)
// Tilgang til egenskab
Object.getOwnPropertyDescriptor(object, property)
// Returnerer alle egenskaber som en array
Object.getOwnPropertyNames(object)
// Returnerer enummerbare egenskaber som en array
Object.keys(object)
// Tilgang til prototype
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() 方法返回字符串中指定索引（位置）的字符：

Eksempel

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

Prøv det selv

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

Eksempel

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

Prøv det selv

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

请在 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,]

Multilinje streng

Hvis du bruger omvendt skråstreg som flugt, tillader ECMAScript 5 multiline strengtekst (literals):

Eksempel

"Hello \
Kitty!";

Prøv det selv

Metoden \ kan muligvis ikke have bred støtte.

Ældre browsere kan behandle mellemrum omkring omvendt skråstreg på forskellig måde.

Nogle gamle browsere tillader ikke mellemrum efter \-tegnet.

En mere sikker måde at analysere strengtekst på er ved at bruge strengføjning:

Eksempel

"Hello " + 
"Kitty!";

Prøv det selv

Reserverede ord som egenskabsnavne

ECMAScript 5 tillader reserverede ord som egenskabsnavne:

Objekt eksempel

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

Prøv det selv

ES5 (ECMAScript 5) browserunderstøttelse

Chrome 23, IE 10 og Safari 6 var de første browsere, der fuldt ud understøttede ECMAScript 5:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
September 2012 September 2012 April 2013 Juli 2012 Juli 2013