[JavaScript知识库]如何优雅的在项目中使用js 新特性

Object.entries 迭代对象

const person = {
    name: '111',
    age: 20
}

// Object.keys 迭代一个对象
Object.keys(person).forEach((key) => {
    console.log(`${key} is ${person[key]}`)
})
// name is 111
// age is 20

// Object.entries 迭代一个对象
Object.entries(person).forEach(([key, value]) => {
    console.log(`${key} is ${value}`)
})
// name is 111
// age is 20

replaceAll 方法

// 在 JS 中，要将所有出现的字符串替换为另一个字符串，我们需要使用如下所示的正则表达式：
const str = 'Red-Green-Blue'
// 只匹配第一次出现的
let newStr = str.replace('-', '')
console.log(newStr) // RedGreen-Blue
// 使用全局替换 
let newGstr = str.replace(/\-/g, '')
console.log(newGstr) // RedGreenBlue

// ES12新增的方法  replaceAll 的新方法被添加到 String.prototype
console.log(str.replaceAll('-', '')) // RedGreenBlue

数字分隔符

在这里插入代码片// 难以阅读
const billion = 1000000000;

// 易于阅读
const readableBillion = 1000_000_000;
console.log(readableBillion) //1000000000

document.designMode 的功能

// 与前端的JavaScript有关，设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台，输入以下内容即可。

document.designMode = 'on';

逻辑赋值运算符

// 逻辑赋值运算符是由逻辑运算符&&、||、??和赋值运算符=组合而成。
let a = 1;
let b = 2;

a &&= b;
console.log(a); // 2
// a &&= b; 等价于下边
a && (a = b)

if(a){
    a = b
}
//检查a是否为真，如果true 则更新a的值



let newA = null
let newB = 3
newA ||= newB
console.log(newA)
// 等价
newA || (newA = newB)
console.log(newA) // 3


// 使用空值合并操作符 ??:

let a1 = null;
let b1 = 6;

a1 ??= b1;
console.log(a1); // 6

// 上面等价于
if (a1 === null || a1 === undefined) {
  a1 = b1;
}