文章目录
1.保留两位小数,不够两位数不补0
let num1 = 111
console.log(parseFloat(num1.toFixed(2))) //111
//不够两位数不补0
let num2 = 111.1
console.log(parseFloat(num1.toFixed(2))) //111.1
//补0
console.log(num1.toFixed(2)) //111.10
let num3 = 111.12
console.log(parseFloat(num1.toFixed(2))) //111.12
let num4 = 111.123
console.log(parseFloat(num1.toFixed(2))) //111.12
2.解构赋值
2.1 提取数据
const name= this.options.userName
const phone= this.options.userPhone
const address = this.options.address
//优化后
const {userName:name,userPhone:phone,address } = this.options
2.2 交换变量值
let a = 2
let b = 3
[a,b] = [b,a]
3.includes
includes用于检查数组或字符串中是否包含特定元素的方法
3.1 多个if条件优化
if(name === 'test1' || name === 'test2' || name === 'test3'|| name === 'test4'){}
//优化后
if(['test1','test2','test3','test4'].includes(name)){}
3.2 判断数组对象中是否有某值
let arr = [
{name:'Miruna'},
{city:'shanghai'},
{time:'2024'}
]
console.log(arr.some(obj=>Object.values(obj).includes('2026'))) //false
console.log(arr.some(obj=>Object.values(obj).includes('2024'))) //true
3.3 判断二维数组中是否有某值
let plants = [[2,3,6,8],[4,5,8,9],[5,9,10,12]]
console.log(plants.flat().includes(5)) //true
console.log(plants.flat().includes(20)) //false
4. null、undefined、空值检查
if(a != undefined || a != null){
b = a
}
//优化后
b = a || ''
//或者
b = a ?? ''
?? 和 ||区别:
??
左侧值为null
或undefined
才会取右边的值;而||
,左侧值为null
,undefined
,false
,0
,NaN
,''
时会取右边的值。
?.
只判断左侧值为null
时取右侧的值
5.数组去重
const myArray = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"]
//实现返回['a', 'b', 'c', 'e', 'd']
//1.filter
const filterArray = myArray.filter((value,index,self)=>{
return self.indexOf(value) === index
})
// 2.reduce+includes
const reduceArray = myArray.reduce((acc,cur)=>{
if(!acc.includes(cur))return [...acc,cur]
return acc
},[])
//3.set
const setArry=[...new Set(myArray)]
6. 去除数组对象中的重复值
const demo = [
{ value: "001", label: "aaa" },
{ value: "001", label: "bbb" },
{ value: "002", label: "aaa" },
{ value: "002", label: "aaa" },
]
//实现:[
// {"value": "001","label": "aaa"},
// {"value": "001","label": "bbb"},
// {"value": "002","label": "aaa"}]
//1.filter
const result1 = demo.filter((obj,index,self)=>{
return index === self.findIndex(item=>item.value === obj.value && item.label=== obj.label)
})
//2.reduce
const result2 = demo.reduce((acc,cur)=>{
let sameList = acc.some(item=>item.value === cur.value && item.label === cur.label)
if (!sameList) acc.push(cur)
return acc
},[])
//3.map
const map = new Map()
demo.forEach((obj)=>map.set(JSON.stringify(obj),obj))
const result3 = [...map.values()]
7.reduce
7.1统计值出现的次数
const colorArr = ["red","blue","red","pink","red"]
const result= colorArr.reduce((accumulator,currentValue)=>{
const current = accumulator[currentValue] ?? 0
return {
...accumulator,
[currentValue]: current+ 1
}
},{})
// {'red':3,'blue':1,'pink':1}
7.2.按属性对对象进行分组
const colorArr = [
{color:'red',id:1},
{color:'blue',id:2},
{color:'pink',id:2},
]
const groupColor = colorArr.reduce((acc,cur)=>{
const key = cur['id']
const curGroup = acc[key] ?? []
return{
...acc,
[key]:[...curGroup,cur]
}
},{})
// {
// 1: [{ color:'red',id:1 }],
// 2: [
// {color:'blue',id:2},
// {color:'pink',id:2}
// ]
// }
7.3按属性对数组进行分组
const arr = [
{ province:'湖南',
city:'长沙'
},
{ province:'湖南',
city:'岳阳'
},
{ province:'上海',
city:'浦东'
}
]
const result = arr.reduce((acc,cur)=>{
let sameList = acc.find(item=>item.value === cur.province)
if(!sameList){
acc.push({
value:cur.province,
children:[cur.city]
})
}else{
sameList.children.push(cur.city)
}
return acc
},[])
//[
// {
// value:'湖南',
// children:['长沙','岳阳']
// },
// {
// value:'上海',
// children:['浦东']
// }
// ]