ES6~ES13新特性(二)

文章目录

一、ES7

1.Array Includes

在ES7之前,如果我们想判断一个数组中是否包含某个元素,需要通过 indexOf 获取结果,并且判断是否为 -1

在ES7中,我们可以通过includes来判断一个数组中是否包含一个指定的元素,根据情况,如果包含则返回 true,否则返回false。

javascript 复制代码
arr.includes(valueToFind[, fromIndex])

2.指数exponentiation运算符

在ES7之前,计算数字的乘方需要通过 Math.pow 方法来完成。

在ES7中,增加了 ** 运算符,可以对数字来计算乘方。

javascript 复制代码
const result1 = Math.pow(3, 2)
const result2 = 3 ** 2

二、ES8

1.Object values

之前我们可以通过 Object.keys 获取一个对象所有的key

在ES8中提供了 Object.values 来获取所有的value值

javascript 复制代码
const obj = {
    name: "aaa"
}

console.log(Object.values(obj))

2.Object entries

通过 Object.entries 可以获取到一个数组,数组中会存放可枚举属性的键值对数组

  • 可以针对对象、数组、字符串进行操作;
javascript 复制代码
const entries = Object.entries(obj)
console.log(entries)
for (const entry of entries) {
    const [key, value] = entry
    console.log(key, value)
}

// 3.2. 对数组/字符串操作(了解)
console.log(Object.entries(["abc", "cba"]))
console.log(Object.entries("Hello"))

3.String Padding

某些字符串我们需要对其进行前后的填充,来实现某种格式化效果,ES8中增加了 padStartpadEnd 方法,分别是对字符串的首尾进行填充的。

javascript 复制代码
// padStart和padEnd
// 1.应用场景一: 对时间进行格式化
// const minute = "15".padStart(2, "0")
// const second = "6".padStart(2, "0")

// console.log(`${minute}:${second}`)

// 2.应用场景二: 对一些敏感数据格式化
let cardNumber = "132666200001018899"
const sliceNumber = cardNumber.slice(-4)
cardNumber = sliceNumber.padStart(cardNumber.length, "*")
const cardEl = document.querySelector(".card")
cardEl.textContent = cardNumber

我们简单具一个应用场景:比如需要对身份证、银行卡的前面位数进行隐藏:

4.Trailing Commas

在ES8中,我们允许在函数定义和调用时多加一个逗号

javascript 复制代码
function foo(a,b,) {
    console.log(a, b)
}
foo(10, 20,)

5.Object Descriptors

Object.getOwnPropertyDescriptors :

  • 这个在之前已经讲过了,这里不再重复。

Async Function:async、await

  • 后续讲完Promise讲解

三、ES9

Async iterators:后续迭代器讲解

Object spread operators:前面讲过了

javascript 复制代码
var obj = {
    name: "zhangsan",
    age: 18
}
...obj

Promise finally:后续讲Promise讲解

四、ES10

1.flat flatMap

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

javascript 复制代码
//1.flat的使用: 将一个数组, 按照制定的深度遍历, 将遍历到的元素和子数组中的元素组成一个新的数组, 进行返回
const nums = [10, 20, [111, 222], [333, 444], [[123, 321], [231, 312]]]
const newNums1 = nums.flat(1)
console.log(newNums1)
const newNums2 = nums.flat(2)
console.log(newNums2)

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

  • 注意一:flatMap是先进行map操作,再做flat的操作;
  • 注意二:flatMap中的flat相当于深度为1;
javascript 复制代码
// 2.flatMap的使用:
// 1> 对数组中每一个元素应用一次传入的map对应的函数
const messages = [
    "Hello World aaaaa",
    "Hello Coderwhy",
    "你好啊 李银河"
]

// 1.for循环的方式:
// const newInfos = []
// for (const item of messages) {
//   const infos = item.split(" ")
//   for (const info of infos) {
//     newInfos.push(info)
//   }
// }
// console.log(newInfos)

// 2.先进行map, 再进行flat操作
// const newMessages = messages.map(item => item.split(" "))
// const finalMessages = newMessages.flat(1)
// console.log(finalMessages)

// 3.flatMap
const finalMessages = messages.flatMap(item => item.split(" "))
console.log(finalMessages)

2.Object fromEntries

在前面,我们可以通过 Object.entries 将一个对象转换成 entries

那么如果我们有一个entries了,如何将其转换成对象呢?

  • ES10提供了 Object.formEntries来完成转换:
javascript 复制代码
// 1.对象
const obj = {
    name: "ew",
    age: 18,
    height: 1.88
}

const entries = Object.entries(obj)
const info = Object.fromEntries(entries)
console.log(info)

那么这个方法有什么应用场景呢?

javascript 复制代码
const searchString = "?name=wy&age=18&height=1.88"
const params = new URLSearchParams(searchString)
console.log(params.get("name"))
console.log(params.get("age"))
console.log(params.entries())

// for (const item of params.entries()) {
//   console.log(item)
// }

const paramObj = Object.fromEntries(params)
console.log(paramObj)

3.trimStart、trimEnd

去除一个字符串首尾的空格,我们可以通过trim方法,如果单独去除前面或者后面呢?

  • ES10中给我们提供了trimStart和trimEnd;
javascript 复制代码
const message = "   Hello World    "
console.log(message.trim())
console.log(message.trimStart())
console.log(message.trimEnd())

4.其他知识点

Symbol description:已经讲过了

Optional catch binding:后面讲解try cach讲解

五、ES11

1.BigInt

在早期的JavaScript中,我们不能正确的表示过大的数字:

  • 大于MAX_SAFE_INTEGER的数值,表示的可能是不正确的。
javascript 复制代码
console.log(Number.MAX_SAFE_INTEGER)
// 表示不正确
const num1 = Number.MAX_SAFE_INTEGER + 1
const num2 = Number.MAX_SAFE_INTEGER + 2
console.log(num1, num2)

那么ES11中,引入了新的数据类型BigInt,用于表示大的整数:

  • BitInt的表示方法是在数值的后面加上n
javascript 复制代码
console.log(Number.MAX_SAFE_INTEGER)
const num1 = 9007199254740992n
const num2 = 9007199254740993n
console.log(num1, num2)

2.Nullish Coalescing Operator

ES11,Nullish Coalescing Operator增加了空值合并操作符

javascript 复制代码
let info = undefined
// info = info || "默认值"
// console.log(info)

// ??: 空值合并运算符
info = info ?? "默认值"
console.log(info)

3.Optional Chaining

可选链也是ES11中新增一个特性,主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁:

javascript 复制代码
const obj = {
    name: "why",
    friend: {
        name: "kobe",
        // running: function() {
        //   console.log("running~")
        // }
    }
}

// 1.直接调用: 非常危险
// obj.friend.running()

// 2.if判断: 麻烦/不够简洁
// if (obj.friend && obj.friend.running) {
//   obj.friend.running()
// }

// 3.可选链的用法: ?.
obj?.friend?.running?.()

4.Global This

在之前我们希望获取JavaScript环境的全局对象,不同的环境获取的方式是不一样的

  • 比如在浏览器中可以通过this、window来获取;
  • 比如在Node中我们需要通过global来获取;

在ES11中对获取全局对象进行了统一的规范:globalThis

javascript 复制代码
console.log(globalThis)

5.for...in标准化

在ES11之前,虽然很多浏览器支持for...in来遍历对象类型,但是并没有被ECMA标准化。

在ES11中,对其进行了标准化,for...in是用于遍历对象的key的:

javascript 复制代码
var obj  = {
    name: "aaa",
    age: 11
}
for (const key in obj) {
    console.log(key)
}

6.其它知识点

Dynamic Import:后续ES Module模块化中讲解。

javascript 复制代码
if (flag) {
    import('xxx.js')
} else {
    import('ooo.js')
}

Promise.allSettled:后续讲Promise的时候讲解。

import meta:后续ES Module模块化中讲解。

javascript 复制代码
import './abc/cba.txt'

六、ES12

1.FinalizationRegistry

FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调

  • FinalizationRegistry 提供了这样的一种方法:当一个在注册表中注册的对象被回收时,请求在某个时间点上调用一个清理回调。(清理回调有时被称为 finalizer );
  • 你可以通过调用register方法,注册任何你想要清理回调的对象,传入该对象和所含的值;
javascript 复制代码
let obj = { name: "why", age: 18 }
let info = { name: "kobe", age: 30 }

const finalRegistry = new FinalizationRegistry((value) => {
    console.log("某一个对象被回收了:", value)
})

finalRegistry.register(obj, "why")
finalRegistry.register(info, "kobe")

// obj = null
info = null

2.WeakRefs

如果我们默认将一个对象赋值给另外一个引用,那么这个引用是一个强引用

  • 如果我们希望是一个弱引用的话,可以使用WeakRef;
javascript 复制代码
 let info = { name: "why", age: 18 }
 let obj = new WeakRef(info)
 let obj2 = new WeakRef(info)

 const finalRegistry = new FinalizationRegistry(() => {
     console.log("对象被回收~")
 })

 finalRegistry.register(info, "info")

setTimeout(() => {
    info = null
}, 2000)

setTimeout(() => {
    console.log(obj.deref().name, obj.deref().age)
}, 8000)

3.logical assignment operators

javascript 复制代码
// 赋值运算符
// const foo = "foo"
let counter = 100
counter = counter + 100
counter += 50

// 逻辑赋值运算符
function foo(message) {
    // 1.||逻辑赋值运算符
    // message = message || "默认值"
    // message ||= "默认值"

    // 2.??逻辑赋值运算符
    // message = message ?? "默认值"
    message ??= "默认值"

    console.log(message)
}

foo("abc")
foo()

// 3.&&逻辑赋值运算符
let obj = {
    name: "why",
    running: function() {
        console.log("running~")
    }
}

// 3.1.&&一般的应用场景
// obj && obj.running && obj.running()
// obj = obj && obj.name
obj &&= obj.name
console.log(obj)

4.其它知识点

Numeric Separator:讲过了;

javascript 复制代码
const num = 100_000_00

String.replaceAll:字符串替换;

javascript 复制代码
const message = "my name is why, why age is 18"
const newMessage = message.replace("why", "kobe")
const newMessage2 = message.replaceAll("why", "kobe")
console.log(newMessage)
console.log(newMessage2)

七、ES13

1.method .at()

前面我们有学过字符串、数组的at方法,它们是作为ES13中的新特性加入的:

javascript 复制代码
// 1.数组
var names = ["abc", "ceb", "def"]
console.log(names.at(-1))
// 2.字符串
var str = "Hello World"
str.at(-1)
str.at(3)

2.Object.hasOwn(obj, propKey)

Object中新增了一个静态方法(类方法): hasOwn(obj, propKey)

  • 该方法用于判断一个对象中是否有某个自己的属性

那么和之前学习的Object.prototype.hasOwnProperty有什么区别呢?

  • 区别一:防止对象内部有重写hasOwnProperty
  • 区别二:对于隐式原型指向null的对象, hasOwnProperty无法进行判断
javascript 复制代码
// const obj = {
//   name: "why",
//   age: 18,
//   // 1.和hasOwnProperty的区别一: 防止对象中也有一个自己的hasOwnProperty方法
//   hasOwnProperty: function() {
//     return "abc"
//   },
//   __proto__: {
//     address: "广州市"
//   }
// }

// console.log(obj.name, obj.age)
// console.log(obj.address)

// console.log(obj.hasOwnProperty("name"))
// console.log(obj.hasOwnProperty("address"))

// console.log(Object.hasOwn(obj, "name"))
// console.log(Object.hasOwn(obj, "address"))


// 2.和hasOwnProperty的区别二:
const info = Object.create(null)
info.name = "why"
// console.log(info.hasOwnProperty("name"))
console.log(Object.hasOwn(info, "name"))

3.New members of classes

在ES13中,新增了定义class类中成员字段(field)的其他方式:

  • Instance public fields
  • Static public fields
  • Instance private fields
  • static private fields
  • static block
javascript 复制代码
// 1.实例属性
// 对象属性: public 公共 -> public instance fields
height = 1.88

// 对象属性: private 私有: 程序员之间的约定
// _intro = "name is why"

// ES13对象属性: private 私有: 程序员之间的约定
#intro = "name is why"


// 2.类属性(static)
// 类属性: public
static totalCount = "70亿"

// 类属性: private
static #maleTotalCount = "20亿"

constructor(name, age) {
    // 对象中的属性: 在constructor通过this设置
    this.name = name
    this.age = age
    this.address = "广州市"
}

// 3.静态代码块
static {
    console.log("Hello World")
    console.log("Hello Person")
}
}

const p = new Person("why", 18)
console.log(p)
// console.log(p.name, p.age, p.height, p.address, p.#intro)

// console.log(Person.#maleTotalCount)
相关推荐
生椰拿铁You8 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生19 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap34 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish41 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun1 小时前
空间数据存储格式GeoJSON
前端
zhang-zan2 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记2 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html