1 vài điều thú vị có thể bạn chưa biết về javascript ES6

ES6 có rất nhiều điều kỳ diệu dưới đây mình sẽ ví dụ cho các bạn 1 vài điều nhỏ nhặt mà ít người biết tới về ngôn ngữ ảo diệu này. Các bạn hãy chọn lựa sử dụng ES2017 Link online để test https://es6console.com/ hoặc https://codepen.io/

Sử dụng mảng để hoán đổi các giá trị

let a = 'world', b = 'hello';
[a, b] = [b, a];
console.log(a); // -> hello
console.log(b); // -> world

https://es6console.com/jaqj5l14/ Kết quả trên cho thấy thật kỳ lạ rõ ràng 2 biết a và b đã bị gán đổi giá trị cho nhau

Nếu các bạn muốn tiết kiệm consolog để xem hết các biến thì đây sẽ là một cách tuyệt vời để consolog tất cả giá trị

const a = 5, b = 6, c = 7;
console.log({ a, b, c });
// Kết quả hiển thị
Object {
  a: 5,
  b: 6,
  c: 7
}

Hiển thị như trên sẽ khiến bạn nhìn trực quan hơn với kết quả các biến của mình

Thay vì bạn phải viết dài dòng

function max(arr) {
	return Math.max(...arr);
}

console.log(max([123, 321, 231]));

Một cách tối ưu hơn để sửa đổi lại

const max = (arr) => Math.max(...arr);
console.log(max([123, 321, 231])) // outputs: 321

Thay vì bạn phải sử dụng concatenation để nối các array với cách cũ

const one = ['a', 'b', 'c']
const two = ['d', 'e', 'f']

console.log(one.concat(two));

Bạn có thể sử dụng Spread Operator để làm điều đó một cách trơn tuột

const one = ['a', 'b', 'c']
const two = ['d', 'e', 'f']

console.log([...one, ...two]);

const obj = { a:1, b:2, c:3 }
const cloneObj = {...obj}

console.log(cloneObj)

// Outputs
Object {
  a: 1,
  b: 2,
  c: 3
}

Tuy nhiên điều kỳ diệu là nếu bạn thay đổi đối tượng ban đầu thì bản sao của nó cũng được thay đổi theo và không có chiều ngược lại

const obj = { a:1, b:2, c:3 }
obj.a = 4
const cloneObj = {...obj}

console.log(cloneObj)
// Outputs
Object {
  a: 4,
  b: 2,
  c: 3
}

const obj = { a:1, b:2, c:3 }
const cloneObj = {...obj}
cloneObj.a = 4;

console.log(obj)
// Outputs
Object {
  a: 1,
  b: 2,
  c: 3
}

Với kiểu viết các tham số trong method

const getStuffNotBad = (id, name, age) => {
  console.log({id, name, age});
}
// WTF không muốn truyền "name" thì phải làm sao nhỉ ???
getStuffNotBad(150, 'david', 23)

Cách viết hay và rõ ràng hơn hãy đặt tên rõ rang cho tham số

const getStuffAwesome = ({ id, name, age}) => {
  console.log({id, name, age});
}

// Awesome good -(-
getStuffAwesome({id: 5, age: 23});

ES6 còn rất nhiều điều kỳ diệu, trên đây là một số vấn đề có thể các bạn sẽ gặp phải khi làm việc với nó. Hi vọng bài viết phần nào mang lại kiến thức và giúp ích cho các bạn khi làm việc với javascript.