11 mẹo hữu ích trong JavaScript

Thứ Bảy, 19/11/2022

Tram Ho

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ơn và rõ 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à.

Có đôi khi giết gà ko cần dùng đến dao môt trâu
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

<span class="token keyword">const</span> isValid <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>

<span class="token comment">// Chúng ta cần sẽ dùng toán tử spread (...) để xử lý</span>

<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token operator">:</span> <span class="token string">"1234"</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">"Tuan"</span><span class="token punctuation">,</span>
  <span class="token operator">...</span><span class="token punctuation">(</span>isValid <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span> isValid<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token operator">...</span><span class="token punctuation">(</span><span class="token punctuation">(</span>age <span class="token operator">&gt;=</span> <span class="token number">18</span> <span class="token operator">||</span> isValid<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span> cart<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"person :&gt;&gt; "</span><span class="token punctuation">,</span> person<span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  { id: '1234', name: 'Tuan', cart: 0 }

1 2	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

<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token operator">:</span> <span class="token string">"123"</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">"tuan"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"id in person :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token string">"id"</span> <span class="token keyword">in</span> person<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"name in person :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token string">"name"</span> <span class="token keyword">in</span> person<span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  true
name in person :&gt;&gt;  true

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

<span class="token keyword">const</span> productData <span class="token operator">=</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">"123"</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"laptop"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> deviceName <span class="token punctuation">}</span> <span class="token operator">=</span> productData<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"deviceName :&gt;&gt; "</span><span class="token punctuation">,</span> deviceName<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> extractKey <span class="token operator">=</span> <span class="token string">"name"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>extractKey<span class="token punctuation">]</span><span class="token operator">:</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> productData<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  laptop
data :&gt;&gt;  laptop

deviceName :>> laptop

data :>> laptop

4. Lặp một đối tượng để truy cập đồng thời `key` và `value`

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

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">"laptop"</span><span class="token punctuation">,</span> isSale<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"id"</span><span class="token punctuation">,</span> <span class="token string">"name"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"key :&gt;&gt; "</span><span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"value :&gt;&gt; "</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  id
value :&gt;&gt;  1

key :&gt;&gt;  name
value :&gt;&gt;  laptop

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 (`?.`)

<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> isSale<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data?.name :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token operator">?.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data?.name?.user :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token operator">?.</span>name<span class="token operator">?.</span>user<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data?.displayName :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token operator">?.</span>displayName<span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  undefined       
data?.name?.user :&gt;&gt;  undefined 
data?.displayName :&gt;&gt;  undefined

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

<span class="token keyword">const</span> fruitList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">"mango"</span><span class="token punctuation">,</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> filterFruitList <span class="token operator">=</span> fruitList<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>Boolean<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"filterFruitList :&gt;&gt; "</span><span class="token punctuation">,</span> filterFruitList<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> isAnyFruit <span class="token operator">=</span> fruitList<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>Boolean<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"isAnyFruit :&gt;&gt; "</span><span class="token punctuation">,</span> isAnyFruit<span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  [ 'apple', 'mango' ]
isAnyFruit :&gt;&gt;  true

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ẹ)

<span class="token keyword">const</span> fruitList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"mango"</span><span class="token punctuation">,</span> <span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"mango"</span><span class="token punctuation">,</span> <span class="token string">"grapes"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> uniqFruitList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>fruitList<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"uniqFruitList :&gt;&gt; "</span><span class="token punctuation">,</span> uniqFruitList<span class="token punctuation">)</span><span class="token punctuation">;</span>

const fruitList = ["apple", "mango", "apple", "mango", "grapes"];

const uniqFruitList = [...new Set(fruitList)];

console.log("uniqFruitList :>> ", uniqFruitList);

uniqFruitList :&gt;&gt;  [ 'apple', 'mango', 'grapes' ]

1 2	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

<span class="token keyword">const</span> fruitList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"mango"</span><span class="token punctuation">,</span> <span class="token string">"apple"</span><span class="token punctuation">,</span> <span class="token string">"mango"</span><span class="token punctuation">,</span> <span class="token string">"grapes"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"typeof fruitList :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token keyword">typeof</span> fruitList<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Array.isArray(fruitList) :&gt;&gt; "</span><span class="token punctuation">,</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>fruitList<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

const fruitList = ["apple", "mango", "apple", "mango", "grapes"];

console.log("typeof fruitList :>> ", typeof fruitList);

console.log("Array.isArray(fruitList) :>> ", Array.isArray(fruitList));

<span class="token keyword">typeof</span> fruitList <span class="token operator">:</span><span class="token operator">&gt;&gt;</span>  object
Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>fruitList<span class="token punctuation">)</span> <span class="token operator">:</span><span class="token operator">&gt;&gt;</span>  <span class="token boolean">true</span>

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ể.

<span class="token keyword">const</span> numberId <span class="token operator">=</span> <span class="token string">"1234"</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"+numberId :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token operator">+</span>numberId<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"typeof +numberId :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token keyword">typeof</span> <span class="token operator">+</span>numberId<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"numberId + '':&gt;&gt; "</span><span class="token punctuation">,</span> numberId <span class="token operator">+</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"typeof numberId + '' :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token keyword">typeof</span> numberId <span class="token operator">+</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

const numberId = "1234";

console.log("+numberId :>> ", +numberId);

console.log("typeof +numberId :>> ", typeof +numberId);

console.log("numberId + '':>> ", numberId + "");

console.log("typeof numberId + '' :>> ", typeof numberId + "");

+numberId :&gt;&gt;  1234
typeof +numberId :&gt;&gt;  number
numberId + '':&gt;&gt;  1234
typeof numberId + '' :&gt;&gt;  string

+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à null và undefined bằng cách sử dụng toán tử `nullish coalescing` (`??`)

<span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token operator">??</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 1 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token operator">??</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 2 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token string">""</span> <span class="token operator">??</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 3 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token number">5</span> <span class="token operator">??</span> <span class="token keyword">null</span> <span class="token operator">??</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 4 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 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ó</span>
data <span class="token operator">??=</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 5 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  no Data
data 2 :&gt;&gt;  no Data
data 3 :&gt;&gt;
data 4 :&gt;&gt;  5
data 5 :&gt;&gt;  5

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)

<span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword">undefined</span> <span class="token operator">||</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 1 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 2 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token string">""</span> <span class="token operator">||</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 3 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

data <span class="token operator">=</span> <span class="token number">5</span> <span class="token operator">||</span> <span class="token keyword">null</span> <span class="token operator">||</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 4 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 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ó</span>
data <span class="token operator">||=</span> <span class="token string">"no Data"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"data 5 :&gt;&gt; "</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>

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 :&gt;&gt;  no Data
data 2 :&gt;&gt;  no Data
data 3 :&gt;&gt;  no Data
data 4 :&gt;&gt;  5
data 5 :&gt;&gt;  5

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<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This is not Empty :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This is not Empty :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token string">"This is not Empty"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

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

This is not Empty :&gt;&gt;  false
This is not Empty :&gt;&gt;  true

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<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This is Empty :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token operator">!</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This is Empty :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token operator">!</span><span class="token string">"This is Empty"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

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

This is Empty :&gt;&gt;  true
This is Empty :&gt;&gt;  false

This is Empty :>> true

This is Empty :>> false

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

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This is ... :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"This is ... :&gt;&gt; "</span><span class="token punctuation">,</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token string">"This is ..."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

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

This is ... :&gt;&gt;  true
This is ... :&gt;&gt;  false

This is ... :>> true

This is ... :>> false

Thực ra nó chỉ có ! và !! 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

https://tuan200tokyo.blogspot.com/2022/11/blog43-11-meo-huu-ich-trong-javascript.html

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

11 mẹo hữu ích trong JavaScript

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

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

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

4. Lặp một đối tượng để truy cập đồng thời `key` và `value`

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 (`?.`)

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

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

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

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

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

Roundup

Ref

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

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

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

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

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

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 (?.)

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

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

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

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

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

Roundup

Ref

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

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

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

4. Lặp một đối tượng để truy cập đồng thời `key` và `value`

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 (`?.`)

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

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