js前端代码优化 - 03

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

上文js前端代码优化 - 01和js前端代码优化 - 02讲解了关于JavaScript的几种优化方法，本文将继续总结js代码优化实例。

箭头函数

我们要知道，箭头函数表达式的语法比函数表达式更简洁而且可以避免this的问题。因此我们更推荐使用箭头函数。特别是在 vue 项目中，使用箭头函数不需要对 this 重新赋一个变量。

同时，如果使用箭头函数返回单一语句也可以直接返回值，而不需要使用return 语句。

优化前

var arr = [1, 2, 3]
var arrFunc = arr.map(function (x) {
  return x * 
})

优化后

var arr = [1,2, 3]
var arrFunc = arr.map((x) => x *x)

参数默认值

在开发过程，如果不对函数中的参数设置默认值，则需要在函数内进行判断，这样的写法冗余且不优雅。

优化前

function Func(a, b) {
    if (a === undefined) {
        a = 1;
    }
    if (b === undefined) {
        b = 2;
    }
    return a * b;
}

优化后

Func = (a = 1, b = 2) => a + b;

模板字符串

平时，当我们对字符串拼接时，总是会习惯性使用+对字符串进行拼接，其实我们可以使用ES6新语法的模板字符串。

优化前

const b =  getdata();
const a = '1' + b;

优化后

const a = `1${b}`;

关于对象

利用ES6新语法，我们可以通过解构变量的方式，获取对象内的变量。当对对象赋值时，如果值的变量名和key一致，也可以使用简写的方式。

优化前

const a = this.data.a;
const b = this.data.b; 
const c = this.data.c;
let obj = { a: a, b: b };

优化后

const {a,b,c} = this.data;
let obj = { a, b,c };

字符串转为数字

关于字符串转为数字，可以使用在字符串前加一个"+"进行优化,而不再需要使用parseInt等方式进行转化。

优化前

let a = parseInt("123");
let b = parseFloat("12.3");

优化后

let a = +"123";
let c = +"12.3";