近段时间向前端靠拢,觉得有必要整理一下前端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") //xxconsole.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遍历对象包括所有继承的属性,所以如果只是想使用对象本身的属性需要做一个判断;