Ba chấm trong javascript

Jul 3, 2021 • ngocnhan2003

threedots.jpg

Chắc hẳn mọi dev lúc chơi với javascript các bạn sẽ bắt gặp dấu 3 chấm (…), đó là cú pháp mới trong ES6 và ta có thể hiểu … được dùng với hai mục đích reset parameter và spread

1. Spread

  • Sao chép mảng

Đây là phương pháp clone một array ra một vùng nhớ mới, hoàn toàn tách biệt với biến array cũ, khác biệt với cách dùng .slice() chỉ tạo ref các phần tử cho biến mới.

Cú pháp:

let array1 = ['h', 'e', 'l', 'l', 'o'];
let array2 = [...array1];

console.log(array1);
// ['h', 'e', 'l', 'l', 'o']
console.log(array2);
// ['h', 'e', 'l', 'l', 'o']

array1[0] = 'b'
console.log(array1);
// ['b', 'e', 'l', 'l', 'o']
console.log(array2);
// ['h', 'e', 'l', 'l', 'o']
  • Kết hợp mảng
const hoa = ['Hong', 'Huong Duong'];
const qua = ['Cam', 'Chanh'];

const ketHop = [...hoa, 'hello', ...qua];

console.log(ketHop); // ['Hong', 'Huong Duong', 'hello', 'Cam', 'Chanh']
  • Nhân bản nông: Shallow-cloning (excluding prototype)
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
  • Hợp nhất đối tượng: Merging of Object (Object.assign())
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

2. Rest Parameter - Lưu tham số chưa biết trước

Cái này thì hưu ích khỏi bàn, vì đôi lúc ta không xác định được một function sẽ nhận được bao nhiêu paramaster đầu vào, vì thế ta có thể dùng … để “giam” những tham số chưa định nghĩa vào một array mới:

Cú pháp:

function myFunc(a, b, ...args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);

Ví dụ dễ hiểu bài toán tính tổng:

function tinhTong(...cacSo){
  return cacSo.reduce((tong, so)=>{
      return tong += so;
    });
}

tinhTong(1,2)
// 3
tinhTong(1,2,3,4)
// 10

RECENT POSTS