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
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'); // => helloSao 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:
// shallow clone an object
let newObj = Object.assign({}, obj);
// deep clone an object
let newObj = JSON.parse(JSON.stringify(obj));Hoán đổi giá trị 2 số
Để có thể hoán đổi giá trị 2 biến số trong JavaScript, bạn có thể làm như sau:
let x = 1, y = 2; console.log(x, y); // 1, 2 [x, y] = [y, x]; console.log(x, y); // 2, 1
Đặt giá trị mặc định cho tham số của hàm
Có hai cách để làm việc này:
- ES5: sử dụng toán tử ||
function Person(name, age) {
this.name = name || "Alex";
this.age = age || 20;
}
let p1 = new Person();
console.log(p1.name, p1.age) // => Alex, 20
let p2 = new Person("John", 25);
console.log(p2.name, p2.age) // => John, 25- ES6: hỗ trợ trực tiếp
function Person(name = "Alex", age = 20) {
this.name = name;
this.age = age;
}
let p1 = new Person();
console.log(p1.name, p1.age) // => Alex, 20
let p2 = new Person("John", 25);
console.log(p2.name, p2.age) // => John, 25Lấy random trong một đoạn
Hàm random sau trả về một số ngẫu nhiên trong đoạn từ min đến max:
let random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; // Usage let a = random(1, 100);
Loại bỏ kí tự trống (trim) 2 đầu string
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
let numbers = [1, 8 , 10 , -125 , 28 , 100 , 215, -85]; let maxInNumbers = Math.max.apply(Math, numbers); let minInNumbers = Math.min.apply(Math, numbers); console.log(maxInNumbers, minInNumbers); // => 215 -125
Đưa mảng về rỗng
Nhiều bạn đưa mảng về rỗng bằng cách:
let a = [1, 2, 3]; a = [];
Khi đó, thực chất là bạn đã tạo thêm một mảng mới. Cách đơn giản để giải quyết vấn đề này là:
let a = [1, 2, 3]; a.length = 0; console.log(a); // => []
Loại bỏ một phần tử ra khỏi mảng
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.
let arr = ["a", 1, -5, "cde"]; console.log(arr); // => ["a", 1, -5, "cde"] delete arr[2]; console.log(arr); // => ["a", 1, undefined, "cde"] console.log(arr.length); // => 4
Thay vào đó, bạn có thể dùng hàm splice:
let arr = ["a", 1, -5, "cde"]; console.log(arr); // => ["a", 1, -5, "cde"] arr.splice(2, 1); console.log(arr); // => ["a", 1, "cde"] console.log(arr.length); // => 3
Sử dụng and (&&) và or (||) thay cho if
Giả sử bạn có các câu điều kiện sử dụng if như sau:
let a = 10;
if (a === 10) console.log("a === 10"); // => a === 10
if (a !== 5) console.log("a !== 5"); // => a !== 5Khi đó, bạn có thể sử dụng toán tử && và || để thay thế như sau:
let a = 10;
a === 10 && console.log("a === 10"); // => a === 10
a === 5 || console.log("a !== 5"); // => a !== 5Hoặc kết hợp cả hai toán tử, thay vì:
// Hoặc kết hợp cả 2 toán tử
let a = 10;
if (a === 5) console.log("a === 5");
else console.log("a !== 5");thì bạn có thể làm như sau:
let a = 10;
a === 5 && console.log("a === 5") || console.log("a !== 5");Duyệt tất cả các properties của object sử dụng for-in loop
for (let name in object) {
if (object.hasOwnProperty(name)) {
// do something with name
}
}Convert Object sang JSON và ngược lại
let obj1 = {a: 1, b: 2};
// Object => JSON string
let strJSON = JSON.stringify(obj1);
console.log(strJSON); // => {"a":1,"b":2}
// JSON string => object
let obj2 = JSON.parse(strJSON);
console.log(obj2); // => {a: 1, b: 2}Viết hàm ngắn hơn với arrow function
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:
let a = [1, 2, 3, 4, 5];
let a2 = a.map(function(item) {
return item * item;
});
console.log(a2);
// => [1, 4, 9, 16, 25]Nếu sử dụng arrow function thì sẽ thế này:
let a = [1, 2, 3, 4, 5]; let a2 = a.map(item => item * item); console.log(a2); // => [1, 4, 9, 16, 25]
Sử dụng string template literals thay vì +
Có phải bạn thường sử dụng toán tử + để cộng (ghép) string, ví dụ:
let a = 10, b = 20;
console.log("Sum of " + a + " and " + b + " is " + (a + b) + ".");
// => Sum of a and b is 30.Thay vào đó, bạn có thể sử dụng string template literals:
let a = 10, b = 20;
console.log(`Sum of ${a} and ${b} is ${a + b}.`);
// => Sum of 10 and 20 is 30.Sao chép (copy) mảng
let a = [1, 2, 3]; let b = a.slice(); console.log(b); // => [1, 2, 3] console.log(b === a); // => false
Sử dụng Promise thay vì dùng callback
Code khi sử dụng callback:
func1(function (value1) {
func2(value1, function (value2) {
func3(value2, function (value3) {
func4(value3, function (value4) {
func5(value4, function (value5) {
// Do something with value 5
});
});
});
});
});Code khi implement bằng Promise:
func1(value1)
.then(func2)
.then(func3)
.then(func4)
.then(func5, value5 => {
// Do something with value 5
});Nối mảng
Có 3 cách nối mảng như sau:
let one = ['a', 'b', 'c'] let two = ['d', 'e', 'f'] let three = ['g', 'h', 'i'] // Old way #1 const result1 = one.concat(two, three); console.log(result1); // => ["a", "b", "c", "d", "e", "f", "g", "h", "i"] // Old way #2 const result2 = [].concat(one, two, three); console.log(result2); // => ["a", "b", "c", "d", "e", "f", "g", "h", "i"] // New const result3 = [...one, ...two, ...three]; console.log(result3); // => ["a", "b", "c", "d", "e", "f", "g", "h", "i"]
Clone object và array sử dụng Spread
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:
let myKey = 'key3';
let obj = {
key1: 'One',
key2: 'Two'
};
obj[myKey] = 'Three';
console.log(obj); // => {key1: "One", key2: "Two", variableKey: "Three"}Với cách ngắn gọn hơn sử dụng []:
let myKey = 'variableKey';
let obj = {
key1: 'One',
key2: 'Two',
[myKey]: 'Three'
};
console.log(obj); // => {key1: "One", key2: "Two", variableKey: "Three"}
