关于javascript:原来ES712分别增加了这些属性呀

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)

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

其它

• Symbol 的 Desciptor 属性，记录在 你晓得 ES6 中的这些属性吗 这篇文章中
• Optional catch binding，放到前面 try catch 文章中一起记录

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 高级，还有很多须要开发者把握的中央，能够看看我写的其余博文，继续更新中~