奇偶性 类型 去重 css中:is()用法

1、使用&判断 判断奇偶性

                // 偶数 & 1 = 0
                // 奇数 & 1 = 1
                console.log( 7&1?'奇数':'偶数' )  //  奇数
                console.log( 8&1?'奇数':'偶数' )  //  偶数

2、使用~~取整 使用~改变类型

                  let  num='12.333';
                  console.log(~~num);  12
                  console.log(num>>0);  12
                  console.log(num<<0);  12
                  console.log(num|0); 12
                console.log(typeof num)  string
                // 使用~改变类型 只能用于字符串转数字操作
                console.log(typeof ~num)  number

3、解构、合并、判断操作

      一、解构
      const obj = {a:1, b:2, c:3, d:4, e:5,}
      const {a,b,c,d,e} = obj || {};
      console.log(a,'11');
      二、合并
     const obj1 = {a:1,}
     const obj2 = { b:1}
     const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}
     三、判断操作
       let value = ''; //  最终结果输出不成功
            if (value != null && value != undefined && value != '') {
                console.log('成功!!!')
            } else {
                console.log('不成功!!!')
            }   
         ((value ?? '') !== '')=(value != null && value != undefined && value != '')
                                      
              let value = 1234567;  // 输出成功
            if ((value ?? '') !== '') {
                console.log('成功')
            } else {
                console.log('不成功!!!')
            }

4、使用 CSS 的 :is() 减少你的代码
is() 是一个 CSS 伪类函数,该函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素

  <div class="container-2">
        <p class="title">计算机0</p>
        <div class="content">计算机1</div>
    </div>
    // 写错误一个 整个选择器都不生效
.container-2 .title,.container-2 :contents{
  color:red;
}
//  写错误一个 另一个也会生效
.container-2:is(.title,:contents){
 color:red;
}
is() 和 CSS 预处理器中的嵌套规则很相像,如下所示:
div, p, ul, ol {
  span {
    /* ... */
  }
}

/* 最终解析成 */
div span, p span, ul span, ol span {
  /* ...*/
}
用:is()实现
:is(div,p,ul,ol) span{
 XXXX
}
***通过 :is() 匹配到元素的优先级,会采用 :is() 选择器列表参数中优先级最高的计算(即使它不存在)***

5、数组中对象去重

            let arr=[{
                "goodsId": "1",
                "quota": 12,
                "skuId": "1"
            }, {
                "goodsId": "2",
                "quota": 12,
                "skuId": "2"
            },
                {
                    "goodsId": "1",
                    "quota": 12,
                    "skuId": "1"
                }];
                     let content=uniqueFunc2(arr,skuId);
                     console.log(content,'去重后的数据');
           function uniqueFunc2(arr, uniId){
                let hash = {}
                return arr.reduce((accum,item) => {
                    hash[item[uniId]] ? '' : hash[item[uniId]] = true && accum.push(item)
                    return accum
                },[])
            }

6、ES13 新特性 .at() 最常用

            //ES13 新特性 .at() 最常用
            const arr=[1,2,3];
            // 一般拿数组最后一个
            console.log(arr[arr.length-1]); // 3
            // 用 .at()
            console.log([1,2,3].at(-1));  // 打印出3

7、ES12中replaceAll 替换
原有的 replace 如果不用正则表达式只能替换一个
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值