Thủ thuật Javascript hay cần biết – Phần 1

Javascript hay JS là một trong những ngôn ngữ lập trình bá đạo nhất hiện nay, nó hiện diện trên hầu hết các ứng dụng web từ backend đến frontend. Hãy xem qua những thủ thuật hay mà chúng ta có thể thực hiện với javascript nhé.

Tạo hàm query DOM ngắn gọn hơn với bind

Có thể bạn thừa biết, JavaScript cung cấp phương thức document.querySelector() cho phép bạn query DOM dựa trên selector. Tuy nhiên, việc sử dụng phương thức này khá dài dòng. Ví dụ:

let ele1 = document.querySelector("#id1");
let ele2 = document.querySelector(".class2");
let ele3 = document.querySelector("div.user-panel.main input[name='login']");

Bạn có thể lợi dụng phương thức bind để rút gọn phương thức này:

let $ = document.querySelector.bind(document);

// Usage
let ele1 = $("#id1");
let ele2 = $(".class2");
let ele3 = $("div.user-panel.main input[name='login']");

 

Ở đây, mình đặt tên hàm mới là $, nên bạn nhìn thấy nó giống với jQuery, nhưng nhớ rằng đây vẫn chỉ là JavaScript thuần mà thôi.

Rút gọn hàm console.log

Tương tự như trên, bạn cũng có thể sử dụng bind để rút gọn phương thức console.log như sau:

let log = console.log.bind(document);
log('hello'); // => hello

Sao chép (clone) object

Mời bạn xem ví dụ sau:

let obj1 = {
  a: 1,
  b: 2
};

let obj2 = obj1;
console.log(obj2 === obj1); // => true

obj2.a = 10;
obj2.b = 20;
console.log(obj1.a, obj1.b); // => 10, 20

 

Bạn có thể thấy là obj2 thực chất là tham chiếu của obj1. Khi obj2 thay đổi thì obj1 cũng sẽ bị thay đổi. Để có thể clone object, tạo ra một object hoàn toàn mới, bạn có thể làm theo 2 cách sau:

Để có thể hoán đổi giá trị 2 biến số trong JavaScript, bạn có thể làm như sau:

Có hai cách để làm việc này:

  • ES5: sử dụng toán tử ||
  • ES6: hỗ trợ trực tiếp

Hàm random sau trả về một số ngẫu nhiên trong đoạn từ min đến max:

Bạn có thể sử dụng phương thức trim() hỗ trợ sẵn của string:

let str = "       Hello World!        ";
console.log(str)         // =>        Hello World!        
console.log(str.trim()); // => Hello World!

Trong trường hợp trình duyệt không hỗ trợ phương thức trên, bạn có thể sử dụng Regex:

function trim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}

let str = "       Hello World!        ";
console.log(str)         // =>        Hello World!        
console.log(trim(str));  // => Hello World!

Chuyển đối tượng arguments thành array

Hàm số trong JavaScript luôn có một đối tượng mặc định là arguments để quản lý tham số của hàm. Tuy nhiên, đối tượng này không phải là array nên bạn không thể sử dụng các phương thức như forEach, map,…

Để chuyển đối tượng này thành array, bạn có thể sử dụng một trong các cách sau:

let args = Array.prototype.slice.call(arguments);
let args = [].slice.call(arguments);

// ES2015
let args = Array.from(arguments);

Tìm max và min của các phần tử trong mảng

Nhiều bạn đưa mảng về rỗng bằng cách:

Bạn không nên sử dụng delete để loại bỏ một phần tử ra khỏi mảng. Hàm này không loại bỏ 1 phần tử ra khỏi mảng mà thay vào đó, nó làm cho giá trị của phần tử đó thành undefined và độ dài của mảng vẫn không thay đổi.

Giả sử bạn có các câu điều kiện sử dụng if như sau:

Ví dụ sau sử dụng map để trả về mảng mới với mỗi phần tử là bình phương của mỗi phần tử trong mảng ban đầu:

Có phải bạn thường sử dụng toán tử + để cộng (ghép) string, ví dụ:

Code khi sử dụng callback:

Có 3 cách nối mảng như sau:

Clone object:

let obj = {a: 1, b: 2};
let obj2 = {...obj};
console.log(obj2); // => {a: 1, b: 2};

Clone mảng:

let arr = [1, 2];
let arr2 = [...arr];
console.log(arr2); // => [1, 2];

Set key của object một cách linh động

Với cách thông thường:

Published by

Jacob Phạm

Đơn giản là một lập trình viên Fullstack với những đam mê Lập trình, tìm hiều công nghệ và chia sẻ kiến thức có được qua quá trình học tập và làm việc.