前端代码——37种高效编写Javascript代码的优化技巧
高效编写Javascript代码的技巧
- 1. 对不允许更改的常量声明——使用“const”而不是“var”
- 2. 对允许更改的变量——使用“let”代替“var”
- 3. 声明对象——使用字面量：{}
- 4. 声明数组——使用字面量：[]
- 5. 连接字符串——使用模板字符串：``
- 6. 使用对象方法的简写——使用es6新特性：fn(){}
- 7. 对象中的值简写——使用es6新特性：{ value }
- 8. 将对象值分配给另一个对象的示例——使用扩展运算符：{ ...obj }
- 9. 给数组添加元素——使用数组方法：push
- 10. 连接数组——使用扩展运算符：[ ...arr1, ...arr2 ]
- 11. 获取对象的多个属性——使用解构赋值：{ name, value }
- 12. 从对象获取值——使用解构赋值：{ a, b }
- 13. 创建函数——使用箭头函数：() => {}
- 14. 函数中设置默认值——使用es6新特性：(a = 1) => {}
- 15. 求和——用“ reduce”代替“ forEach”和“ for”
- 16. 判断某个属性值是否存在于数组中——使用“some”代替“forEach”
- 17. 布尔值的快捷方式——使用隐式转换：===
- 18. 值的快捷方式——使用三目运算符
- 19. 循环遍历数组元素——使用for..in
- 20. if多条件判断——使用includes()
- 21. if...else...——使用隐式转换
- 22. null/undefined/''检查——使用逻辑运算符：||
- 23. 空对象{}检查——使用Object.keys(data).length
- 24. 空数组[]检查——使用data.length
- 25. 函数条件调用——使用三目运算符
- 26. switch条件判断——使用逻辑运算符：&&
- 27. 多行字符串——使用模板字符串：``
- 28. 函数隐式返回——使用箭头函数简化return
- 29. 重复多次字符串——使用repeat()
- 30. 指数运算——使用**代替Math.pow()
- 31. 把对象转换成一个由若干对象组成的数组——使用Object.entries()
- 32. 数字转换成整型——使用位运算符~~代替Math.floor()
- 33. 非布尔值类型转化成布尔值类型——使用!!代替Boolean()
- 34. 判断当前对象是否存在，若存在则执行下一个，不存在则抛出——使用可选链操作符?.代替&&逻辑运算符
- 35. 值为null或undefined时设置默认值——使用??代替||
-
-
-
- 【拓展】关于||与??的区别
-
-
- 36. 遍历获取对象中所有属性名——使用Object.keys()代替for...in
- 37. 遍历获取对象中所有属性值——使用Object.keys()代替for...in
1. 对不允许更改的常量声明——使用“const”而不是“var”
// bad
var a = 1;
// good
const a = 1;
2. 对允许更改的变量——使用“let”代替“var”
// bad
var a = 1;
for (var i; i < 10; i++){
a = 1 + i;
}
// good
let a = 1;
for (let i; i < 10; i++){
a += i
}
3. 声明对象——使用字面量：{}
// bad
const obj = new Object();
// good
const obj = {
};
4. 声明数组——使用字面量：[]
// bad
const arr = new Array();
// good
const arr = [];
5. 连接字符串——使用模板字符串：``
// bad
const str = 'world';
const newStr = 'hello' + str;
// good
const str = 'world';
const newStr = `hello ${
str}`;
6. 使用对象方法的简写——使用es6新特性：fn(){}
// bad
const obj = {
val: 1,
fn: function() {
return obj.val + 1;
}
}
// good
const obj = {
val: 1,
fn(){
return obj.val++;
}
}
7. 对象中的值简写——使用es6新特性：{ value }
// bad
const value = 1;
const obj = {
value: value };
//good
const value = 1;
const obj = {
value };
8. 将对象值分配给另一个对象的示例——使用扩展运算符：{ …obj }
// bad
const obj1 = {
a: 1, b: 2 };
let obj2 = {
c: 3, d: 4 };
obj2.a = obj1.a;
obj2.b = obj1.b;
// good
const obj1 = {
a: 1, b: 2 };
const obj2 = {
...obj1, c: 3, d: 4 };
9. 给数组添加元素——使用数组方法：push
// bad
const arr = [];
arr[arr.length] = "hello world";
// good
const arr = [];
arr.push("hello world");
10. 连接数组——使用扩展运算符：[ …arr1, …arr2 ]
// bad
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
const arr = arr1.concat(arr2);
// good
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
const arr = [...arr1, ...arr2];
11. 获取对象的多个属性——使用解构赋值：{ name, value }
// bad
function fn(obj) {
return `${
obj.name} ${
obj.value}`
}
// good
function fn({
name, value }) {
return `${
name} ${
value}`
}
12. 从对象获取值——使用解构赋值：{ a, b }
// bad
const obj = {
a: 1, b: 2 };
const a = obj.a;
const b = obj.b;
// good
const obj = {
a: 1, b: 2 };
const {
a, b } = obj;
13. 创建函数——使用箭头函数：() => {}
// bad
function fn() {
};
// bad
const fn = function() {
};
// good
const fn = () => {
};
14. 函数中设置默认值——使用es6新特性：(a = 1) => {}
// bad
const fn = (a, b) => {
if(!a) a = 1;
if(!b) b = 1;
return {
a, b };
}
// good
const fn = (a = 1, b = 2) => {
return {
a, b };
}
15. 求和——用“ reduce”代替“ forEach”和“ for”
// bad
const arr= [1, 2, 3, 4, 5];
let total = 0;
arr.forEach( (n) => {
total += n})
// bad
const arr = [1, 2, 3, 4, 5];
let total = 0;
for (let i; i < arr.length; i++){
total += arr[i];
}
// good
const arr = [1, 2, 3, 4, 5];
const total = arr.reduce((total, num) => total + num);
16. 判断某个属性值是否存在于数组中——使用“some”代替“forEach”
// bad
const arr = [{
a: 1 }, {
a: 2 }, {
a: 3 }];
let exist = false;
arr.forEach(item => {
if(item.a === 2) exist = true;
});
// good
const arr = [{
a: 1 }, {
a: 2 }, {
a: 3 }];
const exist = arr.some(item => item.a === 2)
17. 布尔值的快捷方式——使用隐式转换：===
// bad
const a = 1;
const b = 1;
let isTrue = false;
if(a === b) {
isTrue = true;
}
// good
const a = 1;
const b = 1;
const isTrue = a === b;
18. 值的快捷方式——使用三目运算符
// bad
const a = 5;
let b;
if(a === 5) {
b = 3;
} else {
b = 2;
}
// good
const a = 5;
const b = a === 5 ? 3 : 2;
19. 循环遍历数组元素——使用for…in
// bad
const arr= [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// good
const arr= [1, 2, 3, 4, 5];
for(let val of heroes) {
console.log(val);
}
20. if多条件判断——使用includes()
// bad
if(x === 'abc' || x === 'def' || x === 'ghi' || x === 'jkl'){
}
// good
if(['abc', 'def', 'ghi', 'jkl'].includes(x)){
}
21. if…else…——使用隐式转换
// bad
let test;
if(x > 10){
test = true;
}else{
test = false;
}
// good
const test = x > 10;
22. null/undefined/’'检查——使用逻辑运算符：||
// bad
if(data !== null || data !== undefined || data !== ''){
let arr = data;
}
// good
let arr = data || '';
23. 空对象{}检查——使用Object.keys(data).length
// bad
const data = {
};
if(JSON.stringify(data) == "{}"){
}
// good
const data = {
};
if(Object.keys(data).length){
}
24. 空数组[]检查——使用data.length
// bad
const data = [];
if(JSON.stringify(data) == "[]"){
}
// good
const data = [];
if(data.length){
}
25. 函数条件调用——使用三目运算符
// bad
function test() {
console.log('test1');
};
function test2() {
console.log('test2');
}
var test3 = 1;
if(test3 === 1){
test1();
}else{
test2();
}
// good
(test3 === 1 ? test1 : test2)();
26. switch条件判断——使用逻辑运算符：&&
// bad
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test3();
break;
}
// good
var data = {
1: test1,
2: test2,
3: test
};
data[1] && data[1]();
data[2] && data[2]();
data[3] && data[3]();
27. 多行字符串——使用模板字符串：``
// bad
const data = 'abc abc abc abc abc abc\n\t'
+ 'test test,test test test test\n\t'
// good
const data = `abc abc abc abc abc abc
test test,test test test test`
28. 函数隐式返回——使用箭头函数简化return
// bad
function fn(a) {
return Math.PI * a;
}
// good
const fn = a => (
Math.PI * a
)
29. 重复多次字符串——使用repeat()
// bad
let str = '';
for(let i = 0; i < 5; i++) {
str += 'test';
}
// good
'test '.repeat(5);
30. 指数运算——使用**代替Math.pow()
// bad
Math.pow(2, 3);
// good
2**3
31. 把对象转换成一个由若干对象组成的数组——使用Object.entries()
// bad
const data = {
a: 1, b: 2, c: 3 };
const arr = [];
for(const key in data){
arr.push([key, data[key]]);
};
console.log(arr);
// good
const data = {
test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
// 输出
[ [ 'a', 1 ],
[ 'b', 2 ],
[ 'c', 3 ] ]
32. 数字转换成整型——使用位运算符~~代替Math.floor()
(两个按位非运算符只适用于 32 位整型)
// bad
Math.floor(1.9) === 1;
// good
~~1.9 === 1
33. 非布尔值类型转化成布尔值类型——使用!!代替Boolean()
// bad
if(Boolean([].length)){
}
// good
if(!![].length){
}
34. 判断当前对象是否存在，若存在则执行下一个，不存在则抛出——使用可选链操作符?.代替&&逻辑运算符
可选链操作符?.的作用就是判断这个对象（res）下的（res.data）下的（res.data.list）是否为null或者undefined，当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错
// bad
let arr = res && res.data && res.data.list
// good
let arr = res?.data?.list
35. 值为null或undefined时设置默认值——使用??代替||
// bad
let arr = res && res.data || []
// good
let arr = res?.data ?? []
【拓展】关于||与??的区别
||： 判断布尔值为false时，赋默认值
??：只判断null和undefined时，赋默认值
console.log(1 || "xx") //1
console.log(0 || "xx") //xx
console.log(null || "xx") //xx
console.log(undefined || "xx") //xx
console.log(-1 || "xx") //-1
console.log("" || "xx") //xx
console.log(1 ?? "xx") //1
console.log(0 ?? "xx") //0
console.log(null ?? "xx") //xx
console.log(undefined ?? "xx") //xx
console.log(-1 ?? "xx") //-1
console.log("" ?? "xx") //''
36. 遍历获取对象中所有属性名——使用Object.keys()代替for…in
// bad
let arr = [];
for(const key in {
key1: 1, key2: 2}){
arr.push(key)
}
console.log(arr); // ["key1", "key2"]
// good
console.log(Object.keys({
key1: 1, key2: 2})); // ["key1", "key2"]
37. 遍历获取对象中所有属性值——使用Object.keys()代替for…in
// bad
let arr = [];
const obj = {
key1: 1, key2: 2};
for(const key in obj ){
arr.push(obj[key])
}
console.log(arr); // [1, 2]
// good
console.log(Object.values({
key1: 1, key2: 2})); // [1, 2]