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ó hàng tá thủ thuật để thực hiện cả các nhiệm vụ từ cơ bản đến nâng cao. . Chúng ta hãy xem bảy thủ thuật JavaScript mà bạn có thể bắt đầu sử dụng ngay hôm nay!

Get 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

Khi 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 = >  { 
        // ... 
    } ) 
    // Loại bỏ các giá trị xấu 
    .filter( Boolean ) ;

Chỉ cần pass Boolean và tất cả những giá trị falsy sẽ bị loại bỏ!

Tạo đối tượng trống

Chắc chắn bạn có thể tạo một đối tượng rỗng {}, nhưng đối tượng đó vẫn có một phương thức đối tượng proto và usual hasOwnProperty và các phương thức khác. Tuy nhiên, có một cách để tạo một đối tượng thuần túy :

let dict = Object.create(null);

// dict .__ proto__ === "undefined" 
// Không có thuộc tính đối tượng nào tồn tại cho đến khi bạn thêm 

Hoàn toàn không có các key hoặc phương thức nào trên đối tượng mà bạn không đặt ở đó!

Hợp nhất các đối tượng

Nhu cầu hợp nhất nhiều đối tượng trong JavaScript đã xuất hiện từ lâu, đặc biệt là khi chúng tôi bắt đầu tạo các lớp và widget với các tùy chọn:

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",
}
*/

Ba dấu chấm đó giúp cho nhiệm vụ dễ dàng hơn nhiều!

Require Function Parameters

Có thể đặt các giá trị mặc định cho các đối số hàm là một bổ sung tuyệt vời cho JavaScript, nhưng hãy xem mẹo 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

Phá hủy cấu trúc là một bổ sung rất được hoan nghênh cho JavaScript nhưng đôi khi chúng tôi muốn đề cập đến các thuộc tính đó bằng một tên khác, vì vậy chúng tôi có thể tận dụng các bí danh:

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

Nó rất hữu dụng để 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

Trong nhiều năm, chúng ta đã viết các biểu thức chính quy để nhận các giá trị chuỗi truy vấn nhưng điều này sẽ không còn sau khi bạn biết được tip này - hãy nhập 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"

Dễ dàng hơn nhiều so với những cách thông thường chúng ta đã làm!

JavaScript đã thay đổi rất nhiều trong những năm qua, nhưng phần yêu thích của tôi về JavaScript ngày nay là tốc độ cải thiện ngôn ngữ mà chúng ta đang thấy. Mặc dù JavaScript thay đổi, chúng tôi vẫn cần sử dụng một vài thủ thuật hay.

Hãy note lại những tip này để dùng đến khi cần nhé

Bài viết gốc: 7 Useful JavaScript Tricks