JavaScript常用小技巧

1.String类型转换Number类型

const str = '1.1';
console.log(+str)
console.log(~~str) //相当于Math对象中的floor
console.log(Number(str))
console.log(parseInt(str))
console.log(parseFloat(str))

2.数字分隔符

console.log(1_000_000)
//1000000

3.判断一个字符串为空的时候赋值

1. ?? 如何左边的值为null或undefined的时候会返回右边的值
2. ?? 如果左边有值则会那左边的值

const str= null ?? "string"
// string
const arr= [1,2] ?? "string"
// [1,2]

4.!!将任意类型转换为Boolean类型

let name=null;
console.log(!!name);//false
console.log(!!name?"张三":"李四");//李四

5.简写ifelse判断

const str = '';
console.log(str ? '真的' : '假的')
console.log(str && '真的')//如果str为空则返回' '
console.log(str || '真的')//如果str为空则返回“真的”

6.数组常用循环方法

const arr = [{ name: '张三', age: 14 }, { name: '李四', age: 14 }, { name: '王五', age: 20 }]

console.log(arr.find(item => item.name == '张三'))
//find查找的意思如果匹配的话会返回对应的对象{name: '张三', age: 14}
console.log(arr.filter(item => item.name == '张三'))
//filter会返回对应的类容构成一个新的数组[{name: '张三', age: 14}]
console.log(arr.map(item => item.name))
//map会把对应的name构造成一个新的数组 ['张三', '李四', '王五']
/***
 * reduce方法
 * 第一个参数是执行函数，第二个参数为初始值
 * reduce方法第一个参数说明
 * prev	上次调用回调函数返回的结果
 * cur	当前的元素值
 * index	当前的索引
 * array	原数组
 */
console.log(arr.reduce((prev, cur) => prev += cur.age, 0))//算出age的总年龄

console.log(arr.every(item => item.age > 14))//every方法是要数组中的每一项age都要大于14就会返回true否则false
console.log(arr.some(item => item.age > 14))//some方法是数组中的每一项age有一个大于14就返回true否则false

7.数组去重

let arr = [1, 2, 3, 1, 2, 3]
console.log([...new Set(arr)])

//利用对象的唯一性
let objArr = [{ name: '张三', age: 14 }, { name: '张三', age: 14 }, { name: '李四', age: 14 }]
let obj = {}
let newArr = objArr.reduce((prev, cur) => {
	//通过name名来去重
    !obj[cur.name] && (obj[cur.name] = true) && prev.push(cur);
    return prev
}, [])
console.log(newArr)
//利用map的唯一性
let objArr = [{ name: '张三', age: 14 }, { name: '张三', age: 14 }, { name: '李四', age: 14 }]
let map = new Map()
let newarr = objArr.filter((item) => {
    return !map.has(item.name) && map.set(item.name, true)
})
console.log(newarr)

8. 数组合并

let arr = [1, 2, 3]
let newArr = [4, 5, 6]
console.log([...arr, ...newArr])// [1, 2, 3, 4, 5, 6]
console.log(arr.concat(newArr))// [1, 2, 3, 4, 5, 6]

9.数组查找

let arr = [1, 2, 3]
console.log(arr.includes(1))//返回的是布尔类型
console.log(arr.indexOf(1) != -1)//从前向后找
console.log(arr.lastIndexOf(1) != -1)//从后向前找

10.对象转换数组

let obj = { name: '张三', age: 14 }

console.log(Object.keys(obj))//读取的是对象的key['name', 'age']
console.log(Object.values(obj))//读取的是对象的value ['张三', 14]
console.log(Object.entries(obj))//读取的是对象的key和value[['name', '张三'],['age', 14]] 是一个二维数组
console.log([['name', '张三'],['age', 14]].flat(Infinity))
//可以用数组的flat方法扁平化['name', '张三', 'age', 14]
//flat方法的Infinity 是深度的意思不管多少维数组都可以扁平化

11.读取对象

1.?. 的作用如果obj对象中没有我们想要的值会返回undefined而不会报错
2.如果不加 ?. 会报无法读取未定义的属性（读取“年龄”）

const obj = {
    name: "张三",
}
console.log(obj?.age)
console.log(obj.age)

12.最快获取dom的方法

1. HTML中带有 id 属性的元素，都会被全局的 ID 同名变量所引用

<div id="dome"></div>

原本获取 dom 是这样的

const el = document.getElementById('dome')  
console.log(el)   // <div id="dome"></div>

现在可以这样

console.log(dome)   // <div id="dome"></div>