Thủ thuật JavaScript

Những thủ thuật hay và hữu ích nhất

#01 : Hai cách viết Function
Cách 1
function myFunction1(x) {
return x;
}
console.log(myFunction1(3)); // 3

Cách 2
const myFunction2 = function(y) {
return y;
}
console.log(myFunction2(4)); // 4
#03 : Template strings
Khai báo giá trị biến
const name = "WDI Blog";
const author = "Hoang Nguyen";


In kết quả ra màn hình console sử dụng 2 cách
console.log(name + " có tác giả là " + author); // => WDI Blog có tác giả là Hoang Nguyen

console.log(`${name} có tác giả là ${ author}`); // => WDI Blog có tác giả là Hoang Nguyen
#05 : Phân chia và gán giá trị trong Array (1)
Phân chia và gán giá trị
const [firstName, lastName] = ["Hoang", "Nguyen"];
console.log(`${firstName} - ${lastName}`);
// => Hoang - Nguyen


Phân chia và gán giá trị từ giá trị của một biến số khác
const array = ["Hoang", "Nguyen"];
const [firstName, lastName] = array;
console.log(`${firstName} - ${lastName}`);
// => Hoang - Nguyen


Gán luôn giá trị khi khởi tạo
const [firstName, lastName = "Nguyen"] = ["Hoang"];
console.log(`${firstName} - ${lastName}`);
// => Hoang - Nguyen


Giá trị khởi tạo và giá trị gán đều không tồn tại thì sẽ trả về kết quả là undefined
const [firstName, lastName] = ["Hoang"];
console.log(`${firstName} - ${lastName}`);
// => Hoang - undefined


Thay thế giá trị đã gán khi khởi tạo
const [firstName = "Anh", lastName = "Le"] = ["Hoang", "Nguyen"];
console.log(`${firstName} - ${lastName}`);
// => Hoang - Nguyen
#07 : Phân chia và gán giá trị trong Object
Phân chia và gán giá trị
const obj = {firstName: "Hoang"};
const {firstName, lastName = "Nguyen"} = obj;
console.log(`${firstName} - ${lastName}`);
// => Hoang - Nguyen


Giá trị khởi tạo ban đầu trong trường hợp này sẽ được giữ nguyên
const obj = {firstName: "Hoang",lastName : "Nguyen"};
const {firstName = "Anh", lastName = "Le"} = obj;
console.log(`${firstName} - ${lastName}`);
// => Hoang - Nguyen
#09 : Giá trị Truthy trong JavaScript
/**
* Ở trong Boolean Context (như câu điều kiện if) thì true được coi là một giá trị
* Ngoài những giá trị falsy thì còn lại đều được coi là giá trị truthy
* Toàn bộ điều kiện dưới đây đều được coi là true và xử lý sẽ được thực hiện
**/

if(true) { /* xử lý */}
if({}) { /* xử lý */}
if([]) { /* xử lý */}
if(1) { /* xử lý */}
if(-1) { /* xử lý */}
if("0") { /* xử lý */}
if("false") { /* xử lý */}
if(new Date()) { /* xử lý */}
#11 : Concat Syntax
Ví dụ 1 : cách viết thông thường
const num1 = [1,2];
const num2 = [3,4];
const num3 = [5,6];

const res1 = num1.concat(num2);
const res2 = num1.concat(num2,num3);

console.log(res1); // [1,2,3,4]
console.log(res2); // [1,2,3,4,5,6]


Ví dụ 2 : so sánh với cách viết kiểu mới
const num1 = [1,2];
const num2 = [3,4];

const res1 = [].concat(num1,num2);
const res2 = num1.concat(num2);

console.log(res1); // [1,2,3,4]
console.log(res2); // [1,2,3,4]
#13 : Lấy giá trị ngẫu nhiên từ một mảng
let items = ["WDI", 123, 999,"Hoang","JavaScript",333,"Nguyen","Blog"];

let randomItem = items[Math.floor(Math.random() * items.length)];

console.log(randomItem);
#15 : Lấy một số ngẫu nhiên từ trong khoảng số cho trước
const max = 100
min = 1;

let number = Math.floor(Math.random() * (max - min + 1)) + min;

console.log(number);
#17 : Tạo một mảng bởi các số từ 0 đến max
let numbersArray = [] , max = 100;

for( let i=1; numbersArray.push(i++) < max;);

console.log(numbersArray);
#19 : Xóa một thành phần khỏi mảng
const items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, 'Doe' ,2154 , 119 ];
console.log(items);
// [12, 548, "a", 2, 5478, "foo", 8852, undefined, "Doe", 2154, 119]

console.log(items.length); // 11
items.splice(3,1) ;

console.log(items.length); // 10
console.log(items);
// [12, 548, "a", 5478, "foo", 8852, undefined, "Doe", 2154, 119]
#21 : Cắt bớt mảng sử dụng length
const myArray = [123 , 999 , 101 , 1000 , 3000 , 7642 ];
myArray.length = 4;
console.log(myArray); //[123, 999, 101, 1000]
#23 : Array Spread Syntax (2)
const abc = ["A","B","C"];
const foo = "FOO";


const res1 = [].concat(abc,foo);
console.log(res1); // ["A", "B", "C", "FOO"]


const res2 = [...abc,...foo];
console.log(res2); // ["A", "B", "C", "F", "O", "O"]


const res3 = [...abc,foo];
console.log(res3); // ["A", "B", "C", "FOO"]
#25 : Unshift() - Thêm dữ liệu vào đầu mảng
const arr = [1,2,3];

arr.unshift(1);
console.log(arr); // [1, 1, 2, 3]


Cách khác : sử dụng spread syntax
const newArr = [1, ...arr];
console.log(newArr); // [1, 1, 2, 3]
#27 : Shift() - Xóa dữ liệu đầu mảng
const arr = [1,2,3];

arr.shift();
console.log(arr); // [2, 3]


Cách khác : sử dụng slice()
const newArr = arr.slice(1);
console.log(newArr); // [2, 3]
#29 : Object Spread Syntax
const obj1 = {name : "Hoang"};
const obj2 = {blog : "WDI"};
const mergeObj = {...obj1, ...obj2};
// {name : "Hoang",blog : "WDI"}


const obj1 = {name : "Hoang",blog : "WDI"};
const obj2 = {name : "Nguyen",blog : "Tech"};
const mergeObj = {...obj1, ...obj2};
// {name : "Nguyen",blog : "Tech"}


const obj1 = {name : "Hoang",blog : "WDI"};
const obj2 = {name : "Nguyen",city : "Tokyo"};
const obj3 = {name : "Akira",age : 25};
const mergeObj = {...obj1, ...obj2,...obj3};
// {name : "Akira",blog : "WDI",city : "Tokyo",age : 25}
#31 : Copy Object (1)
Đây là ví dụ xấu mà bạn không nên sử dụng trong thực tế vì sẽ làm thay đổi luôn giá trị của obj.
const obj = {name: "WDI Blog"};
const clone = obj; // {name: "WDI Blog"};
console.log(obj === clone); // true
clone.name = "foo";
console.log(obj); //{name: "foo"};


Đây là ví dụ trên nhưng sử dụng Spread Syntax để copy và chúng ta sẽ dễ dàng đoán ra được giá trị của clone.
const obj = {name: "WDI Blog"};
const clone = {...obj}; // {name: "WDI Blog"};
console.log(obj === clone); // false
clone.name = "foo";
console.log(obj); //{name: "WDI Blog"};


Trong thực tế bạn hãy sử dụng cách copy Object như dưới đây.
const obj2 = {name: "WDI Blog", type: "IT Blog"};
const clone = {...obj2,name: "foo"};
console.log(obj2); //{name: "WDI Blog", type: "IT Blog"};
console.log(clone); //{name: "foo", type: "IT Blog"};
#33 : Copy Object (2)
Shallow Copy : không nên sử dụng trong thực tế.
const obj = {
nest: {name: "WDI Blog"},
};
const clone = {...obj};

console.log(obj.nest === clone.nest);
clone.nest.name = "foo";
console.log(obj.nest.name); // foo


Deep Copy : nên sử dụng trong thực tế.
const obj = {
nest: {name: "WDI Blog"},
};
const clone = { ...obj, nest: {...obj.nest}, };

console.log(obj.nest === clone.nest);
clone.nest.name = "foo";
console.log(obj.nest.name); // WDI Blog
#35 : Filter()
Phương thức filter cũng như map và forEach là hàm số callback có ba tham số bao gồm value, index và array.Sử dụng khi muốn tạo ra một hàm mới mà đã loại bỏ đi một số yếu tố không thỏa mãn điều kiện.
const animals = ["dog", "cat", "bird"];
const newAnimals = animals.filter((value, index, array) => {
console.log(value, index, array);
return value === "cat";
});

// Kết quả :
// dog 0 [ 'dog', 'cat', 'bird' ]
// cat 1 [ 'dog', 'cat', 'bird' ]
// bird 2 [ 'dog', 'cat', 'bird' ]

console.log(animals); //[ 'dog', 'cat', 'bird' ]
console.log(animals === newAnimals); //false


Ví dụ tạo ra mảng mới từ mảng gốc với các yếu tố là số chẵn và lớn hơn 10.
function isEven(num) {
return num % 2 === 0 && num > 10;
}

const numbers = [1, 4, 2, 5, 7, 9, 23, 57, 36, 84];
const evens = numbers.filter(isEven);
console.log(evens); //[ 36, 84 ]
#02 : Arrow Function
Arrow Function - 1 tham số
const myFunction = (x) => {
return x + 10;
};

Arrow Function - 1 tham số bỏ ngoặc tròn
const myFunction = x => {
return x + 10;
};

Arrow Function - 1 tham số bỏ luôn ngoặc nhọn
const myFunction = x => return x + 10;
#04 : Toán tử 3 ngôi
/**
* Công thức như sau :
* Điều kiện ? Thức giá trị khi điều kiện đúng : Thức giá trị khi điều kiện sai
**/


Viết thức xét điều kiện bằng toán tử 3 ngôi
const student = age >= 18 ? "Bằng hoặc hơn 18 tuổi" : "Dưới 18 tuổi"

In kết quả ra màn hình console tùy theo giá trị age
// Khi age nhỏ hơn 18 tuổi
console.log(student); // Kết quả "Dưới 18 tuổi"

// Khi age bằng 18 tuổi
console.log(student); // Kết quả "Bằng hoặc hơn 18 tuổi"

// Khi age lớn hơn 18 tuổi
console.log(student); // Kết quả "Bằng hoặc hơn 18 tuổi"


Biểu thức toán tử 3 ngôi trên tương đương với câu lệnh if sau
let student = Bằng hoặc hơn 18 tuổi;
if (age <= 18) {
student = "Dưới 18 tuổi";
}
#06 : Phân chia và gán giá trị trong Array (2)
Khai báo và in ra giá trị của mảng
const [foo,bar] = [1,2];
console.log(foo); // 1
console.log(bar); // 2


Bỏ qua giá trị trong mảng
const [foo,bar] = [1,2,3];
console.log(foo); // 1
console.log(bar); // 2


Hoán đổi giá trị của yếu tố trong mảng
let a = "hello";
let b = "world";


[a,b] = [b,a];
console.log(a); // world
console.log(b); // hello


Phân chia và gán cho giá trị trả về của hàm số
function fn() {
return [1,2];
}

const [a,b] = fn();
console.log(a); // 1
console.log(b); // 2
#08 : Giá trị Falsy trong JavaScript
/**
* Ở trong Boolean Context (như câu điều kiện if) thì false được coi là một giá trị
*Toàn bộ điều kiện dưới đây đều được coi là false và xử lý sẽ không được thực hiện
**/

if(false) { /* xử lý */}
if(null) { /* xử lý */}
if(undefined) { /* xử lý */}
if(0) { /* xử lý */}
if(NaN) { /* xử lý */}
if('') { /* xử lý */}
if("") { /* xử lý */}
if(``) { /* xử lý */}
#10 : Rest Parameters
Hàm số thông thường khi có 2 tham số
function sum2(a,b){
console.log(a+b);
}
sum2(1,2); // 3


Hàm số thông thường khi có 5 tham số
function sum5(a,b,c,d,e){
console.log(a+b+c+d+e);
}
sum5(1,2,3,4,5); // 15


Hàm số sử dụng Rest parameters
function fn(...args) {
console.log(args);
}
fn(1,2); //[1,2]
fn(1,2,3,4,5); //[1,2,3,4,5]



Hàm số sử dụng Rest parameters và tham số thông thường
function fn(a,b,...args) {
console.log(a); // one
console.log(b); // two
console.log(args); // [three,four,five]
}
fn("one", "two", "three", "four", "five");


Rest parameters nếu không phải tham số cuối sẽ xảy ra lỗi

function fn(...args,a,b) {} // Xuất hiện thông báo lỗi
function fn(a,...args,b) {} // Xuất hiện thông báo lỗi
#12 : Array Spread Syntax (1)
Ví dụ 1
const num1 = [1,2];
const num2 = [3,4];
const num3 = [5,6];

const res1 = [...num1,...num2];
const res2 = [...num1,...num2,...num3];

console.log(res1); // [1,2,3,4]
console.log(res2); // [1,2,3,4,5,6]


Ví dụ 2
const abc = ["A","B","C"];
const res = [1,...abc,2];
console.log(res); // [1,"A","B","C",2]
#14 : Lấy các giá trị nhỏ nhất hay lớn nhất trong một mảng số
const numbers = [123, -777 , 689 , -321 , 671 , 500 , 9999,];

const maxNumber = Math.max.apply(Math, numbers);
const minNumber = Math.min.apply(Math, numbers);

console.log(maxNumber); // 9999
console.log(minNumber); // -777
#16 : Làm rỗng một mảng
const myArray = [321 , 999 , 3000];
console.log(myArray); // [321, 999, 3000]

myArray.length = 0;
console.log(myArray); //[]
#18 : Sử dụng AND/OR cho biểu thức điều kiện
In ra màn hình console nếu như giá trị foo1 bằng 10
let foo1 = 10;
foo1 == 10 && console.log("foo1");


In ra màn hình console nếu như giá trị foo2 khác 10
let foo2 = 11;
foo2 == 10 || console.log("foo2");
#20 : Toán tử comma
let a = 2;
console.log(a); // 2

let b = ( a++, a + 99 );

console.log(a); // 3
console.log(b); // 102
#22 : PUSH - Thêm dữ liệu vào cuối mảng
const arr = [1,2,3];

arr.push(1);
console.log(arr); // [1, 2, 3, 1]


Cách khác : sử dụng Spread Syntax
const newArr = [...arr,1];
console.log(newArr); // [1, 2, 3, 1]


#24 : Pop() - Xóa dữ liệu cuối mảng
const arr = [1,2,3];

arr.pop();
console.log(arr); // [1,2]


Cách khác : sử dụng slice()
const newArr = arr.slice(0,-1);
console.log(newArr); // [1,2]
#26 : sort() và reverse()
Bản thân mảng num1 và num1 sẽ thay đổi
const num1 = [2,1,3,4];
num1.sort(); // [1,2,3,4]


const num2 = [2,1,3,4];
num1.reverse(); // [4,3,1,2]


Bản thân mảng num3 và num4 sẽ không thay đổi
const num3 = [2,1,3,4];
[...num3].sort(); // [1,2,3,4]


const num4 = [2,1,3,4];
[...num4].reverse(); // [4,3,1,2]
#28 : forEach
Phương thức forEach() sẽ thực hiện hàm số nhận được ứng với mỗi yếu tố của mảng.
const animals = ["dog", "cat", "bird"];
animals.forEach((value, index, array) => {
console.log(value, index, array);
});
// Kết quả :
// dog 0 [ 'dog', 'cat', 'bird' ]
// cat 1 [ 'dog', 'cat', 'bird' ]
// bird 2 [ 'dog', 'cat', 'bird' ]
#30 : map
Phương thức map giống với forEach nhưng khác là nó có giá trị trả về.Từ giá trị trả về có thể tạo ra một mảng mới và không ảnh hưởng gì đến mảng gốc.
const animals = ["dog", "cat", "bird"];
const newAnimals = animals.map((value, index, array) => {
console.log(value, index, array);
return value; // giá trị trả về
});

// kết quả xuất ra trong map giống với forEach
// dog 0 [ 'dog', 'cat', 'bird' ]
// cat 1 [ 'dog', 'cat', 'bird' ]
// bird 2 [ 'dog', 'cat', 'bird' ]

console.log(newAnimals);// [ 'dog', 'cat', 'bird' ]
console.log(animals === newAnimals);// false


Chỉnh sửa các yếu tố trong mảng với map
const animals = ["dog", "cat", "bird"];
const newAnimals = animals.map((value) => {
return `${value} item`; //thay đổi giá trị trả về trong mảng
});

console.log(animals); //[ 'dog', 'cat', 'bird' ]
console.log(newAnimals); //[ 'dog item', 'cat item', 'bird item' ]
#32 : Cách viết hàm số Callback
Cả 4 cách viết dưới đây đều cho cùng một kết quả giống nhau .Bạn hãy lựa chọn một cách viết phù hợp với mình.
const animals1 = ["dog", "cat", "bird"].map(function (value) {
return `${value} item`;
});

const animals2 = ["dog", "cat", "bird"].map((value) => {
return `${value} item`;
});

const animals3 = ["dog", "cat", "bird"].map((value) => `${value} item`);

const animals4 = ["dog", "cat", "bird"].map(value => `${value} item`);
#34 : map và Object
Yếu tố trong mảng là object cũng có thể sử dụng được map như thường.
const animals = [{ item1: "dog", item2: "cat", item3: "bird" }];
const newAnimals = animals.map((value) => value);

console.log(animals); //[ { item1: 'dog', item2: 'cat', item3: 'bird' } ]
console.log(newAnimals); //[ { item1: 'dog', item2: 'cat', item3: 'bird' } ]


Copy mảng cũ và thêm yếu tố mới bằng cách sử dụng map
const animals = [{ item1: "dog", item2: "cat", item3: "bird" }];
const newAnimals = animals.map((value) => {
return { ...value, item4: "chicken" };
});

console.log(animals); //[ { item1: 'dog', item2: 'cat', item3: 'bird' } ]
console.log(newAnimals); //[ { item1: 'dog', item2: 'cat', item3: 'bird', item4: 'chicken' } ]