Các syntax quan trọng trong ES6/7 cho React / React Native

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
'syntax-async-functions' ,
'syntax-class-properties' ,
'syntax-trailing-function-commas' ,
'transform-class-properties' ,
'transform-es2015-function-name' ,
'transform-es2015-arrow-functions' ,
'transform-es2015-block-scoping' ,
'transform-es2015-classes' ,
'transform-es2015-computed-properties' ,
'check-es2015-constants' ,
'transform-es2015-destructuring' ,
[ 'transform-es2015-modules-commonjs' , { strict : false , allowTopLevelThis : true } ] ,
'transform-es2015-parameters' ,
'transform-es2015-shorthand-properties' ,
'transform-es2015-spread' ,
'transform-es2015-template-literals' ,
'transform-es2015-literals' ,
'transform-flow-strip-types' ,
'transform-object-assign' ,
'transform-object-rest-spread' ,
'transform-react-display-name' ,
'transform-react-jsx' ,
'transform-regenerator' ,
[ 'transform-es2015-for-of' , { loose : true } ] ,
require ( '../transforms/transform-symbol-member' )
|
Khai báo biến với var, let, và const
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// var cho phép chúng ta khai báo lại 1 biến cũ, nhưng let thì không
var n = 1 ;
var n = 2 ; // no syntax error
let m = 1 ;
let m = 2 ; // syntax error
// var và let đều tác động vào function block như nhau, tuy nhiên ở trường hợp này let sẽ chỉ tác động vào block ngay sau nó:
function someFunc ( ) {
for ( let i = 0 ; i <= 9 ; i ++ ) {
// Biến i lúc này chỉ tồn tại trong scope block của for
}
// Gọi biến i ngoài này sẽ bị lỗi
}
function someFunc ( ) {
for ( var i = 0 ; i <= 9 ; i ++ ) {
// Biến i lúc này không chỉ tồn tại trong scope block của for
}
// mà còn tồn tại cả ở ngoài này nữa, lúc này biến i = 10
}
|
Arrow function
1
2
3
4
5
|
Basic syntax củ a Arrow function : ( param1 , param2 , … , paramN ) = > { statements }
( param1 , param2 , … , paramN ) = > expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function Pet ( ) {
this . age = 1 ;
function showAgeFunc ( ) {
alert ( 'Age in showAgeFunc: ' + this . age ) ; // Age in showAgeFunc: undefined
}
const showAgeArrowFunc = ( ) = > {
alert ( 'Age in showAgeArrowFunc: ' + this . age ) ; // Age in showAgeFunc: 1
}
setTimeout ( showAgeFunc , 1000 ) ;
setTimeout ( showAgeArrowFunc , 1000 ) ;
}
new Pet ( ) ;
|
Module import / export
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
//// File CurrencyConverter.js
const rate = 22650.0 ; // Private in file
// export for public use
export const bankName = 'ACB' ;
export const vnd2dollar = ( vnd ) = > vnd / rate ;
// export mặc định
export default dollar2vnd = ( dolla ) = > dolla * rate ;
//// File Other.js
import Convert from './CurrencyConverter' ;
//Convert chính là hàm dollar2vnd được export mặc định
alert ( Convert ( 10 ) ) ; // 226500
//// File Another.js
import Convert , { vnd2dollar , bankName } from './CurrencyConverter' ;
// Import thêm vnd2dollar và bankName trong file CurrencyConverter.js
alert ( Convert ( 10 ) ) ; // 226500
alert ( vnd2dollar ( 226500 ) ) ; // 10
|
Function Parameter: default và rest
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// url và method có giá trị mặc định nếu không được truyền vào khi gọi function.
const requestURL = ( url = ‘’ , method = 'GET' ) = > {
} ;
requestURL ( ) ; // url = '', method = 'GET'
requestURL ( 'http://facebook.com/' ) ; // url = 'http://facebook.com/', method = 'GET'
const requestURLWithParams = ( url = ‘’ , method = 'GET' , . . . params ) = > {
// params là array chứa giá trị các tham số thứ 3 trở đi
}
requestURLWithParams ( ) ; // params = []
requestURLWithParams ( 'someURL' , 'GET' , 'a' , 1 , { } ) ; // params = ['a', 1, {}]
|
Object/Array Matching, Short Hand Notation
1
2
3
4
5
6
7
8
9
10
11
|
let arr = [ 1 , 2 , 3 ] ;
let [ n , , m ] = arr ; // n = 1, m = 3
console . log ( n , m ) ; // 1, 3
let person = { name : 'Viet Tran' , age : 28 , interestedIn : 'Coding' } ;
let { name , age } = person ; // name = 'Viet Tran', age = 28
console . log ( name , age ) ; // 'Viet Tran', 28
let { name , job = 'some job' } = person ; // nếu person không có thuộc tính job thì job = 'some job' như một giá trị mặc định
|
Spread Operator
1
2
3
4
5
6
7
8
9
10
|
let arr = [ 1 , 2 , 3 ] ;
let someArr = [ . . . arr , 4 ] ; // [1,2,3,4], ...arr gọi là spread operator
let thatArr = [ 4 , . . . arr ] ; // [4,1,2,3], tương tự nhưng chỉ khác vị trí các thành phần.
let p1 = { x : 0 , y : 1 } ;
let p2 = { . . . p1 , z : 1 } ; // { x: 0, y: 1, z: 1 }
let p3 = { . . . p2 , y : 2 } // { x: 0, y: 2, z: 1 }, update y nếu y đã có.
let p4 = { y : 3 , . . . p3 } // { y : 2, x: 0, z: 1}, không update y vì nguyên tắc phía sau override phía trước
|
String interpolation
1
2
3
4
5
6
7
8
9
|
const number = 10 ;
const str = 'number = ' + 10 ; // đây là cách cũ thường được dùng trong ES5
const str = ` number = $ { number } ` // đây là cách mới trong ES6
const str = ` number + 1 = $ { number + 1 } // chúng ta có thể sử dụng expression trong '{}'
const str = ` Some string ` ; // chuỗi bình thường cũng xài được
|
Classes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
class SomeObject { }
let obj = new SomeObject ( ) ; // tạo biến obj là đối tượng của SomeObject
// Các biến và hàm trong class không cần khai báo với từ khoá var/let/constant/function
class Pet {
// biến trong class
food = ` something eatable ` ;
// Hàm (method) trong class
eat ( ) {
console . log ( 'I can eat ${ this.food }' ) ;
}
// Hàm khởi tạo (constructor) cho class Pet
constructor ( name , age ) {
this . name = name ;
this . age = age ;
}
}
let myPet = new Pet ( 'Beo' , 2 ) ;
console . log ( myPet ) ; // object { food: 'something eatable', name: 'Beo', age: 1 }
myPet . eat ( ) ; // I can eat something eatable
// Khai báo class Cat kế thừa từ class Pet
class Cat extends Pet {
static numberOfLegs = 4 ; // biến static trong class
// Hàm static trong class
static lazy ( ) {
console . log ( ` All cats are lazy ` ) ;
}
constructor ( name , age ) {
super ( name , age ) ; // gọi lên hàm dựng của parent class: Pet
this . food = ` fishes ` ;
}
}
let myCat = new Cat ( ) ;
myCat . eat ( ) ; // I can eat fishes. Hàm eat được kế thừa từ class cha (Pet)
console . log ( Cat . numberOfLegs ) ; // 4
Cat . lazy ( ) ; // All cats are lazy
|
Promise và parallel promise
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const doSomething = ( err ) = > {
return new Promise ( ( resolve , reject ) = > {
setTimeout ( ( ) = > {
if ( err ) {
reject ( err ) ;
} else {
resolve ( 10 ) ;
}
} , 1000 ) ;
} ) ;
}
doSomething ( ) . then ( result = > {
console . log ( result ) ; // print `10` after 1s
} ) . catch ( err = > {
console . log ( err ) ;
} ) ;
doSomething ( ` Something went wrong ` ) . then ( result = > {
console . log ( result ) ;
} ) . catch ( err = > {
console . log ( err ) ; // print `Something went wrong` after 1s
} ) ;
|
then
như một middleware, ở mỗi bước then
ta có thể return để làm tham số cho hàm then
tiếp theo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
doSomething ( ) . then ( result = > {
console . log ( result ) ; // 10
return result * 2 ;
} ) . then ( result = > {
console . log ( result ) ; // 20
return { n : result }
} ) . then ( result = > {
console . log ( result ) ; // { n : 20 }
} )
. catch ( err = > {
console . log ( err ) ;
} ) ;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const doSomething = ( result , timeout ) = > {
console . log ( result , timeout ) ;
return new Promise ( ( resolve , reject ) = > {
setTimeout ( ( ) = > {
resolve ( result ) ;
} , timeout ) ;
} ) ;
}
Promise . all ( [
doSomething ( ` OK ` , 2000 ) ,
doSomething ( 100 , 5000 )
] ) . then ( data = > {
console . log ( data ) ; // print ['OK', 100] after 5s
let [ first , second ] = data ;
console . log ( first , second ) ; // 'OK', 100
} , err = > {
console . log ( er ) ;
} ) ;
|
Async và Await
1
2
3
4
5
6
7
8
9
10
11
12
|
async function doTask ( ) { // có thể dùng `aync () => {` để thay thế
let result = await doSomething ( 100 , 3000 ) ;
console . log ( result ) ; // print 100 after 3s
let nextResult = await doSomething ( 20 , 2500 ) ;
console . log ( nextResult ) // print 20 after 5.5s
}
doTask ( ) ;
console . log ( ` Run here first ` ) ; // dòng này in trước khi doTask() chạy
|
Run here first
sẽ được in ra đầu tiên. Trong function doTask, từ khoá await sẽ khiến doSomething chạy như synchronize (block thread hiện tại để đợi kết quả).Kết
Có thể bạn chưa biết:
- Series Javascript sida – Promise – hứa thật nhiều thất hứa thật nhiều
- Học React.js trong 5 phút
- Framework AI của Facebook sẵn sàng ra mắt người dùng, tích hợp sẵn với Google Cloud, AWS và Azure Machine Learning
- Internet và các khái niệm cơ bản
- Backlink tự nhiên
- Android Architecture Patterns (phần 2): Model-View-Presenter
- Hồn ma coder
- Phần mềm xuất, nhập khẩu qua mạng internet có thuộc phạm vi điều chỉnh của Luật Hải quan?
- Thống kê của Nielsen: top 10 thương hiệu công nghệ của Mỹ và xu hướng dùng app thay cho web
- Giới thiệu về Promise trong Javascript
- 3 câu lệnh hữu ích trong Javascript mà bạn nên biết
- Developer: Chúng tôi không có khái niệm đi “xin việc”?
DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...
Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…
Quý khách xem Hồ sơ năng lực của DVMS tại đây >>
Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>