一些好用的JavaScript技巧

分享一些在项目中使用到的一些技巧 会持续更新 ~

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 = '羊乐多-18岁-是个女的';
        console.log(str.replaceAll('-', ' '));//羊乐多 18岁 是个女的

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值