大厂面试题分享 面试题库
前后端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库 web前端面试题库 VS java后端面试题库大全
1. 字符串的自动匹配（Array.includes）
在写代码时我们经常会遇到这样的需求，我们需要检查某个字符串是否是符合我们的规定的字符串之一。最常见的方法就是使用||和===去进行判断匹配。但是如果大量的使用这种判断方式，定然会使得我们的代码变得十分臃肿，写起来也是十分累。其实我们可以使用Array.includes来帮我们自动去匹配。
代码示例：
// 未优化前的写法 const isConform = (letter) => { if ( letter === "a" || letter === "b" || letter === "c" || letter === "d" || letter === "e" ) { return true; } return false; }; 复制代码
// 优化后的写法 const isConform = (letter) => ["a", "b", "c", "d", "e"].includes(letter); 复制代码
2.for-of和for-in自动遍历
for-of和for-in，可以帮助我们自动遍历Array和object中的每一个元素,不需要我们手动跟更改索引来遍历元素。
注:我们更加推荐对象(object)使用for-in遍历，而数组(Array)使用for-of遍历
for-of
const arr = ['a',' b', 'c']; // 未优化前的写法 for (let i = 0; i < arr.length; i++) { const element = arr[i]; console.log(element); } 复制代码
// 优化后的写法 for (const element of arr) { console.log(element); } // expected output: "a" // expected output: "b" // expected output: "c" 复制代码
for-in
const obj = { a: 1, b: 2, c: 3, }; // 未优化前的写法 const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) { const key = keys[i]; const value = obj[key]; // ... } 复制代码
// 优化后的写法 for (const key in obj) { const value = obj[key]; // ... } 复制代码
3.false判断
如果你想要判断一个变量是否为null、undefined、0、false、NaN、''，你就可以使用逻辑非（!）取反，来帮助我们来判断,而不用每一个值都用===来判断
// 未优化前的写法 const isFalsey = (value) => { if ( value === null || value === undefined || value === 0 || value === false || value === NaN || value === "" ) { return true; } return false; }; 复制代码
// 优化后的写法 const isFalsey = (value) => !value; 复制代码
4.三元运算符代替（if/else）
在我们编写代码的时候肯定遇见过if/else选择结构，而三元运算符可以算是if/else的一种语法糖，能够更加简洁的表示if/else。
// 未优化前的写法 let info; if (value < minValue) { info = "Value is最小值"; } else if (value > maxValue) { info = "Value is最大值"; } else { info = "Value 在最大与最小之间"; } 复制代码
//优化后的写法 const info = value < minValue ? "Value is最小值" : value > maxValue ? "Value is最大值" : "在最大与最小之间"; 复制代码
5.函数调用的选择
三元运算符还可以帮我们判断当前情况下该应该调用哪一个函数，
function f1() { // ... } function f2() { // ... } // 未优化前的写法 if (condition) { f1(); } else { f2(); } 复制代码
// 优化后的写法 (condition ? f1 : f2)(); 复制代码
6.用对象代替switch/case选择结构
switch case通常是有一个case值对应一个返回值，这样的结构就类似于我们的对象，也是一个键对应一个值。我们就可以用我们的对象代替我们的switch/case选择结构，使代码更加简洁
const dayNumber = new Date().getDay(); // 未优化前的写法 let day; switch (dayNumber) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; } 复制代码
// 优化后的写法 const days = { 0: "Sunday", 1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday", }; const day = days[dayNumber]; 复制代码
7. 逻辑或(||)的运用
如果我们要获取一个不确定是否存在的值时，我们经常会运用if判断先去判断值是否存在，再进行获取。如果不存在我们就会返回另一个值。我们可以运用逻辑或(||)的特性，去优化我们的代码
// 未优化前的写法 let name; if (user?.name) { name = user.name; } else { name = "Anonymous"; } 复制代码
// 优化后的写法 const name = user?.name || "Anonymous"; 复制代码
写在最后
伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～
