es6学习

1.初识ES6

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2.let声明变量与const声明常量

1. let 不允许重复声明变量

2. let 和 const 声明的变量不会在预解析的时候解析（也就是没有变量提升）

3. let 和 const 声明的变量会被所有代码块限制作用范围

区别:
let 声明的变量的值可以改变，const 声明的变量的值不可以改变

    const num = 100
    num = 200 // 这里就会报错了，因为 const 声明的变量值不可以改变（我们也叫做常量）

let 声明的时候可以不赋值，const 声明的时候必须赋值

     const num // 这里就会报错了，因为 const 声明的时候必须赋值

3.解构赋值

解构赋值：快速的从对象或者数组中取出成员的一个语法方式

1. 解构对象（快速的从对象中获取成员）

  // ES5 的方法向得到对象中的成员
  const obj = {
    name: 'kerwin',
    age: 100,
    gender: '男'
  }
  
  let name = obj.name
  let age = obj.age
  let gender = obj.gender

2. 解构数组（快速的从数组中获取成员）

  // ES5 的方式从数组中获取成员
  const arr = ['kerwin', 'tiechui', 'gangdan']
  let a = arr[0]
  let b = arr[1]
  let c = arr[2]

4.模版字符串

ES5中我们表示字符串的时候使用 '' 或者 ""
在ES6中，我们还有一个东西可以表示字符串，就是 ``（反引号）

和单引号好友双引号的区别：

1. 反引号可以换行书写
2. 反引号可以直接在字符串里面拼接变量

5.字符串扩展

1. includes函数
   判断字符串中是否存在指定字符

2. repeat函数
   repeat()方法返回一个新字符串,表示将原字符串重复n次

6.数值扩展

1. 二进制和八进制表示法

let count1 = 100
let count2 = 0x100
let count3 = 0o100
let count4 = 0b100

2. isFinite与isNaN方法

let num1 = Number.isFinite(100) //true
let num2 = Number.isFinite(100/0) //false
let num3 = Number.isFinite(Infinity) // false
let num4 = Number.isFinite("100") //false

区别：
传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

3. isInteger方法（用来判断一个数值是否为整数）

let num1 = Number.isInteger(100) // true
let num2 = Number.isInteger(100.0) //true
let num3 = Number.isInteger("kerwin") //false
let num4 = Number.isInteger("100") // false

4. 极小常量Number.EPSILON
   表示 1 与大于 1 的最小浮点数之间的差

5. Math.trunc
   将小数部分抹掉,返回一个整数

6. Math.sign
   判断一个数到底是正数、负数、还是零
   对于非数值，会先将其转换为数值

7.数组扩展

1. 扩展运算符

let arr1 = [1,2,3]
let arr2 = [4,5,6]

console.log([...arr1,...arr2])

2. Array.from
   类数组对象转换为真正数组

3. Array.of
   将一组值转化为数组,即新建数组

4. find方法
   主要应用于查找第一个符合条件的数组元素
   参数是一个回调函数
   如果没有符合条件的元素,返回值为undefined

5. fill方法
   使用自己想要的参数替换原数组内容,但是会改变原来的数组

6. flat与flatMap方法
   按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

8.对象扩展

1. 属性名表达式

let name ="moduleA"
let obj = {
    name,
    [name+"test1"](){

    },
    [name+"test2"](){

    }
}

2. Object.assign
   Object.assign(target, object1，object2)的第一个参数是目标对象，后面可以跟一个或多个源对象作为参数

3. Object.is
   方法判断两个值是否是相同的值

9.函数扩展

1. 箭头函数
   箭头函数是 ES6 里面一个简写函数的语法方式
   箭头函数只能简写函数表达式，不能简写声明式函数
   语法： (函数的行参) => { 函数体内要执行的代码 }

2. 特殊性
   箭头函数内部没有this，箭头函数的this是上下文的this
   在箭头函数定义的位置往上数，这一行是可以打印出 this 的

3. 我们在定义函数的时候，有的时候需要一个默认值出现
   当我不传递参数的时候，使用默认值，传递参数了就使用传递的参数
   ES6中我们可以直接把默认值写在函数的行参位置

10.Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它属于 JavaScript 语言的原生数据类型之一，其他数据类型是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

1. 使用Symbol作为对象属性名

2. Symbol()函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述。这主要是为了在控制台显示，比较容易区分

3. 遍历问题

let keys = {
    name:Symbol("name"),
    age:Symbol("age")
}
var obj  ={
    [keys.name]:"kerwin",
    [keys.age]:100,
    a:1,
    b:2,
    c:3
}

Reflect.ownKeys(obj).forEach(item=>{
    console.log(item,obj[item])
})

4. Symbol.for()可以重新使用同一个 Symbol 值

11.Iterator迭代器

作用：

1. 为各种数据结构，提供一个统一的、简便的访问接口
2. 使得数据结构的成员能够按某种次序排列
3. 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of循环

Iterator遍历过程
创建一个指针对象，指向当前数据结构的起始位置。
第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
不断调用指针对象的next方法，直到它指向数据结构的结束位置。

原生默认具备 Iterator 接口的数据结构如下：Array、Set、Map、String、arguments 对象、NodeList 对象

12.Set结构

类似于数组，但成员的值都是唯一的，没有重复的值

Set.prototype.add(value)：添加某个value。
Set.prototype.delete(value)：删除某个value，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。

1. add 方法

s1.add(5).add(6)
console.log(s1)

2. has 方法

console.log(s1.has(5))

3. delete 方法

s1.delete(5)
console.log(s1.has(5))
s1.clear()

13.Map结构

类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键
Map.prototype.set(key,value)：添加key对应得value，返回 Map 结构本身。
Map.prototype.get(key)：获取key对应的value
Map.prototype.delete(key)：删除某个键（键名+键值）
Map.prototype.has(key)：某个键是否在当前 Map 对象之中。
Map.prototype.clear()：清除所有成员，没有返回值。

        let m1 = new Map([
        ["name","kerwin"],
            ["age",100],
            [{a:1},"大连"]
        ])

        console.log(m1)

        let o = {a:1}
        let m2 = new Map()
        m2.set("name","kerwin")
        m2.set("age",100)
        m2.set(o,"大连")

        console.log(m2)

        for(let i of m2){
            console.log(i)
        }

        console.log([...m2])

        //set get has delete size clear

        console.log(m2.get(o))

        console.log(m2.has("age"))

        m2.delete("age")

        console.log(m2.has("age"))

        console.log(m2.size)


        m2.clear()
        console.log(m2)


        // keys() values() entries()  for of
        // foreach

        // for(let i of m1.keys()){
        //     console.log(i)
        // }

        for(let i of m1.values()){
            console.log(i)
        }

        for(let [index,item] of m1.entries()){
            console.log(index,item)
        }
        for(let [index,item] of m1){
            console.log(index,item)
        }


        m1.forEach((item,index)=>{
            console.log(item,index)
        })

14.Proxy

它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值， 以及实例化等等多种操作， 都会被拦截住， 经过这一层我们可以统一处理，我们可以认为它就是“代理器”

        let obj = {}

        // let arr = [1,2,3] // push pop
        // console.log(box)
        Object.defineProperty(obj,"data",{
            get(){
                console.log("get")
                return box.innerHTML
            },
            set(value){
                console.log("set",value)
                //设置dom
                box.innerHTML = value
            }
        })

        console.log(obj)

        let obj = {}
        let proxy = new Proxy(obj,{
            get(target,key){
                console.log("get",target[key])
                return target[key]
            },

            set(target,key,value){
                console.log("set",target,key,value)
                if(key==="data"){
                    box.innerHTML = value
                }
                target[key] = value
            },
            has(){
                return false
            }
        })

        let s = new Set()

        let proxy = new Proxy(s,{
            get(target,key){
                //判断如果式方法，修正this指向
                let value = target[key]
                if(value instanceof Function){
                    //call apply bind
                    return value.bind(target)
                }
                return value
            },
            set(target,key,value){
                target[key] = value
                console.log("set")
            }
        })

15.Reflect

可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的

1. 代替Object的某些方法

const obj = {
};
Reflect.defineProperty(obj, 'name', {
    value: 'kerwin',
    writable: false,
    configurable:false
});

2. 修改某些Object方法返回结果

if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // fail
}

3. 命令式变为函数行为

const obj = {
    name:"kerwin"
};
console.log(Reflect.has(obj, 'name')) //true
Reflect.deleteProperty(obj, "name")

4. 配合Proxy

let target = new Set()
const proxy = new Proxy(target, {
    get(target, key) {
        const value = Reflect.get(target,key)
        // 遇到 Function 都手动绑定一下 this
        if (value instanceof Function) {
            console.log(`访问${value}方法了`)
            return value.bind(target)
            //不能 是 call apply 
        }
        return value
    },
    set() {
        return Reflect.set(...arguments)
    }
})
proxy.add(1)

16.Promise对象

Promise是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象

当一个回调函数嵌套一个回调函数的时候
就会出现一个嵌套结构

当嵌套的多了就会出现回调地狱的情况
比如我们发送三个 ajax 请求
第一个正常发送
第二个请求需要第一个请求的结果中的某一个值作为参数
第三个请求需要第二个请求的结果中的某一个值作为参数

17.Generator 函数

Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态
语法:

function *gen(){
    console.log(1)
    yield;
    console.log(2)
    yield;
    console.log(3)
}

let g = gen()
g.next()
g.next()
g.next()

18.Class语法

类的写法
getter与setter
静态属性和静态方法

        let s = Symbol('say')
        class Person {
            constructor(name,age){
                this.name = name
                this.age =age
            }

            [s](){
                console.log(this.name,this.age)
            }
        }
        let obj = new Person("kerwin",100)

        console.log(obj.__proto__===Person.prototype)

        obj[s]()

继承

        class Student extends Person{
            static myname = "Student类的名字"
            static mymethod = function(){
                console.log("Student- mythod",this.myname)
            }

            constructor(name,age,score){   
                super(name,age)
                this.score = score
            }

            say(){
                super.say()

                console.log(this.score)
            }

            getScore(){
                console.log(this.score)
            }
        }

        let obj = new Student("kerwin",100,150)

19.Module语法

        //导入1.js中的方法
        import obj1 from ''
        import obj2 from ''
        import obj3 from ''
        console.log(obj1.test,obj2.test)

        //导入1.js中的方法
        // import {A1,A2,test as testA} from ''
        // import {test as testB} from ''
        import * as obj1 from ''
        import * as obj2 from ''

        //导入1.js中的方法
        import testA,{A1,A2} from ''
        import testB,{B1} from ''
        console.log(testA,A1,A2)

20.模块化

JavaScript 现在有两种模块。一种是 ES6 模块，简称 ESM；另一种是 CommonJS 模块，简称 CJS。

CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。语法上面，两者最明显的差异是，CommonJS 模块使用require()和module.exports，ES6 模块使用import和export。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。