Apakah itu es6 dan es5

ECMAScript ialah bahasa pengaturcaraan skrip yang diseragamkan oleh Ecma International melalui ECMA-262 Nama penuh es6 ialah ECMAScript 6, iaitu versi keenam bagi es5 ialah ECMAScript 5, iaitu versi kelima ECMAScript .

Persekitaran pengendalian tutorial ini: sistem Windows 7, komputer Dell G3.

ECMAScript ialah bahasa pengaturcaraan skrip yang diseragamkan oleh Ecma International melalui ECMA-262. Bahasa ini digunakan secara meluas di World Wide Web Ia sering dipanggil JavaScript atau JScript, jadi ia boleh difahami sebagai standard untuk JavaScript, tetapi sebenarnya dua yang terakhir adalah pelaksanaan dan sambungan standard ECMA-262.

Apakah itu ES5

Sebagai versi kelima ECMAScript (versi keempat telah ditinggalkan kerana terlalu rumit), sokongan penyemak imbas boleh dilihat dalam gambar pertama .

1. mod ketat

Mod ketat, hadkan beberapa penggunaan, 'gunakan ketat';

2 >

Menambah setiap, beberapa, forEach, filter, indexOf, lastIndexOf, isArray, map, reduce, reduceRight kaedah PS: Terdapat kaedah lain Function.prototype.bind, String.prototype.trim, Date.now

3. Kaedah Objek

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object . defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.keys / Object.isSealed

Object.freeze / Object.isFrozen

PS: Hanya bercakap tentang apa yang ada, bukan apa itu.

Apakah itu ES6

ECMAScript6 menyediakan sejumlah besar ciri baharu sambil memastikan keserasian ke bawah adalah seperti berikut: Ciri ES6 adalah seperti berikut:

1. Kata kunci skop peringkat blok let, const malar

2. Nilai sifat trengkas objek literal (nilai harta trengkas)

3. Tugasan dan penyahbinaan

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Method definitions
    toString() {
    // Super calls
    return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

4 Parameter fungsi - nilai lalai, pembungkusan parameter, pengembangan tatasusunan (Lalai, Rehat, Spread)

let singer = { first: "Bob", last: "Dylan" };
let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan"
let [all, year, month, day] =  /^(dddd)-(dd)-(dd)$/.exec("2015-10-25");
let [x, y] = [1, 2, 3]; // x = 1, y = 2

5 fungsi Anak panah

//Default
function findArtist(name='lu', age='26') {
    ...
}
//Rest
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6
//Spread
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

(1).

(2) Mengikat semantik ini secara automatik, iaitu, ini apabila mentakrifkan fungsi. Seperti dalam contoh di atas, ini digunakan dalam parameter fungsi tanpa nama forEach.

6. Templat rentetan Rentetan templat

7 Iterator untuk..dari

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// return "Hello Bob, how are you today?"

Pelajar mempunyai kaedah seterusnya, panggilan akan kembali:

(1). Kembalikan elemen objek lelaran: { done: false, value: elem }

(2). : benar, nilai: retVal }

8.Penjana

for (var n of ['a','b','c']) {
  console.log(n);
}
// 打印a、b、c

9.Kelas

Kelas mempunyai pembina, memanjang, dan super, tetapi ia pada dasarnya adalah gula sintaksis (ia tidak mempunyai kesan ke atas fungsi bahasa, tetapi ia lebih mudah untuk digunakan oleh pengaturcara).

10.Modul

class Artist {
    constructor(name) {
        this.name = name;
    }
    perform() {
        return this.name + " performs ";
    }
}
class Singer extends Artist {
    constructor(name, song) {
        super.constructor(name);
        this.song = song;
    }
    perform() {
        return super.perform() + "[" + this.song + "]";
    }
}
let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true
james.perform(); // "Etta James performs [At last]"

Fungsi modul terbina dalam ES6 menggunakan kelebihan masing-masing CommonJS dan AMD: (1 Dengan sintaks CommonJS yang diperkemas dan unik eksport Ciri-ciri eksport tunggal dan kebergantungan kitaran. (2). Sama seperti AMD, ia menyokong pemuatan tak segerak dan pemuatan modul boleh dikonfigurasikan.

11.Map Set WeakMap WeakSet Terdapat empat jenis koleksi

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));
Module Loaders:
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});
// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

objek WeakMap dan WeakSet sebagai kunci sifat akan dikitar semula dan dikeluarkan jika tiada pembolehubah lain merujuk kepada mereka.

12. API Objek Tatasusunan Nombor Matematik

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

Beberapa API baharu

13.

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })

Gunakan proksi (Proksi) Dengar kepada pengendalian objek dan kemudian lakukan beberapa perkara yang sepadan.

Operasi yang boleh dipantau: get, set, has, deleteProperty, apply, construct, getOwnPropertyDescriptor, defineProperty, getPrototypeOf, setPrototypeOf, enumerate, ownKeys, preventExtensions, isExtensible.

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};
var p = new Proxy(target, handler);
p.world === 'Hello, world!';

14.Simbol Simbol ialah jenis asas. Simbol dijana dengan memanggil fungsi simbol, yang menerima parameter nama pilihan Simbol yang dikembalikan oleh fungsi ini adalah unik.

15 Janji

var key = Symbol("key");
var key2 = Symbol("key");
key == key2  //false

Janji ialah objek yang mengendalikan operasi tak segerak Selepas menggunakan objek Promise, anda boleh menggunakan kaedah panggilan berantai untuk mengatur kod. Jadikan kod lebih intuitif (serupa dengan objek tertunda jQuery).

Ringkasan

function fakeAjax(url) {
  return new Promise(function (resolve, reject) {
    // setTimeouts are for effect, typically we would handle XHR
    if (!url) {
      return setTimeout(reject, 1000);
    }
    return setTimeout(resolve, 1000);
  });
}
// no url, promise rejected
fakeAjax().then(function () {
  console.log('success');
},function () {
  console.log('fail');
});

Untuk ES6, adakah ia akan mengulangi kesilapan ES4 dalam beberapa cara dan menjadi lebih rumit Atau mungkin penerimaan semua orang akan menjadi lebih kuat selepas beberapa tahun sepatutnya. Saya rasa ia agak bagus, kerana ia serasi ke belakang Walaupun anda tidak tahu cara menggunakan sintaks yang kompleks, anda masih boleh menggunakan kaedah yang anda biasa gunakan, dan gula sintaks yang mereka sediakan agak praktikal. Artikel ini agak panjang, jadi saya tamatkan di sini. Artikel ini bertujuan untuk bercakap tentang apa yang ada, dan ia sepatutnya merangkumi kebanyakan kandungan, tetapi tidak ada analisis terperinci Sesetengah kandungan berasal dari bahan dalam talian, jadi saya tidak akan menyenaraikannya satu per satu.

Pembelajaran yang disyorkan: Tutorial video JS

Atas ialah kandungan terperinci Apakah itu es6 dan es5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!