書上不教但非常實用的JavaScript實踐
作者：前端新世界
可選鏈接這項JavaScript中的功能，簡化了當屬性或方法可能不存在時，訪問對象上的屬性或調用方法的過程。它可幫助防止錯誤、簡化對undefined或null值的條件檢查。
我是通過看視頻、上網課和讀文章來學習JavaScript的。
在學習和實踐過程中，我發現有些東西雖然在課程中沒有得到明確的教授和解釋，但卻被開發人員大量使用。
因此，為了幫助JavaScript初學者在掌握基礎知識后，能更靈活自如地運用JS知識，我寫了這篇文章。
一起來看看吧！
短路運算符
console.log(true || 'something') // 'true' returns left side expression on the truthy value
console.log(null || 'something') // 'something'
console.log(true && 'somethingNew') // 'something' returns right side expression on the truthy value
console.log(null && 'somethingNew') // 'null' returns left side on falsy value
// nullish operator returns right side only if null or undefined value is on left otherwise it returns right
console.log(null ?? 'printA')
console.log(undefined ?? 'printB')
console.log(false ?? 'printB')
console.log(true ?? 'printB')
//assignment operator
const rest1 = {
owner: 'Jonas',
rooms : 15,
available : true,
}
const rest2 = {
owner: 'Max',
rooms : 12,
available : false,
booked : 'Yes'
}
rest1.available &&= 'booking done'
rest2.available &&= 'booking done'
console.log(rest1.available) // 'booking done'
console.log(rest2.available) // 'false'
rest1.booked &&= 'yes'
console.log(rest1.booked) //undefined
rest1.booked ||= 'yes'
console.log(rest1.booked) // 'yes'
rest2.address ??= 'calfornia'
console.log(rest2.address) // 'calfornia' so basically ??= assign the value if not present
rest2.booked ??= 'No'
console.log(rest2.booked) 'Yes' //since the value was already present therefore this No was not updated可選鏈接 ？.
可選鏈接這項JavaScript中的功能，簡化了當屬性或方法可能不存在時，訪問對象上的屬性或調用方法的過程。它可幫助防止錯誤、簡化對undefined或null值的條件檢查。
可選鏈接使用？.運算符。請看以下示例：
const person = {
name: 'John',
address: {
street: '123 Main St',
},
};
// Without optional chaining
const street = person.address ? person.address.street : undefined;
console.log(street); // '123 Main St'
// With Optional chaining
const street = person.address?.street;
console.log(street); // '123 Main St'const car = {
startEngine: function () {
console.log('Engine started');
},
};
// Without optional chaining
if (car.startEngine) {
car.startEngine();
}
//with optional chaining
car.startEngine?.(); // 'Engine started'還可以將可選鏈接與屬性訪問和方法調用結合到單個表達式中：
const user = {
profile: {
username: 'jsmith',
greet: function () {
console.log('Hello, ' + this.username);
},
},
};
const greeting = user.profile?.greet?.();
// If `profile` or `greet` are missing, `greeting` will be undefined.for-of循環
JavaScript中的for… of循環用于遍歷可迭代對象，如數組、字符串、映射、集合等的值。與傳統的for和while循環相比，語法更簡潔、更干凈。以下是for… of循環示例：
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
// Output:
// 1
// 2
// 3
// 4
// 5遍歷字符串示例
const text = "Hello, World!";
for (const char of text) {
console.log(char);
}
// Output:
// H
// e
// l
// l
// o
// ,
//
// W
// o
// r
// l
// d
// !遍歷對象示例
const students = [
{ name: "Alice", age: 22 },
{ name: "Bob", age: 25 },
{ name: "Carol", age: 21 },
];
for (const student of students) {
console.log(student.name, student.age);
}
// Output:
// Alice 22
// Bob 25
// Carol 21遍歷map
const myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
for (const [key, value] of myMap) {
console.log(key, value);
}
// Output:
// key1 value1
// key2 value2遍歷set
const mySet = new Set([1, 2, 3, 2, 4]);
for (const item of mySet) {
console.log(item);
}
// Output:
// 1
// 2
// 3
// 4還可以試試其他循環，例如
const rest2 = {
owner: 'Max',
rooms : 12,
available : false,
booked : 'Yes'
}
console.log(Object.keys(rest2))
console.log(Object.values(rest2))
for (let prop of Object.keys(rest2)){
console.log(prop)
}
console.log(Object.entries(rest2))
for(let entry of Object.entries(rest2)){
console.log(entry)
}Set
set是唯一數據值的集合。
語法如下所示：
const uniqueSet = new Set(['a','b','b','c','c'])以下是一些set方法
const uniqueSet = new Set(['a','b','b','c','c'])
console.log(uniqueSet) //Set { 'a', 'b', 'c' }
console.log(uniqueSet.size) //3
console.log(uniqueSet.has('b')) //true
console.log(uniqueSet.has('d')) //false
uniqueSet.add('d')
console.log(uniqueSet.has('d')) //true
uniqueSet.delete('b')
console.log(uniqueSet.has('b')) //false
uniqueSet.clear()
console.log(uniqueSet.size)//0
const animalNames = ["dog", "cat", "lion", "elephant", "dog", "tiger", "cat", "giraffe", "monkey", "elephant"];
const uniqueAnimals = [...new Set(animalNames)];
console.log(uniqueAnimals) //映射map
映射有點像具有鍵值對的對象，但有一個區別，在對象中，鍵始終是字符串類型，而在映射中，鍵可以具有任何類型。
const rest = new Map();
rest.set('name', 'Dwesis');
rest.set(1,'Prayagraj');
console.log(rest.get('name'))
console.log(rest.set(2, 'Ahmedabad'))
rest.set('categories',['italian','chinese','indian']).set('open',11).set('close',23).set(true,'We are open')
console.log(rest.get(true))const rest = new Map([
['name', 'Dewsis'],
[true, 'We are open'],
[false, 'we are close'],
[1, 'Prayagraj'],
[2, 'Ahmedabad']
]
)
console.log(rest.get(true)) // 'We are open'
console.log(rest.get(false)) // 'we are close'
console.log(rest.has('open')) // true
console.log(rest.has('close')) // false
console.log(rest.has(3)) // false
console.log(rest.size) // 5
for (let [key,value] of rest){
console.log(`${key} : ${value}`)
}
//Output
//name : Dewsis
// true : We are open
// false : we are close
// 1 : Prayagraj
// 2 : Ahmedabad數組 vs set，以及對象 vs Map
數組：
在以下情況下使用數組：
- 需要有序的元素集合。
- 需要對元素進行索引訪問。
- 想要存儲類似項目或相關項目的列表。
- 需要對元素執行迭代、映射或縮減等操作。
例如：
const colors = ['red', 'green', 'blue'];set：
在以下情況下使用set：
- 需要存儲沒有重復項的唯一值。
- 希望執行諸如檢查是否存在之類的操作，或者執行諸如并集、交集或差值之類的集合操作。
- 需要確保每個元素在集合中僅出現一次。
例如：
const uniqueNumbers = new Set([1, 2, 3, 4, 4, 5]);對象：
在以下情況下使用對象：
- 需要存儲鍵值對，例如將唯一鍵映射到值。
- 希望使用屬性和方法表示實體或復雜數據結構。
- 需要執行基于鍵的數據檢索、修改或刪除等操作。
例如：
const person = {
name: 'John Doe',
age: 30,
email: 'johndoe@example.com'
};map
在以下情況下使用map：
- 需要使用任意數據類型（包括對象）作為鍵。
- 需要可迭代的數據結構來維護插入順序。
- 希望使用size屬性輕松確定map大小。
- 需要執行添加或刪除元素、檢查鍵是否存在以及迭代鍵值對等操作。
例如：
const myMap = new Map();
const key1 = { id: 1 };
const key2 = { id: 2 };
myMap.set(key1, 'value1');
myMap.set(key2, 'value2');當你需要使用鍵值對、需要使用各種數據類型作為鍵、保持插入順序以及輕松管理數據結構大小等時，Map非常有用。
希望這篇文章能對大家有所幫助。
責任編輯：武曉燕
來源：
前端新世界
