共计 3550 个字符，预计需要花费 9 分钟才能阅读完成。
一段精简的代码不仅能让人情绪愉悦，而且也会让代码的逼格有所晋升。一个优良的产品往往须要一点一点的打磨能力怀才不遇，精简的代码是其中重要的组成部分。那么，就让咱们来理解一下一些常见的优化代码的伎俩吧。
1、多个条件判断
数组 includes 办法用来判断是否蕴含某个元素，如果是返回 true，否则 false。
// longhand
if (student === "Tom" || student === "Jack" || student === "Shanguagua") {// business}
// shorthand
if (['Tom', 'Jack', 'Shanguagua'].includes(student)) {// business}2、If true … else 缩写
简略的比拟逻辑能够应用这种写法。如果负责的业务这样写，代码可读性就会变差，预计第二天都不敢抵赖是本人写的。
// longhand
let win;
let score = 70;
if (score > 100) {win = true;} else {win = false;}
// shorthand
let win = (score > 100) ? true : false;
// 数值的比拟会返回一个 Boolean 值
let win = score > 100;三元运算符也是一个不错的抉择，然而超过 2 个判断条件就比拟不漂亮。
let win = (score > 90) ? 'A' (score > 80) : 'B'
3、申明变量
如果须要申明两个具备独特值或独特类型的变量时，试一下这种写法。
//Longhand
let Tom = 1;
let Jack = 1;
//Shorthand
let Tom, Jack = 1;4、空、未定义查看
有时候咱们须要是否援用了 null 或未定义值。
// Longhand
if (Tom !== null || TomTom !== undefined || test1 !== '') {let Mick = Tom;}
// Shorthand
let Mick = Tom || '';5、空值检查和调配默认值
如果要给 A 变量赋值 B，而 B 如果为假值时，就赋值 A 某个值。
let A = null,
B = A || '';|| 运算符是短路或运算，被称为短路运算的起因是，当第一个操作数为 true 时，将不会判断第二个操作数，因为无论第二个操作数为何，最初的运算后果肯定是 true。
与之对应的还有短路与运算，&& 被称为短路运算的起因是，当第一个操作数为 false 时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最初的运算后果肯定是 false。
6、多个变量赋值
当咱们须要给不同的变量赋不同值的时候，这个办法就有点给力了，代码之美体现的酣畅淋漓。
// Longhand
var Tom, Jack, Shanguagaua;
Tom = 'A';
Jack = 'B';
Shanguagaua = 'C';
// Shorthand
let [Tom, Jack, Shanguagau] = ['A', 'B', 'C'];7、多个条件的 AND（&&）运算符
如果要在 true 的状况下再执行其它操作，if 是一种办法，然而 AND 运算符逼格稍高。
// Longhand
if (ready) {goToEat();
}
// Shorthand
ready && goToEat();8、箭头函数
箭头函数是 ES6 的个性，简化了函数的写法，还有其余个性。
//Longhand
function GoToEat(a, b) {return a + b;}
//Shorthand
const GoToEat = (a, b) => a + b;9、短函数调用
依据条件判断两个函数的调用。
// Longhand
function A() {console.log("A");
}
function B() {console.log("B");
}
var c = 5;
if (c == 10) {A();
} else {B();
}
// Shorthand
(c === 1 ? A : B)();10、Switch 速记
依据条件判断多个函数的调用。
// Longhand
switch (key) {
case 1:
A();
break;
case 2:
B();
break;
case 3:
C();
break;
// And so on...
}
// Shorthand
var data = {
1: A,
2: B,
3: C
};
data[something] && data[something]();因为某个值如果不存在对象中会失去假值，反之真值，再联合 AND 运算符就能够了。
11、默认参数值
利用函数的默认值个性，能够防止校验假值操作。
//Longhand
function GoToEat(A, B) {if (A === undefined) A = 1;
if (B === undefined) B = 2;
return A + B;
}
//shorthand
GoToEat = (A = 1, B = 2) => A + B;
GoToEat(); // output: 312、点运算符
数组的拼接能够应用点运算符来实现。
//Longhand
const A = [1, 2, 3];
const B = [4, 5, 6].concat(A);
// Shorthand
const A = [1, 2, 3];
const B = [4, 5, 6, ...A]; // [4, 5, 6, 1, 2, 3]当然拷贝一个数组也能够用点运算符，留神是深拷贝。
// Longhand
var A = [1, 2, 3];
var B = A.slice();
//shorthand
var A = [1, 2, 3];
var B = [...A];13、Array.find 的简写
当咱们有一个对象数组并且咱们想要依据对象属性查找特定对象时，find 办法的确很有用，这是数据过滤时很罕用的操作。
// Longhand
const data = [
{
type: "student",
name: "Tom",
},
{
type: "teacher",
name: "Mick",
},
{
type: "student",
name: "Shanguagua",
},
];
function findStudent(name) {for (let i = 0; i < data.length; ++i) {if (data[i].type === "student" && data[i].name === name) {return data[i];
}
}
}
//Shorthand
filterdData = data.find((data) => data.type === "student" && data.name === "Shanguagua"
); // {type: 'student', name: 'Shanguagua'}14、反复一个字符串屡次
要一次又一次地反复雷同的字符，咱们能够应用 for 循环并将它们增加到同一循环中。反复的操作总会有简洁的写法。
// Longhand
let Tom = '';
for(let i = 0; i < 5; i ++) {Tom += 'Tom';}
console.log(str); // Tom Tom Tom Tom Tom
// Shorthand
'Tom'.repeat(5); // Tom Tom Tom Tom Tom ```
### 15、在数组中查找最大值和最小值
咋一看，额，用 for 循环吧，哦，不是的。const arr = [1, 2, 3];
Math.max(…arr); // 3
Math.min(…arr); // 1
** 前端视频方面大家能够关注我的 b 站, 搜寻“焖豆不闷”，下面上传了前端入门到精通（1000 大合集）、0 根底玩转微信小程序、5G 时代应用 Webview 的正确姿态等视频，期待和大家在 b 站上互动噢！**
