ES6-12新增语法

一、ES6

set()对数组进行去重

//用法一
const arr = [1,1,1,2,6,4,1,2,3,4,21]
//将类数组转化为数组
console.log(Array.from(new Set(arr)));  //[1, 2, 6, 4, 3, 21]

//用法二
const set = new Set()
set.add(10)
set.add(15)
set.add(78)
set.delete(10)
console.log(Array.from(set));  //[15, 78]

二、ES7

includes()确定数组是否包含指定的元素。

const names = ['abv','dfs','dfdw']
console.log(names.includes('abv'));  //true

三、ES8

Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。

const obj = {
    name: 'why',
    age: 18
}
console.log(Object.values(obj));  //['why', 18]

Object.entries()获取一个数组，数组中会存放可枚举属性的键值对数组

const obj = {
    name: 'why',
    age: 18
}
console.log(Object.entries(obj));  //[['name', 'why'],['age', 18]]

padStart和padEnd允许将空字符串或其他字符串添加到原始字符串的开头或结尾

const message = 'Hello World'
const newMessage = message.padStart(15,"*").padEnd(20,"-")
console.log(newMessage);  //****Hello World-----

Object.getOwnPropertyDescriptors()：获取对象的所有属性描述符

let obj = {
    age: 18,
    name: 'why'
}
console.log(Object.getOwnPropertyDescriptors(obj)) 
//age: {value: 18, writable: true, enumerable: true, configurable: true}
//name: {value: 'why', writable: true, enumerable: true, configurable: true}

四、ES9

（...）扩展运算符

const arr1 = [10, 20, 30]
const copy = [...arr1]  //复制
console.log(copy);   //[10, 20, 30]
const arr2 = [40, 50]
const merge = [...arr1, ...arr2]  //合并
console.log(merge);   //[10, 20, 30, 40, 50]

五、ES10

flat()多维数组转为一维数组

const nums = [10, 20, [2, 9], [[30, 50], [10, 95]], 78, [55, 98]]
console.log(nums.flat());  //[10, 20, 2, 9, [30, 50], [10, 95], 78, 55, 98]
console.log(nums.flat(2));  //[10, 20, 2, 9, 30, 50, 10, 95, 78, 55, 98]

flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组

const nums = [10, 20, 30]
const newNumber = nums.flatMap(item=>{
    return item * 2
})
console.log(newNumber);  //[20, 40, 60]

//flatMap的应用场景
const message = ["Hello World", "hello why", "hello abc"]
const words = message.flatMap(item=>{
    return item.split(" ")
})
console.log(words);  //['Hello', 'World', 'hello', 'why', 'hello', 'abc']

trimStart()和trimEnd()方法去除字符串头部尾部空格

const message = "   Hello World   "
//去掉头部空格
console.log(message.trimStart());   //Hello World   
//去掉尾部空格  
console.log(message.trimEnd());    //   Hello World

六、ES11

??空值合并运算符 如果第一个参数不是null/undefined，则 ?? 返回第一个参数，反之则返回第二个

const foo = 0
const bar = foo ?? "why"
console.log(bar); // 0

?.可选链 当对象属性不存在时不会直接报错，而是返回undefined

const info = {
    name: 'why',
    // friend: {
    //     girlFriend: 'aa'
    // }
}
console.log(info?.friend?.girlFriend);  //运用可选链时，如果对象中没有friend属性则会返回undefined而不是报错
console.log(info.friend.girlFriend);    //这种引用方式如果对象没有这个属性则会报错

七、ES12

FinalizationRegistry 对象在被销毁时执行回调

const finalRegistry = new FinalizationRegistry((value)=>{
    console.log('注册在finalRegistry的对象' + value + '给销毁了');
})

let obj = {name: 'why'}
let age = {age: 18}
finalRegistry.register(obj, 'obj对象')
finalRegistry.register(age, 'age对象')
obj = null    //此时obj给销毁，但是GC(垃圾回收)机制会不定时的检查对象是否给销毁，而不是实时的销毁，所以上面的FinalizationRegistry打印的内容需要过小会才能打印到控制台
age = null

//注册在finalRegistry的对象age对象给销毁了
//注册在finalRegistry的对象obj对象给销毁了

||=逻辑或、&&=逻辑与、??=逻辑空运算符

// ||=
let message = 18
// message  = message || '没有值'   //ES5写法
message ||= '没有值'                //ES12写法
console.log(message);  //18


// &&=
let obj = {
    name: '5454'
}
// obj = obj && obj.name   //ES5写法
obj &&= obj.name
console.log(obj);   //5454

// ??=
let values = 0
values ??= "default value"
console.log(values);    //当values为0或者""空时，会返回当前值；如undefined或null则显示default value