对我来说，一些比较新的特性。

对象扩展

Object.keys( ) 获取对象的所有键

let obj = {
  name: 'ycc',
  age: 20
}
console.log(Object.keys(obj)) // ['name','age']

Object.values( ) 获取对象的所有值

let obj = {
  name: 'ycc',
  age: 20
}
console.log(Object.values(obj)) // ['ycc',20]

Object.entries( ) 获取对象键值对数组

let obj = {
  name: 'ycc',
  age: 20
}
console.log(Object.entries(obj)) // [['name','ycc'],['age',20]]
/*
其实就是个二维数组
  [
    [键,值],
    [键,值]
  ]
*/

对象的rest参数 和 扩展运算符

function fun({a,b,...more}){
  console.log(more) // {c:3,d:4}
}

fun({a:1,b:2,c:3,d:4})

展开对象

let obj = {
  name: 'ycc',
  age: 20
}
// ...obj => name: 'ycc', age: 20
let obj2 = {
  sex: '男',
  phone: '123123'
}

let result = {...obj,...obj2}

console.log(result) // {name: 'ycc', age: 20, sex: '男', phone: '123123'}

ES10

Object.fromEntries(二维数组) -- 将 二维数组 转换为 对象
Object.entries(对象) -- 将 对象 转换为 二维数组    ( ES8 )

str.trim( ) -- 去除字符串前后空格
str.trimStart( ) -- 去除字符串前的空格
str.trimEnd( ) -- 去除字符串后的空格

let str = '  ycc  '; // 字符串前后都有两个空格
console.log(str) // '  ycc  '
console.log(str.trim()) // 'ycc'
console.log(str.trimStart()) // 'ycc  '
console.log(str.trimEnd()) // '  ycc'

tips:
trimStart( ) 与 trimLeft( ) 功能相同
trimEnd( ) 与 trimRight( ) 功能相同

ES11

class的私有属性

class Person{
  name // 公共属性  
  #age // 私有属性前面加上 # 
  #weight // 私有属性

  constructor(name,age,weight){
    this.name = name
    this.#age = age
    this.#weight = weight 
  }

  print(){
     console.log(name, #age, #weight)
  }
}

let p = new Person('ycc',20,'52kg') // 实例化对象
console.log(p.name) // 'ycc'
console.log(p.#age) // 报错因为#age是这个Person类的私有属性
// 类的私有属性只能在类中读取，实例对象无法读取，可以添加一个方法打印。如上:print()方法
p.print() // 'ycc' , 20 , '52kg'

可选链操作
本人觉得这个新特性还挺好用的，刚学完感觉不错，目前还没有实际使用过。
语法:   ?.
举个栗子:

function main(config){
  const db = config && config.db 
  // 这里要拿到config里的db要先判断这个config有没有传过来
  // 如果要拿的数据有点深那就有点麻烦了，比如db里面还有一个host我要拿
  const dbHost = config && config.db && config.db.host
  // 先判断有没有config ，有 ，再判断config里有没有db，有 ，最后才能拿到 host
}

main({
  db:{
    host: '127.0.0.1',
    username: 'root'
  }
})

ok,上面这个 && 逻辑与 判断有点麻烦,现在举个栗子怎么使用 可选链操作这个新特性

function main(config){
  const db = config?.db
  // ? 前的数据存在就 . 拿里面的数据

  const dbHost = config?.db?.host
  // config?.db          config存在 就拿数据config.db
  // config.db?.host     config.db存在 就拿数据config.db.host
}

main({
  db:{
    host: '127.0.0.1',
    username: 'root'
  }
})

动态import

先来看看静态import
import * as m from 'url'
这样，不管开发者会不会用到这个模块从一开始就已经引入了，如果后边还用不到这个模块的话，就会浪费首次加载页面的资源。

再来看看动态import
import('url').then(module=>{})
这样，只要在用到的该模块的时候才会引入，加载页面速度会变快，节省资源。

import('url') // 返回了一个promise对象,有then方法
// then方法中对应成功的回调(第一个回调)的形参 封装了所有暴露的数据

import('url').then(m => {
  // 这个m.xxx 可以调用暴露的数据
  // 如果是默认暴露的模块 m.default.xxx 调用
})

BigInt

ES11引入的 新数据类型 BigInt 大整形

let n = 520n // 给普通整形后面加上n 表示大整形
console.log(n, typeof n) // 520n 'bigint'

// BigInt()函数
let num = 99
console.log(BigInt(num)) // 99n 其实就是给整形后面加了个n

let max = Number.MAX_SAFE_INTEGER // max = 最大安全整数
console.log(max) // 9007199254740991
console.log(max + 1) // 9007199254740992
console.log(max + 2) // 9007199254740992
// 加1还行，加2的话就加不上了

// 转换为bigint就可以往上加，但是bigint只能和bigint类型数据相加。与其他数据类型相加 报错
BigInt(max) + BigInt(2) === 9007199254740993n // true

globalThis

顾名思义 global（全局） This（this)
globalThis 始终 指向全局对象

浏览器环境下 globalThis 也就是 window
nodejs环境下 globalThis 也就是 global