原来ES7~12分别增加了这些属性呀

一颗冰淇淋
ES6也称为ES2015,于2015年发布,此后每年都有新增一些属性,分别命名为ES7~12,发布的年份分别对应2016年到2021年

ES7

includes方法

数组中新增了includes方法,用来判断数组中是否存在某一元素,在此之前进行这样的判断是使用indexOf判断下标值,小于0时则代表不存在。

const list = ['alice', 'kiki', 'macus']

console.log(list.includes('alice'))
console.log(list.indexOf('alice'))

console.log(list.includes('hello'))
console.log(list.indexOf('hello'))

includes返回布尔值,indexOf返回数组的下标

指数运算

ES7增加了指数运算的操作符,两个星号(**),在此之前通过 Math.pow 来计算

const num = 3
const sqrt = Math.pow(num, 4)
const result = num ** 4
console.log(sqrt, result)

以上都表示 num 的四次方,执行结果都为81

** 运算符通过babel编译成es5的语法时,也是使用的 Math.pow

ES8

Object.values和Object.entries

Object.keys (ES6之前就有的属性) 获取对象的所有key值,Object.values获取对象的所有value值,Object.entries会返回一个数组,数组中包含每一个key和value元素组成的数组

const obj = {
  name: 'alice',
  age: 18
}
const list = ['alice', 'kiki', 'macus']
const messsage = 'hello'

console.log(Object.keys(obj), Object.values(obj), Object.entries(obj))
console.log(Object.keys(list), Object.values(list), Object.entries(list))
console.log(Object.keys(messsage), Object.values(messsage), Object.entries(messsage))

分别获取数组、对象和字符串的key、value和由key、value组成的数组

stringPadding

对字符串分别使用padStart和padEnd可以进行头、尾填充,传入填充后的字符串长度和填充内容

const message = "hello world"
const startMsg = message.padStart(15, '-')
const endMsg = message.padEnd(16, '*')
console.log(startMsg)
console.log(endMsg)


const nickName = '星辰'
const firstName = nickName.substr(0, 1)
const newName = firstName.padEnd(nickName.length, '*')
console.log(newName)

分别对字符串的头尾进行了填充以及一个小案例

Trailing Commas

尾部逗号,允许函数在定义形参及传递参数的时候,最后一个参数后增加一个逗号(,)

function foo(a, b,){
  console.log(a, b,)
}
foo(1,2,)

function baz(m, n){
  console.log(m, n)
}
baz('m', 'n',)

在最后一个参数后增加逗号,也不会被认为是错误的写法

getOwnPropertyDescriptors

用于获取对象的所有属性的描述

const obj = {
  name: 'alice',
  age: 18
}
console.log(Object.getOwnPropertyDescriptors(obj))

包含是否可枚举(enumerable)、可修改(writable)、重新定义(configurable)及value值

其它
  • async和await,这部分放到后面的文章中详细的记录

ES9

所有属性
  • iterators 迭代器,这部分放到后面的文章中详细的记录
  • spread operators,对象展开运算符,记录在 你知道ES6中的这些属性吗 这篇文章中
  • promise finally,和promise一起放到后面的文章中详细的记录

ES10

flat和flatMap

flat这个函数是用来对数组降维的,只需要传入需要降维的层级

const array = [1, 2, [3, 4], [[5, 6], [7, 8], [9]], [10], 11, 11, 11, [12, [13, [14]]]]
const num = array.flat(2)
console.log(num)

此时传入降维的层次是2,所以四维数组的数据降了两维,还有两维

flatMap这个方法会先对数组遍历,再进行降维操作,作用相当于map+flat

const list = ["macus mogan", "arish sira", "linda kiki"]
const result = list.flatMap(item => {
  const element = item.split(" ")
  console.log('每次拆分的元素:',element)
  return element
})
console.log(result)

此时遍历出每组元素时候,通过空格切割成数组,flatMap会直接降维

Object.fromEntries

Object.fromEntries是将entries这样的数组类型转换成对象

const obj = {
  name: 'alice',
  age: 18
}
const arr = ['alice', 'kiki', 'macus']
const str = 'hello'
const objEntries = Object.entries(obj)
const arrEntries = Object.entries(arr)
const strEntries = Object.entries(str)

console.log(objEntries)
console.log(Object.fromEntries(objEntries))
console.log('--------------------------------------------------------------')
console.log(arrEntries)
console.log(Object.fromEntries(arrEntries))
console.log('--------------------------------------------------------------')
console.log(strEntries)
console.log(Object.fromEntries(strEntries))

分别将对象、数组、字符串变成entries后,再通过fromEntries转为对象,fromEntries并不是反向的Object.entries操作,不会恢复数组或者字符串的类型

trimStart trimEnd

trim可以用于去除首尾空格,ES10又增加了trimStart trimEnd分别用于在字符串头 尾部去除空格

const message = " hello world "
const messageLen = message.length
const trimMsg = message.trim()
const trimStartMsg = message.trimStart()
const trimEndMsg = message.trimEnd()

console.log(messageLen)
console.log(trimMsg, trimMsg.length)
console.log(trimStartMsg, trimStartMsg.length)
console.log(trimEndMsg, trimEndMsg.length)

通过字符串的长度可以判断是否去除了首尾的空格

其它

ES11

bigInt

在此之前表示大数字可用 Number.MAX_SAFE_INTEGER,但这种表示方式如果要进行计算,是存在精度问题的,ES11增加了一种表示大数字的方式,在数字后面写上字母n,如1234567890987654321n。

但这种方式进行运算,仍有一些规则

  1. 带n的大数字是不可以与不带n的小数字进行运算的

    • 可以将小数字后面直接加个n
    • 或者通过BigInt方法将小数字转成大数字
  2. 将大数字通过转成小数字可能存在精度丢失的问题
const num = Number.MAX_SAFE_INTEGER
console.log(num + 1)
console.log(num + 2)

const bigNum = 80082088208008208820n
console.log(bigNum + 10n)
console.log(bigNum + BigInt(10))
console.log(Number(bigNum))

以上MAX_SAFE_INTEGER运算 和 bigInt 转Number就都出现了精度丢失的问题

Nullish Coalescing Operator

空值合并操作符(??),对数据进行布尔值的判断,将null和undefined的数据判断为false,就会取运算符后面的值,而或运算符(||)对于null、undefined、空字符串和0都判断为false

const nullStr = null;
const undefinedStr = undefined;
const string = "";
const number = 0;
const user = {};

console.log(nullStr ?? "不存在的内容", nullStr || "不存在的内容");
console.log(undefinedStr ?? "不可识别的类型", undefinedStr || "不可识别的类型");
console.log(string ?? "空字符串", string || "空字符串");
console.log(number ?? "数字", number || "数字");
console.log(user ?? "空对象", user || "空对象");

两者仅在空字符串和数字0的情况判断会不一致

Optional Chining

可选链(?.)在对象中使用,对数据的存在/可读取与否进行判断,当它不为null和undefined时,才会往下操作。

const user = {
  name: 'alice',
  favorite: {
    sport: 'tennis'
  }
}
console.log(user?.favorite?.sport)
console.log(user && user.favorite && user.favorite.sport)
console.log(user?.info?.address)
console.log( user && user.info && user.info.address)

通过可选链与 && 操作符所实现的效果一致,但代码更为简洁

globalThis

javascript代码可以运行在浏览器或者nodejs中,这两个容器获取全局对象的方式不相同,在浏览器中可以通过 window 或者 this,在node端需要通过global。es11中进行了统一,使用globalThis,无论在浏览器端或者node端都可以直接获取全局对象。

console.log(globalThis)

浏览器中打印的是window对象,node端打印的是global对象

其它
  • for in 标准化,在es11之前,没有规定for in 遍历时的key需要取 key 还是 value,各浏览器都有自己的实现,es11指定标准,需使用key
  • Dynamic Import(动态导入),将记录在es模块化的文章中
  • Promise.allSettled,将记录在promise的文章中
  • import meta,将记录在es模块化的文章中

ES12

FinalizationRegistry

用于对象被垃圾回收器(GC)回收的时候指定一个回调,通过 register 进行注册

let user = {
  name: "alice",
};
const registry = new FinalizationRegistry((value) => {
  console.log("对象被销毁了", value);
});
registry.register(user, 'user')
user = null

GC是不定时的检测有没有可回收的垃圾,所以当对象指向null时,不会马上执行获取回调的函数,不能在nodejs中测试,只能在浏览器中测试,因为在nodejs中执行完成会关闭该进程,浏览器运行时是一个进程,不会关闭。

WeakRef

直接将对象A赋值给对象B,他们共同指向一个内存地址0x100,因为此时是强引用,即使A指向null之后,0x100仍被B指向,所以0x100不会被销毁。

如果希望A指向null之后,0x100被销毁,那么可以使用 weakRef 实现弱引用。

let user = { name: 'alice' }
let info = new WeakRef(user)

const registry = new FinalizationRegistry((value) => {
  console.log("对象被销毁了", value);
});
registry.register(user, 'user')
registry.register(info, 'info')

user = null
console.log(info, info.deref())

通过new关键字创建弱引用,通过deref方法获取数据,当引用的对象被回收后,弱引用生成的对象也就获取不到了

logical assignment operators

赋值逻辑运算,相当于是逻辑运算后,再进行赋值的操作

  • ||= 逻辑或赋值运算,先或运算,再赋值
  • &&= 逻辑与赋值运算,先与运算,再赋值
  • ??= 逻辑空赋值运算,先空值判断,再赋值
let num = 0
// num = num + 1 等同于下方写法
num += 1
console.log(num)

let message = ''
// message = message || 'hello' 等同于下方写法
message ||= 'hello'
console.log(message)

let user = {
  name: 'alice'
}
// user = user && user.name 等同于下方写法
user &&= user.name
console.log(user)

let str = 0
// str = str ?? 'string' 等同于下方写法
str ??= 'string'
console.log(str)

逻辑赋值运算 就像+= 和 +1之后再赋值一样,是一种运算的语法糖

Numeric Separator

数字分隔符,较大的数字可以通过下划线(_)进行分割,使代码可读性更强

const momeny = 100_200_300_400_500
console.log(momeny)

执行结果会去除下划线,以十进制数据展示

replaceAll

replaceAll() 方法返回一个新字符串,新字符串所有满足 pattern(第一个参数) 的部分都已被replacement(第二个参数) 替换。

const message = "hello world";

console.log(message.replace("l", "*"));
console.log(message.replaceAll("l", "*"));

replaceAll会替换所有符合条件的,而replace只会替换掉第一个

以上就是ES7-12包含的大部分属性,关于js高级,还有很多需要开发者掌握的地方,可以看看我写的其他博文,持续更新中~

阅读 586

hello

77 声望
3 粉丝
0 条评论

hello

77 声望
3 粉丝
文章目录
宣传栏