你不得不看的js代码优化篇

2020.11.07
评论

运算符

更加简便的运算结构

短路运算符

// 更方便的判断执行
let bool = false;
 
bool && console.log(1);
// 相当于 if(bool) console.log(1);
 
bool || console.log(0);
// 相当于 if(!bool) console.log(0);

三元运算符

// 更方便的选择执行
let bool = false;
 
// 判断赋值
let res = bool? 1 : 0;
// 相当于 if(bool){ let res = 1 }else{ let res = 0 }
 
// 判断执行
res? console.log(1) : console.log(1);
// 相当于 if(bool){ console.log(1) }else{ console.log(1) }

位运算

更加底层的运算方式,速度较快,而且基本上语言通吃

  1. 快速求x的y方:x<<y
  2. 小数a向下取值:a|0
  3. 小数a向上取值:a+0.5|0
  4. 将数据a转换为bool:!!a

解构赋值

快捷的对象数组取值赋值操作

解构

let obj = { name: 'adic', age: 18 };
let arr = [1, 2];
 
let { age, name } = obj;
// 相当于 let age = obj.age; let name = obj.name;
// 如果obj不存在age属性,则返回undifined
 
let [a, b] = arr;
// 相当于 let a = arr[0]; let b = arr[1]; 
// 别名
let { age:curAge } = obj;
// 相当于 let curAge = obj.age
let [a: x] = arr;
// 相当于 let x = arr[0]
 
// 默认值,只有获取的值为undifineds时才会使用
let { sex = 1 } = obj;
// 类似 let sex = obj.sex ? obj.sex : 1
let [a, b, c = 3] = arr;
// 类似 ... let C = arr[2] ? arr[2] : 3
 
// 嵌套解构
let comic = { elses: { type: 1, count: 0 } };
let { elses: { type } } = comic;
// 相当于 let type = comic.elses.type
 
let test = [[1, 2], 3];
let [[a], b] = test;
// 相当于 let a = test[0][0]; let b = test[1];
 
let mixin = { names: ['jack', 'lucy'] };
let { names: [w] } = mixin;
// 相当于 let w = mixin.names[0]

赋值

// 快速定义多个变量并赋值
let [a, b, c] = [1, {}, []];
// 相当于 let a = arr[0]; let b = arr[1]; let c = arr[2];
 
// 内容交换
[a, b] = [b, a];
// 作用相当于 let c; c=a; a=b; b=c;

展开

快捷的数据降维处理

let arr = [1,2,3];
let obj = { name: 'jack' }
 
// 浅拷贝
let arrB = [...arr];
let objB = [...obj];
// 注意,单层...只能展开单层的内容,如果展开内容依然存在引用类型,则其只是单纯的地址引用
 
// 类数组转数组(伪数组不能使用数组api)
let doms = HTMLCollection(3) [h4, h4, h4]; // 伪代码,非真实数据
doms = [...doms];
 
// 数组/对象合并
let obj1 = { name: 'adic' };
let obj2 = { age: 18 };
let objs = { ...obj1, ...obj2 }; // { name: 'adic', age: 18 }
 
let arr1 = [1,2];
let arr2 = [3,4];
let arrs = [...arr1, ...arr2]; // [1,2,3,4]

循环扩展

基于for的扩展,使其语法更加简洁有效

let arr = [['name', 'jack'], ['age', 18]];
 
// for..in 循环数组或者对象,结果为下标或者属性名称
// for..of 循环数组、字符串,结果为值
for(const i in arr){
    // i相当于当前被遍历值
}
// 配合展开
for(const [a, b] in arr){
    // 当前被遍历值[0] 当前被遍历值[1]
}
const obj = {
    name: 'david',
    age: 20,
    favorite: 'comic'
}
 
// 遍历器
// Object.keys() 将对象的所有键变成数组输出
// Object.values() 将对象的所有键对应的值变成数组输出
// Object.entries() 将对象的所有键和其对应的值变成数组输出
for(const [a, b] of Object.entries(obj)){
    // 对象属性名 对象值
}