×

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

作者:Terry2019.12.03来源:Web前端之家浏览:11361评论:0
关键词:js性能优化

500.jpg

想问大家一个问题,您去面试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

请注意,如果设置variable1false0bar则将分配值。

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中一些常用的简写代码技术【下篇】”....

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jsshoucang0931820938120983.html

网友评论文明上网理性发言 已有0人参与

发表评论: