javascript 的奇技巧淫一
文章目录
- 1 、使用 !! 转换为布尔值
- 2 、 短 If-Else 的三元运算符\
- 3、 默认函数参数
- 4 、动态字符串的模板文字
- 5、解构赋值
- 6、用于数组和对象克隆的扩展运算符
- 7 、短路求值
- 8、可选链接 (?.)
- 9、空值合并运算符 (??)
1 、使用 !! 转换为布尔值
// 使用双重否定快速将任何值转换为布尔值。
let a = !!1; // true
let b = !!0; // false
2 、 短 If-Else 的三元运算符\
let price = 100;
let message = price > 200 ? "Expensive" : "Cheap";
3、 默认函数参数
// 设置函数参数的默认值以避免定义错误。
function greet(name = "Guest") {return `Hello, ${name}!`;
}
4 、动态字符串的模板文字
// 使用模板文字将表达式嵌入字符串中。es6
let item = "coffee";
let price = 15;
console.log(`One ${item} costs $${price}.`);
5、解构赋值
// 轻松从对象或数组中提取属性。
let [x, y] = [1, 2];
let {name, age} = {name: "Alice", age: 30};
6、用于数组和对象克隆的扩展运算符
// 克隆数组或对象而不引用原始对象。
let originalArray = [1, 2, 3];
let clonedArray = [...originalArray];
7 、短路求值
// 使用逻辑运算符进行条件执行
let isValid = true;
isValid && console.log("Valid!");
8、可选链接 (?.)
// 如果引用为空，则安全地访问嵌套对象属性而不会出现错误。
let user = {name: "John", address: {city: "New York"}};
console.log(user?.address?.city); // "New York"
9、空值合并运算符 (??)
// 使用 ?? 为空或未定义提供默认值。
let username = null;
console.log(username ?? "Guest"); // "Guest"
10、使用 map、filter 和 reduce 进行数组操作
// 无需传统循环即可优雅地处理数组。
// Map
let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);// Filter
const evens = numbers.filter(x => x % 2 === 0);// Reduce
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
