ES6~ES13新特性3

ES7-Array Includes

在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf获取结果，并且判断是否为 -1。
在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。

ES7–指数exponentiation运算符

在ES7之前，计算数字的乘方需要通过 Math.pow方法来完成。
在ES7中，增加了 ** 运算符，可以对数字来计算乘方。

ES8-Object values

之前我们可以通过 Object.keys获取一个对象所有的key
在ES8中提供了 Object.values来获取所有的value值：

ES8-Object entries

通过 Object.entries可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
- 可以针对对象、数组、字符串进行操作；

const obj = {
   name: "why",
   age: 18,
   height: 1.88,
   address: "广州市"
 }

 // 1.获取所有的key
 const keys = Object.keys(obj)
 console.log(keys)

 // 2.ES8 Object.values
 const values = Object.values(obj)
 console.log(values)

 // 3.ES8 Object.entries
 // 3.1. 对对象操作
 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"))

ES8-String Padding

某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 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

ES8-Trailing Commas

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

ES10-flat flatMap

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

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
- 注意一：flatMap是先进行map操作，再做flat的操作；
- 注意二：flatMap中的flat相当于深度为1；

ES10-ObjectfromEntries

在前面，我们可以通过 Object.entries将一个对象转换成 entries
那么如果我们有一个entries了，如何将其转换成对象呢？
- ES10提供了 Object.formEntries来完成转换：
那么这个方法有什么应用场景呢？

// 1.对象
    const obj = {
      name: "why",
      age: 18,
      height: 1.88
    }

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

    // 2.应用
    const searchString = "?name=why&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)

ES10-trimStarttrimEnd

去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？
- ES10中给我们提供了trimStart和trimEnd；

const message = "   Hello World    "
 console.log(message.trim())
 console.log(message.trimStart())
 console.log(message.trimEnd())

ES11-BigInt

在早期的JavaScript中，我们不能正确的表示过大的数字：
- 大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。

那么ES11中，引入了新的数据类型BigInt，用于表示大的整数：
- BitInt的表示方法是在数值的后面加上n

console.log(Number.MAX_SAFE_INTEGER)
const num1 = 9007199254740992n
const num2 = 9007199254740993n
console.log(num1, num2)

ES11-Optional Chaining

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

``const obj = {
      name: "why",
      friend: {
        name: "kobe",
      }
    }
obj?.friend?.running?.running()//结果为空

``const obj = {
      name: "why",
      friend: {
        name: "kobe",
        running: function () {
          console.log("running~")
        }
      }
    }
obj?.friend?.running?.running()//running~