ES7

Array Includes

在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。

const names = ["abc", "cba", "nba", "mba", NaN]

if (names.indexOf("cba") !== -1) {
  console.log("包含abc元素")
}

在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。

if (names.includes("cba", 2)) {
  console.log("包含abc元素")
}

exponentiation运算符

在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成。

const result1 = Math.pow(3, 3)

在ES7中，增加了 ** 运算符，可以对数字来计算乘方。

const result2 = 3 ** 3

ES8

Object values

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

const obj = {
  name: "why",
  age: 18
}

console.log(Object.keys(obj))
console.log(Object.values(obj))

ES8 Object entries

通过Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。

const obj = {
  name: "why",
  age: 18
}

console.log(Object.entries(obj))

String Padding

某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的

const message = "Hello World"

const newMessage = message.padStart(15, "*").padEnd(20, "-")
console.log(newMessage)

Trailing Commas

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

function foo(m, n,) {

}

foo(20, 30,)

ES10

flat flatMap

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。flatMap是先进行map操作，再做flat的操作；flatMap中的flat相当于深度为1；

//1.flat的使用
const nums = [10, 20, [2, 9], [[30, 40], [10, 45]], 78, [55, 88]]
const newNums = nums.flat()
console.log(newNums)

const newNums2 = nums.flat(2)
console.log(newNums2)

//2.flatMap的使用
const nums2 = [10, 20, 30]
const newNums3 = nums2.flatMap(item => {
  return item * 2
})
const newNums4 = nums2.map(item => {
  return item * 2
})

console.log(newNums3)
console.log(newNums4)

ES11

BigInt

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

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

const bigInt = 900719925474099100n
console.log(bigInt + 10n)

Nullish Coalescing Operator

ES11，Nullish Coalescing Operator增加了空值合并操作符：

const foo = undefined
// const bar = foo || "default value" 之前的写法
const bar = foo ?? "defualt value"

console.log(bar)

Optional Chaining

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

const info = {
  name: "sabo",
  friend: {
    girlFriend: {
      name: "aaa"
    }
  }
}
// console.log(info.friend.girlFriend.name)
// if (info && info.friend && info.friend.girlFriend) {
//   console.log(info.friend.girlFriend.name)
// }

// ES11提供了可选链(Optional Chainling)
console.log(info.friend?.girlFriend?.name)

for..in标准化

在ES11之前，虽然很多浏览器支持for...in来遍历对象类型，但是并没有被ECMA标准化。

在ES11中，对其进行了标准化，for...in是用于遍历对象的key的：

const obj = {
  name: "sabo",
  age: 14
}

for (const item in obj) {
  console.log(item)
}

ES12

logical assignment operators

//1.||= 逻辑或赋值运算
let message = "hello world"
message = message || "default value"
message ||= "default value"
console.log(message)

//2.&&= 逻辑与赋值运算
&&
const obj = {
  name: "why",
  foo: function() {
    console.log("foo函数被调用")
    
  }
}

obj.foo && obj.foo()
// 3.??= 逻辑空赋值运算
let message = 0
message ??= "default value"
console.log(message)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

学习ES7-ES12

ES7