Hướng dẫn ES2017

ECMAScript là tiêu chuẩn dựa trên JavaScript và nó thường được viết tắt thành ES. Khám phá mọi thứ về ECMAScript và các tính năng được thêm vào ES2017, hay còn gọi là ES8

ECMAScript 2017, ấn bản 8 của Tiêu chuẩn ECMA-262 (còn thường được gọi làES2017hoặc làES8), was finalized in June 2017.

So với ES6, ES8 là một bản phát hành nhỏ cho JavaScript, nhưng nó vẫn giới thiệu các tính năng rất hữu ích:

  • Chuỗi đệm
  • Object.values()
  • Object.entries()
  • Object.getOwnPropertyDescriptors()
  • Dấu phẩy theo sau trong danh sách tham số hàm và lệnh gọi
  • Hàm không đồng bộ
  • Bộ nhớ dùng chung và nguyên tử

Chuỗi đệm

Mục đích của đệm chuỗi là đểthêm các ký tự vào một chuỗi, do đó, nóđạt đến độ dài cụ thể.

ES2017 giới thiệu haiStringphương pháp:padStart()vàpadEnd().

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

Sử dụng mẫu:

padStart ()
'test'.padStart (4) 'kiểm tra'
'test'.padStart (5) ' kiểm tra'
'test'.padStart (8) ' kiểm tra'
'test'.padStart (8,' abcd ') 'abcdtest'
padEnd ()
'test'.padEnd (4) 'kiểm tra'
'test'.padEnd (5) 'kiểm tra '
'test'.padEnd (8) 'kiểm tra '
'test'.padEnd (8,' abcd ') 'testabcd'

Object.values ()

Phương thức này trả về một mảng chứa tất cả các giá trị thuộc tính của riêng đối tượng.

Sử dụng:

const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values()cũng hoạt động với mảng:

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

Object.entries ()

Phương thức này trả về một mảng chứa tất cả các thuộc tính của riêng đối tượng, dưới dạng một mảng[key, value]cặp.

Sử dụng:

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries()cũng hoạt động với mảng:

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

getOwnPropertyDescriptors ()

Phương thức này trả về tất cả các bộ mô tả thuộc tính riêng (không kế thừa) của một đối tượng.

Bất kỳ đối tượng nào trong JavaScript đều có một tập hợp các thuộc tính và mỗi thuộc tính này có một bộ mô tả.

Bộ mô tả là một tập hợp các thuộc tính của một thuộc tính và nó được cấu tạo bởi một tập hợp con của các thuộc tính sau:

  • giá trị: giá trị của tài sản
  • có thể ghi được: true, thuộc tính có thể được thay đổi
  • được: một hàm getter cho thuộc tính, được gọi khi thuộc tính được đọc
  • bộ: một hàm setter cho thuộc tính, được gọi khi thuộc tính được đặt thành một giá trị
  • có thể cấu hình: nếu sai, không thể xóa thuộc tính cũng như không thể thay đổi bất kỳ thuộc tính nào, ngoại trừ giá trị của nó
  • liệt kê được: true nếu thuộc tính có thể liệt kê

Object.getOwnPropertyDescriptors(obj)chấp nhận một đối tượng và trả về một đối tượng với tập hợp các bộ mô tả.

Điều này hữu ích theo cách nào?

ES6 đã cho chúng tôiObject.assign(), sao chép tất cả các thuộc tính có thể liệt kê từ một hoặc nhiều đối tượng và trả về một đối tượng mới.

Tuy nhiên, có một vấn đề với điều đó, bởi vì nó không sao chép chính xác các thuộc tính với các thuộc tính không phải mặc định.

Nếu một đối tượng chẳng hạn chỉ có một bộ định vị, nó không được sao chép chính xác sang một đối tượng mới, bằng cách sử dụngObject.assign().

Ví dụ với

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

Điều này sẽ không hoạt động:

const person2 = {}
Object.assign(person2, person1)

Nhưng điều này sẽ hoạt động:

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

Như bạn có thể thấy với một bài kiểm tra bảng điều khiển đơn giản:

person1.name = 'x'
"x"

person2.name = ‘x’


person3.name = ‘x’
“x”

person2bỏ lỡ setter, nó không được sao chép qua.

Hạn chế tương tự cũng xảy ra đối với các đối tượng nhân bản nông vớiObject.create().

Dấu phẩy ở cuối

Tính năng này cho phép có dấu phẩy ở cuối trong khai báo hàm và trong các lệnh gọi hàm:

const doSomething = (var1, var2,) => {
  //...
}

doSomething(‘test2’, ‘test2’,)

Thay đổi này sẽ khuyến khích các nhà phát triển ngừng thói quen xấu xí “dấu phẩy ở đầu dòng”.

Hàm không đồng bộ

Kiểm tra bài đăng chuyên dụng vềasync / await

ES2017 đã giới thiệu khái niệm vềchức năng không đồng bộvà đó là thay đổi quan trọng nhất được giới thiệu trong ấn bản ECMAScript này.

Các hàm không đồng bộ là sự kết hợp của các lời hứa và bộ tạo để giảm bớt phần tạo sẵn xung quanh các lời hứa và giới hạn “không phá vỡ chuỗi” của các lời hứa chuỗi.

Tại sao chúng hữu ích

Đó là một sự trừu tượng ở cấp độ cao hơn những lời hứa.

Khi Promises được giới thiệu trong ES6, chúng nhằm giải quyết một vấn đề với mã không đồng bộ và chúng đã làm được, nhưng trong 2 năm tách biệt ES6 và ES2017, rõ ràng làlời hứa không thể là giải pháp cuối cùng. Hứa hẹn đã được giới thiệu để giải quyết các nổi tiếngđịa ngục gọi lạivấn đề, nhưng họ đã tự giới thiệu độ phức tạp và độ phức tạp cú pháp. Chúng là những nguyên thủy tốt để các nhà phát triển có thể sử dụng một cú pháp tốt hơn: enterchức năng không đồng bộ.

Một ví dụ nhanh

Việc tạo mã sử dụng các hàm không đồng bộ có thể được viết dưới dạng

function doSomethingAsync() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('I did something'), 3000)
    })
}

async function doSomething() {
console.log(await doSomethingAsync())
}


console.log(‘Before’)
doSomething()
console.log(‘After’)

Đoạn mã trên sẽ in nội dung sau vào bảng điều khiển của trình duyệt:

Before
After
I did something //after 3s
Multiple async functions in series


Async functions can be chained very easily, and the syntax is much more readable than with plain promises:


function promiseToDoSomething() {
    return new Promise((resolve)=>{
        setTimeout(() => resolve('I did something'), 10000)
    })
}

async function watchOverSomeoneDoingSomething() {
const something = await promiseToDoSomething()
return something + ’ and I watched’
}


async function watchOverSomeoneWatchingSomeoneDoingSomething() {
const something = await watchOverSomeoneDoingSomething()
return something + ’ and I watched as well’
}


watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
console.log(res)
})



Shared Memory and Atomics


WebWorkers are used to create multithreaded programs in the browser.


They offer a messaging protocol via events. Since ES2017, you can create a shared memory array between web workers and their creator, using a SharedArrayBuffer.


Since it’s unknown how much time writing to a shared memory portion takes to propagate, Atomics are a way to enforce that when reading a value, any kind of writing operation is completed.


Any more detail on this can be found in the spec proposal, which has since been implemented.

  



More js tutorials:

Công nghệ Wiki trực tuyến!