es6总结1

1、let 块级作用域
解决了事件循环泄露的问题和setTimeout异步的问题

for(var i=0;i<10;i++){
        setTimeout(() => {
            console.log(i)            
        }, 0);
    }//输出10个10

for(var i=0;i<10;i++){
       (function(i){
           setTimeout(() => {
               console.log(i)
           }, 0);
       }(i))
    }//输出0，1，2，3，4，5，6，7，8，9

在这里插入代码片

 for(let i=0;i<10;i++){
        setTimeout(() => {
            console.log(i)            
        }, 0);
    }//输出0，1，2，3，4，5，6，7，8，9
    

2、const
定义了常量

 此处即表示let  cpnst class命令声明的全局变量不属于顶层对象的属性
        var a=1;
        console.log(window.a)//1
        let b=1;
        const c=1
        console.log(b)//1
        console.log(window.b)//undefined  
        console.log(window.c)// undefined
        
//es5常量的实现
        Object.defineProperty(window,"pi",{
            value:3.1415926,
            writable:false
        })
        console.log(window.pi)//3.1415926
        window.pi=4
        console.log(window.pi)//3.1415926  不可以修改



  // es6中的常量
        const pi2=3.1415926
        console.log(pi2)
        pi=4
        console.log(pi2)


//还有一种方法实现常量的效果
//es6中的对象代理
        var Person={
            name:"lili",
            age:"18",
            sex:"女"
        }
        var person=new Proxy(Person,{
            get(target,key){
                return target[key]
            },
            set(target,key,value){
                if(key!=="sex"){//此处规定了sex不可以修改赛事
                    target[key]=value
                }
            }
        })
        console.log(person.name)//lili
        console.log(person.age)//18
        console.log(person.sex)//女

        person.name="小宝"
        person.age="20"
        person.sex="男"
        console.log(person.name)//小宝
        console.log(person.age)//20
        console.log(person.sex)//女
   此处代表性别不可以修改

3、解构赋值
（1）数组的解构赋值
（2）对象的解构赋值
（3）字符串的解构赋值
（4）函数参数的解构赋值
（5）提取Json数据

 //数组的结构赋值
        // let [a,b,c]=[1,2,3]
        // console.log(a)//1
        // let [d,e]=[1,2,3]
        // console.log(d)//1
        // console.log(e)//2
        // let [d,e,f,g]=[1,2,3]
        // console.log(g)//undefined
    //对象的解构赋值
        // let {a,b}={a:"aaa",b:"bbb"}
        // console.log(a)//aaa
        // console.log(b)//bbb

        // let obj={p: ["hello",{y:"world"}]}
        // let {p:[x,y]}=obj
        // console.log(p)//Uncaught ReferenceError: p is not defined   这里的p是模式,不是变量,
        // console.log(x)//hello
        // console.log(y)//{y: "world"}

        // let {p,p:[x,y]}=obj
        // console.log(p)

    //字符串的解构赋值
        // let [a,b,c,d,e]="hello"
        // console.log(a)//h
        // console.log(d)//l
        // console.log(c)//l
        // let {length:len}="hello"
        // console.log(len)//5

    //函数参数的解构赋值
        // function main(a=3,b=4){
        //     return a+b
        // }
        // console.log(main())//7
        // console.log(main(1,1))//2

        // var m=[[1,2],[3,4]].map(([a,b])=>a+b)
        // console.log(m)//3,7


        //提取json数据
        // let jsondata={
        //     data:"json",
        //     type:"get",
        //     number:[1000,2000],
        // }
        //let {data,type,number}=jsondata
        // console.log(data)
        //console.log(type)
        // console.log(number)
        // console.log(data,type,number)

4、class的理解

class Father{
        constructor(x,y){
                this.x=x;
                this.y=y
        }
}
var f=new Father(1,2)
console.log(f.x)//1
console.log(f.y)//2

class继承

 class A{
        constructor(x){
            this.x=5
        }
    }
    class B extends A{
        get(){
            return super.x
        }
    }
    var b=new B()
    console.log(b.get())//undefined
    console.log(b.x)//5

5、函数的扩展
（1） reat参数：function(…args){}
（2）严格模式：允许在函数内部使用
（3）箭头函数：（）=>{} this指向定义是的this
6、数组的扩展
（1）trim() 去除字符串两侧的空格，主要解决表单提交产生的两侧空格

        var str=" abc "
        console.log(str.length)//5
        var str1=str.trim()
        console.log(str1.length)//3

（2）Array.from(arr,function)
将伪数组变成数组，使用数组的方法，并且接受一个函数，类似于map方法

在es5中转化数组采用Array.prototype.slice.call()
（3）find() findIndex() 参数为回调函数 返回第一个符合的数组成员
（4）includes() 判断数组中是否包含某元素
（5）Array.of() 将一组值转换为数组
（6）数组实例values() key() entries()

//太多了，就写到这里了

        var div=document.querySelectorAll("div")
        console.log(div)//odeList(6) [div, div, div, div, div, div]
        Array.from(div).forEach(function(value){
            console.log(value)
        })
        console.log(Array.from(div))//(6) [div, div, div, div, div, div]
        console.log(Array.prototype.slice.call(div))//(6) [div, div, div, div, div, div]

7、