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 如果不用正则表达式只能替换一个