整理几条使用ES6处理起来更方便的方法,自己也加深一下印象
1.将十进制转换为二进制或十六进制
const num = 10
console.log('二进制', num.toString(2)) // 1010
console.log('十六进制', num.toString(16)) // a
2.合并多个对象
运用扩展运算符实现对象合并
const person = {
name: 'sanbai',
age: 18
}
const address = {
city: 'nanjing',
area: 'gulou'
}
console.log('person + address', { ...person, ...address });
// {name: 'sanbai', age: 18, city: 'nanjing', area: 'gulou'}
对于合并数组和字符串,用concat()方法即可
3.解构赋值
解构赋值是对赋值运算符的扩展
// 对象的解构,最基础的用法是使用和属性相同的名字,就可以解构到属性值,如下所示
const person = {
name: 'sanbai',
age: 18,
area: ['gulou', 'qinhuai', 'xuanwu']
}
const { name, age, area } = person
const [gulou, qinhuai, xuanwu] = area
console.log('name', name); // sanbai
console.log('age', age); // 18
console.log('area', area); // ['gulou', 'qinhuai', 'xuanwu']
console.log('gulou', gulou); // gulou
// 可以利用解构赋值简洁地实现变量交换
let a=10
let b=20
[a,b]=[b,a]
console.log(a) // 20
console.log(b) // 10
4. 可选链操作符
项目中经常会遇到深层次属性的验证,我们所能做的就是通过 && 每层依次验证,简化的方法就是运用可选链操作符(?.), 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为null 或者 undefined 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,同样返回 undefined。
let three = obj.first && obj.first.second
为了避免报错,在访问obj.first.second之前,要保证obj.first 的值既不是null,也不是 undefined。如果只是直接访问 obj.first.second,而不对 obj.first 进行校验,则有可能抛出错误。
有了可选链操作符(?.),在访问 obj.first.second 之前,不再需要明确地校验 obj.first 的状态,再用短路计算获取最终结果
let three = obj.first?.second;
5.三目运算符
语法为: 条件 ? 结果1 : 结果2,当条件的值为真时执行结果1,否则执行结果2
在做条件判断的时候,最常用的是if else,而在逻辑多次判断的时候,三目运算符逻辑更简洁。
// a的值根据num的值是否大于5做判断,如果大于5则取num,否则等于5
const num = 10
// if else
let a
if (num > 5) { a = num } else { a = 5 } // 10
// 三目运算符
const a = num > 5 ? num : 5 // 10
6. 冻结对象
Object.freeze(obj),顾名思义:冻结对象,不可变更
const obj = {
name: 'sanbai',
age: 18
}
Object.freeze(obj)
obj.age = 19 // error 不可更改,因为sanbai一直18岁
console.log('obj', obj); {name: 'sanbai',age: 18}
7. 数组去重
利用Set和扩展运算符...
const arr = [1, 2, 3, 1, 3, 2]
const arr1 = [...new Set(arr)]
console.log('arr1', arr1); // [1,2,3]
console.log('arr', arr); // [1, 2, 3, 1, 3, 2]
8. 清空数组
设置数组的length为0即可
const arr=[1,2,3,4,5]
arr.length=0
console.log('arr',arr) // []
9. 获取数组的最大值和最小值
用Math和扩展运算符 ...
const arr = [1, 2, 3, 4, 5, -1, -9, 8]
const max = Math.max(...arr)
const min = Math.min(...arr)
console.log('max', max) // 8
console.log('min', min) // -9
10. 过滤数组中值为 false 的值
运用filter方法过滤掉boolean值为false的值,返回为true的值
const arr = ['sanbai', 0, undefined, null, 18, false]
const arr1 = arr.filter(Boolean)
console.log('arr1', arr1); // ['sanbai', 18]
完结,智者不入爱河,建设美好新中国!❀❀❀