Hi các bạn, tiếp tục chuỗi chủ đề bàn luận về JavaScript hôm nay mình sẽ tiếp tục chia sẻ đến các bạn các thủ thuật khi làm việc cùng JS để tối ưu hóa hiệu suất công việc cũng như tạo các "helpers" xịn xò nhất để sẵn sàng đánh chiếm các dự án lớn. Cụ thể như nào thì hãy cùng kéo xuống dưới để tìm hiểu cùng mình nhé (go)
1. Lọc các giá trị unique trong mảng
Trong ES6 đã giới thiệu đến Set, ẻm này có tác dụng loại bỏ các giá trị trùng lặp trong mảng, kết hợp với spread operator bạn có thể tạo ra 1 mảng mới gồm những giá trị unique
const myArray = ['a', 1, 'a', 2, '1'];
const unique = [...new Set(myArray)]; console.log(unique); // > ['a', 1, 2, '1']
Cách này sẽ đáp ứng được với các dữ liệu undefined, null, boolean, string, number. Trường hợp array phức tạp chứa object thì ta phải tìm phương án khác : ))
Trong trường hợp bạn muốn sử dụng với ES5 thì 1 cách khác đó là sử dụng filter, tại đây ta sẽ lặp qua từng phần tử trong mảng để kiếm tra nó đã tồn tại hay chưa để return vào 1 array mới
function onlyUnique(value, index, self) { return self.indexOf(value) === index;
} const myArray = ['a', 1, 'a', 2, '1'];
const unique = myArray.filter(onlyUnique); console.log(unique); // > ['a', 1, 2, '1']
2. Convert kiểu sang Boolean
Khi nhắc đến boolean ta sẽ liên tưởng đến hai giá trị true và false. Trong JS có tồn tại 2 khái niệm truthy và falsy, falsy bao gồm các giá trị false, 0, -0, 0n, '', null, undefined, NaN, document.all các giá trị còn lại không phải falsy thì được coi là truthy
Trong JS để ép kiểu sang Boolean ta sẽ dùng dấu ! đại diện cho phép phủ định
const isTrue = !0;
const isFalse = !1; console.log(isTrue); // > true
console.log(isFalse); // > false
1 cách nữa đó là sử dụng hàm Boolean() có sẵn trong js (xem thêm về Boolean)
let str = '100';
console.log(Boolean(str)); // > true
3. Convert kiểu sang String
Trong JS để convert sang String bạn chỉ cần cộng giá trị với '' hoặc sử dụng template string trong ES6
const val_1 = 1 + "";
const val_2 = `${1}`; // ES6 console.log(val_1); // > "1"
console.log(val_2); // > "1" console.log(typeof val_1); // > "string"
console.log(typeof val_2); // > "string"
1 cách nữa đó là sử dụng hàm String() có sẵn trong js (xem thêm về String)
let str = 100;
console.log(String(str)); // > '100'
4. Convert kiểu sang Number
Để convert kiểu sang Number ta sẽ sử dụng toán tử +
let int = "100";
int = +int; console.log(int); // > 100
console.log(typeof int); // > "number" console.log(+true); // > 1
console.log(+false); // > 0
console.log(+null); // > 0
console.log(+''); // > 0
1 cách nữa đó là sử dụng hàm Number() có sẵn trong js (xem thêm về Number)
let int = "100";
console.log(Number(int)); // > 100
Ngoài ra ta có thể sử dụng 2 toán tử ~ (toán tử phủ định bitwise). Xem ví dụ sau
let int = ~~'100'; console.log(int); // > 100
console.log(typeof int); // > "number"
Nhìn khó hiểu đúng không, công thức của nó sẽ là ~n = -n - 1. Như vậy ví dụ trên sẽ được giải thích như sau
let int = ~'100'; // -100 - 1 = -101
int = ~int; // -(-101) - 1 = 100 console.log(int); // > 100
console.log(typeof int); // > "number"
5. Tính luỹ thừa
Trước đây để tính luỹ thừa ta sẽ sử dụng hàm Math.pow()
const result = Math.pow(5, 3); // 5^3 = 125
console.log(result); // > 125
Kể từ khi ES7 được phát hành, bạn có thể dùng 2 dấu ** để thay thế, vì sao ư :v vì hiệu năng của nó nhanh hơn
const result = 5 ** 3;
console.log(result); // > 125
6. Convert Float to Integer
Để convert kiểu dữ liệu float sang int thông thường ta sẽ sử dụng 1 số hàm có sẵn như Math.floor(), Math.ceil(), Math.round(). Tuy nhiên có 1 cách nhanh hơn đó là sử dụng | (toán tử OR trong bitwise)
console.log(100.1001 | 0); // > 100
console.log(-100.1001 | 0); // > -100
Giải thích như sau: Nếu n dương thì n | 0 làm tròn xuống. Nếu n âm thì n | 0 làm tròn lên. Nói một cách chính xác hơn, thao tác này sẽ loại bỏ bất cứ thứ gì đứng sau dấu thập phân, cắt bớt một số thực cho một số nguyên.
1 ứng dụng nữa của toán tử này đó là 'cắt chuỗi'. Đây là thứ ta thường làm để loại bỏ bớt đi n kí tự trong chuỗi/số
let str = '1001'; console.log(Number(str.substring(0, str.length - 1))); // > 100
Còn khi sử dụng | nó sẽ như này
let str = '1001'; console.log(Number(str) / 10 | 0); // > 100 (cắt 1 kí tự)
console.log(Number(str) / 100 | 0); // > 10 (cắt 2 kí tự)
console.log(Number(str) / 1000 | 0); // > 1 (cắt 3 kí tự)
Nhìn ngon đúng không =))
7. Các giá trị mặc định dùng operator ||
Trong ES6 hiện tại có feature default argument. Để mô phỏng feature này bạn có thể dùng || (OR operator) bằng cách đưa default value như một param thứ hai. Nếu param đầu tiên trả về false thì param thứ 2 sẽ được dùng như default value.
function User(name, age) { this.name = name || 'Oliver Queen'; this.age = age || 27;
} const user1 = new User();
console.log(user1.name); // > Oliver Queen
console.log(user1.age); // > 27 const user2 = new User('Barry Allen', 25);
console.log(user2.name); // > Barry Allen
console.log(user2.age); // > 25
8. Convert NodeList thành Array
Trong DOM API chắc bạn đã nhiều lần phải dùng đến document.querySelectorAll(). Khi ta chạy function này, nó trả về một array các DOM element là một object NodeList
Nhưng object này không có tất cả các method của array như sort(), reduce(), map(), filter()... Và đây là cách ta hay dùng để convert NodeList thành Array
const elements = document.querySelectorAll('p'); // NodeList const arrayElements = [].slice.call(elements); // Now the NodeList is an array
const arrayElements = Array.from(elements); // This is another way of converting NodeList to Array
Kết luận
Trên đây mình tiếp tục giới thiệu đến các bạn các thủ thuật khi làm việc với JavaScript, hi vọng sẽ giúp ích cho các bạn trong quá trình làm việc, nghiên cứu
Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công và hẹn gặp lại ở bài viết sau nhé !