ES6+基础知识该文章记录一些ES6+基本知识，慢慢将会添加ES6+更多知识，所有内容均从网上整理而来，加上自己的理解做

前言

该文章记录一些ES6+基本知识，慢慢将会添加ES6+更多知识，所有内容均从网上整理而来，加上自己的理解做一个整合，方便工作中使用。

一、解构

从数组和对象中提取值，对变量进行赋值，这被称为解构

1. 数组解构

数组的元素是按次序排列的，变量的取值由它的位置决定

等号两边的模式相同，左边的变量就会被赋予对应的值

 let [a, [[b], c]] = [1, [[2], 3]]
 console.log(a, b, c) // 1 2 3

 let [d, , f, e] = [1, 2, 3]
 console.log(d, f, e) // 1 3 undefined  //左边找不到对应的默认值为undefined

 let [h, ...g] = [1, 2, 3, 4, 5]
 console.log(h, g)// 1  [2, 3, 4, 5]

不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组
```
 let [x, y] = [1, 2, 3, 4, 5]
 console.log(x, y)// 1 2
```

解构赋值时设置默认值

 let [name = '胡歌'] = []  //name=胡歌
 let [sex, love = '骑车'] = ['男'] //sex=男 love=骑车

2. 对象解构

对象的属性没有次序，变量必须与属性同名，才能取到正确的值

  let student = {
    name: '胡歌',
    sex: '男',
    age: 18
  }
  //变量名与属性名一致
  let { name, sex } = student
  console.log(name, sex) //胡歌 男

  //重命名
  let { age: year } = student
  console.log(year) // 18

  //设置默认值
  let { love = '骑车' } = student
  console.log(love) // 骑车

二、扩展运算符（···）

//展开数组
console.log(...[1, 2, 3]) // 1 2 3

//浅拷贝--数组（解构+扩展运算符）
let arr = [1, 2, 3]
let arr2 = [...arr] 
console.log(arr === arr2) //false

//混合使用
let arr3 = [0, ...arr, 4, 5, 6]
console.log(arr3) //[0, 1, 2, 3, 4, 5, 6]

//浅拷贝--对象（解构+扩展运算符）
let student = {
   name: '胡歌',
   sex: 1,
   love: '骑车'
 }
 let student1 = { ...student }
 console.log(student1 === student)//false

三、Map()

Map用来存储键值对解构的数据(key-value),和Object类似

1. Map和Object的区别

Object的属性名只能是字符串或符号
Map的属性名可以是任何数据类型

2. Map的属性和方法

let map = new Map()

map.size ：实例对象中键值对的数量
map.set(key,value) ：向实例对象添加键值对
map.get(key)：获取key对应的值
map.delete(key)：删除指定的值
map.has(key)：检查是否含有指定键
map.clear()：清空所有键值对
map.keys()：获取所有键名，可用for of遍历，可用Array.from()转化成数组
map.values()：获取所有键值，可用for of遍历，可用Array.from()转化成数组
map.entries()：获取所有键值对,用for of遍历得到数组形式的键值对:[key,value]

  let map = new Map([['key', 123], ['name', '胡歌']])

  //map实例对象可以使用forEach方法
  map.forEach((value, key) => {
    console.log(value, key)
  })

  //也可以使用for of 遍历
  for (const [key, value] of map) {
    console.log(key, value)
  }

  for (const [key,value] of map.entries()) {
    console.log(key,value)
  }

  for (const key of map.keys()) {
    console.log(key)
  }
  
  for (const value of map.values()) {
    console.log(value)
  }

3. Map和数组的关系

const kvArray = [['key1', 'value1'], ['key2', 'value2']];

// 使用常规的 Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象
const myMap = new Map(kvArray);

console.log(myMap.get('key1')); // "value1"

// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
console.log(Array.from(myMap)); // 输出和 kvArray 相同的数组

// 更简洁的方法来做如上同样的事情，使用展开运算符
console.log([...myMap]);

// 或者在键或者值的迭代器上使用 Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]

四、Set()

Set用来创建一个集合，和数组类似，但不能存储重复的值

1. 创建set实例

let mySet = new Set()

2. Set的属性和方法

mySet.size：元素个数
mySet.add(value)：添加value
mySet.delete(value)：删除指定元素
mySet.clear()：删除所有元素
mySet.has(value)：检查value是否存在，返回布尔值
mySet.forEach(value)：遍历set对象
mySet.values()：返回一个新的迭代器对象，该对象包含Set对象中每个元素

3. Set和Array

let myArray = ["value1", "value2", "value3"];

// 用 Set 构造器将 Array 转换为 Set
let mySet = new Set(myArray);

mySet.has("value1"); // returns true

// 用...(展开操作符) 操作符将 Set 转换为 Array
console.log([...mySet]); // 与 myArray 完全一致

4. 数组去重

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]
console.log([...new Set(numbers)])
// [2, 3, 4, 5, 6, 7, 32]

五、import和export

1. 静态引入

import 引入
export 暴露

实例：一个html文件引入一个index.js，index.js有需要调用其他js的方法、数据

// index.html文件
// 使用了import和export,引入index.js需要type="module"
<script type="module" src="./indexes.js"></script>

默认暴露：一个js文件只能有一个默认暴露

// utils.js文件暴露 index.js需要的方法/数据
export default {
   name: '胡歌',
   sex: '男'
}

//index.js引入需要的方法/数据
//import 自定义名字 from './cs.js'
import datas from './cs.js'
console.log(datas.name) //胡歌

分别暴露和统一暴露

// 分别暴露
// utils.js文件
export let name="胡歌"
export let sex="男"

// 统一暴露
let name = "胡歌"
let sex = "男"
export{
    name,
    sex
}

//index.js  引入的方法都是一样
//按需引入
import {name,sex} from './cs.js'
console.log(name) //胡歌

2. 动态引入模块

标准用法的 import 导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度）。关键字 import 可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise。请不要滥用动态导入（只有在必要情况下采用）。静态框架能更好的初始化依赖，而且更有利于静态分析工具和 tree shaking 发挥作用。

//utils.js

//分别暴露
export let a = 10
//默认暴露
export default {
  name: 'huge'
}

//index.js
import('./utils.js').then(module => {
  console.log(module.a) //10
  console.log(module.default) //{name: 'huge'}
})