Cũng giống như mọi ngôn ngữ lập trình khác, JavaScript có nhiều thủ thuật để thực hiện cả các task. Một số thủ thuật được biết đến rộng rãi :
Nhận các giá trị duy nhất của một mảng
Có được một mảng các giá trị duy nhất có thể dễ dàng hơn bạn nghĩ:
1 2 3 | var j = [...new Set([1, 2, 3, 3])] >> [1, 2, 3] |
Array và Boolean
Bao giờ cần phải lọc các giá trị falsy ( 0, undefined, null, false, vv) ra khỏi một mảng? Bạn có thể chưa biết thủ thuật này:
1 2 3 4 5 6 7 | myArray .map(item => { // ... }) // Get rid of bad values .filter(Boolean); |
Tạo Objects trống
Chắc chắn bạn có thể tạo một Object rỗng vớI {}, nhưng Object đó vẫn có giá trị proto, hasOwnProperty thông thường và các phương thức đối tượng khác. Tuy nhiên, có một cách để tạo một đối tượng “dictionary” thuần túy:
1 2 3 4 5 | let dict = Object.create(null); // dict.__proto__ === "undefined" // Không có thuộc tính cho object trừ khi bạn thêm chúng |
Hợp nhất các objects
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */ |
Require Function Parameters
Có thể đặt các giá trị mặc định cho các đối số hàm, nhưng hãy xem thủ thuật này để yêu cầu các giá trị được truyền cho một đối số đã cho:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; // This will throw an error because no name is provided hello(); // This will also throw an error hello(undefined); // These are good! hello(null); hello('David'); |
Destructuring Aliases
1 2 3 4 5 6 7 8 | const obj = { x: 1 }; // Grabs obj.x as { x } const { x } = obj; // Grabs obj.x as { otherName } const { x: otherName } = obj; |
Rất hữu ích để tránh xung đột đặt tên với các biến hiện có!
Nhận tham số chuỗi truy vấn
Chúng ta thường dùng nhiều biểu thức để lấy giá trị query string, nhưng giờ có thể dễ dàng hơn nhờ URLSearchParams API:
1 2 3 4 5 6 7 8 9 10 | // Assuming "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" |
Tham khảo tại đây