Một vài điều nho nhỏ nhưng thú vị trong ES7 & ES8
Javascript
247
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.
38 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
31 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 1 năm trước
31 22
White
21 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 7 tháng trước
21 3
White
3 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 9 tháng trước
3 6
Bài viết liên quan
White
43 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
43 8
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
38 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á!