转自：https://mp.weixin.qq.com/s/w7_ATf5PzHqjQ0OdKc5xBw
<!-- https://mp.weixin.qq.com/s/l1isGENvKOQOUUjJssI1nA -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20个简洁的 JS 代码片段</title>
<script type="text/javascript">
// 1.单行IF-ELSE
const age = 12;
let ageGroup;
// LONG FORM
if (age > 18) {
ageGroup = "An adult";
} else {
ageGroup = "A child";
}
// SHORTHAND
ageGroup = age > 18 ? "An adult" : "A child";
// 2.从数组中删除重复项
// 在 JavaScript 中，Set 是一个集合，它允许你仅存储唯一值。这意味着删除任何重复的值。
// 因此，要从数组中删除重复项，你可以将其转换为集合，然后再转换回数组。
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
// 1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。
// 2）、展开运算符...将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(numbers)]
// 3.较短的 If-Else 的空合并
let maybeSomething;
// LONG FORM
if(maybeSomething){
console.log(maybeSomething)
} else {
console.log("Nothing found")
}
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")
// 4.防止崩溃的可选链
//如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。
// 在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。
const student ={
name: "Matt",
age:27,
address:{
state: "New York"
},
};
// LONG FORM
console.log(student && student.address && student.address.ZIPCode);// 不存在则返回undefined
// SHORTHAND
console.log(student?.address?.ZIPCode);// 不存在返回undefined
//5.在没有第三个变量的情况下交换两个变量
// 在javascript中，可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个
let x=1;
let y =2;
// LONGER FORM
let temp =x;
x=y;
y = temp;
//SHORTHAND
[x,y] = [y,x];// 可以使用解构交换两个变量的值
// 6.将任何值转换为布尔值:使用！！在JS中将任何内容转换为布尔值
!!true // true
!!2 // true
!![] // true
!!"Test" // true
!!false // false
!!undefined // false
!!0 // false
!!"" // false
// 7.扩展运算符
// 使用扩展运算符组合两个数组
const nums1 = [1,2,3];
const nums2 = [4,5,6];
// LONG FORM
let newArray = nums1.concat(nums2);
// SHORTHAND
newArray = [...nums1,...nums2]
//也可使用此语法代替将值推送到数组
let numbers = [1,2,3];
// LONGER FORM
numbers.push(4);
numbers.push(5);
// SHORTHAND
numbers = [...numbers,4,5]
// 8.传播解构
// 使用扩展运算符将剩余元素分配给变量
const student ={
name: "Matt",
age: 23,
city: "ShangHai",
state: "Finland",
};
// LONGER FORM
const name = student.name;
const age = student.age;
const address = {city:student.city,state: student.state};
// SHORTHAND
const {name,age, ...address } = student;
// 9.使用&& 进行短路评估:不必使用if语句检查某事是否为真，可以使用&& 运算符
var isReady = true;
function doSomething(){
console.log("Yay!");
}
// LONGER FORM
if(isReady){
doSomething();
}
// SHORTHAND
isReady && doSomething();
// 10.类固醇的字符串
const age = 41;
const sentence = `I'm ${age} years old`;
// result: I'm 41 years old
// 11.从数组中查找特定元素: 使用find()方法查找匹配特定条件的元素
const fruits = [
{ type: "Banana", color: "Yellow" },
{ type: "Apple", color: "Green" }
];
// LONGER FORM
let yellowFruit;
for (let i = 0; i < fruits.length; ++i) {
if (fruits[i].color === "Yellow") {
yellowFruit = fruits[i];
}
}
// SHORTHAND
yellowFruit = fruits.find((fruit) => fruit.color === "Yellow");
// 12.对象属性赋值：你是否希望对象键与值具有相同的名称？你可以省略对象文字来执行此操作：
const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";
// LONGER FORM
const person = {
name: name,
city: city,
age: age,
favoriteFood: favoriteFood
};
// SHORTHAND
const person = { name, city, age, favoriteFood };
//13.压缩for循环:使用内置forEach()方法通过一行代码循环遍历数组：
const numbers = [1, 2, 3, 4, 5];
// LONGER FORM
for(let i = 0; i < numbers.length; i++){
console.log(numbers[i]);
}
// SHORTHAND
numbers.forEach(number => console.log(number));
// 14.默认功能参数：可以为函数参数提供默认值：
// LONG FORM
function pickUp(fruit) {
if(fruit === undefined){
console.log("I picked up a Banana");
} else {
console.log(`I picked up a ${fruit}`);
}
}
// SHORTHAND
function pickUp(fruit = "Banana") {
console.log(`I picked up a ${fruit}`)
}
pickUp("Mango"); // -> I picked up a Mango
pickUp(); // -> I picked up a Banana
// 15.将对象的值收集到数组中：用于Object.values()将对象的所有值收集到一个新数组中
const info = { name:"Matt",country:"Finland",age:35};
// LONGER FORM
let data = [];
for(let key in info){
data.push(info[key]);
}
// SHORTHAND
const data = Object.values(info);//将对象的所有值收集到一个新数组中
// 16.检查一个项目是否存在于数组中
// 你可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。这使你的意图非常明确：
let numbers = [1,2,3];
// LONGER FORM
const hasNumber1 = numbers.indexOf(1) >-1;// true
// SHORTHAND
const hasNumber1 = numbers.includes(1);// true
// 17.压缩多个条件:避免使用长|| 检查多个条件链
const num = 1;
// LONGER FORM
if(num == 1 || num == 2 || num == 3){
console.log("Yay");
}
// SHORTHAND
if([1,2,3].includes(num)){
console.log("Yay");
}
// 18.指数运算符:你Math.pow()习惯把一个数字提高到一个幂吗？你知道你也可以使用**运算符吗？
// LONGER FORM
Math.pow(4,2);// 16
Math.pow(2,3);// 8
//SHORTHAND
4**2 ;// 16
2**3;// 8
// 19.Math.floor()简写：四舍五入Math.floor()并不是什么新鲜事。但是你知道你也可以使用~~运算符吗？
// LONG FROM
Math.floor(5.25); // 5.0
// SHORTHAND
~~5.25; // 5.0
// 20.用一行代码分配多个值: 使用解构语法在一行中分配多个值
let num1,num2;
//LONGER FORM
num1 = 10;
num2 = 100;
//SHORTHAND
[num1,num2] = [10,100];
// 这也适用于使用JS对象
student ={
name: "Matt",
age: 29,
};
// LONGER FORM
let name = student.name;
let age =student.age;
// SHORTHAND
let {name,age} = student;
</script>
</head>
<body>
</body>
</html>