JavaScript 代码优化技巧

获取 Array 最后一条数据

const list = [1,2,3,4]

const item1 = list.splice(-1)[0] // 4 list = [1,2,3]
const item2 = list.pop() // 3 list = [1,2]

// splice、pop方法都会对原有的Array对象进行拆解，若要保持原有Array完整性则可使用以下方法
const item3 = list.slice(-1)[0] // 2 list = [1,2]

获取 Array 中指定的对象

const list = [{ id: 1, name: 'Tom'}, { id: 2, name: 'Jerry'}]

// 获取id为 2 的对象
const item = list.find(ele => ele.id === 2)[0] // { id: 2, name: 'Jerry'}

判断对象中是否存在该属性

const obj = { a: 1, b: 2 }

// 方法一 hasOwnProperty
const property1 = obj.hasOwnProperty('a') // true
const property2 = obj.hasOwnProperty('c') // false
const property3 = obj.hasOwnProperty("toString") // false 这是一个继承属性

// hasOwnProperty('a') 判断自有(非继承)属性中是否有属性'a'
// 若原有对象自有属性包含hasOwnProperty，再使用该方法则会报错，且eslint判定该写法为非正规写法
// 避免这种细微的 bug，可以写为
Object.prototype.hasOwnProperty.call(obj, 'a') // true

// 方法二 in （判断属性（自有、继承）中是否有属性'a'）
'a' in obj            //true，自有属性存在
'y' in obj         //false
'toString' in obj     //true，是一个继承属性

元素赋值(解构)

// const obj = {}
// const arr = []
// const str = ''
const [obj, arr, str] = [{}, [], '']

const data = { a: 1, b: 2, c: 3 }

// const a = data.a
const { a } = data // a = 1 

类型转换

const [valueString, valueNumber, valueObj] = ['3.14', 123, { a: 1 }]

// string 转 number、boolean
const number = +valueString // 3.14
const boolean = !!valueString // true

// number 转 string、boolean
const str2 = valueNumber + '' // '123'
const boolean2 = !!valueNumber // true

//object(array) 转 string //于js中array只是特殊一点(key为数字)的object
const str3 = JSON.stringify(valueObj) // '{'a':1}'

// string 转 obj(array)
const obj4 = JSON.parse(str3) // { a: 1 }

聚合函数 ??

// ?? 当前面元素不为 null 或 underfind 时向后执行
const str =  NaN ?? 123 // NaN

switch 优化

// switch (data) {
//  case 1:
//    test1();
//  break;
//  case 2:
//    test2();
//  break;
//  case 3:
//    test();
//  break;

const data = {
  1: test1,
  2: test2,
  3: test
}

data[something] ?? data[something]()

克隆

const [arr, obj] = [[1, 2, 3], { a: 1 }]

// 浅克隆 数据表层（第一层）克隆
const cloneArr = arr.slice() // [1, 2, 3]
const cloneObj = { ...obj } // { a: 1 }
const cloneArr = [...arr] // [1, 2, 3]

// 深克隆 完全是一个新的对象
const cloneDeep = JSON.parse(JSON.stringify(obj)) // { a: 1 }

按位非运算符（~）

// 只适用于32位整数
// 按位非运算符（~），反转操作数的位。
// 操作数被转换为32位二进制表示（0和1）。超过32位的数字将丢弃其最高有效位。
// const a = 5 // 5(0000000000000101)
// const b = ~a  // -6(1111111111111010)

// 简化indexOf
// if(arr.indexOf(item) > -1) {} // item found
// if(arr.indexOf(item) === -1) {} // item not found

if(~arr.indexOf(item)) {} // item found	  ~arr.indexOf(item) 返回值为0
if(!~arr.indexOf(item)) {} // item not found	!~arr.indexOf(item) 返回值为true

//如果输入为浮点型数据类型，则值会在执行按位操作前通过截断转换为整型值。借此 我们可以向下取整
const float = 1.3
// Math.floor(float) // 1

const int = ~~float // 1

数组中最大和最小的值

const arr = [1, 2, 3]

Math.max(…arr); // 3
Math.min(…arr); // 1

参考 https://mp.weixin.qq.com/s/jO7hoh1ffESq8jBfuXZ9Vw