|
|
开发者总是在学习新东西，而跟上这些技术的变化不应该比之前更难。我写这篇文章的目的是介绍 JavaScript 的一些最佳实践，作为前端开发人员，掌握了这些最佳实践会让我们在 2021 年的工作变得更轻松。
你可能做了很长时间的 JavaScript 开发，但有时候你可能没有使用最新的 JavaScript 特性或技巧，这些特性和技巧可以在不需要编写额外代码的情况下解决你的问题。它们可以帮助你写出干净且优化的 JavaScript 代码。此外，如果你在 2021 年准备去参加面试，可以参考本文的内容。
1. 带有多个条件的 if 语句 把多个值放在一个数组中，然后调用数组的 includes 方法。
//longhand
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
//logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
//logic
} |
2. 简化 if true...else 对于不包含大逻辑的 if-else 条件，可以使用下面的快捷写法。我们可以简单地使用三元运算符来实现这种简化。
// Longhand
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can use directly
let 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、undefined 和空值检查 当我们创建了新变量，有时候想要检查引用的变量是不是为非 null 或 undefined。JavaScript 确实有一个很好的快捷方式来实现这种检查。
// Longhand
if (test1 !== null || test1 !== undefined || test1 !== '') {
let test2 = test1;
}
// Shorthand
let test2 = test1 || ''; |
5. null 检查和默认赋值 let test1 = null,
test2 = test1 || '';
console.log("null check", test2); // output will be "" |
6. undefined 检查和默认赋值 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 或 undefined，就返回右边的值。默认情况下，它将返回左边的值。
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 变量赋值操作符的有用技巧之一。
// Longhand
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;
// Shorthand
test1++;
test2--;
test3 *= 20; |
9. if 判断值是否存在 这是我们都在使用的一种常用的简便技巧，在这里仍然值得再提一下。
// Longhand
if (test1 === true) or if (test1 !== "") or if (test1 !== null)
// Shorthand //it will check empty string,null and undefined too
if (test1)
|
注意：如果 test1 有值，将执行 if 之后的逻辑，这个操作符主要用于 null 或 undefinded 检查。
10. 用于多个条件判断的 && 操作符 如果只在变量为 true 时才调用函数，可以使用 && 操作符。
//Longhand
if (test1) {
callMethod();
}
//Shorthand
test1 && callMethod(); |
11. for each 循环 这是一种常见的循环简化技巧。
// Longhand
for (var i = 0; i < testData.length; i++)
// Shorthand
for (let i in testData) or for (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 行。
// Longhand
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return callMe('test');
}
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
console.log(val);
}
// Shorthand
function checkReturn() {
return test || callMe('test');
}
|
13. 箭头函数 //Longhand
function add(a, b) {
return a + b;
}
//Shorthand
const add = (a, b) => a + b;
|
更多例子：
function callMe(name) {
console.log('Hello', name);
}
callMe = name => console.log('Hello', name);
|
14. 简短的函数调用 我们可以使用三元操作符来实现多个函数调用。
// Longhand
function test1() {
console.log('test1');
};
function test2() {
console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
test1();
} else {
test2();
}
// Shorthand
(test3 === 1? test1:test2)();
|
----------------------------
原文链接:https://www.jianshu.com/p/6de27fc64f9f
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 flybird 在 2021-06-24 13:18:08 重新编辑]
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → 不可错过的几种JS优化技巧
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
