我是通过看视频、上网课和读文章来学习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非常有用。
希望这篇文章能对大家有所帮助。
原文地址：https://mp.weixin.qq.com/s/V5OAX2anCGeLo0tOo596Kg
