Điểm qua những tính năng hấp dẫn trong ES6 - Phần 3

3 minute read

6.Arrow Function in ES6

Hmm..Tính năng này rất thường xuất hiện trong ReactJS. arrow dịch ra là mũi tên, vâng chúng ta sẽ làm việc với mũi tên :).

Thông thường khi tạo một function trong Javascript thì ta sử dụng những cách sau:

1//cách 1
2function nameFunction(var1,var2){
3  ...
4}
5
6// cách 2
7var nameFunction = function(var1, var2){
8  ....
9}

Trong ES6 ta tạo đơn giản hơn bằng cách sử dụng mũi tên như sau:

1var nameFunction = (var1,var2) => { //dosomething...};
2
3var echoName = (name) => { 
4  alert(name)
5};
6
7echoName("kane"); // nó sẽ alert ra kane
8
  • Khi funciton chỉ có một dòng lệnh, ta có thể viết như thế này cho gọn hơn.
1var echoName = (name) => alert(name);
2
3echoName("kane") // alert ra kane
4

Nghĩa là bạn có thể bỏ đi cặp dấu {}, điều này tuân thủ theo nguyên tắc “nếu bên thân cặp {} chỉ là một câu lệnh thì bạn có thể bỏ cặp {}”.

  • Khi function chỉ có một tham tham số, ta có thể viết ngắn gọn lại là:
 1var echoName = name => {
 2  alert(name);
 3}
 4
 5echoName("kane") // alert ra kane
 6
 7//Hoặc kết hợp cả tips ở trên thì ta có thể viết luôn như thế này
 8
 9var echoName1 = name => alert(name);
10
  • Khi function không có tham số:
1var sayHello = () => alert("Hello....!");
2
3sayHello(); // alert ra câu Hello....!
4
  • Ta Phải chú ý đến ràng buộc mũi tên => nữa nhá:
 1const func1 = (x,y) // sai
 2=> {
 3  return x + y;
 4};
 5
 6const func2 = (x,y) => // đúng
 7{
 8  return x - y;
 9};
10
11const func3 = (x,y) => {// đúng
12
13  return x * y;
14};
15
16const func4 = ( // đúng
17x,
18y
19) => {
20  return x / y;
21}

7. Destructuring Assignment in ES6

Cú pháp Destructuring Assignment là một biểu thức Javascript mà nó có thể giải nén các giá trị từ `array` hoặc thuộc tính từ một `object` vào những biến riêng biệt.

 1var a, b, rest;
 2[a, b] = [10, 20];
 3
 4console.log(a);
 5// expected output: 10
 6
 7console.log(b);
 8// expected output: 20
 9
10[a, b, ...rest] = [10, 20, 30, 40, 50];
11
12console.log(rest);
13// expected output: [30,40,50]
14

Nếu để ... trước một biến thì khi bị tràn giá trị như ví dụ cuối thì biến rest nó sẽ lấy hết phần giá trị bị tràn.

Còn nhiều tips nữa như có thể: swap variable, ignoring some returned values bạn nào muốn tìm hiểu thêm thì vào đây

8. Modules in ES6

Nếu bạn nào đang học ReactJS thì sẽ thường sử dụng tính năng này này, lúc ta ta quản lý từng module như một component, mình cũng mới học thôi nên hiểu sao nói vậy.

Trước ES6 JavaScript không hỗ trợ module. Mọi người thường sử dụng AMD, RequireJS, CommonJS và nhiều cái khác. Bây giờ trong ES6 bạn có thể sử dụng các import và export.

Hãy xem ví dụ chúng ta có một biến port và phương thức getAccounts trong filemodule.js ES5:

1
2module.exports = {
3  port: 3000,
4  getAccounts: function() {
5    ...
6  }
7}
8

Trong file main.js ES5 chúng ta require(‘module.js) là dependency:

1
2var service = require('module.js')
3console.log(service.port) // 3000
4

Với ES6 chúng ta import và export như sau, ở file module.js:

1export var port = 3000
2export function getAccounts(url) {
3  ...
4}
5

Trong file main.js

1import {port, getAccounts} from 'module'
2console.log(port) // 3000
3

Hoặc ta muốn import hết những gì đã export trong file module.js thì:

1import * as service from 'module'
2console.log(service.port) // 3000