收藏JavaScript中一些常用的代码性能优化技术【上篇】

想问大家一个问题，您去面试Web前端开发职位，做笔试题的时候，是不是会碰到“如何去优化和简写一段代码”的考题，其实是考察我们对于JS代码深入认知的能力，也是性能优化的一项必备技能，我们需要去挖掘这方面的知识。

所以对于任何JavaScript开发人员来说，要养成做笔记的好习惯，比如去收集积累的一些速记JavaScript编码技术，便于后面查找。由于内容比较多，篇幅大，我分为上下集来分享，今天先来看下上篇。

1.三元运算符

当您只想if..else在一行中编写一条语句时，这是一个很好的代码保护程序。

完整码：

const x = 20;
let answer;

if (x > 10) {
    answer = "greater than 10";
} else {
    answer =  "less than 10";
}

速记：

const answer = x > 10 ? "greater than 10" : "less than 10";

您还可以if像这样嵌套您的语句：

const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

2.短路评估速记

在将变量值分配给另一个变量时，您可能要确保源变量不为null，未定义或为空。您可以编写if带有多个条件的长语句，也可以使用短路评估。

完整码：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

速记：

const variable2 = variable1  || 'new';

不相信我吗？自己进行测试（将以下代码粘贴到es6console中）：

let variable1;
let variable2 = variable1  || 'bar';
console.log(variable2 === 'bar'); // prints true

variable1 = 'foo';
variable2 = variable1  || 'bar';
console.log(variable2); // prints foo

请注意，如果设置variable1为false或0，bar则将分配值。

3.声明变量速记

在函数开始时声明变量分配是一种很好的做法。当同时声明多个变量时，这种简化方法可以节省大量时间和空间。

完整码：

let x;
let y;
let z = 3;

速记：

let x, y, z=3;

4.如果存在速记

这可能微不足道，但值得一提。执行“ if检查”时，有时可以省略赋值运算符。

完整码：

if (likeJavaScript === true)

速记：

if (likeJavaScript)

注意：这两个示例并不完全相等，因为只要likeJavaScript是真实值，速记检查就会通过。

这是另一个例子。如果a不等于true，则执行某些操作。

完整码：

let a;
if ( a !== true ) {
    // do something...
}

速记：

let a;
if ( !a ) {
    // do something...
}

5. JavaScript For循环速记

如果您需要纯JavaScript且不想依赖外部库（例如jQuery或lodash），则此小技巧非常有用。

完整码：

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

速记：

for (let fruit of fruits)

如果您只想访问索引，请执行以下操作：

for (let index in fruits)

如果要访问文字对象中的键，这也将起作用：

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
console.log(key) // output: continent, country, city

Array.forEach的简写：

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9

6.短路评估

如果目标参数为null或未定义，则无需编写六行代码来分配默认值，我们只需使用短路逻辑运算符并仅用一行代码即可完成相同的操作。

完整码：

let dbHost;if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
}else {
  dbHost = 'localhost';
}

速记：

const dbHost = process.env.DB_HOST || 'localhost';

7.小数基指数

您可能已经看到了这一周围。从本质上讲，这是写数字而没有尾随零的一种奇特的方式。例如，1e7本质上是指1后跟7个零。它代表一个等于10,000,000的十进制基数（JavaScript将其解释为浮点类型）。

完整码：

for (let i = 0; i < 10000; i++) {}

速记：

for (let i = 0; i < 1e7; i++) {}

// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8.对象属性速记

在JavaScript中定义对象文字可以使工作更加轻松。ES6提供了一种更为简便的将属性分配给对象的方法。如果变量名与对象键相同，则可以使用速记符号。

完整码：

const x = 1920, 
y = 1080;
const obj = { x:x, y:y };

速记：

const obj = { x, y };

9.箭头功能速记

古典函数很容易以其简单的形式进行读写，但是一旦您开始将其嵌套在其他函数调用中，它们的确会变得有些冗长和混乱。

完整码：

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

速记：

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

重要的是要注意，this箭头函数内部的值与长手函数的确定方法不同，因此这两个示例并非严格等效。有关更多详细信息，请参见本文有关箭头函数语法的内容。

10.隐式回报速记

Return是我们经常用来返回函数最终结果的关键字。带有单个语句的箭头函数将隐式返回其评估结果（该函数必须省略花括号（{}）才能省略return关键字）。

要返回多行语句（例如对象文字），有必要使用()而不是{}包装函数主体。这样可以确保将代码作为单个语句进行评估。

完整码：

function calcCircumference(diameter) {
  return Math.PI * diameter
}

速记：

calcCircumference = diameter => (
  Math.PI * diameter;
)

11.默认参数值

您可以使用该if语句来定义函数参数的默认值。在ES6中，可以在函数声明本身中定义默认值。

完整码：

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

速记：

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

12.模板文字

您是否不厌倦使用' + '多个变量连接到字符串中？有没有更简单的方法可以做到这一点？如果您能够使用ES6，那么您很幸运。您需要做的就是使用反引号，并将${}其括起来。

完整码：

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

速记：

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

总结

这些都是我们日常经常用到的，如果您觉得不错，可以收藏，也可以留言or加QQ群讨论。此上内容仅为上篇，请持续关注我们网站，后续继续分享“收藏JavaScript中一些常用的简写代码技术【下篇】”....