es6语法

1.let

变量不能重复声明
```
let a = '张三'
let a = '李四'
```
块级作用域

在指定内生效
不存在变量提升（像var会自动在最上面先声明不赋值）

不会和var 和function 会先声明不赋值
不影响作用域链

2.const

一定要赋初始值
一般常量使用大写（潜规则）
常量不能修改
块级作用域
对于数组和对象的元素修改，不算做对常量的修改，不会报错
1. 因为数组和对象指向地址没有发生改变，不算修改

 		// 数组解构赋值
        const arr =['a','b','c']
        let [zhang,san,wa] = arr
        console.log(zhang) //a

        // 对象解构赋值
        const obj ={
            uname: 'zs',
            age : 18,
            abble:function() {
                console.log('abble')
            }
        }
        let {abble} = obj
        abble()

3.字符串赋值

`` 特性

var a = `字符串` // `` "" '' 新版推出`` tab上面个键

内容可以直接换行
```
var a = `字符
		串`
```

变量拼接使用${}

let lo = '张三'
let out = `${lo}法外狂徒`
console.log(out)

4.解析赋值

//解析赋值
const zhao={
            name: "root",
            password: "root",
            port:3306
        }
let {name,password,port} = zhao //解析zhao里面的

5.箭头函数（重点）

//声明函数
let fn =function(){
    
}
//箭头函数
let fn = (a,b)=>{
    return a+b
}
len result = fu(1,5)
console.log(result)

this 是静态的 this.始终指向函数声明时候所在的作用域下的this值

不能作为一个构造实例化的对象(公共类 )

let Person =(name,age)=>{
    this.name =name
    this.age = age
}
let me =new Person('zhangsan',30)
console.log(my)

//会报错

不能使用arguments变量

let fn = () ={
    console.log(arguments)
}
fn(1,2,3)

//报错

箭头函数的简写
1. 省略小括号，形参只有一个的时候
```
let add = n =>{return n*n}
```
2.省略花括号 ,只有一条语句的时候省略了花括号return也要省略
```
let add = n => n*n
```

箭头函数的应用场景

//箭头函数适合与this 无关的回调。定时器，数组的方法回调 //箭头函数不适合与this 有关的回调。事件回调，对象的方法

6.允许给函数参数赋值初始值

1.形参初始值具有默认的参数。一般位置靠后

function add(a,b,c=10){
    return a+b+c
}
let result = add(1,2) //13

function conner({host='lisi',name,password,port}){
            console.log(host)
            console.log(name)
            console.log(password)
            console.log(port)
        }
        conner({
            name: "root",
            password: "root",
            port:3306
        })

7.rest参数

...args 获取传过来的参数一定要放最后面

...args 与 arguments 的区别一个是数组一个是对象

function fn(a,b,...args){
    console.log(a)
    console.log(b)
    console.log(args)
}

8.展开运算符

... 展开运算符就是能将数组转换为逗号分隔的【参数序列】

const arr =['张三','李四','王五']

function chan(){
    console.log(arguments)
}

chan(...arr)
//会变成chan('张三','李四','王五')

扩展

1.数组拼接


const arr =['张三','李四','王五']
const arr1 =['zs','ls','ww']
var newArr = [...arr, ...arr1 ]

2.数组克隆(浅拷贝)

const arr =['张三','李四','王五']
var newArr = [...arr]

3.将为数组转为真数组

//用document.querySelectorAll('')获取到多个元素
//假设上面有三个div
var div = document.querySelectorAll('div')
var newArr = [...div]

9.Symbol JavaScript的第七个数据类型

1.创建

let s =Symbol()

let s2 =Symbol('张三啊')
let s22 =Symbol('张三啊')
//console.log(s2 === s22)  false

let s3 =Symbol.for('张三啊')
let s4 =Symbol.for('张三啊')
//console.log(s3 === s4)  true

2.不能与其他数据类型进行运算与比较

9.1给对象添加Symbol类型属性

let lrs ={
    name:'狼人杀',
    [Symbol('say')]:function(){
        console.log('我可以发言')
    },
    [Symbol('zb')]:function(){
        console.log('我可以自爆')
    }
}
console.log(lrs )

Symbol 的内置方法会自动调用

七个数据类型

USONB

u undefined

s string symbol

o object

n null number

b boolean

10.迭代器（iterator）

迭代器(Iterator)是-种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。

1)ES6创造了--种新的遍历命令for..of循环，Iterator接口主要供fr..of消费

2)原生具备iterator接口的数据(可用forof遍历)

10.1for in 和 for of 区别

in是获取到下标

of是获取到值

        var arr =['张三','李四','王五','老六'];
        
        // for (const key in arr) {
        //    console.log(key)  //1234
        // }
        for (const key of arr) {
           console.log(key)  //张三 李四 王五 老六
        }
        console.log(arr)

10.2 迭代器自定义遍历对象

工作原理

a)创建一个指针对象，指向当前数据结构的起始位置 b) 第一次调用对象的next方法，指针自动指向数据结构的第- -个成员 c) 接下来不断调用next方法，指针一-直往后移动，直到指向最后一个成员. d)每调用next方法返回一个包含value和done属性的对象

如果下次需要自定义可以通过以下修改

//自定义迭代器
var obj ={
    name: "张三",
    age: 19,
    stus:['zs','ls','ww','ll'],
    [Symbol.iterator](){
         let index = 0;
         return {
            next: ()=> {
               if (index < this.stus.length) {
                   const result = {value: this.stus[index],done: false}
                    index++;
                    return result
         		}else {
                     return { value: undefined , done: true}
                        }
                    }
                }
       }
	}
        for (const v of obj) {
            console.log(v)
        }

11.生成器

生成器其实是一个特殊的函数主要针对异步编程的解决方案

yield 分隔！每次next只会执行一块

        // 定义一个生成器函数  *
         function * gen(a){
            //输出 调用传参 
            console.log(a)
            let one = yield '第一'
            console.log(one)
            let tow = yield '第二'
            console.log(tow)
            let three =  yield '第三'
            console.log(three)

        }
        let iterator = gen('调用传参')
        console.log(iterator.next(''))
        console.log(iterator.next('next2'))
        console.log(iterator.next('next3'))
        console.log(iterator.next('next4'))

12.Promise(重点)

Promise是ES6引入的异步编程的新解决方案。语法上Promise是-一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

Promise 构造函数: Promise (excutor) {}
Promise.prototype.then 方法
Promise.prototype.catch 方法

 // new Promise  resolve 成功, reject 失败  
        const p = new Promise(function(resolve,reject) {
            setTimeout(function() {
                // let err = '数据读取失败'
                // reject(err);

                let data = '数据读取成功'
                resolve(data)

            },1000)
        })
        //then 设置成功 和 失败 第一个函数返回成功 第二个返回失败
        p.then(function(value) {
            console.log(value)
        },function(reason) {
            console.log(reason)
        })

then 和 catch 差不多

读取多个文件

const fs = require("fs");
// 用promise封装
const p = new Promise((resolve, reject) => {
    fs.readFile('./ss.md',(err,data)=>{
        resolve(data)
    })
})
p.then(function(value) {
    return new Promise((resolve, reject) => {
        fs.readFile('./ss1.md',(err,data)=>{
            resolve([value,data])
        })
    })
}).then(function(value) {
    return new Promise((resolve, reject) => {
        fs.readFile('./ss2.md',(err,data)=>{
            resolve([value,data])
        })
    })
}).then(function(value) {
    //最后一个才是输出全部
    console.log(value.toString())
})
//意思是：
//他是返回成功回调里面返回一个promise,在promise里面把上一个成功和当前这个的回调放到数组里面去，然后最后一个才是输出全部

更多详细查看：developer.mozilla.org/zh-CN/docs/…

13.Set集合

创建及其方法

has 检测是否有

        const s = new Set();
        const s1 = new Set([1,2,2,4,5,6]);
        // console.log(s1)//自动去重
        s1.add(99)//添加
        s1.delete(1)//删除
        console.log(s1.has(3))//检测
        s1.clear()//清空
        console.log(s1)//自动去重

14.Map集合

Map 数据结构。它类似于对象，也是键值对的集合。是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map也实现了iterator 接口，所以可以使用「扩展运算符」和fo.....进行遍历。Map 			  的属性和方法: 
1) size     返回Map的元素个数
2) set 		增加一个新元素，返回当前Map
3) get		返回键名对象的键值
4) has		检测Map中是否包含某个元素，返回boolean值
5) clear	清空集合，返回undefined

    let m = new Map();
    m.set('name','张三')
    m.set('sing',function(){
        console.log('唱')
    })
    console.log(m)

15.类

类的静态成员

class Phone(){
    //静态属性 static
    static name = '手机';
    static change(){
        console.log('我可以改变')
    }
}
let huawei =new Phone() 
//静态属性属于 类 不属于实例对象
console.log(huawei.name)
console.log(Phone.name)

类的继承

类简称函数继承的语法糖

super 指向父类

class Phone(brand,price){
   	this.brand =brand;
    this.price = price
   	change(){
        console.log('我是父类的方法')
    }
}
calss SmartPhone extends 	Phone(brand,price,color,size){
    super(brand,price)//获取父类
    this.brand =brand;
    this.price = price
    this.color =color;
    this.size = size
   	change1(){
        console.log('我是子类的方法')
    }
    change(){
        console.log('我是父类的重写后的方法')
    }
}

16.get 和set

读取了就会调用get 修改了就会调用set

记住get需要return

get可以用在动态的地方上

set 需要传参

set可以用在判断传参里面的值是否正确然后进行赋值

 class Phone{
     
            get price() {
                console.log('价格上涨')
                return "张三被读取了"
            }
            set price(newValue){
                console.log('价格被修改了')
            }
        }

        let s = new Phone()
        console.log(s.price)//读取
        s.price = 'nilai'//修改

17.数值扩展

0.1+0.2为什么不等于0.3

     // 0.Number.EPSILON 是JavaScript表示最小精度
      function equal(a, b) {
        if (Math.abs(a - b) < Number.EPSILON) {
          return true;
        } else {
          return false;
        }
      }
      console.log(equal(0.1 + 0.2, 0.3));
      // 1.Number.isFinite 检测一个数值是否为有限数

      console.log(Number.isFinite(100));
      console.log(Number.isFinite(100 / 0));
      console.log(Number.isFinite(Infinity));
      //3. Number.isNaN 检测一个数值是否为NaN
      console.log(Number.isNaN(100));
      //4. Number.parseInt Number.parseFloat字 符串转整数 或者浮点数
      console.log(Number.parseFloat("3.12342gg"));
      console.log(Number.parseInt("312342gg"));
      //5. Number.isInteger 判断一个数是否为整数
      console.log(Number.isInteger(5));
      console.log(Number.isInteger(2.5));
      //6. Math. trunc将数字的小数部分抹掉
      console.log(Math.trunc(3.5));
      //7. Math.sign 判断一个数到底为正数负数还是零
      console.log(Math.sign(10)) //1
      console.log(Math.sign(0)) //0
      console.log(Math.sign(-10))//-1

18.对象方法扩展

        // 1.Object.is()判断两个值是否相等
        console.log(Object.is('张三','张三'))
        // 2.Object.assign对象合并
        const config1 ={
            host: 'aaa',
            port: 3304,
            user:'root',
            pass:'text',
            test1: '第一个有'
        }
        const config2 ={
            host: 'bbb',
            port: 33041,
            user:'ahzn',
            pass:'zhan',
            test2: '第二个有'
        }
        // 第二个覆盖第一个 第一个有第二个没有就添加一起 
        console.log(Object.assign(config1,config2))
        // 3.Object.setPrototypeOf()设置原型对象 Object.getPrototypeOf()

了解es6语法