开发人员的生活总是在学习新事物，并且跟上变化的难度不应该比现在已经难，我的动机是介绍所有JavaScript最佳实践，例如，速记和功能，我们作为前端开发人员必须知道这些使我们的生活在2021年变得更加轻松。
您可能已经进行了很长时间的JavaScript开发，但是有时您可能没有使用不需要解决或编写一些额外代码即可解决问题的最新功能。这些技术可以帮助您编写干净且优化的JavaScript代码。此外，这些主题可以帮助您为2021年的前端面试做好准备。
在这里，我将提供一个新系列，介绍速记技术，这些速记技术可帮助您编写更干净和优化的JavaScript代码。这是您在2021年必须知道的JavaScript编码的备忘单。
1.如果有多个条件
我们可以在数组中存储多个值，并且可以使用数组includes方法。
//longhand
let a = '2';
if(a == "1" || a == "2" || a == '3'){
console.log(true);
}
//shorthand
if(['1','2','3'].includes(a)){
console.log(true);
}
2.if true …else简写
当我们具有不包含更大逻辑的if-else条件时，这是一个更大的逻辑，我们可以简单的使用三元运算符来实现该速记。
let x = 60;
if(x > 100){
console.log('more 100');
}else if(x < 50){
console.log('less 50');
}else{
console.log('between 50 and 100');
}
//shorthand
let test = (x > 100)?"more 100":(x < 50)?"less 50":"between 50 and 100";
console.log(test);
3.声明变量
当我们要声明两个具有共同值或共同类型的变量时，可以使用此简写形式
let test1,test2 = 1;
4. 空、未定义、空检查
当我们确实创建新变量时，有时我们想检查为其值引用的变量是否为null或未定义。
let test1 = 5;
if(test1 !== null || test1 !== undefined || test1 !== ''){
let test2 = test1
}
// Shorthand
let test2 = test1 || '';
5.空值检查和分配默认值
let test1 = null,test2 = test1 || '';
console.log(test2);
6.给多个变量赋值
当我们处理多个变量并希望将不同的值分配给不同的变量时，此速记非常有用。
let test1,test2,test3;
test1 = 1;
test2 = 2;
test3 = 3;
//Shorthand
let [test1,test2,test3] = [1,2,3];
7.赋值运算符的简写
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 1;
//Shouthand
test1++;
test2--;
test3 *= 20;
8.速写
这是我们大家都在使用的常用速记之一，但仍然值得一提
if（test = true）
if(test)
//非0即真，非空即真
9.多个条件的AMD（&&）运算符
如果仅在变量为true的情况下才调用函数，则可以使用&&运算符。
if(test1){
fn()
}
test1 && fn();
10.foreach循环速记
这是迭代的常用速记技术之一
for(var i = 0; i < testData.length;i++){
consnsole.log(666);
}
//shorthand
for (let i in testData) or for(let i of testData)
11.比较返回值
我们可以在return语句中使用比较，它将避免我们的5行代码，并将他们减少到1行。
let test;
function fn(){
if(!test){
return test;
}else{
return callMe('test');
}
}
var data = checkReturn();
console.log(data);
function callMe(val){
console.log(val);
}
//Shorthand
function checkReturn(){
return test || callMe('test')
}
12.箭头函数
function fn(a,b){
return a + b;
}
//shorthand
const add = (a,b) => a + b
13.短函数调用
我们可以使用三元运算符来实现这些功能
function test1(){
console.log('test1');
}
function test2(){
cosole.log('test2');
}
var test3 =1;
if(test3 == 1){
test1();
}else{
test2();
}
//Shorthand
(test3 === 1? test1:test2)()
14.Switch速记
我们可以将条件保存在键值对象中，并且根据条件使用。
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// And so on...
}
// Shorthand
var data = {
1: test1,
2: test2,
3: test
};
data[something] && data[something]();
15.默认参数值
function add(test1, test2) {
if (test1 === undefined)
test1 = 1;
if (test2 === undefined)
test2 = 2;
return test1 + test2;
}
//shorthand
add = (test1 = 1, test2 = 2) => (test1 + test2);
add() //output: 3
16.展开运算符
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);
//shorthand
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]
17.模板文字
如果你厌倦了在单个字符串中使用+来连接多个变量，那么这种速记方式将消除您的头痛。
const wel = 'Hi' + test1 +''+ test2+'.'
//shorthand
const welcome = `Hi${
test1}${
test2}`;
18.多行字符串速记
当我们在代码中处理多行字符串的时候，可以使用以下功能：
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
//shorthand
const data = `abc abc abc abc abc abc
test test,test test test test`
19.对象属性分配
let test1 = 'a';
let test2 = 'b';
//Longhand
let obj = {
test1: test1, test2: test2};
//Shorthand
let obj = {
test1, test2};
20.字符串成数字
let test1 = parseInt('123');
let test2 = parseFloat('12.3');
//Shorthand
let test1 = +'123';
let test2 = +'12.3';
21.分配速记（解构赋值）
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
//shorthand
const {
test1, test2, test3 } = this.data;
22.Array.find的简写
当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时，find方法确实很有用。
const data = [{
type:'test1',
name:'abc'
},{
type:'test2',
name:'cde'
},{
type:'test1',
name:'fgh'
}]
function findtest1(name){
for(let i = 0;i < data.length; i++){
if(data[i].type === 'test1' && data[i].name === name){
return data[i]
}
}
}
findtest1('fgh');
var findtest1Data = data.find(data => data.type === 'test1' && data.name === 'fgh')
console.log(findtest1Data);
23.速记按位索引
当我们迭代数组以查找特定值时，我们确定使用indexOf（）方法
if(arr.indexOf(item) > -1) {
// item found
}
if(arr.indexOf(item) === -1) {
// item not found
}
//shorthand
if(~arr.indexOf(item)) {
// item found
}
if(!~arr.indexOf(item)) {
// item not found
}
24.Object.entries()
此功能有助于将对象转换为对象数组
const data = {
test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
[ 'test2', 'cde' ],
[ 'test3', 'efg' ]
]
**/
25.Object.value()
这也是ES8中引入的一项新功能，它执行与Object.entries()类似的功能，但没有关键部分：
const data = {
test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/
26.重复一个字符串多次
要一次又一次的重复相同的字符，我们可以使用for循环并且将他们添加到同一个循环中，但是如果我们有一个简写方法呢？
//longhand
let test = '';
for(let i = 0; i < 5; i ++) {
test += 'test ';
}
console.log(str); // test test test test test
//shorthand
'test '.repeat(5);
27.在数组中查找最大值和最小值
const arr = [1, 2, 3];
Math.max(…arr); // 3
Math.min(…arr); // 1
28.从字符串中获取字符
let str = 'abc';
//Longhand
str.charAt(2); // c
//Shorthand
Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined
str[2]; // c