Một vài điều nho nhỏ nhưng thú vị trong ES7 & ES8
Javascript
265
es7
2
es8
1
White

Thành Minh viết ngày 25/01/2018

Mỗi năm thì lại có một bản ECMAScript được thêm vào, cùng với đó là thêm kha khá tính năng mới, bài viết này sẽ kể đến một vài tính năng nhỏ nhưng khá là hay trong ES7 và ES8.

alt

Object.entries

Method này trả về 1 mảng dựa trên property [key, value] của Object được đưa vào, chẳng hạn:

// String
Object.entries('circle') // [["0","c"],["1","i"],["2","r"],["3","c"],["4","l"],["5","e"]]

// Object
Object.entries({ 'j': 'e', 'r': 'k'}) // [["j","e"],["r","k"]]

Object.values

Method này trả về 1 mảng dựa trên property value của Object đó, ví dụ:

// String
Object.values('Bareback') // ["B", "a", "r", "e", "b", "a", "c", "k"]

// Array
Object.values([6, 6, 6]) // [6, 6, 6]

// Object
Object.values({ 'q': 23, 'w': 25, 'e': 27 }) // [23, 25, 27]

// Đặc biệt
Object.values({ 1: 'a', 2: 'b', 0: 1 }) // [1, "a", "b"]

String.prototype.padStart & padEnd

2 method này nhận 2 param: targetLengthpadString, nó có nhiệm vụ là thêm string padString vào string gốc với độ dài chỉ định là targetLength, nó sẽ tiếp tục thêm padString nếu như string mới có độ dài < targetLength.
Sự khác nhau của 2 method chỉ khác là padStart sẽ thêm vào phía trái, còn padEnd thì ở bên phải, ví dụ:

// Thêm string 'hi' vào trước string '' và chỉ định độ dài string trả về là 6.
''.padStart(6, 'hi') // 'hihihi'

// Thêm 'agging' vào sau 'Teab'.
'Teab'.padEnd(10, 'agging') // 'Teabagging'

// Viết như thế này sẽ nhận được 'abcdef' 
// vì 'abcdef' có độ dài bằng 6 và bằng targetLength.

'def'.padStart(6, 'abc') // 'abcdef'

/* Nếu ta thay đổi targetLength = 9 thì ta sẽ nhận string trả về là 'abcabcdef' vì sau khi thêm 'abc' 
vào trước 'def', string mới là 'abcdef' có độ dài = 6 < 9, vì vậy string mới sẽ tiếp tục thêm 'abc' 
vào để có độ dài = targetLength.
*/

'def'.padStart(9, 'abc') // 'abcabcdef'

'qwert'.padStart(10, 'abc') // 'abcabqwert'

Array.prototype.includes

Method này sẽ kiểm tra giá trị được đưa vào có trùng với mảng ban đầu hay không, nếu có thì return true và ngược lại.

['Rina Ishihara', 'Asuka Ichinose', 'Kirara Asuka'].includes('Kirara Asuka') 
// true

['Ava Taylor', 'Karla Kush', 'Brooklyn Chase'].includes('Johnny Sins') 
// false

Nó cũng tương tự như khi ta dùng method indexOf để kiểm tra vị trí của element trong Array, nếu bằng -1 thì không tồn tại và ngược lại vậy.

Lũy thừa

Với các phiên bản trước, để tính lũy thừa thì ta làm thế này:

// 6^3
Math.pow(6, 3) // 216

Với ES7 & ES8 thì có thể viết gọn thế này:

6 ** 3 // 216

Dấu , sau các tham số của hàm

Định nghĩa thông số (Parameter definitions)

Có dấu phẩy , đằng sau sẽ không ảnh hưởng gì đến độ dài của parameter, ví dụ:

function fn(param1, param2,) {}
// Cũng như
function fn(param1, param2) {}

(param1, param2,) => {};
// Cũng như
(param1, param2) => {};

Nó cũng hoạt động với method trong Class hoặc là trong Object

class C {
  one(a,) {},
  two(a, b,) {},
}

var obj = {
  one(a,) {},
  two(a, b,) {},
};

Gọi hàm

fn(param1, param2,) {}
// Tương đương
fn(param1, param2) {}

// Chúng ta cũng có thể áp dụng với các global objects có sẵn trong Javascript:
Math.max(10, 20);
Math.max(10, 20,);

Trường hợp lỗi

Có 2 trường hợp không được chấp nhận, đó là khi mà hàm không có param nào:

function fn(,) {} // SyntaxError: missing formal parameter
(,) => {};       // SyntaxError: expected expression, got ','
fn(,)             // SyntaxError: expected expression, got ','

và sử dụng sau rest parameter :

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','

Tổng kết

Trên là một vài tính năng nhỏ nhưng khá thú vị trong ES7 và ES8 tới, còn một vài tính năng nữa như là Async / Await, Shared Memory & Atomics,... nhưng mà nó không "nhỏ" nên mình không đưa vào, nhìn chung với một vài method mới trong Array, String với Object như trên thì cũng giúp cho ta đơn giản hóa kha khá thứ để làm.

Bài viết gốc: Một vài điều nho nhỏ nhưng thú vị trong ES7 & ES8

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Thành Minh

6 bài viết.
40 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
33 22
1. Các thư viện cần dùng Thư viện (Link) để xử lí file Zip. Thư viện (Link) để xử lí file Rar. Thư viện (Link), thư viện rarfile bắt buộc đi kèm v...
Thành Minh viết hơn 1 năm trước
33 22
White
26 3
V8 hay còn gọi là Chrome V8, là một Javascript engine được phát triển bởi Chromium Project, mục đích ban đầu là dành cho Google Chrome nói riêng và...
Thành Minh viết 11 tháng trước
26 3
White
4 6
Node.js vốn là một nền tảng chạy trên môi trường V8 JavaScript, một trình thông dịch JavaScript vốn nằm trong trình duyệt Chrome, engine này vốn đư...
Thành Minh viết 1 năm trước
4 6
Bài viết liên quan
White
35 3
1. Giới thiệu Với các đặc tả JavaScript cũ, ta phải sử dụng các hàm phản hồi để xử lý các thao tác bất đồng bộ. Tuy nhiên việc này dẫn tới tình tr...
dominhhai viết 2 năm trước
35 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
40 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!