Rumah > Artikel > hujung hadapan web > Apakah es6 berasal?
es6 telah dikeluarkan pada Jun 2015. Nama penuh es6 ialah "ECMAScript6". Ia adalah standard bahasa JavaScript yang dikeluarkan secara rasmi pada bulan Jun 2015. Ia secara rasmi dipanggil ECMAScript2015 (ES2015) Oleh kerana ia adalah versi ke-6 ECMAScript, ia boleh dirujuk sebagai es6.
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
Pengenalan kepada "es"
Nama penuh es ialah "ECMAScript", iaitu bahasa skrip universal yang dilaksanakan mengikut ECMA- 262 standard, ECMA-262 standard Ia terutamanya menetapkan sintaks, jenis, pernyataan, kata kunci, perkataan terpelihara, operator, objek dan bahagian lain dalam bahasa Versi terbaru ECMAScript pada masa ini ialah ECMAScript6 (dirujuk sebagai "ES6").
Setiap kali anda melihat ES diikuti dengan nombor, ia adalah versi ECMAScript yang berbeza.
es6/ ES2015
Nama penuh es6 ialah ECMAScript6 (versi ke-6 ECMAScript Ia adalah bahasa JavaScript yang dikeluarkan secara rasmi Jun 2015. standard, secara rasmi dipanggil ECMAScript 2015 (ES2015). Matlamatnya adalah untuk membolehkan bahasa JavaScript digunakan untuk menulis aplikasi berskala besar yang kompleks dan menjadi bahasa pembangunan peringkat perusahaan.
ECMAScript 6 pada asasnya telah menjadi standard industri, dan popularitinya jauh lebih pantas daripada ES5 Sebab utama ialah penyemak imbas moden menyokong ES6 dengan cepat, terutamanya pelayar Chrome dan Firefox, yang sudah menyokong kebanyakan ciri.
Ciri baharu ES6:
1 let, const dan skop blok
let membenarkan penciptaan Skop tahap blok. , ES6 mengesyorkan menggunakan let untuk mentakrifkan pembolehubah dalam fungsi dan bukannya var:
var a = 2; { let a = 3; console.log(a); // 3 } console.log(a); // 2
Kaedah pengisytiharan pembolehubah lain yang juga sah dalam skop peringkat blok ialah const, yang boleh mengisytiharkan pemalar. Dalam ES6, pemalar yang diisytiharkan oleh const adalah serupa dengan penunjuk Ia menunjuk kepada rujukan, yang bermaksud bahawa "pemalar" ini tidak boleh diubah, seperti:
{ const ARR = [5,6]; ARR.push(7); console.log(ARR); // [5,6,7] ARR = 10; // TypeError }
Terdapat beberapa perkara yang perlu diperhatikan:
Fungsi Anak Panah
Dalam ES6, fungsi anak panah ialah singkatan fungsi Parameter dibalut dalam kurungan, diikuti dengan =>, diikuti oleh badan fungsi:
var getPrice = function() { return 4.55; }; // Implementation with Arrow Function var getPrice = () => 4.55;
Perlu diambil perhatian bahawa. , Fungsi anak panah getPrice dalam contoh di atas menggunakan badan fungsi ringkas, yang tidak memerlukan pernyataan pulangan Contoh berikut menggunakan badan fungsi biasa:
let arr = ['apple', 'banana', 'orange']; let breakfast = arr.map(fruit => { return fruit + 's'; }); console.log(breakfast); // apples bananas oranges
Sudah tentu, fungsi anak panah bukan sahaja membuat. code simpler , ini dalam fungsi sentiasa terikat dan sentiasa menunjuk ke objek itu sendiri. Untuk contoh khusus, anda boleh melihat contoh berikut:
function Person() { this.age = 0; setInterval(function growUp() { // 在非严格模式下,growUp() 函数的 this 指向 window 对象 this.age++; }, 1000); } var person = new Person();
Kita selalunya perlu menggunakan pembolehubah untuk menyimpan ini, dan kemudian merujuknya dalam fungsi growUp:
function Person() { var self = this; self.age = 0; setInterval(function growUp() { self.age++; }, 1000); }
Menggunakan fungsi anak panah boleh menjimatkan keperluan Masalah ini:
function Person(){ this.age = 0; setInterval(() => { // |this| 指向 person 对象 this.age++; }, 1000); } var person = new Person();
3 Nilai lalai parameter fungsi
ES6 membolehkan anda menetapkan nilai lalai untuk parameter fungsi. :
let getFinalPrice = (price, tax=0.7) => price + price * tax; getFinalPrice(500); // 850
4. Operator Spread / Rest
Operator Spread / Rest merujuk kepada..., sama ada Spread atau Rest bergantung pada konteks.
Apabila digunakan dalam iterator, ia ialah operator Spread:
function foo(x,y,z) { console.log(x,y,z); } let arr = [1,2,3]; foo(...arr); // 1 2 3
Apabila digunakan dalam parameter fungsi, ia ialah operator Rehat:
function foo(...args) { console.log(args); } foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
5. Sambungan leksikal objek
ES6 membenarkan penggunaan sintaks trengkas apabila mengisytiharkan literal objek untuk memulakan kaedah definisi pembolehubah atribut dan fungsi, dan membenarkan takrif kaedah dalam sifat objek Laksanakan operasi pengiraan:
function getCar(make, model, value) { return { // 简写变量 make, // 等同于 make: make model, // 等同于 model: model value, // 等同于 value: value // 属性可以使用表达式计算值 ['make' + make]: true, // 忽略 `function` 关键词简写对象函数 depreciate() { this.value -= 2500; } }; } let car = getCar('Barret', 'Lee', 40000); // output: { // make: 'Barret', // model:'Lee', // value: 40000, // makeBarret: true, // depreciate: [Function: depreciate] // }
6 literal binari dan oktal
ES6 menyokong literal binari dan oktal dengan menambah 0o atau 0O di hadapan nombor, iaitu Ia boleh ditukar kepada nilai perlapanan:
let oValue = 0o10; console.log(oValue); // 8 let bValue = 0b10; // 二进制使用 `0b` 或者 `0B` console.log(bValue); // 2
7 Pemusnahan objek dan tatasusunan
Pemusnahan boleh mengelakkan penjanaan pembolehubah perantaraan semasa penetapan objek:
function foo() { return [1,2,3]; } let arr = foo(); // [1,2,3] let [a, b, c] = foo(); console.log(a, b, c); // 1 2 3 function bar() { return { x: 4, y: 5, z: 6 }; } let {x: x, y: y, z: z} = bar(); console.log(x, y, z); // 4 5 6<.>
8. Kelas super objek
ES6 membenarkan penggunaan kaedah super dalam objek:var parent = { foo() { console.log("Hello from the Parent"); } } var child = { foo() { super.foo(); console.log("Hello from the Child"); } } Object.setPrototypeOf(child, parent); child.foo(); // Hello from the Parent // Hello from the Child
9 🎜>Terdapat cara yang sangat ringkas dalam ES6 untuk memasang sekumpulan rentetan dan pembolehubah.
${ ... } digunakan untuk menjadikan pembolehubah
let user = 'Barret'; console.log(`Hi ${user}!`); // Hi Barret!
for...of digunakan untuk melintasi iterator, seperti tatasusunan:
for...in digunakan untuk melintasi objek Atribut dalam:
let nicknames = ['di', 'boo', 'punkeye']; nicknames.size = 3; for (let nickname of nicknames) { console.log(nickname); } // 结果: di, boo, punkeye11. Peta dan WeakMap
let nicknames = ['di', 'boo', 'punkeye']; nicknames.size = 3; for (let nickname in nicknames) { console.log(nickname); } Result: 0, 1, 2, size
Dua set baharu struktur data dalam ES6: Peta dan Peta Lemah. Malah setiap objek boleh dilihat sebagai Peta.
Sesuatu objek terdiri daripada berbilang pasangan kunci-val Dalam Peta, sebarang jenis boleh digunakan sebagai kunci objek, seperti:WeakMap
var myMap = new Map(); var keyString = "a string", keyObj = {}, keyFunc = function () {}; // 设置值 myMap.set(keyString, "value 与 'a string' 关联"); myMap.set(keyObj, "value 与 keyObj 关联"); myMap.set(keyFunc, "value 与 keyFunc 关联"); myMap.size; // 3 // 获取值 myMap.get(keyString); // "value 与 'a string' 关联" myMap.get(keyObj); // "value 与 keyObj 关联" myMap.get(keyFunc); // "value 与 keyFunc 关联"WeakMap ialah A Map, tetapi semua kuncinya adalah rujukan yang lemah, yang bermaksud bahawa perkara dalam WeakMap tidak akan dipertimbangkan semasa pengumpulan sampah, jadi anda tidak perlu risau tentang kebocoran memori semasa menggunakannya.
另一个需要注意的点是,WeakMap 的所有 key 必须是对象。它只有四个方法 delete(key),has(key),get(key) 和set(key, val):
let w = new WeakMap(); w.set('a', 'b'); // Uncaught TypeError: Invalid value used as weak map key var o1 = {}, o2 = function(){}, o3 = window; w.set(o1, 37); w.set(o2, "azerty"); w.set(o3, undefined); w.get(o3); // undefined, because that is the set value w.has(o1); // true w.delete(o1); w.has(o1); // false
12. Set 和 WeakSet
Set 对象是一组不重复的值,重复的值将被忽略,值类型可以是原始类型和引用类型:
let mySet = new Set([1, 1, 2, 2, 3, 3]); mySet.size; // 3 mySet.has(1); // true mySet.add('strings'); mySet.add({ a: 1, b:2 });
可以通过 forEach 和 for...of 来遍历 Set 对象:
mySet.forEach((item) => { console.log(item); // 1 // 2 // 3 // 'strings' // Object { a: 1, b: 2 } }); for (let value of mySet) { console.log(value); // 1 // 2 // 3 // 'strings' // Object { a: 1, b: 2 } }
Set 同样有 delete() 和 clear() 方法。
WeakSet
类似于 WeakMap,WeakSet 对象可以让你在一个集合中保存对象的弱引用,在 WeakSet 中的对象只允许出现一次:
var ws = new WeakSet(); var obj = {}; var foo = {}; ws.add(window); ws.add(obj); ws.has(window); // true ws.has(foo); // false, foo 没有添加成功 ws.delete(window); // 从结合中删除 window 对象 ws.has(window); // false, window 对象已经被删除
13. 类
ES6 中有 class 语法。值得注意是,这里的 class 不是新的对象继承模型,它只是原型链的语法糖表现形式。
函数中使用 static 关键词定义构造函数的的方法和属性:
class Task { constructor() { console.log("task instantiated!"); } showId() { console.log(23); } static loadAll() { console.log("Loading all tasks.."); } } console.log(typeof Task); // function let task = new Task(); // "task instantiated!" task.showId(); // 23 Task.loadAll(); // "Loading all tasks.."
类中的继承和超集:
class Car { constructor() { console.log("Creating a new car"); } } class Porsche extends Car { constructor() { super(); console.log("Creating Porsche"); } } let c = new Porsche(); // Creating a new car // Creating Porsche
extends 允许一个子类继承父类,需要注意的是,子类的constructor 函数中需要执行 super() 函数。
当然,你也可以在子类方法中调用父类的方法,如super.parentMethodName()。
在 这里 阅读更多关于类的介绍。
有几点值得注意的是:
14. Symbol
Symbol 是一种新的数据类型,它的值是唯一的,不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符,不过你访问不到这个标识符:
var sym = Symbol( "some optional description" ); console.log(typeof sym); // symbol
注意,这里 Symbol 前面不能使用 new 操作符。
如果它被用作一个对象的属性,那么这个属性会是不可枚举的:
var o = { val: 10, [ Symbol("random") ]: "I'm a symbol", }; console.log(Object.getOwnPropertyNames(o)); // val
如果要获取对象 symbol 属性,需要使用Object.getOwnPropertySymbols(o)。
15. 迭代器(Iterators)
迭代器允许每次访问数据集合的一个元素,当指针指向数据集合最后一个元素时,迭代器便会退出。它提供了 next() 函数来遍历一个序列,这个方法返回一个包含 done 和 value 属性的对象。
ES6 中可以通过 Symbol.iterator 给对象设置默认的遍历器,无论什么时候对象需要被遍历,执行它的 @@iterator 方法便可以返回一个用于获取值的迭代器。
数组默认就是一个迭代器:
var arr = [11,12,13]; var itr = arr[Symbol.iterator](); itr.next(); // { value: 11, done: false } itr.next(); // { value: 12, done: false } itr.next(); // { value: 13, done: false } itr.next(); // { value: undefined, done: true }
你可以通过 [Symbol.iterator]() 自定义一个对象的迭代器。
16. Generators
Generator 函数是 ES6 的新特性,它允许一个函数返回的可遍历对象生成多个值。
在使用中你会看到 * 语法和一个新的关键词 yield:
function *infiniteNumbers() { var n = 1; while (true){ yield n++; } } var numbers = infiniteNumbers(); // returns an iterable object numbers.next(); // { value: 1, done: false } numbers.next(); // { value: 2, done: false } numbers.next(); // { value: 3, done: false }
每次执行 yield 时,返回的值变为迭代器的下一个值。
17. Promises
ES6 对 Promise 有了原生的支持,一个 Promise 是一个等待被异步执行的对象,当它执行完成后,其状态会变成 resolved 或者rejected。
var p = new Promise(function(resolve, reject) { if (/* condition */) { // fulfilled successfully resolve(/* value */); } else { // error, rejected reject(/* reason */); }});
每一个 Promise 都有一个 .then 方法,这个方法接受两个参数,第一个是处理 resolved 状态的回调,一个是处理 rejected 状态的回调:
p.then((val) => console.log("Promise Resolved", val), (err) => console.log("Promise Rejected", err));
【相关推荐:javascript视频教程、web前端】
Atas ialah kandungan terperinci Apakah es6 berasal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!