变量声明

var``let``const

var: 在相同作用域内,有同名的变量那么会覆盖

let: 不允许在相同作用域内，重复声明同一个变量

const: 常量不能被修改,也与let一样不可重复声明, 注意const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变， 所以将一个对象声明为常量必须非常小心。

数组,对象,函数的解构

数组的解构

对象的解构

函数的解构

函数参树默认值和可变参数

参数默认值

function animal(type = 'cat'){
   console.log(type)
}

rest参数只能写在最后，前面用…标识

function animals(...types){
   console.log(types)
}

Set 和 Map的使用

ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。

set

数组去重

map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

Object结构 和 Map解构的区别：

1. Object结构提供了“字符串—值”的对应
2. Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现
3. 如果你需要“键值对”的数据结构，Map比Object更合适

箭头函数 和 this

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

模板语法

ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 ’ 或 " 外，它们看起来与普通字符串并无二致。在最简单的情况下，它们与普通字符串的表现一致：

let str=`你好xxxxxx`

字符串模板变量使用
可以使用${变量}的方式在字符串模板中

let avr="啊啊啊"
let str=`你好xx${avr}xxxx`

字符串模板变量循环渲染
关键的就是使用values.map来遍历数组中所有的对象,然后将结果拼接到一起最后使用.join(’’)来合并结果

$.get(projectpath + "/slow/slowList", (ref) => {

        if (ref.data) {

            // {key:[{},{},{}],key1:[{},{},{}]}
            $.each(ref.data, function (key, values) {
                console.log(key);
                $("#slowList").append(`<h4>${key}</h4>`)

                $("#slowList").append(
                    `<table class="table">
                         <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">key</th>
                                    <th scope="col">lockTime</th>
                                    <th scope="col">queryTime</th>
                                    <th scope="col">rowsSent</th>
                                    <th scope="col">rowsExamined</th>
                                    <th scope="col">time</th>
                                    <th scope="col">user</th>
                                    <th scope="col">sql</th>
                                </tr>
                                </thead>
                                <tbody >
                                ${
                                            values.map((item) => {
                                                console.log(item)
                                                return `
                                                             <tr>
                                                                <td scope="row">item.key</td>
                                                                <td>${item.queryTime}</td>
                                                                <td>Otto</td>
                                                                <td>@mdo</td>
                                                                <td>@mdo</td>
                                                                <td>@mdo</td>
                                                                <td>@mdo</td>
                                                                <td>@mdo</td>
                                                                <td>@mdo</td>
                                                            </tr>
                                                       `
                                            }).join('')
                    
                                        }
                                </tbody>
                         </table>`)
            });
        }

    })

import export

这两个家伙对应的就是es6自己的module功能。

我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题：

1.一方面js代码变得很臃肿，难以维护

2.另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺序错了可能就会出bug

在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。

而现在我们有了es6的module功能，它实现非常简单，可以成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。
上面的设计思想看不懂也没关系，咱先学会怎么用，等以后用多了、熟练了再去研究它背后的设计思想也不迟！好，那我们就上代码…

导出export

export const nav = (nav)=>{
    //加入导航
    $.get(projectpath + "/model/nav.html", (data) => {
        $(nav).html(data)
    })

}

或者这样

function f1 (){
    console.log("module - 1 : functino 1")
}

let b = {
    name:"test_obj"
}

let str = "hell绿绿绿"

export {
    f1,b,str
}

export default
很多初学者很困惑，既然有了 export ，为什么还要有个 export default 呢？网上给出的答案往往是，作为文件的默认导出接口,也就是唯一出口,就好比java的main方法一样

export default function main (){
    console.log("module - 1 : functino 1")
}

导入import

*导入文件全部的声明 as 是起别名

import * as m1 from "./m1.js"
console.log(m1)

导出export的部分声明

但是这种方式，仅限于获取文件对象的正常属性，default属性是获取不到的，原因有两个：

1. 未解构的对象全部进行了丢弃
2. default是关键字，不能再解构中当做变量进行使用

import {f1，b} from "./m1.js"
console.log(f1)
console.log(b)

导入export default 的接口

export default是文件的默认导入，其实这句话的重点，并不在于 export default，而是在于 import 语句是如何处理文件默认导入的。
修改main.js 文件内容为：

import d from "./m1.js"
console.log(d)

动态导入

还有一种高端的玩法，在项目中也是很有用处的。import不光是一个关键字，同时也是一个函数，函数的参数是需要导入模块的路径，函数返回一个promise对象。

import("./m1.js").then(m=>{
  console.log('then:',m)
})

在这段代码中，then中回调的m，就是文件模块的整个文件对象（包括export和export default）。

不导入文件对象

import还可以不导入文件对象，也就是传说中的，import将文件模块仅仅最为初始化进行导入，而不获取文件模块的接口。

在项目中，实践的地方，例如一个vue项目，我们需要给vue对象挂载很多东西，但是全部写在src/main.js 文件中，又会显得特别啰嗦，不利于维护，也没能体现工程化的理念。所以我们常常单独新建一个js文件 ,然后在这个js 文件中，编写相关逻辑。这个文件的作用，仅仅是执行一遍，我们不期望这个文件暴露什么变量，所以没必要获取文件对象。那么这个时候，import 关键字的另一个作用就体现出来了：

使用import直接引用一个文件时，会执行一遍这个文件，而不获取任何文件对象。

import './lib/init.js';