2021年要了解的34种JavaScript优化技术 _JavaScript优化

使用现代速记技术，技巧和窍门优化您的JAVAScript代码
开发人员的生活总是在学习新事物，并且跟上变化的难度不应该比现在已经难，我的动机是介绍所有JavaScript最佳实践，例如速记和功能，我们作为前端开发人员必须知道这些使我们的生活在2021年变得更加轻松

文章插图
您可能已经进行了很长时间的JavaScript开发，但是有时您可能没有使用不需要解决或编写一些额外代码即可解决问题的最新功能。这些技术可以帮助您编写干净且优化的JavaScript代码。此外，这些主题可以帮助您为2021年的JavaScript采访做好准备。
在这里，我将提供一个新系列，介绍速记技术，这些速记技术可帮助您编写更干净和优化的JavaScript代码。这是您在2021年必须知道的JavaScript编码的备忘单。
1.如果有多个条件我们可以在数组中存储多个值，并且可以使用数组include方法。

//longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {//logic}//shorthandif (['abc', 'def', 'ghi', 'jkl'].includes(x)) {//logic}

2.If true … else 简写当我们具有不包含更大逻辑的if-else条件时，这是一个更大的捷径。我们可以简单地使用三元运算符来实现该速记。

// Longhandlet test: boolean;if (x > 100) {test = true;} else {test = false;}// Shorthandlet test = (x > 10) ? true : false;//or we can use directlylet test = x > 10;console.log(test);

当我们有嵌套条件时，我们可以采用这种方式。

let x = 300,test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';console.log(test2); // "greater than 100"

3.声明变量当我们要声明两个具有共同值或共同类型的变量时，可以使用此简写形式。
//Longhand let test1;let test2 = 1;//Shorthand let test1, test2 = 1;4.空，未定义，空检查当我们确实创建新变量时，有时我们想检查为其值引用的变量是否为null或未定义。JavaScript确实具有实现这些功能的非常好的捷径。

// Longhandif (test1 !== null || test1 !== undefined || test1 !== '') {let test2 = test1;}// Shorthandlet test2 = test1 || '';

5.空值检查和分配默认值let test1 = null,test2 = test1 || '';console.log("null check", test2); // output will be ""6.未定义值检查和分配默认值let test1 = undefined,test2 = test1 || '';console.log("undefined check", test2); // output will be ""正常值检查
let test1 = 'test',test2 = test1 || '';console.log(test2); // output: 'test'（奖金：现在我们可以对主题4,5和6使用??运算符）
空位合并运算符空合并运算符??如果左侧为null或未定义，则返回右侧的值。默认情况下，它将返回左侧的值。

const test= null ?? 'default';console.log(test);// expected output: "default"const test1 = 0 ?? 2;console.log(test1);// expected output: 0

7.给多个变量赋值当我们处理多个变量并希望将不同的值分配给不同的变量时，此速记技术非常有用。
//Longhand let test1, test2, test3;test1 = 1;test2 = 2;test3 = 3;//Shorthand let [test1, test2, test3] = [1, 2, 3];8.赋值运算符的简写我们在编程中处理很多算术运算符。这是将运算符分配给JavaScript变量的有用技术之一。
// Longhandtest1 = test1 + 1;test2 = test2 - 1;test3 = test3 * 20;// Shorthandtest1++;test2--;test3 *= 20;9.如果存在速记这是我们大家都在使用的常用速记之一，但仍然值得一提。
// Longhandif (test1 === true)// Shorthandif (test1)注意：如果test1有任何值，它将在if循环后进入逻辑，该运算符通常用于null或未定义的检查。
10.多个条件的AND（&&）运算符如果仅在变量为true的情况下才调用函数，则可以使用&&运算符。
//Longhand if (test1) { callMethod(); } //Shorthand test1 && callMethod();11. foreach循环速记这是迭代的常用速记技术之一。
// Longhandfor (var i = 0; i < testData.length; i++)// Shorthandfor (let i in testData) orfor (let i of testData)每个变量的数组

function testData(element, index, array) {console.log('test[' + index + '] = ' + element);}[11, 24, 32].forEach(testData);// logs: test[0] = 11, test[1] = 24, test[2] = 32

12.比较返回值我们也可以在return语句中使用比较。它将避免我们的5行代码，并将它们减少到1行。