ES6 LÀ GÌ? TỔNG QUAN THÔNG TIN VỀ ES6 KHÔNG NÊN BỎ LỠ

  -  

lúc tiếp cận cùng với ngôn ngữ javascript chắc hẳn chúng ta cũng đã từng tìm đến ES6, ES7 ... Vậy ES6, ES7 là gì với tuấn kiệt, cú pháp sử dụng nó như nào?

1. ES6, ES7 là gì?

ES6, ES7 là nhì trong những đầy đủ phiên phiên bản của chuẩn ECMAScript. Rõ ràng hơn thì ECMAScript là tiêu chuẩn chỉnh còn Javascript là ngôn ngữ xây dựng.

Bạn đang xem: Es6 là gì? tổng quan thông tin về es6 không nên bỏ lỡ


*

Lưu ý: Lời khuyên: Dùng const cho tất cả knhì báo phát triển thành vị đã hạn chế trường đúng theo “vô tình” biến hóa quý hiếm của thay đổi. Chỉ dùng let trong trường phù hợp bất khả chống, và né tránh xa var.

2.2 Arrow Functions

Arrow Functions (Hàm mũi tên) – Một dạng knhị báo hàm rút ít gọn vào javascript vào JavaScript.

Bình thường xuyên bọn họ knhị báo hàm dạng:

function dude() console.log("hey dude") Nhưng đối với ES6 chúng ta có thể khai báo hàm nhỏng sau

const dude = () => console.log("hey dude") Đối với hàm gồm ttê mê số:

const dude = (name, age) => console.log(name + " is " + age) Đối với mọi hàm có một tsay đắm số thì ta hoàn toàn có thể bỏ vết ngoặc solo đi:

const dude = name => console.log("hey " + name) Với hàm mũi thương hiệu vào ES6, cực hiếm của this chính là this trong tầm vực gần nhất cùng với nó (lexical this)..

function App() this.count = 0 setInterval(() => console.log(this.count++), 1000)Nếu tất cả sử dụng đến this thì hàm mũi thương hiệu khôn cùng hữu dụng. Trường vừa lòng không dùng thì…cũng có lợi luôn do mã nguồn nhỏ gọn dễ nhìn đọc rộng. Với đa số ngôi trường hợp bạn có nhu cầu bao đóng góp quý giá của this chỉ gói gọn trong hàm của nó, sử dụng function.

Implicit returns

const implicit = () => truetương ứng với hàm

function implicit() return true

2.3 Destructuring

Destructuring - giúp họ bóc tách trở nên từ trực thuộc tính của đối tượng người dùng tuyệt thành phần trong những đối tượng rất có thể chu đáo với for, như mảng hoặc chuỗi.

ví dụ như:

person = first: "Amber", last: "Wilkie" const first, last = person food = <"hotdog", "soda">const = foodconst person = name: "Amber", favorites: food: "French fries", place: "Ghent" const food, place = person.favorites // bóc tách biến đổi tự ở trong tính của đối tượngRenaming destructured variables

const food: favoriteFood, place: favoritePlace = person.favoriteshiện giờ chúng ta cũng có thể áp dụng trở thành favoriteFood == "French fries".

Default values with reassignment

Giống nhỏng với những có mang hàm, chúng ta có thể đặt những cực hiếm mang định cho những thay đổi phân rã

const game = time: "15:30", place: "East field", manager: "Roy" const time, place, manager, hotdogs = 0 = gamengơi nghỉ trên, các vươn lên là đã có gán lại các quý hiếm với hotdogs == 0.

Easily swap variables

Đổi vị trí các biến chuyển nhưng ko phải sử dụng những vươn lên là nhất thời thời

person1 = "Jeff"person2 = "Susan" = khi này person2 == "Jeff" và person1 == "Susan"

Automatically destructure information returned from a function

function twoOperations(num) return const = twoOperations(5)Vấn đề này đặc biệt quan trọng có ích khi họ mong mỏi mang một đối tượng người sử dụng trường đoản cú API.

Destructure as you pass an object into lớn a function

const fullName = (first, last) => `$first $last`fullName(first: "Amber", last: "Wilkie")lúc bọn họ truyền đối tượng người tiêu dùng vào hàm, nó đang tự động phân chảy thành các thay đổi first cùng last .bọn họ cũng rất có thể dùng:

const fullName = (first, last = "Anonymous") => first + " " + lastfullName(first: "Amber")hiệu quả trả về vẫn là: "Amber Anonymous".

The spread operator

const jewelry = <"ring", "necklace">const electronics = <"tv", "ipad">const valuables = <...jewelry, ...electronics>// valuables == <"ring", "necklace", "tv", "ipad">Chúng ta không nên biết mỗi mảng có bao nhiêu thành phần và cũng ko nên dùng vòng lặp với cũng ko đề nghị .push().

2.4 Template literals

Chuỗi phiên bản mẫu (template strings) là chuỗi chân phương thơm (string literals) tuy vậy có thể chấp nhận được đính kèm biểu thức. Nó cũng có thể chấp nhận được knhì báo chuỗi trên nhiều chiếc. Để áp dụng, bạn dùng cam kết từ backtichồng ` (dấu huyền).

Xem thêm: Tên Đó Rốt Cuộc Có Gì Tốt /他到底有什么好, Tên Đó Rốt Cuộc Có Gì Tốt

Nếu ko cần sử dụng ES6 thì

function myDetails(name, age, city) console.log(name + " is " + age + " & lives in " + city) // hơi cạnh tranh chú ý cùng cũng cạnh tranh codeCòn đối với ES6 thì

function myDetails(name, age, city) console.log(`$name is $age và lives in $city`)so sánh nhị đoạn code trên chúng ta cũng có thể thấy khi sử dụng Template literals của ES6 thì đoạn code của chúng ta vẫn đẹp với sạch sẽ rộng.

Lưu ý: Dùng Template literals lúc bọn họ buộc phải thêm biểu thức tuyệt chuỗi tất cả văn bản sinh hoạt nhiều cái. Còn lại thì vẫn sử dụng chuỗi bình thường với " tuyệt "

2.5 Loops

for / in Lặp một mẳng tuần tự

const cities = <"Gbg", "Stockholm", "Oslo">for (const city in cities) console.log(city)for / of có kết cấu tương tự như như for / in nhưng for-in vẫn phát âm các key của array và for-of sẽ phát âm các value của array kia. Chúng ta rất có thể cần sử dụng continue, break, trong for-of giống như với for.

const cities = <"Gbg", "Stockholm", "Oslo">for (const thành phố of cities) console.log(city)Chúng ta có thể cần sử dụng continue, break, trong for-of giống như với for.

*

*

Nếu bọn họ bắt buộc truy vấn vào chỉ mục thì sẽ áp dụng cú pháp bên dưới đây

for (var of cities.entries()) console.log(đô thị, index) for / of hoàn toàn có thể hoạt động bên trên bất kỳ vòng lặp nào, không những là mảng nhưng cònnode lists, arguments, ... .

2.6 Array methods

ES6 đã hỗ trợ mang đến họ một số cách tiến hành siêu tiện dụng khi thao tác cùng với array (mảng). Trong nội dung bài viết này bọn họ thuộc tò mò một số những cách làm sau.

Array.from(): là cách thức chất nhận được họ đem một vài object với tạo nên một mảng new từ bỏ đó.

const listItems = document.querySelectorAll("li")Array.from(listItems)// Array.from(listItems, listItem.value => value*2)Array.of(): là thủ tục được cho phép họ sản xuất những mảng tự các giá trị nhưng chúng ta chỉ định như thể những arguments.

Array.of("Chocolate", listItems, 135) => <"Chocolate", NodeList(91), 135>array.find() là một trong những cách tiến hành vẫn chỉ tra cứu bộ phận thứ nhất thỏa mãn điều kiện tiến hành callback function

const array = <1, 2, 3>array.find( num => num % 2 == 0 ).findIndex() bạn cũng có thể dùng cách làm này để mang ra chỉ mục. Trong trường đúng theo ko tất cả phần tử làm sao của mảng thỏa mãn ĐK thì .findIndex() đã trả về cực hiếm là -1

2.7 Classes

ES6 mang đến cú pháp new góp tạo nên lớp trực tiếp và dễ dãi hơn.

class Circle extends Shape //Constructor constructor(address) console.log(address) //Methods getArea () return Math.PI * 2 * this.radius //Calling superclass methods expvà (n) return super.expand(n) * Math.PI //Static methods static buildingMaterials() return < "wood", "brick", "plaster", "stone"> Với ES6, nó cũng đã cung cấp cho chúng ta áp dụng từ khóa extends nhằm kế thừa từ đối tượng khác.

class Apartment extends House constructor(tenants) super() this.tenants = tenants super() - viết với cú pháp nlỗi này thì là gọi lại constructor của lớp phụ thân.

ES6 cũng cung cấp chúng ta cấu hình thiết lập các setter và getter cho các trực thuộc tính.

Xem thêm: Chơi Game Đấu Vật Wwe Champions Trên Máy Tính ) Và Mac Bằng Giả Lập

class House constructor(address) this.address = address mix (windows, number) return this = number; get (windows) return this Ở bài viết này đang chỉ ra một vài những bản lĩnh, cú pháp bổ ích của ES6. Với ES6 cùng những phiên phiên bản cao hơn nữa đã giúp cho việc thiết kế cùng với ngôn từ javascript đơn giản và dễ dàng, sạch đẹp rộng.