每天3分钟，重学ES6-ES12(六)ES7 ES8 新增内容
每天3分钟，重学ES6-ES12(六)ES7 ES8 新增内容
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
前言
今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是ES7 ES8中新增的内容
ES7 新增
Array Includes
- 在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。
- 在ES7中，我们可以通过
includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true， 否则返回false。
代码演示
const names = ["abc", "cba", "nba", "mba", NaN]
if (names.indexOf("cba") !== -1) {
console.log("包含abc元素")
}
// ES7 ES2016
if (names.includes("cba", 2)) {
console.log("包含abc元素")
}
if (names.indexOf(NaN) !== -1) {
console.log("包含NaN")
}
if (names.includes(NaN)) {
console.log("包含NaN")
}指数(乘方) exponentiation运算符
在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。
在ES7中，增加了 ** 运算符，可以对数字来计算乘方。
代码演示
const result1 = Math.pow(3, 3)
// ES7: **
const result2 = 3 ** 3
console.log(result1, result2)ES8 新增
Object values
之前我们可以通过 Object.keys 获取一个对象所有的key，在ES8中提供了Object.values 来获取所有的value值:
代码演示
const obj = {
name: "yz",
age: 24
}
console.log(Object.keys(obj))
// ['name', 'age']
console.log(Object.values(obj))
// ['yz', 24]
// 也可以用于字符串 数组
// 用的非常少
console.log(Object.values(["abc", "cba", "nba"]))
// ['abc', 'cba', 'nba']
console.log(Object.values("abc"))
// ['a', 'b', 'c']Object entries
通过Object.entries可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
代码演示
const obj = {
name: "yz",
age: 18
}
console.log(Object.entries(obj))
const objEntries = Object.entries(obj)
// [['name':'yz'],['age',18]]
objEntries.forEach(item => {
console.log(item[0], item[1])
})
// name yz
// yz 18
console.log(Object.entries(["abc", "cba", "nba"]))
// [['0':'abc'],['1','cba'],['2','nba']]
console.log(Object.entries("abc"))
// [['0':'a'],['1':'b'],['2':'c']]String Padding字符串填充
某些字符串我们需要对其进行前后的填充，来实现某种格式化效果
ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的。
padStart()和padStart()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。
如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。
如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
如果省略第二个参数，默认使用空格补全长度。
我们简单具一个应用场景:比如需要对身份证、银行卡的前面位数进行隐藏
代码演示
const message = "Hello World"
const newMessage = message.padStart(15, "*").padEnd(20, "-")
console.log(newMessage)
// ****Hello World-----
// 案例
const cardNumber = "321324234242342342341312"
const lastFourCard = cardNumber.slice(-4)
const finalCard = lastFourCard.padStart(cardNumber.length, "*")
console.log(finalCard)
// ********************1312Trailing Commas 尾逗号
在ES8中，我们允许在函数定义和调用时多加一个逗号:
个人感觉↔作用不大，用到的不多
function foo(m, n,) {
}
foo(20, 30,)Object Descriptors
ES5 有一个Object.getOwnPropertyDescriptor方法，返回某个对象属性的描述对象（ descriptor ）
ES8 增加了另一个对对象的操作是 Object.getOwnPropertyDescriptors
Object.getOwnPropertyDescriptors(data) 获取objcet对象所有数据的描述符
Object.getOwnPropertyDescriptor(data，“key”) 获取单个数据的描述符
代码演示
// ES5
var obj = { name: 'yz',age:18 };
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: 'yz', writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptors(obj)
//{
// age: {value: 18, writable: true, enumerable: true, configurable: true}
// name: {value: 'yz', writable: true, enumerable: true, configurable: true}
//}该方法允许对一个属性的描述进行检索。
在 Javascript 中， 属性 由一个字符串类型的“名字”（name）和一个“属性描述符”（property descriptor）对象构成。
value
该属性的值(仅针对数据属性描述符有效)
writable
当且仅当属性的值可以被改变时为true。(仅针对数据属性描述有效) 设置读写
configurable
当且仅当指定对象的属性描述可以被改变或者属性可被删除时，为true。
enumerable
当且仅当指定对象的属性可以被枚举出时，为 true。
最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！