1 vài điều thú vị có thể bạn chưa biết về javascript ES6
This post hasn't been updated for 7 years
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/
Hoán đổi biến trong ES6
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
Debugging
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
Định nghĩa 1 method siêu ngắn chỉ trong 1 dòng
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
Nối array lại với nhau
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]);
Tạo bản sao cho 1 object hoặc 1 array
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
}
Đặt tên cho tham số truyền vào trong method
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});
kết luận
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.
All Rights Reserved