js优化技巧

昨天在前端开发博客的公众号上面看见了2021年前端开发者需要知道的34中js优化技巧这篇文章，里面有些方法之前没有怎么用，觉得很实用，特记录下来

1、带有多个条件的if语句

a、可以把多个放在一个数组里面，然后调用数组的includes方法
b、多个条件的话还可以用switch

if(['abc','xyj','def'].includes(x)){}

switch(x){}

2、简化if true…else

对于只带有简单的逻辑的if else条件，可以实用三元运算符

const x = 8
let test = x > 10 ? true : false

如有嵌套条件

const x= 300
let test = (x > 100) ? 'more 100' : (x < 50) ? 'less 50' : 'between 50 and 100'

3、声明变量

同时声明多个变量的简写

let [test1,test2] = [1,1];
console.log(test1,test2) // 1, 1

4、null、undefined和空值检查

let a = null
// 判断是否为null,空字符串、零
if(!a){}
// 判断是否为undefined
if(typeof(a) === 'undefined'){}
// 判断是否为null，undefined，零
if(!a && typeof(a) !== 'undefined' && a!= 0 ){}

5、null、undefined检查，默认赋值

// 一般检查
let test = null
let test2 = test || ''
console.log(test2) // ''
// 或者使用？？操作符
let test3 = test ?? ''
console.log(test3) // ''

6、用于多个条件判断的&&操作符

只有变量为true时才调用函数，可以使用&&操作符

const test = true
test && getList()

7、简短的函数调用

可以使用三元操作符来实现多个函数调用

(test3 === 1 ? test1 : test2)()

8、switch简化

我们可以将条件保存在键值对象中，并根据条件来调用它们

let something = 1
let data = {
	1:test1,
	2:test2,
	3:test
}
data[something] && data[something]();

9、隐式返回

通过使用箭头函数，我们可以直接放置，不需要return语句

let data = value => (Math.PI * value)

10、延展操作符

// 数据构造
const data = [1, 2,3]
const test = [4,5,...this.data]
console.log(test) // 1,2,3,4,5
// 进行浅数据克隆
const test2 = [...this.data]

11、解构赋值

const data = {
	test1,
	test, 
	test3
}
const {test, test3} = this.data

12、find、filter、findIndex

const data = [
	{
		type: 'test1',
		name: 'abc'
	},
	{
		type: 'test2',
		name: 'abc1'
	},
	{
		type: 'test3',
		name: 'abc3'
	},
]
// find,寻找到符合条件的值,并把它返回
const dataFind = data.find(value => data.type === 'test1')
// {type: 'test1',name: 'abc'}

// filter,返回符合条件的数据，返回新数据,他不好对原数组进行操作
const dataList = data.filter(value => value.name === 'abc')
// {type: 'test1',name: 'abc'}

//findIndex,查找符号条件的数据，并返回第一个符号条件的元素的下标；没有找到就返回-1
const index = data.findIndex(value => value.name === 'abc1')
// 1

13、indexOf的按位操作简化

查找第一层数组是否含有某个值
字符串和数组都可以用indexOf查找指定字符

if(~arr.indexOf(item)){} // item found
if(!~arr.indexOf(item)){} // item not found
//includes()函数,查看数组里面是否含有指定的值,返回布尔类型
if(arr.includes(item)){}

14、object.entries(),object.values(),object.keys()

// object.enteries()，获取对象的键值对
const data = {test: 'abc', test1: 'bfe', test2: 'uiy',test3: 'iou'}
const arr = Object.entries(data)
console.log(arr)
//
[['test','abc'],['test1','bfe'],['test2','uiy'],['test3','iou']]

//object.values,获取对象属性的值
const arr1 = Object.value(data)
console.log(arr1)
// ['abc','bfe','uiy','iou']

//object.keys,获取对象的键
const arr1 = Object.keys(data)
console.log(arr1)
// ['test','test1','test2','test3']

15、双重按位操作

// 数值向下取值
Math.floor(1.9) === 1 // true
~~1.9 === 1 // true

16、重复字符串多次

赋多次重复字符

'test '.repeat(5)
// test test test test

17、查找数组最大值、最小值

const arr = [1, 2, 3]
Math.max(...arr) // 3
Math.min(...arr) // 1