ES6实用小技巧

最新推荐文章于 2024-02-27 16:28:44 发布

谭鱼鱼儿

最新推荐文章于 2024-02-27 16:28:44 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： js相关文章标签： javascript

本文链接：https://blog.csdn.net/sinat_34626741/article/details/124187327

js相关专栏收录该内容

15 篇文章

订阅专栏

本文介绍了JavaScript中的一些核心操作，包括对象合并、解构赋值、可选操作符、空值合并符、数组操作以及对象冻结和数值格式化。通过实例展示了如何使用这些语法特性进行高效编程，同时讲解了如何处理可能遇到的边界情况和数据清理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、合并多个对象

const a = {
    name: '张三',
    age: 20
}
const b = {
    address: '西藏',
    sex: '男'
}
let person = {...a,
    ...b
}
console.log(person)    // 打印出	{name: '张三', age: 20, address: '西藏', sex: '男'}

// 相同属性会被后面的所覆盖
const c = {
    name: '李四'
}
person = {...person,
    ...c
}
console.log(person) // 打印出	{name: '李四', age: 20, address: '西藏', sex: '男'}

2、解构赋值

const person = {
    name: '张三',
    age: 21,
    color: ['Red ', 'Yellow ', 'Green ']
}
const {
    name,
    age,
    color
} = person
const[red, yellow, green] = color
console.log(name, age, red, yellow, green)// 打印出：张三 21 Red  Yellow  Green

3、可选操作符（？.）:允许读取位于对象链深处的属性，而不用验证是否有效。类似于(.),区别在于，前者引入null或者是undefined的时候不会报错，只会返回undefined

//一般处理函数的时候写法
if (res && res.data && res.data.data) {   
   // code
} 
// 可选操作符的写法
if (res?.data?.data) {
  // code
}

4、空值合并符（??）:逻辑运算符，当左侧为null或者是undefined的时候返回右侧的值，类似于||，但区别在于如果左侧是‘’字符串，前者返回‘’，后者返回右侧的字符

console.log(18??'张三') // 打印：18
console.log(undefined??'张三') // 打印：张三
console.log(null??'张三') // 打印：张三
// 下面是和 || 的区别
console.log(''||'张三') // 打印：张三
console.log(''??'李四') // 打印：''

5、数组常见操作

// 1、去除数组中为false的数据
const arr1=[0,1,null,undefined,'']
console.log(arr1.filter(Boolean)) // 返回【1】

// 2、找到数组中最大最小值
const arr2=[0,1,100,2,99]
const max=Math.max(...arr2)
const min=Math.min(...arr2)
console.log(max,min) // 返回 :100 0

// 3、清空数组
arr2.length=0
console.log(arr2) // 打印:[]

// 4、删除重复数据
const arr3=[0,1,100,2,99,0,1]
const newArr=[...new Set(arr3)]
console.log(newArr) // 	[0, 1, 100, 2, 99]

// 5、随机取一个值
console.log(newArr[Math.floor(Math.random()*newArr.length)]) // 每次运行结果不同

6、冻结对象

const obj = {
    name: '张三',
    age: 20
}
Object.freeze(obj) // 冻结对象
obj.name='李四' // 此赋值无效
console.log(obj) // {name: '张三', age: 20}

7、保留指定位数小数

const num=0.123456
console.log(num.toFixed(2)) // 0.12