前言
今天开始和大家一起系统的学习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) // ********************1312
Trailing 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。
