每种语言都有自己的怪癖,最常用的编程语言JavaScript也不例外。本文将介绍大量JavaScript 速记优化技巧,这些技巧可以帮助您编写更好的代码,并确保您在遇到它们时不会做出以下反应:
通常您可能需要检查 astring是否等于多个值之一,并且很快就会变得很累。幸运的是,JavaScript有一个内置方法可以帮助您完成此操作。
// Long-hand- const isVowel = (letter) => {
- if (
- letter === "a" ||
- letter === "e" ||
- letter === "i" ||
- letter === "o" ||
- letter === "u"
- ) {
- return true;
- }
- return false;
- };
-
- // Short-hand
- const isVowel = (letter) =>
- ["a", "e", "i", "o", "u"].includes(letter);
For-of和For-in循环For-ofandFor-in循环是迭代arrayor的好方法,object无需手动跟踪的索引。keysobject
For-ofconst arr = [1, 2, 3, 4, 5];-
- // Long-hand
- for (let i = 0; i < arr.length; i++) {
- const element = arr[i];
- // ...
- }
-
- // Short-hand
- for (const element of arr) {
- // ...
- }
For-inconst obj = {- a: 1,
- b: 2,
- c: 3,
- };
-
- // Long-hand
- const keys = Object.keys(obj);
- for (let i = 0; i < keys.length; i++) {
- const key = keys[i];
- const value = obj[key];
- // ...
- }
-
- // Short-hand
- for (const key in obj) {
- const value = obj[key];
- // ...
- }
如果要检查变量是null, undefined, 0, false,NaN还是空的string,可以使用逻辑非( !) 运算符一次检查所有变量,而不必编写多个条件。这使得检查变量是否包含有效数据变得容易。
// Long-hand- const isFalsey = (value) => {
- if (
- value === null ||
- value === undefined ||
- value === 0 ||
- value === false ||
- value === NaN ||
- value === ""
- ) {
- return true;
- }
- return false;
- };
-
- // Short-hand
- const isFalsey = (value) => !value;
作为一名JavaScript开发者,你一定遇到过ternary operator. 这是编写简洁if-else语句的好方法。但是,您也可以使用它来编写简洁的代码,甚至可以将它们链接起来以检查多个条件。
// Long-hand- let info;
- if (value < minValue) {
- info = "Value is too small";
- } else if (value > maxValue) {
- info = "Value is too large";
- } else {
- info = "Value is in range";
- }
-
- // Short-hand
- const info =
- value < minValue
- ? "Value is too small"
- : value > maxValue ? "Value is too large" : "Value is in range";
借助ternary operator,您还可以根据条件确定调用哪个函数。
重要旁注:功能必须相同,否则您可能会遇到call signature错误
function f1() {- // ...
- }
- function f2() {
- // ...
- }
-
- // Long-hand
- if (condition) {
- f1();
- } else {
- f2();
- }
-
- // Short-hand
- (condition ? f1 : f2)();
较长的switch case通常可以通过使用以键作为开关、以值作为返回值的对象来优化。
const dayNumber = new Date().getDay();-
- // Long-hand
- 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";
- }
-
- // Short-hand
- const days = {
- 0: "Sunday",
- 1: "Monday",
- 2: "Tuesday",
- 3: "Wednesday",
- 4: "Thursday",
- 5: "Friday",
- 6: "Saturday",
- };
- const day = days[dayNumber];
||操作员可以为变量设置回退值。
// Long-hand- let name;
- if (user?.name) {
- name = user.name;
- } else {
- name = "Anonymous";
- }
-
- // Short-hand
- const name = user?.name || "Anonymous";
这就是所有的人!🎉