ES6-ES12

1. includes 判断（数组 / 字符串）是否包含一个指定的值

arr.includes(valueToFind,fromIndex)

• valueToFind：需要查找的元素值。
• fromIndex：可选的。从 fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 arr.length + fromIndex 的索引开始搜（即从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

let arr = [1, 2, 2, 3]
console.log(arr.includes(2) // true
console.log(arr.includes(2, -1)) // false
// 注意
// 1.fromIndex大于等于数组的长度，则会返回false，且该数组不会被搜索。
// 2.如果计算出的索引小于0，则整个数组都会被搜索。

2.Object.values 和 Object.keys

Object.values({a: 1, b: 2, c: 3}) // [1, 2, 3]
Object.keys({a: 1, b: 2, c: 3});  // [a, b, c] 

3.Promise.prototype.finally

finally() 方法返回一个 Promise。在 Promise 结束时，无论结果是 fulfilled 还是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。 这避免了同样的语句需要在 then() 和 catch() 中各写一次的情况。

fetch()
    .then(() => {
    })
    .catch(() => {
    })
    .finally(() => {
    })
// finally 的回调函数中不接收任何参数，它仅用于无论最终结果如何都要执行的情况。

4. 解构赋值

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }

let n = { x, y, ...z }
console.log(n) // { x: 1, y: 2, a: 3, b: 4 }

5.flat扁平化数组

const arr = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]]
arr.flat(Infinity) // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

6.空值合并操作符（??）

左边为 null 或者 undefined 时，返回右边，否则返回左边。

// 判断非空时
if(value !== null && value !== undefined && value !== ''){
    //...
}
if((value??'') !== ''){
    //...
}

7.空值合并赋值操作符（??=）

对比上面多了一步赋值的操作

let name = null;
let age = undefined;
let count = 0;

name ??= 'default'; // 'default'，因为 name 是 null
age ??= 'default'; // 'default'，因为 age 是 undefined
count ??= 'default'; // 0， 因为 count 的初始值不是 null 或 undefined

8.可选链操作符（?.）

可选链操作符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用（null 或者 undefined）的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

let user = {}
let u1 = user.childer.name
// TypeError: Cannot read property 'name' of undefined
let u1 = user?.childer?.name
// undefined

9.转换为布尔值（!!）

let arr = [true, false, '', null, undefined, 0, 1]
arr.forEach(item => {
  console.log(!!item, item)
})
// true true
// false false
// false ''
// false null
// false undefined
// false 0
// true 1

10. Set 对象

1、定义：Set是ES6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合。

Set本身是一个构造函数，用来生成 Set 数据结构

2、遍历方法

// 2.1 遍历keys() 返回键名的遍历器，相等于返回键值遍历器values()
let list2 = new Set(['a','b','c'])
for(let key of list2.keys()) {
   console.log(key) // a,b,c
}
// 2.2 遍历 values() 返回键值的遍历器
let list = new Set(['a','b','c'])
for(let value of list.values()) {
    console.log(value) // a,b,c
}
// 2.3 遍历 entries() 返回键值对的遍历器
let list = new Set(['4','5','hello'])
for (let item of list.entries()) {
    console.log(item) // ['4','4']   ['5','5']   ['hello','hello'] 
}
// 2.4 遍历 forEach() 使用回调函数遍历每个成员
let list = new Set(['4','5','hello'])
list.forEach((value, key) => console.log(key + ' : ' + value)) // 4:4    5:5   hello:hello

3、增删查改方法

// 3.1 添加元素add()
let list = new Set()
list.add(1)
list.add(2).add(3).add(3)   // 3只被添加了一次
// 3.2 删除元素 delete()
let list = ew Set([1,20,30,40])
list.delete(30)
// 3.3 判断某元素是否存在has()
let list = new Set([1,2,3,4])
list.has(2) // true
// 3.4 清除所有元素clear()
let list = new Set([1,2,3,4])
list.clear()

4、 使用场景

// 4.1 用于数组去重
let arr = [3, 5, 2, 2, 5, 5];
let setArr = new Set(arr)          // 返回set数据结构  Set(3) {3, 5, 2}
// 4.2 Set对象转化数组
// 方法一   es6的...解构
let unique1 =  [...setArr]         //去重转数组后  [3,5,2]
// 方法二  Array.from()解析类数组为数组
let unique2 = Array.from(setArr)   //去重转数组后  [3,5,2]
// 4.3 用于字符串去重
let str = '352255'
let unique = [...new Set(str)].join("")     // 352 
4.3 实现并集、交集、和差集
let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
// 并集
let union = new Set([...a, ...b])   // Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)))   // Set {2, 3}
// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x))) // Set {1}

11. Map对象

1、定义：Map数据结构，类似于对象，也是键值对的集合，但是键不仅仅局限于字符串，各种类型的值都可以。

2、增删查改方法（简单罗列，不做一一描述）

set()、get()、has()、delete()、clear()

3、遍历方法

let myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')
// for...of
for (let key of myMap.keys()) {
    console.log(key) // 0 1
}
for (let value of myMap.values()) {
    console.log(value) // 'zero' 'one'
}
// forEach()
myMap.forEach(function(value, key) { 
    console.log(key + " = " + value) // 0 = 'zero'  1 = 'one'
})

4、使用场景

// 4.1 对象转换成Map
let obj = { a: 1, b: 2 }
let map = new Map(Object.entries(obj))
console.log(Object.entries(obj)) // [['a', 1], ['b', 2]]
console.log(map) // Map(2) {'a' => 1, 'b' => 2}
// 4.2 Map与Array的转换
let kvArray = [['key1', 'value1'], ['key2', 'value2']]
// Map构造函数可以将一个二维键值对数组转换成一个Map对象
let myMap = new Map(kvArray)
console.log(myMap) // Map(2) {'key1' => 'value1', 'key2' => 'value2'}
// 使用 Array.from 函数可以将一个 Map对象转换成一个二维键值对数组
let outArray = Array.from(myMap)
console.log(outArray) // [['key1', 'value1'], ['key2', 'value2']]
// 4.3 Map 的克隆
let myMap1 = new Map([['key1', 'value1'], ['key2', 'value2']])
let myMap2 = new Map(myMap1)
console.log(myMap1 === myMap2)  // false Map对象构造函数生成实例，迭代出新的对象。
// 4.4 Map 的合并
let first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],])
let second = new Map([[1, 'uno'], [2, 'dos']])
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的。
let merged = new Map([...first, ...second])
console.log(merged) // Map(3) {1 => 'uno', 2 => 'dos', 3 => 'three'}

12. Array.from()

Array.from()  静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

从字符串构建数组
Array.from("foo");
// [ "f", "o", "o" ]


从 Set 构建数组
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

从 Map 构建数组
const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

13. replaceAll()替换字符

与replace()区别在于替换符合的全部字符