- vừa được xem lúc

Blog#43: 11 mẹo hữu ích trong JavaScript 😊 (Series: Bí kíp Javascript - PHẦN 35)

0 0 10

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

Mình là TUẤN hiện đang là một Full-stack Developer tại Tokyo 😊. Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé 😉.

Trong công việc lập trình hàng ngày chúng ta thường gặp các bài toàn đại loại như: kiểm tra các key xem nó có tồn tại hay không, thao tác có điều kiện với dữ liệu, lọc value trong các array, v.v.

Ở đây mình liệt kê ra một số trường hợp phổ biến mà cá nhân mình yêu thích ❤️ ️và rất hữu ích để làm cho code ngắn hơnrõ ràng hơn. Có bạn sẽ thắc mắc tại sao ko dùng thư viên thư viện có hết rồi mà 😄.

  1. Có đôi khi giết gà ko cần dùng đến dao môt trâu
  2. Mình thì luôn tiên xài tốt mấy cái hàm có sẵn của js trước

1. Điều kiện khi thêm các Properties💡 vào đối tượng

const isValid = false;
const age = 18; // Chúng ta cần sẽ dùng toán tử spread (...) để xử lý const person = { id: "1234", name: "Tuan", ...(isValid && { isValid: true }), ...((age >= 18 || isValid) && { cart: 0 }),
}; console.log("person :>> ", person);
person :>> { id: '1234', name: 'Tuan', cart: 0 }

2. Kiểm tra xem một Property có tồn tại trong một đối tượng hay không

Chúng ta có thể dùng keyword in để kiểm tra xem property có tồn tại trong Object không

const person = { id: "123", name: "tuan",
}; console.log("id in person :>> ", "id" in person);
console.log("name in person :>> ", "name" in person);
id in person :>> true
name in person :>> true

3. Destructuring đối tượng bằng Dynamic key

Chúng ta cũng có thể đặt một alias name cho một biến đã được Destructuring

const productData = { id: "123", name: "laptop" };
const { name: deviceName } = productData; console.log("deviceName :>> ", deviceName); const extractKey = "name";
const { [extractKey]: data } = productData; console.log("data :>> ", data);
deviceName :>> laptop
data :>> laptop

4. Lặp một đối tượng để truy cập đồng thời keyvalue

Có thể truy cấp cùng lúc keyvalue khi sử dụng hàm entries

const data = { id: 1, name: "laptop", isSale: true }; Object.entries(data).forEach(([key, value]) => { if (["id", "name"].includes(key)) { console.log("key :>> ", key); console.log("value :>> ", value); }
});
key :>> id
value :>> 1 key :>> name
value :>> laptop

5. Ngăn chặn lỗi 🐞 khi truy cập bất kỳ key nào không tồn tại trong đối tượng bằng cách sử dụng chuỗi tùy chọn (?.)

const data = { id: 1, isSale: true }; console.log("data?.name :>> ", data?.name);
console.log("data?.name?.user :>> ", data?.name?.user);
console.log("data?.displayName :>> ", data?.displayName);
data?.name :>> undefined data?.name?.user :>> undefined data?.displayName :>> undefined

Cảnh báo⚠️: chuỗi tùy chọn được sử dụng khi bạn không chắc Property của nó có tồn tại hay không có trong dữ liệu. Nếu bạn chắc chắn rằng các khóa phải có trong dữ liệu và nếu không có, thì bạn nên throw error để đưa ra lỗi thay vì ngăn chặn chúng.

6. Kiểm tra các falsy value 🌵 trong một array

const fruitList = ["apple", null, "mango", undefined, ""]; const filterFruitList = fruitList.filter(Boolean);
console.log("filterFruitList :>> ", filterFruitList); const isAnyFruit = fruitList.some(Boolean);
console.log("isAnyFruit :>> ", isAnyFruit);
filterFruitList :>> [ 'apple', 'mango' ]
isAnyFruit :>> true

7. Loại bỏ các giá trị trùng lặp trong array.

Riếng cái hàm này mình rất hay dùng (nhanh gọn lẹ 😄)

const fruitList = ["apple", "mango", "apple", "mango", "grapes"]; const uniqFruitList = [...new Set(fruitList)];
console.log("uniqFruitList :>> ", uniqFruitList);
uniqFruitList :>> [ 'apple', 'mango', 'grapes' ]

Lưu ý⚠️: cái này là một feature của ES6 nhé.

8. Kiểm tra một biến có phải là kiểu array hay ko

Ví bản chất array là một mảng {0:{}, 1:{}, 2:{}....} nên typeof nó sẽ trả về giá trị là object

const fruitList = ["apple", "mango", "apple", "mango", "grapes"]; console.log("typeof fruitList :>> ", typeof fruitList); console.log("Array.isArray(fruitList) :>> ", Array.isArray(fruitList));
typeof fruitList :>> object
Array.isArray(fruitList) :>> true

9. Chuyển đổi Chuỗi thành Số và Số thành Chuỗi bằng toán tử ' +' 🤩

Toán tử + là một toán tử đặc biệt nên vị trí của nó cũng quyết định ý nghĩa của nó trong từng trường hợp cụ thể.

const numberId = "1234"; console.log("+numberId :>> ", +numberId);
console.log("typeof +numberId :>> ", typeof +numberId); console.log("numberId + '':>> ", numberId + "");
console.log("typeof numberId + '' :>> ", typeof numberId + "");
+numberId :>> 1234
typeof +numberId :>> number
numberId + '':>> 1234
typeof numberId + '' :>> string

10. Gán các giá trị khác một cách có điều kiện khi giá trị là nullundefined bằng cách sử dụng toán tử nullish coalescing (??)

let data = undefined ?? "no Data";
console.log("data 1 :>> ", data); data = null ?? "no Data";
console.log("data 2 :>> ", data); data = "" ?? "no Data";
console.log("data 3 :>> ", data); data = 5 ?? null ?? "no Data";
console.log("data 4 :>> ", data); // Khi sử dụng cùng toán tử gán thì nó sẽ dựa trên giá trị hiện tại của nó
data ??= "no Data";
console.log("data 5 :>> ", data);
data 1 :>> no Data
data 2 :>> no Data
data 3 :>>
data 4 :>> 5
data 5 :>> 5

Nhiều bạn cũng hay nhầm lẫn 😕 giữa ?? với toán tử OR (||)

Toán tử OR được sử dụng khi bạn muốn gán giá trị khác theo điều kiện nếu giá trị đó không đúng. Có nghĩa là nếu nó là một trong những giá trị sau (0,’ ’, null, undefined, false, NaN)

let data = undefined || "no Data";
console.log("data 1 :>> ", data); data = null || "no Data";
console.log("data 2 :>> ", data); data = "" || "no Data";
console.log("data 3 :>> ", data); data = 5 || null || "no Data";
console.log("data 4 :>> ", data); // Khi sử dụng cùng toán tử gán thì nó sẽ dựa trên giá trị hiện tại của nó
data ||= "no Data";
console.log("data 5 :>> ", data);
data 1 :>> no Data
data 2 :>> no Data
data 3 :>> no Data
data 4 :>> 5
data 5 :>> 5

11. Chuyển đổi Boolean bằng cách sử dụng toán tử !!

console.log("This is not Empty :>> ", !!"");
console.log("This is not Empty :>> ", !!"This is not Empty");
This is not Empty :>> false
This is not Empty :>> true

Cũng y hết cũng nó nhiều bạn vẫn thắc mắc !! thì khác gì với !

console.log("This is Empty :>> ", !"");
console.log("This is Empty :>> ", !"This is Empty");
This is Empty :>> true
This is Empty :>> false

Ô thế nếu như nó là....

console.log("This is ... :>> ", !!!"");
console.log("This is ... :>> ", !!!"This is ...");
This is ... :>> true
This is ... :>> false

🤣 thực ra nó chỉ có !!! mà thôi còn từ dầu thăng thứ 3 trở đi nó đơn giản chỉ là phủ định của !! mà thôi.

Roundup

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo! 😍

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.😉

Ref

Bình luận

Bài viết tương tự

- vừa được xem lúc

Object trong Javascript

Xin chào mọi người,. Hôm nay mình sẽ giới thiệu về kiểu dữ liệu Object trong Javascript. Không để mọi người chờ lâu, cùng mình bắt đầu nào. .

0 0 27

- vừa được xem lúc

Bộ câu hỏi phỏng vấn Intern, Fresher cho Front-end từ A-Z

Mở đầu. Xin chào các bạn.

0 0 143

- vừa được xem lúc

Tối giản mã 1: If Boolean Then Boolean

Trong loạt bài này, chúng ta sẽ xem các tình trạng dư thừa phổ biến khiến mã của chúng ta trở nên phức tạp không cần thiết và khó đọc hơn, và chúng ta sẽ tìm hiểu cách tránh gặp phải. .

0 0 18

- vừa được xem lúc

Tối giản mã 2: Dư thừa Boolean

Kiểm tra các nguyên tắc của mã tối giản trong phần giới thiệu thử thách đầu tiên. Viết hàm trả về chuỗi "even" nếu số nguyên đã cho là chẵn và chuỗi "odd" nếu là số lẻ.

0 0 15

- vừa được xem lúc

Chiến lược tải, thực thi code JavaScript

Ba thành phần chính cấu tạo nên một trang web là HTML, CSS và JavaScript. CSS là ngôn ngữ về các kiểu áp dụng vào nội dung HTML để làm đẹp cho trang.

0 0 19

- vừa được xem lúc

UseState trong React Hook

useState() là một hook cơ bản giúp sử dụng state trong Functional Component. Hook này nhận vào input là một giá trị hoặc function và output là một mảng có hai phần tử tương ứng cho state và setState.

0 0 29