Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 2)

Tái cấu trúc

Tái cấu trúc là quá trình tách array hoặc object bên trái của dấu bằng. Array hoặc object có thể đến từ một biến, chức năng, hoặc phương trình.

let [ a, b, c ] = [ 6, 2, 9];
console.log(`a=${a}, b=${b}, c=${c}`); //a=6, b=2, c=9
function foo() { return ['car', 'dog', 6 ]; } 
let [ x, y, z ] = foo();
console.log(`x=${x}, y=${y}, z=${z}`);  // x=car, y=dog, z=6

Với việc tái cấu trúc object, các key của object có thể được liệt kê bên trong dấu ngoặc nhọn để lấy ra cặp key-value đó. Xem ví dụ để hiểu rõ hơn:

function bar() { return {a: 1, b: 2, c: 3}; }
let { a, c } = bar();
console.log(a); // 1
console.log(c); // 3
console.log(b); // undefined

Đôi khi, bạn muốn lấy ra các giá trị nhưng gán chúng cho một biến mới. Điều này được thực hiện bằng cách sử dụng kết hợp cặp ‘key: variable’ ở bên trái dấu bằng.

function baz() { 
    return {
        x: 'car',
        y: 'London',
        z: { name: 'John', age: 21}
    }; 
}
let { x: vehicle, y: city, z: { name: driver } } = baz();
console.log(
    `I'm going to ${city} with ${driver} in their ${vehicle}.`
); // I'm going to London with John in their car.

Một điều khác là tái cấu trúc các object cho phép gán một giá trị cho nhiều biến.

let { x: first, x: second } = { x: 4 };
console.log( first, second ); // 4, 4

Tìm việc làm Javascript lương cao

Object Literals và thu gọn Parameters

Khi bạn đang tạo một object literal từ các biến, ES6 cho phép bạn bỏ qua key nếu nó cùng tên với biến.

let a = 4, b = 7;
let c = { a: a, b: b };
let concise = { a, b };
console.log(c, concise) // {a: 4, b: 7}, {a: 4, b: 7}

Điều này cũng có thể được sử dụng kết hợp với việc tái cấu trúc để làm cho code của bạn đơn giản hơn và sạch hơn.

function foo() {
    return {
        name: 'Anna', 
        age: 56,
       job: { company: 'Tesco', title: 'Manager' }
    };
} 
// pre ES6
let a = foo(), name = a.name, age = a.age, company = a.job.company;
// ES6 destructuring and concise parameters 
let { name, age, job: {company} = foo();

Nó cũng có thể được sử dụng để tái cấu trúc các object được truyền vào các function. Phương pháp 1 và 2 là cách bạn đã làm trước ES6, phương pháp 3 sử dụng tái cấu trúc và thu gọn params.

let person = {
    name: 'Anna', 
    age: 56,
    job: { company: 'Tesco', title: 'Manager' }
};
// method 1
function old1( person) {
    var yearOfBirth = 2018 - person.age;
    console.log( `${ person.name } works at ${ person.job.company } and was born in ${ yearOfBirth }.`);
}
// method 2
function old1( person) {
    var age = person.age,
        yearOfBirth = 2018 - age, 
        name = person.name,
        company = person.job.company;
    console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`);
} 
// method 3
function es6({ age, name, job: {company}) {
    var yearOfBirth = 2018 - age,
    console.log( `${ name } works at ${ company } and was born in ${ yearOfBirth }.`);
}

Sử dụng ES6, chúng ta có thể lấy ra giá trị của age, name và company  mà không cần khai báo thêm biến.

Dynamic Property Names

ES6 thêm khả năng tạo hoặc thêm thuộc tính với các key được gán một cách linh động.

let  city= 'sheffield_';
let a = {
    [ city + 'population' ]: 350000
};
a[ city + 'county' ] = 'South Yorkshire';
console.log(a); // {sheffield_population: 350000, sheffield_county: 'South Yorkshire' }

Arrow Functions =>

Arrow functions có hai lợi điểm: cấu trúc và thuộc tính this.

Chúng ta có thể có một cấu trúc đơn giản hơn nhiều so với các function truyền thống bởi vì chúng ta không cần từ khai báo từ khóa function, và tự động return kết quả sau dấu mũi tên (=>).

var foo = function( a, b ) {
    return a * b;
} 
let bar = ( a, b ) => a * b;

Nếu chức năng đòi hỏi nhiều hơn một tính toán đơn giản, dấu ngoặc nhọn có thể được sử dụng và function trả về kết quả bất kỳ từ block scope.

If the function requires more than a simple calculation, curly braces can be used and the function returns whatever is returned from the block scope.let baz = ( c, d ) => {
    let length = c.length + d.toString().length;
    let e = c.join(', ');
    Return `${e} and there is a total length of  ${length}`;
}

Một trong những khu vực hữu ích nhất của arrow function là nằm trong các hàm array như .map, .forEach hay .sort.

let arr = [ 5, 6, 7, 8, 'a' ];
let b = arr.map( item => item + 3 );
console.log(b); // [ 8, 9, 10, 11, 'a3' ]

Vòng lặp for … of

ES6 thêm một cách để lặp lại mỗi giá trị trong một array. Điều này khác hoàn toàn với vòng lặp for ... in đó là nó lặp trên key/index.

(Vòng lặp For..in tương tự như vòng lặp For cơ bản, nhưng có 1 điểm quan trọng là For..in có thể được dùng cho 1 biến kiểu đối tượng)

let a = ['a', 'b', 'c', 'd' ];
// ES6 
for ( var val of a ) {
    console.log( val );
} // "a" "b" "c" "d"
// pre-ES6 
for ( var idx in a ) {
    console.log( idx );
}  // 1 2 3 4

Sử dụng for … of sẽ đỡ phải thêm let val = a[idx] vào bên trong mỗi vòng lặp.

Các array, string, generator and collection đều có thể lặp trong JavaScript. Các đối tượng thường không thể lặp lại được, trừ khi bạn đã define lặp cho nó.

Number Literals

Code ES5 xử lý các định dạng số thập phân và số thập lục phân khá tốt, nhưng nó không hiểu được định dạng bát phân. Bình thường, nếu một số được bắt đầu bằng 0, thì javascript sẽ hiểu đó là hệ cơ số 8. Ví dụ 010 === 8 sẽ trả về giá trị là true. Tuy nhiên, không phải ai cũng biết đến điều đó, và cách viết 010 có thể sẽ khiến nhiều người vẫn hiểu đó là 10. Chính vì thế ở Strict Mode, nó đã bị coi là một lỗi cú pháp.

ES6 đã thêm một định dạng mới, bạn lại có thể dùng cách viết trên, với tiền tố là 0o. Tức dù là trong Strict Mode, nhưng var foo = 0o10 vẫn là một cách viết hợp lệ, và 0o10 === 8 sẽ trả ra kết quả là true.

Number( 29 )  // 29
Number( 035 ) // 35 in old octal form 
Number( 0o35 ) // 29 in new octal form 
Number( 0x1d ) // 29 in hexadecimal 
Number( 0b11101 ) // 29 in binary form

TopDev via Freecodecamp

>>> Xem thêm: Phần 1 : Mẹo với ES6 và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn.

Tìm việc làm IT mới nhất trên TopDev