JavaScript-ES5

Mikä on ECMAScript 5?

ECMAScript 5 tunnetaan myös nimellä ES5 ja ECMAScript 2009.

Tämä luku esittelee ES5:n tärkeimmät ominaisuudet.

ECMAScript 5 -ominaisuudet

Nämä ovat vuonna 2009 julkistetut uudet ominaisuudet:

  • "use strict" ohje
  • 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()
  • Ominaisuudet Getter ja Setter
  • Uudet objekti-ominaisuudet ja -metodit

ECMAScript 5 -syntaksimuutokset

  • Merkkijonon ominaisuuksien pääsy [ ]
  • Taulukko- ja objektilausekkeiden jälkikommat
  • Moniriviset merkkijonoesitykset
  • Varattu sanastot

"use strict" ohje

"use strict"

Esimerkiksi tiukassa moodissa ei voi käyttää määrittelemättömiä muuttujia.

Voit käyttää tiukkaa moodia kaikissa ohjelmointityyleissä. Se auttaa sinua kirjoittamaan selkeämmän koodia, esimerkiksi estämällä sinua käyttämästä määrittelemättömiä muuttujia.

"use strict"Tämä on vain merkkijonoesitys. Vanhat selaimet, jotka eivät ymmärrä niitä, eivät heitä virhettä."

Lue lisää JS tiukka moodi Lue lisää tästä.

String.trim()

String.trim() Poista merkkijonon molemmat reunat tyhjät merkit.

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-merkkijonomenetelmät Lue lisää tästä.

Array.isArray()

isArray() Metodi tarkistaa, onko objekti taulukko.

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukot Lue lisää tästä.

Array.forEach()

forEach() Metodi kutsuu kerran funktiota jokaiselle taulukon elementille.

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

Array.map()

Tässä esimerkissä jokainen taulukon arvo kertataan kahdella:

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

Array.filter()

Tässä esimerkissä luodaan uusi taulukko arvojen, jotka ovat suurempia kuin 18:

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

Array.reduce()

Tämä esimerkki määrittää taulukon kaikkien lukujen summan:

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

Array.reduceRight()

Tämä esimerkki määrittää samoin taulukon kaikkien lukujen summan：

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

Array.every()

Tämä esimerkki tarkistaa, ovatko kaikki arvot yli 18：

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

Array.some()

Tämä esimerkki tarkistaa, ovatko jotkut arvot yli 18：

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

Array.indexOf()

Etsitään taulukon tiettyä elementin arvoa ja palautetaan sen sijainti：

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmätLisätietoja.

Array.lastIndexOf()

Array.lastIndexOf() ja Array.indexOf() Samankaltainen, mutta alkuperäisestä taulukon päästä alkaen.

Esimerkki

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

Kokeile itse

Ole hyvä ja JS-taulukon iteraatiomenetelmät Lisätietoja.

JSON.parse()

JSON yleinen käyttötarkoitus on vastaanottaa tietoja Web-palvelimelta。

Kuvitellaan, että saat tämän tekstituloksen Web-palvelimelta：

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

JavaScript funktio JSON.parse() Käytetään tekstin muuntamiseen JavaScript-objektiksi：

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

Kokeile itse

Ole hyvä ja vieraile JSON-opas Lisätietoja.

JSON.stringify()

JSON yleinen käyttötarkoitus on lähettää tietoja Web-palvelimelle。

Tiedot lähetettäessä Web-palvelimelle, ne täytyy olla merkkijonona。

Kuvitellaan, että meillä on tämä objekti JavaScriptissä：

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

Käytä JavaScript-funktiota JSON.stringify() muuntaaksesi sen merkkijonoksi。

var myJSON = JSON.stringify(obj);

Tuloksena on merkkijono, joka noudattaa JSON-esittelyä。

myJSON nyt on merkkijono, valmis lähetettäväksi palvelimelle：

Esimerkki

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

Kokeile itse

Ole hyvä ja vieraile JSON-opas Lisätietoja.

Date.now()

Date.now() palauttaa millisekuntien määrän päivämäärästä nollapäivästä (1. tammikuuta 1970 00:00:00:00) lähtien.

Esimerkki

var timInMSs = Date.now();

Kokeile itse

Date.now() palauttaa saman kuin Date-objektin getTime()-menetelmän suorittaminen.

Ole hyvä ja JS-päivämäärä Lue lisää tästä.

Ominaisuudet Getter ja Setter

ES5 sallii sinun määrittää objektitavat käyttämällä samanlaista syntaksia kuin ominaisuuksien hakeminen tai asettaminen.

Tämä esimerkki luo ominaisuuden nimeltä fullName: getter:

Esimerkki

// Luo objekti:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// Käytä getteriä näyttääksesi tietoja objektista:
document.getElementById("demo").innerHTML = person.fullName;

Kokeile itse

Tämä esimerkki luo setter ja getter:

Esimerkki

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// Käytä setteriä asettaaksesi objektin ominaisuuden:
person.lang = "en";
// Käytä getteriä näyttääksesi tietoja objektista:
document.getElementById("demo").innerHTML = person.lang;

Kokeile itse

Tämä esimerkki käyttää setteriä varmistaakseen, että kieli on isokirjain:

Esimerkki

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// Käytä setteriä asettaaksesi objektin ominaisuuden:
person.lang = "en";
// Näytä tietoja objektista:
document.getElementById("demo").innerHTML = person.language;

Kokeile itse

Ole hyvä ja JS-objektin käsittelijät Lue lisää gettereista ja settereista tästä.

Uudet objekti-ominaisuudet ja -metodit

Object.defineProperty() on uusi objekti-metodi ES5:ssä.

Se mahdollistaa objektin ominaisuuksien ja/tai ominaisuuksien arvojen ja/tai metaatujen määrittämisen.

Esimerkki

// Luo objekti:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Muuta ominaisuutta:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});
// Lajittele ominaisuudet
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Kokeile itse

Seuraava esimerkki on samaa koodia, mutta se piilottaa luettelossa olevan kielen ominaisuuden:

Esimerkki

// Luo objekti:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// Muuta ominaisuutta:
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// Lajittele ominaisuudet
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Kokeile itse

// Tämä esimerkki luo setterin ja getterin varmistaakseen, että kieli päivitetään isolla kirjaimella:

Esimerkki

// Luo objekti:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// Muuta ominaisuutta:
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// Muuta kieltä
person.language = "en";
// Näytä kieli
document.getElementById("demo").innerHTML = person.language;

Kokeile itse

ES5:n uudet objektimenetelmät

ECMAScript 5 lisää monta uutta objektimenetelmää JavaScriptille:

// Lisää tai muuta objektin ominaisuutta
Object.defineProperty(object, property, descriptor)
// Lisää tai muuta useita objektin ominaisuuksia
Object.defineProperties(object, descriptors)
// Käynti ominaisuuden
Object.getOwnPropertyDescriptor(object, property)
// Palauttaa kaikki ominaisuudet taulukkomuodossa
Object.getOwnPropertyNames(object)
// Palauttaa luettavissa olevat ominaisuudet taulukkomuodossa
Object.keys(object)
// Käynti prototyypin
Object.getPrototypeOf(object)
// Estää ominaisuuksien lisäämisen objektiin
Object.preventExtensions(object)
// Jos ominaisuuksia voidaan lisätä objektiin, palauttaa true
Object.isExtensible(object)
// Estää objektin ominaisuuksien muuttamisen (ei arvoja)
Object.seal(object)
// Jos objekti on suljettu, palauttaa true
Object.isSealed(object)
// Estää objektin muuttamisen
Object.freeze(object)
// Jos objekti on jäädytetty, palauttaa true
Object.isFrozen(object)

Ole hyvä ja ECMAScript5-objekti Lisätietoja.

Merkkijonon ominaisuuksien pääsy

charAt() Metodi palauttaa merkkijonon määritetyn indeksin (sijainnin) merkin:

Esimerkki

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

Kokeile itse

ECMAScript 5 sallii merkkijonon ominaisuuksien pääsyn:

Esimerkki

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

Kokeile itse

merkkijonon ominaisuuksien pääsy voi olla hieman ennustamaton.

Ole hyvä ja JS-merkkijonomenetelmät Lisätietoja.

Peräviivaa pilkkuja(Trailing Commas)

ECMAScript 5 sallii peräviivaa pilkkuja objektien ja taulukkojen määrittämisessä:

Object-esimerkki

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

Array-esimerkki

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

Varoitus！！！

Internet Explorer 8 kaatuu.

JSON ei salli peräviivaa pilkkuja.

JSON-objekti：

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

JSON-taulukko：

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

Useiden rivien merkkijono

Jos käytetään backslashia välttämään, ECMAScript 5 sallii useita rivejä merkkijonon teksteissä (lausekkeissa):

Esimerkki

"Hello \
Kitty!";

Kokeile itse

Backslash-metodi ei ehkä ole yleisesti tuettu.

Vanhemmat selaimet saattavat käsitellä välilyöntiä backslashin ympärillä eri tavoin.

Jotkut vanhat selaimet eivät salli välilyöntiä backslashin jälkeen.

Yksinkertaisempi ja turvallisempi tapa hajottaa merkkijono on käyttää merkkijonon lisäämistä:

Esimerkki

"Hello " + 
"Kitty!";

Kokeile itse

Säilytetyt sanat niminä

ECMAScript 5 sallii säilyttää sanat niminä:

Objekti-esimerkki

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

Kokeile itse

ES5 (ECMAScript 5) -selaimen tuki

Chrome 23, IE 10 ja Safari 6 ovat ensimmäiset selaimet, jotka tukevat täysin ECMAScript 5:ää:

Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15
syyskuu 2012 syyskuu 2012 huhtikuu 2013 Heinäkuu 2012 Heinäkuu 2013