CÁC TÍNH NĂNG HỮU ÍCH CHO LẬP TRÌNH JAVASCRIPT TRONG ES6 – PHẦN 1

A – Destructuring (gán nhiều biến rút ruột array / object)

Cáu trúc ngắn gọn dùng để gán cho 1 hoặc nhiều biến giá trị của các phần tử trong mảng hoặc object. Các ứng dụng gồm:

1/ Khai báo/ gán nhanh nhiều biến cho các giá trị bằng phần tử của mảng, object

// aray
let numbers = [1, 2, 3];
let [a, b, c] = numbers;
console.log(a, b, c);  //  1  2  3
 
// object
let person = { name: 'Captain America', age: 97 };
let {name, age} = person;
console.log (name, age);  //  Captain America 97

2/ Tráo giá trị của 2 (hoặc nhiều) biến

let a = 1, b = 3;
[a, b] = [b, a];
console.log (a, b); // 3 1

3/ Lấy giá trị con của object là tham số của hàm

let user = { 
  id: 42, 
  fullName: { 
    firstName: 'John',
    lastName: 'Doe'
  }
};
 
function userId ( { id } ) {
    return id;
}
 
function firstName ( { fullName: { firstName: name } } ) {
    return name;
}
console.log (` userId = ${ userId(user) } & firstname = ${ firstName(user) } `);
// userId = 42 & firstname = John

4/ Dùng trong vòng lặp (for var of)

let people = [
  {
    name: 'Mike Smith',
    family: {
        mother: 'Jane Smith',
        father: 'Harry Smith',
        sister: 'Samantha Smith'
    },
    age: 35
  },
 
  {
    name: 'Tom Jones',
    family: {
        mother: 'Norah Jones',
        father: 'Richard Jones',
        brother: 'Howard Jones'
    },
    age: 25
  }
];
 
for  ( let  {name: n, family: {father: f}}   of   people ) {
     console.log ( `Name:  ${n},  Father:  ${ f} `);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

5/ Giá trị mặc định khi gán biến

var [a, b, c=0, d ] = [ 1, 2 ];
console.log(a, b, c, d); // 1 2 0 undefined
 
var { name: myName = "unknown player", age: myAge } = { age: 12 };
console.log(myName, myAge); // "unknown player" 12

6/ Lưu ý quan trọng

Khi chỉ gán mà không khai báo (var, let, const) biến cho các gái trị con của một object, cần bọc dòng lệnh trong 2 dấu ngoặc để cấu trúc Javascript không bị biên dịch nhầm gây lỗi.

//-- good 
let a, b;
({a, b} = {a: 1, b: 2});
 
// bad (bug)
let a, b;
{a, b} = {a: 1, b: 2};

B – Ký hiệu mở rộng “…”, dùng cho Array và Object (spread operator)

Dùng để viết gọn các thao tác sử dụng cho các đối tượng như Array, Object, Arguments của hàm. Các ứng dụng gồm:

1/ Dùng cho phần tham số của định nghĩa hàm

function concatenateAll(...args) {
     return args.join('-');
}
console.log( concatenateAll(1,2,3,4,5) ); // 1-2-3-4-5
console.log( concatenateAll(1,2,3) );  // 1-2-3

2/ Dùng cho việc truyền tham số từ một mảng vào hàm nhận nhiều tham số

let numbers = [9, 4, 7, 1];
console.log( Math.min(...numbers) );  // 1
 
** Ứng dụng cho việc tìm số nhỏ / lớn nhất trong array

3/ Copy mảng (nông)

let arr = [1,2,3];
let arr2 = [...arr]; // like arr.slice()
arr2.push(4);
console.log(arr2 ); // Array [1, 2, 3, 4]

4/ Nối các array với nhau

let arr1 = [2, 3];
 
let arr2 = [ 1, ...arr1, 4, 5];
console.log( arr2 );  // Array [1, 2, 3, 4, 5]
 
let arr3 = [...arr1, ...arr2];
console.log( arr3 );  // Array [2, 3, 1, 2, 3, 4, 5]

5/ Copy object

let obj1 = { foo: 'bar', x: 42 };
let clonedObj = { ...obj1 };    
console.log(clonedObj);  // Object { foo: "bar", x: 42 }

6/ Trộn object với nhau

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let mergedObj = { ...obj1, ...obj2 };   
console.log(mergedObj);  // Object { foo: "baz", x: 42, y: 13 }

** Chú ý, các thuộc tính chung của các object được trộn vào sẽ có giá trị của object cuối cùng trong khai báo sau ký hiệu mở rộng “…”

7/ Sử dụng trong destructuring

let { a, b, ...d } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(d); // Object { c: 3, d: 4 }

8/ Convert chuỗi thành mảng

const str = "hello";
const strChar = [...str];
console.log(strChar); // Array ["h", "e", "l", "l", "o"]

9/ Chú ý quan trọng

Không thể dùng ký hiệu mở rộng để convert từ array sang object và ngược lại

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Nhấn để đánh giá bài viết!

[Số đánh giá: 0 Trung bình: 0]

PROGRAMMING