25个适用于Web开发人员有用的JavaScript技巧
共 6371字，需浏览 13分钟
·
2021-06-19 12:03
1、单行 if-else 语句
const age = 12;let ageGroup;// LONG FORMif (age > 18) {ageGroup = "An adult";} else {ageGroup = "A child";}// SHORTHANDageGroup = age > 18 ? "An adult" : "A child";
请记住，这种速记旨在使代码更简洁，并在简单的if-else 语句中保存代码行，如上面的语句。不要过度使用它，因为它会降低代码的可读性！
2、 空合并
空合并运算符 ?? ，如果左侧未定义，则返回右侧。如果是，则返回左侧：
let maybeSomething;// LONG FORMif(maybeSomething){console.log(maybeSomething)} else {console.log("Nothing found")}//SHORTHANDconsole.log(maybeSomething ?? "Nothing found")
3、可选链
如果你使用运算符访问对象的属性，但未定义该属性，则会引发错误。这是使用可选链接的地方。
如果你使用可选链运算符？，并且属性未定义，返回undefined而不是抛出错误：
const student = {name: "Matt",age: 27,address: {state: "New York"},};// LONG FORMconsole.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined// SHORTHANDconsole.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined
4、将任何值转换为布尔值
使用双感叹号 (!!) 在 JS 中将任何内容转换为布尔值。
!!true // true!!2 // true!![] // true!!"Test" // true!!false // false!!0 // false!!"" // false
5、扩展运算符
你可以使用扩展运算符 (...) 将一个数组的元素“扩展”到另一个数组中。例如，让我们连接两个数字数组：
const nums1 = [1, 2, 3];const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);// SHORTHANDnewArray = [...nums1, ...nums2];
也可以使用此语法代替将值推送到数组：
let numbers = [1, 2, 3];// LONGER FORMnumbers.push(4);numbers.push(5);// SHORTHANDnumbers = [...numbers, 4, 5];
6、使用扩展运算符进行解构
你可以使用带有解构的扩展运算符将剩余元素分配给新变量：
const student = {name: "Matt",age: 23,city: "Helsinki",state: "Finland",};// LONGER FORMconst name = student.name;const age = student.age;const address = { city: student.city, state: student.state };// SHORTHANDconst { name, age, ...address } = student;
在上面的例子中，city和state属性被分配给一个address常量作为剩余部分。
7、从数组中删除重复项
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
8、 使用 && 进行短路评估
不必用if语句检查某事是否为真，你可以使用&&运算符：
var isReady = true;function doSomething(){console.log("Yay!");}// LONGER FORMif(isReady){doSomething();}// SHORTHANDisReady && doSomething();
9、 类固醇的字符串
你可以通过将字符串包装在反引号内并使用${}来嵌入值来直接将变量嵌入到字符串中：
const age = 41;const sentence = `I'm ${age} years old`;// result: I'm 41 years old
10、Switch-Case 更短的替代方案
你可以使用具有与键关联的函数名称的对象来替换switch语句：
const num = 3// LONGER FORMswitch (num) {case 1:someFunction();break;case 2:someOtherFunction();break;case 3:yetAnotherFunction();break;}// SHORTHANDvar cases = {1: someFunction,2: someOtherFunction,3: yetAnotherFunction,};cases[num]();
不，我没有忘记在cases对象中调用函数！
11、对象属性分配
如果你希望对象键与值具有相同的名称，则可以省略对象文字：
const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";// LONGER FORMconst person = {name: name,city: city,age: age,favoriteFood: favoriteFood};// SHORTHANDconst person = { name, city, age, favoriteFood };
12、箭头函数
与使用function关键字声明函数不同，使用箭头函数语法会更清晰：
// LONGER FORMfunction greetLong(name) {console.log(`Hi, ${name}`);}// SHORTHANDconst greetShort = name => console.log(`Hi, ${name}`);
注意：在本例中，由于函数中只有一个表达式，你可以省略大括号 ( {})。但是，如果表达式需要多于一行，则需要使用大括号！
13、不带返回关键字返回
使用箭头函数时，如果return函数中只有一个表达式，则可以省略关键字和函数的花括号：
// LONGER FORMfunction toPoundsLong(kilos) {return kilos * 2.205;}// SHORTHANDconst toPoundsShort = kilos => kilos * 2.205;
14、更短的 for 循环
for有时你可能希望使用内置forEach()方法更简洁地循环，而不是在集合上使用循环：
const numbers = [1, 2, 3, 4, 5];// LONGER FORMfor(let i = 0; i < numbers.length; i++){console.log(numbers[i]);}// SHORTHANDnumbers.forEach(number => console.log(number));
15、 函数参数的默认值
在 JavaScript 中，你可以为函数参数提供默认值，以便可以带或不带参数调用函数：
// LONG FORMfunction pickUp(fruit) {if(fruit === undefined){console.log("I picked up a Banana");} else {console.log(`I picked up a ${fruit}`);}}// SHORTHANDfunction pickUp(fruit = "Banana") {console.log(`I picked up a ${fruit}`)}pickUp("Mango"); // -> I picked up a MangopickUp(); // -> I picked up a Banana
顺便说一句，你还可以使用箭头函数使其更短！
const pick = (fruit = "Banana") => console.log(`I picked up a ${fruit}`)16、声明变量
你可以像这样巧妙地将变量声明组合成一行：
// LONGER FORMlet name;let age;let favoriteFood = "Pizza";// SHORTHANDlet name, age, favoriteFood = "Pizza";
17、 将值放入数组
你可以使用Object.values()获取对象的值并将它们放入数组而不是循环：
const info = { name: "Matt", country: "Finland", age: 35 };// LONGER FORMlet data = [];for (let key in info) {data.push(info[key]);}// SHORTHANDconst data = Object.values(info);
18、在数组中查找元素
使用数组的内置find()方法查找与特定条件匹配的元素，而不是使用冗长的循环：
const fruits = [{ type: "Banana", color: "Yellow" },{ type: "Apple", color: "Green" }];// LONGER FORMlet yellowFruit;for (let i = 0; i < fruits.length; ++i) {if (fruits[i].color === "Yellow") {yellowFruit = fruits[i];}}// SHORTHANDyellowFruit = fruits.find((fruit) => fruit.color === "Yellow");
19、检查一个项目是否在数组中
你可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。
let numbers = [1, 2, 3];// LONGER FORMconst hasNumber1 = numbers.indexOf(1) > -1 // -> True// SHORTHAND/CLEANER APPROACHconst hasNumber1 = numbers.includes(1) // -> True
20、检查多个条件
避免长|| 检查多个条件链时，你可以使用你刚刚在上一个技巧中学到的东西——即，使用 includes() 方法：
const num = 1;// LONGER FORMif(num == 1 || num == 2 || num == 3){console.log("Yay");}// SHORTHANDif([1,2,3].includes(num)){console.log("Yay");}
21、使用一行分配多个值
你可以使用解构来一次性分配多个值：
let num1, num2;// LONGER FORMnum1 = 10;num2 = 100;// SHORTHAND[] = [10, 100];
这也可以在处理对象时使用：
student = {name: "Matt",age: 29,};// LONGER FORMlet name = student.name;let age = student.age;// SHORTHANDlet { name, age } = student;
22、在没有第三个变量的情况下交换两个变量
在 JavaScript 中，您可以使用解构从数组中提取值。这也可用于在没有第三个帮助程序的情况下交换两个变量：
let x = 1;let y = 2;// LONGER FORMlet temp = x;x = y;y = temp;// SHORTHAND[] = [y, x];
23、指数运算符
你可以使用 ** 运算符，而不是使用 Math.pow() 函数来将数字求幂：
// LONGER FORMMath.pow(4,2); // 16Math.pow(2,3); // 8// SHORTHAND4**2 // 162**3 // 8
24、舍入数字时 Math.floor 的简写
你可以使用 ~~ 运算符，而不是使用 Math.floor() 函数来向下舍入数字：
// LONG FORMMath.floor(5.25) // -> 5.0// SHORTHAND~~5.25 // -> 5.0
25、将字符串转换为数字
你可以使用一元运算符 ( +) 将字符串转换为数字：
// LONGER FORMconst num = parseInt("1000");// SHORTHANDconst num = +"1000";
我想将这个速记包括在列表中，但人们可能会争论它是否有用，因为它实际上看起来有点令人困惑。
感谢你的阅读。
学习更多技能
请点击下方公众号
