JavaScript篇前端代码的简化（优化）小技巧

Jon_Ronson

已于 2022-02-18 11:56:36 修改

阅读量857

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

于 2022-02-18 11:38:00 首次发布

本文链接：https://blog.csdn.net/Jon_Ronson/article/details/122979408

版权

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

近段时间向前端靠拢，觉得有必要整理一下前端JavaScript运用中的小技巧，代码简洁能提高代码编写效率，提高代码可阅读性，减少编码错误率，提供代码可维护性。本文以四种分类描述简化（优化）前和后的对比，非全部简化（优化）小技巧，只是个人遇到过并觉得有必要描述的编码，是否借鉴纯凭个人喜好？不喜勿喷，话不多说，直接上代码。

一、按赋值（创建）分类

1).不允许变更的常量、允许变更的变量声明
// before
var a = 1;
// after
const a = 1;
let a = 1;

2).对象、数组声明
// before
const obj = new Object();
const arr = new Array();
// after
const obj = {};
const arr = [];

3).给多个变量赋值
// before
let a, b, c;
a = 1;
b = 2;
c = 3;
// after
let [a, b, c] = [1,2,3]

4).字符串串联
// before
const str = 'world';
const newStr = 'hello' + str;
// after
const str = 'world';
const newStr = `hello ${str}`;

5).重复多次字符串
// before
let str = '';
for(let i = 0; i < 5; i++) {
	str += 'test';
}
// after
'test '.repeat(5);

6).对象中的值简写
如果属性名与key名相同，则可以采用ES6的方法：
// before
const value = 1;
const obj = { value: value };
//after
const value = 1;
const obj = { value };

7).两个对象、数组融合
// obj before
const obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
obj2.a = obj1.a;
obj2.b = obj1.b;
// obj after
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };

// arr before
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
const arr = arr1.concat(arr2);
// arr after
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
const arr = [...arr1, ...arr2];

8).给数组添加元素
// before
const arr = [];
arr[arr.length] = "hello world";
// after
const arr = [];
arr.push("hello world");

9).创建函数
// before
function fn() {};
// before
const fn = function() {};
// after
const fn = () => {};

10).函数中设置默认值
// before
const fn = (a, b) => {
	if(!a) a = 1;
	if(!b) b = 1;
	return { a, b };
}
// after
const fn = (a = 1, b = 2) => {
	return { a, b };
}

二、按判断、运算分类

1).布尔值的快捷方式
// before
const a = 1,b = 1;
let isTrue = false;
if(a === b) {
	isTrue = true;
}
// after
const a = 1,b = 1;
const isTrue = a === b;

2).值的快捷方式
// before
const a = 5;
let b;
if(a === 5) {
	b = 3;
} else {
	b = 2;
}
// after
const a = 5;
const b = a === 5 ? 3 : 2;

3).或者多条件判断
// before
if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}
// after
let options = ['duck', 'dog', 'cat' ]
if (options.includes(value)) {
	//....
}

4).null/undefined/''/ 检测空
// before
if(data !== null || data !== undefined || data !== ''){
	let arr = data;
}
// after
let arr = data || '';

5).判断当前对象是否存在
// before
let arr = res && res.data && res.data.list
// after
let arr = res?.data?.list

6).值为null或undefined时设置默认值
// before
let arr = res && res.data || []
// after
let arr = res?.data ?? []

7).switch-case更短的替代方案
const num = 3
// before
switch (num) {  
    case 1:
        console.log(123);
        break;
    case 2: 
        console.log(456);
        break;
    case 3: 
        console.log(789);
        break;
}

// after
cases = {  
    1: () => {
        console.log(123);
    },
    2: () => {
        console.log(456);
    },
    3: () => {
        console.log(789);
    },
    default: () => {
        console.log('default');
    }
};
cases[num]() || cases['default'](); // 789

8).switch条件判断
// before
const num = 3
switch (num) {
	case 1:
		test1();
		break;
	case 2:
		test2();
		break;
	case 3:
		test3();
		break;
}
// after
var data = {
	1: test1,
	2: test2,
	3: test3
};
data[num] && data[num]();

9).函数条件调用
// before
function test() {
	console.log('test1');
};
function test2() {
	console.log('test2');
}
var test3 = 1;
if(test3 === 1){
	test1();
}else{
	test2();
}
// after
(test3 === 1 ? test1 : test2)();

10).指数运算
// before
Math.pow(2, 3);  //2的3次方
// after
2**3

11).数字转换成整型
// before
Math.floor(1.9) === 1;  //取整数
// after
~~1.9 === 1

12).非布尔值类型转化成布尔值类型
// before
if(Boolean([].length)){}
// after
if(!![].length){}

13).在数组中查找最大值和最小值
// before
let arr = [1,2,3,4,5,9]
// after
Math.max(...arr) // 9 
Math.min(...arr) // 1

14).求和
// before
const arr= [1, 2, 3, 4, 5];
let total = 0;
arr.forEach( (n) => { total += n})
// before
const arr = [1, 2, 3, 4, 5];
let total = 0;
for (let i; i < arr.length; i++){
  total += arr[i];
}
// after
const arr = [1, 2, 3, 4, 5];
const total = arr.reduce((total, num) => total + num);

三、按对象、数组分类

1).JavaScript循环简写方法
// before
for (let i = 0; i < [].length; i++){}
// after...
let len = [].length;
for(var i = 0, i < len; i++){}
for (let index in []){}
for(let val of []) {}
[].forEach((item) =>{});

2).从对象获取值
// before
const obj = { a: 1, b: 2 };
const a = obj.a;
const b = obj.b;
// after
const obj = { a: 1, b: 2 };
const { a, b } = obj;

3).从数组获取值
const Arr = [1, 2, 3, 4];
// before
const first = Arr[0];
const second = Arr[1];
// after
const [first, second] = Arr; 

4).空对象{}检查
// before
const data = {};
if(JSON.stringify(data) == "{}"){}
// after
const data = {};
if(Object.keys(data).length){}

5).空数组[]检查
// before
const data = [];
if(JSON.stringify(data) == "[]"){}
// after
const data = [];
if(data.length){}

6).把对象转换成一个由若干对象组成的数组
// before
const data = { a: 1, b: 2, c: 3 };
const arr = [];
for(const key in data){
	arr.push([key, data[key]]);
};
// after
const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
// 输出
[ [ 'a', 1 ],[ 'b', 2 ],[ 'c', 3 ] ]

7).遍历获取对象中所有属性名
// before
let arr = [];
for(const key in {key1: 1, key2: 2}){
    arr.push(key)
}
// after
arr = Object.keys({key1: 1, key2: 2})
// 输出
 ["key1", "key2"]

8).遍历获取对象中所有属性值
// before
let arr = [];
const obj = {key1: 1, key2: 2};
for(const key in obj ){
    arr.push(obj[key])
}
// after
arr = Object.values({key1: 1, key2: 2})
// 输出
 [1, 2]

9).判断某个属性值是否存在于数组中
// before
const arr = [{ a: 1 }, { a: 2 }, { a: 3 }];
let exist = false;
arr.forEach(item => {
	if(item.a === 2) exist = true;
});
// after
const arr = [{ a: 1 }, { a: 2 }, { a: 3 }];
const exist = arr.some(item => item.a === 2);
//输出
true

10).想从数组中查找某个对象
// before
const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}
// after
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
// 输出
{ type: 'Dog', name: 'Tommy' }

四、其他分类

1）.取整
1.3 | 0         // 1
-1.9 | 0        // -1

2）.判断对象中是否存在某个属性
'a' in { a: 1, b: 2, c: 3 } // true
'd' in { a: 1, b: 2, c: 3 } // false

3).删除对象某个属性
let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject);   
// 输出
{el1: '1', el2: '2', el3: '3'}

4).过滤数组中的所有假值
const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]) 
// 输出 
[ 1, 2, 3, 'a', 's', 34 ]

5).对象数组按照某个属性查询最大值、最小值
var array=[
        {
            "id": 1,
            "name": "满意度",
            "value": "70"
        },
        {
            "id": 2,
            "name": "满意度",
            "value": "30"
        },
        {
            "id": 3,
            "name": "满意度",
            "value": "100"
        }];
        
 // 一行代码搞定
Math.max.apply(Math, array.map(function(o) {return o.value}))
Math.min.apply(Math, array.map(function(o) {return o.value}))

拓展：

一、关于||与??的区别

||：判断布尔值为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")        //''

二、If,for…in,for…of和的使用

能用三元运算符就用,减少if的嵌套；
减少多余条件判断，查询结束立即返回“（早返回，多返回）”，如果是函数返回if里面和外面返回相同的数据类型；
If…else if…else多个条件时以else结尾，因为符合防御性编程规则；
NaN不应该用于比较，应该是判断是否是数字；
switch…case使用在至少有三个判断值，case不可省，每次case必须用break跳出；
for…of遍历数组和字符串；
for…in遍历对象；
for…in遍历对象包括所有继承的属性，所以如果只是想使用对象本身的属性需要做一个判断；