js优化技巧

一、使用箭头函数简化函数定义

function add(a,b){return a + b;
}//箭头函数
const add = (a,b) => a + b;

二、使用解构赋值简化变量声明

const firstName = person.firstName;
const lastName = person.lastName;//解构赋值
const {firstName,lastName} = person

三、使用模板字面量进行字符串拼接

const greeting = 'Hello, ' + name + '!'//模板字面量简化
const greeting = `Hello,${name}!`;

四、使用展开运算符进行数组和对象操作

//合并数组
const combined = [...array1,...array2];//复制对象
const clone = {...original}

五、使用数组的高阶方法简化循环和数据操作

//遍历数组并返回新数组
const doubled = numbers.map(num => num * 2);//过滤数组
const evens = numbers.filter(num => num % 2 ===0);

六、使用条件运算符简化条件判断

//传统方式
let message;
if(isSuccess){message = 'Operation successful';
}else{message = 'Operation failed';
}//条件运算符简化
const message = isSuccess?'Operation successful':'Operation failed';

七、使用对象解构和默认参数简化函数参数

//传统参数设置默认值
function greet(name){const finalName = name || 'Guest';console.log('Hello,${finalName}!');
}//对象解构
function greet({name='Guest'}){console.log('Hello,${finalName}!');
}

八、使用函数式编程概念如纯函数和函数组合

//纯函数
function add(a,b){return a + b;
}
//函数组合
const multiplyByTwo = value => value * 2;const addFive = value => value + 5;const result = addFive(multiplyByTwo(3));

九、使用对象字面量简化对象的创建和定义

// 传统对象创建
const person = {firstName: 'John',lastName: 'Doe',age: 30,};// 对象字面量简化const firstName = 'John';const lastName = 'Doe';const age = 30;const person = { firstName, lastName, age };

十、使用适当的命名和注释来提高代码可读性

// 不好的
const x = 10; // 设置x的值为10
function a(b) {return b * 2; // 返回b的两倍
}
// 好的
const speed = 10; // 设置速度为10
function double(value) {return value * 2; // 返回输入值的两倍

十一、优雅的写条件判断代码

//普通if else
let txt = '';
if (falg) {txt = "成功"
} else {txt = "失败"
}//三元运算符
let txt = flag ? "成功" : "失败";//多个if else
// param {status} status 活动状态：1：成功 2：失败 3:进行中 4：未开始
let txt = '';
if (status == 1) {txt = "成功";
} else if (status == 2) {txt = "失败";
} else if (status == 3) {txt = "进行中";
} else {txt = "未开始";
}//switch case
let txt = '';
switch (status) {case 1:txt = "成功";break;case 2:txt = "成功";break;case 3:txt = "进行中";break;default:txt = "未开始";
}//对象写法
const statusMap = {1: "成功",2: "失败",3: "进行中",4: "未开始"
}//Map写法
const actions = new Map([[1, "成功"],[2, "失败"],[3, "进行中"],[4, "未开始"]
])

十二、封装条件语句

// 不好的
if (fsm.state === 'fetching' && isEmpty(listNode)) {// ...
}
// 好的
shouldShowSpinner(fsm, listNode){return fsm.state === 'fetching' && isEmpty(listNode)
}
if(shouldShowSpinner(fsm, listNode)){//...doSomething
}

十三、函数应该只做一件事

// 不好的
function createFile(name, temp) {if (temp) {fs.create(`./temp/${name}`);} else {fs.create(name);}
}
// 好的
function createFile(name) {fs.create(name);
}
function createTempFile(name) {createFile(`./temp/${name}`)
}

// 不好的
function emailClients(clients) {clients.forEach((client) => {const clientRecord = database.lookup(client);if (clientRecord.isActive()) {email(client);}});
}
// 好的
function emailClients(clients) {clients.filter(isClientRecord).forEach(email)
}
function isClientRecord(client) {const clientRecord = database.lookup(client);return clientRecord.isActive()
}

十四、Object.assign给默认对象赋默认值

// 不好的
const menuConfig = {title: null,body: 'Bar',buttonText: null,cancellable: true
};
function createMenu(config) {config.title = config.title || 'Foo';config.body = config.body || 'Bar';config.buttonText = config.buttonText || 'Baz';config.cancellable = config.cancellable === undefined ?config.cancellable : true;
}
createMenu(menuConfig);
// 好的
const menuConfig = {title: 'Order',buttonText: 'Send',cancellable: true
};
function createMenu(config) {Object.assign({title: 'Foo',body: 'Bar',buttonText: 'Baz',cancellable: true }, config)
}
createMenu(menuConfig);

十五、函数参数两个以下最好

// 不好的
function createMenu(title, body, buttonText, cancellable) {// ...
}
// 好的
const menuConfig = {title: 'Foo',body: 'Bar',buttonText: 'Baz',cancellable: true
};
function createMenu(config){// ...
}
createMenu(menuConfig)

十六、使用解释性的变量

// 不好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);
// 好的
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
cosnt [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode)

想对类中的属性进行更多自定义取/增/改的操作时，使用set/get

Object.defineProperty(data1,'age',{set:function(newAge){console.log(this.name+'现在'+newAge+'岁')},get:function(){return 18;}
})

class BankAccount {constructor(balance = 1000) {this._balance = balance;}// It doesn't have to be prefixed with `get` or `set` to be a//getter/setterset balance(amount) {console.log('set')if (verifyIfAmountCanBeSetted(amount)) {this._balance = amount;}}get balance() {console.log('get')return this._balance;}verifyIfAmountCanBeSetted(val) {// ...}
}
const bankAccount = new BankAccount();
// Buy shoes...
bankAccount.balance -= 100;
// Get balance
let balance = bankAccount.balance;

十七、让对象拥有私有成员-通过闭包来实现

// 不好的
const Employee = function(name) {this.name = name;
};
Employee.prototype.getName = function getName() {return this.name;
};
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined// 好的
const Employee = function(name){this.getName = function(){return name}
}
const employee = new Employee('John Doe');
console.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe
delete employee.name;
console.log(`Employee name: ${employee.getName()}`); // Employee name: undefined

十八、使用方法链

// 不好的
class Car {constructor() {this.make = 'Honda';this.model = 'Accord';this.color = 'white';}setMake(make) {this.make = make;}save() {console.log(this.make, this.model, this.color);}
}
const car = new Car();
car.setMake('Ford');
car.save();// 好的
class Car {constructor() {this.make = 'Honda';this.model = 'Accord';this.color = 'white';}setMake(make) {this.make = make;// NOTE: return this是为了用链式写法return this;}save() {console.log(this.make, this.model, this.color);// NOTE:return this是为了用链式写法return this;}
}
const car = new Car().setMake('Ford').save();