一些好用的JavaScript技巧分享，有条件的向对象中添加属性,使用in检查属性是否存在对象中

1. 有条件的向对象中添加属性

可以使用展开运算符（ ... ）来有条件的向js对象快速添加属性：

const flag = true;
const person = {
    name: '雪碧可乐冰淇凌',
    ...(flag && { age: 18 })
}
console.log(person);//{age: 18,name: '雪碧可乐冰淇凌'}

如果 flage 为 false ，JavaScript会做这样的事情：

const person = {
    name: '雪碧可乐冰淇凌',
    ...(false)
}
console.log(person);//{name: '雪碧可乐冰淇凌'}

2.检查属性是否存在对象中

可以使用 in 关键字来检查对象中是否存在某个属性：

const person = {
    name: '雪碧可乐冰淇凌',
    age: 18
}
console.log('name' in person);//true
console.log('age' in person);//true

3.对象中动态属性名

只需要使用 [ ' key name ' ] 来添加属性：

const dynamic = 'age'
var person = {
    name:'雪碧可乐冰淇凌',
    [dynamic]:18
}
console.log(person);//{name: '雪碧可乐冰淇凌', age: 18}

同样的技巧也是可以动态键引用对象属性：

const keyName = 'name'
console.log(person[keyName]);//雪碧可乐冰淇凌

4.扁平化数组

原型 Array 上有一个方法 flat ：

const arr = [1, ,2,[3,4,[5,6]]]
const reasut = arr.flat()
console.log(reasut)//[1,2,3,4,[5,6]]

不传递参数的时候默认为一层，并且当数组里面有空项的时候，会过滤掉空值：

const arr = [1, ,2,[3,4,[5,6]]]
const reasut = arr.flat(2)
console.log(reasut)// [1,2,3,4,5,6]

也可以定义一个深度级别，指定一个嵌套的数组结构应该被扁平化的深度。

当传入 Infinity 时，相当于扁平化最深层次的数组：

const arr = [1, ,2,[3,4,[5,[6]]]]
const reasut = arr.flat(Infinity )
console.log(reasut)// [1,2,3,4,5,6]

5.Object.entries

大多数情况下我们使用 Object.keys 方法来迭代对象，此方法仅返回对象键的数组。而Object.values方法仅返回对象键值的数组：

const person = {name:'雪碧可乐冰淇凌',age:18}
console.log(Object.keys(person));// ['name', 'age']
console.log(Object.values(person));// ['雪碧可乐冰淇凌', 18]
console.log(Object.entries(person));//[['name', '雪碧可乐冰淇凌'],[['age', 18]]]

// 之前使用 keys 获取键和值
Object.keys(person).forEach((key) => {
    console.log('${key} is ${person[key]}');
});
// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
    console.log('${key} is ${value}');
});
// name is 雪碧可乐冰淇凌
 // age is 18

两种方法都返回相同的结果，但 Object.entries 获取键值相对来说更容易。

6.replaceAll方法

它用另一个字符串值替换所有出现的字符串：

const str = '雪碧-可乐-冰淇凌';
console.log(str.replaceAll('-', ' '));//雪碧 可乐 冰淇凌