7 thủ thuật JavaScript hữu ích

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ĩ:

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:

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:

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

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:

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

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:

// 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