es6的理解

目录：
let——和var的区别
const
　　特性：暂时性死区
解构赋值
　　[]
　　{}
属性简洁
函数简洁
　　属性表达式可以作为对象的属性名
字符串扩展
数组扩展
对象扩展
　　Object.getPrototypeOf(实例对象)
　　Object.setPrototype()
　　new Proxy(实例，处理器)——new Proxy(obj，{get(){}})
　　Reflect.ownKeys(obj)
函数扩展
　　默认值
　　剩余参数——fn(arr,...data){}
扩展运算符 ...arr
箭头函数
　　参数
　　函数体
　　返回值
　　特性：this，arguments，不能是构造函数
数据结构
　　set
　　map

内容：
1. let——和var的区别
特性：
1.不允许重复申明，否则会报错
2.暂存死区（先申明后使用），没有预解析机制，在申明之前就是死区
3.支持快级作用域，比如if,for,switch...

    {
        let a=1;
    }
    console.log(a)

View Code

{}和闭包的区别
{}：因为支持块级作用域，所以类似闭包
闭包：函数套函数，并且外部可以访问内部变量。作用：内部函数可以访问外部函数的变量数据；当内部作为外部函数返回值返回，并被外部数据引用，那么函数内容数据会长期驻留内容，不被垃圾回收。
主要原因：（下面的例子）

    for(var i=0; i<10;i++){
        setTimeout(()=>{
            console.log(i)//10个10
        },100)
    }
    for(let i=0; i<10;i++){
        //let i=0，本质上是在这边申明
        setTimeout(()=>{
            console.log(i)//0-9的数字
        },100)
    }

View Code

从两方面来解释：作用域和异步处理。
用var，setTimeOut是异步处理，if处理完之后，setTimeOut会等时间到了再执行，因为setTimeOut里面没有i，会根据作用域查找规则作用域链找i值，找到外面的i值，现在i值是10，所有打印了10个10。
用let，setTimeOut是异步处理，if处理完之后，setTimeOut会等时间到了再执行，因为setTimeOut里面没有i，会根据作用域查找规则作用域链找i值，找到外面的i值，因为let可以支持块级作用域，所以在里面会申明一个let。根据作用域链找了这个let。

2. const
特性：
1.不允许重复申明，否则会报错
2.暂存死区（先申明后使用），没有预解析机制，在申明之前就是死区
3.支持快级作用域，比如if,for,switch...
4.初始化必须赋值，要不然报错

const a=1;

View Code

3. 解构赋值
[]——内部其实走了两步：第一步申明变量，第二步赋值
特征：数组的解构赋值，位置需要一一对应

    var arr1=[1,2,6,1];
    //第一种方法，原始方法
    var a=arr1[0];
    var b=arr1[1];
    var c=arr1[2];
    var d=arr1[3];
    //第er种方法，es6方法
    var [a, b, c, d] = arr1;
    console.log(a, b, c, d)

View Code

{}——
特征：对非数组的对象进行结构赋值，那么左侧变量的位置不在是一一对应的关系，而是key值对应

    var obj1={width:'100px',height:'10px'};
    //第一种，原始方法
    var {width,height}=obj1
    console.log(width,height)   //100px 10px
    //第二种，当key在之前出现过，出现重名冲突，我们可以自己定一个名字
    var {width:w,height:h}=obj1
    console.log(w,h)   //100px 10px

View Code

涉及的知识：
a.属性简洁表示法/对象简洁表示法
　　当key与值（变量）名称相同的时候，可以简写

对象简洁表示法

    var w=10;
    var obj={
        w:w
    }
    //value是变量的情况下，且key和value一样的情况，可以省略成
    var obj={
        w
    }

View Code

函数简洁表示法

    obj={
        abc(){
        }
    }

    obj={
        abc:function () {
        }
    }

View Code

b.属性表达式可以作为对象的属性名——因为：[]表达式，函数解析

    var a='miao'
    var obj={
        [a]:1
    }
    console.log(obj)  //{miao: 1}

View Code

4. 字符串扩展

模板字符串

    var str='ddddd';
    console.log(`显示字符 ${str}`);    //显示字符 ddddd

View Code

5. 数组扩展

6. 对象扩展
Object.getPrototypeOf(实例对象)
Object.setPrototype()
分析：
之前我们可以用，实例._proto_取原型，但是浏览器不建议这样写，因为考虑到会出现赋值覆盖，原先的就找不到了，还考虑到数据结构统一性。
现在可以通过Object.getPrototypeOf(实例对象)获取原型。

new Proxy(实例，处理器)——相当于产生一个助理
作用：一个构造函数，通过Proxy构造创建一个对象的代理对象
意义：生成一个构造器，就不用直接操作原对象，想传什么属性，就可以传什么属性出来。在外面也可以修改

    var newObj = (function() {
        var obj = {
            x: 10,
            y: 100,
            z: 1000
        };

        return new Proxy(obj, {//生成一个构造器
            get(obj, property) {
                if (property != 'x') {
                    return obj[property];
                }
            }
        });
    })();
    newObj.c=33
    console.log( newObj.c );//33

View Code

Reflect.ownKeys(obj)——返回值是[key]组成的数组
和Object.keys类似

    var obj = {
        x: 10,
        y: 100,
        z: 1000
    };
    var re1=Reflect.ownKeys(obj)
    console.log(re1)//["x", "y", "z"]

View Code

7. 函数扩展
默认值：es6可以通过形参来设置默认值
注意：有默认值的参数最好写在参数列表的最后面

    //原始方法
    function fn(x, y) {
        //通过下面的方式来处理一个函数参数的默认值
        var x = x || 1;
        var y = y || 1;
        console.log(x * y);
    }
    fn();


    //es6的方法
    /!*
    * es6可以通过形参来设置默认值
    *   注意：有默认值的参数最好写在参数列表的最后面
    * *!/
    function fn2(x, y=1) {
        console.log(x * y);
    }

View Code

剩余参数——fn(arr,...data){}
解释：函数第一个传入的是arr数组，后面是不定个数的参数，可以把不定的参数存在data数组里面，函数内部就可以方便调用了。

    function fn(arr,...data) {
        return arr.concat(data)
    }
    console.log(fn([3,2,1],9,0,8))//[3, 2, 1, 9, 0, 8]

View Code

8. 扩展运算符 ...
作用：和剩余参数功能相反——把数组变成参数列表，就是打散数组数据成单独单元。
应用：取数组里面的最大值

    var arr1=[3, 2, 1, 9]
    console.log(...arr1)//3 2 1 9
    console.log(Math.max(...arr1))//9
    console.log(Math.max.apply(null,arr1))//9

    console.log(...{x:1,y:2})//报错

View Code

9. 箭头函数
形式——省了function
参数列表=>函数体

    var fn=(a)=>{
        console.log(a)
    }

View Code

参数
　　没有参数（），必须要用括号
　　一个参数（a）或 a，可以省略括号
　　二个几以上参数（a,b），必须要用括号
函数体
　　一句代码，可以省略{}
　　var fn=(a)=>console.log(a)
返回值
　　一句代码：可以省略return，执行结果就是返回值
　　其他形式：如果没有return，返回值就是undefined
注意：
　　如果仅有的一条语句是一个字面量对象,而且需要返回一个值，那么就必须加return，因为js不知道 {}是函数体的大括号，还是字面量对象的{}。

特性：
　　this，取决于申明期。普通函数this取决于执行期
　　arguments，没有，解决：用剩余参数...data
　　不能是构造函数，不能被new
　　注意：事件函数不要用箭头函数，this指向就不一定指向调用该事件的对象

10. 数据结构set
作用：集合，是js中新增一种数据结构，类似数组，但是Set中每一个数据是唯一的，不重复的
特征：不重复的，不能获取
创建：new Set( | [])
属性：
size。类似length
方法：
add()添加集合
clear()清空集合
delete()删除集合指定值
has()是否包含
forEach()
keys()
values()
entries()

        var set1=new Set([5,6,8,2]);
        console.log(set1)//{}  |  {5, 6, 8, 2}
        console.log(set1.size)//4
        set1.add('a')
        console.log(set1)//{5, 6, 8, 2, "a"}
        set1.add(['ee','e'])
        console.log(set1)//{5, 6, 8, 2, "a", …}
        set1.clear()
        console.log(set1)//{}*!/
        console.log(set1.has(0))//false
        set1.forEach(function (key,value) {
            console.log(key,value)//value5,6,8...
        })
        console.log( set1.keys())//{5, 6, 8, 2, "a", …}
        console.log( set1.values())//{5, 6, 8, 2, "a", …}
        console.log( set1.entries())//{5, 6, 8, 2, "a", …}

View Code

应用：数组去重
解释：利用set数据不能重复的特性，将重复的数据剔除，并用扩展符...将set数据打散，最后将打散的数据用【】括起来。

    var arr2=[5,7,3,9,1,5,7]
    var re2=[...new Set(arr2)]
    console.log(re2)//[5, 7, 3, 9, 1]

View Code

11. 数据结构map（{}|[],值）
对象的key只能是字符串
key可以是任何,可以是对象
属性：
size : 返回成员总数。
方法：
set(key, value) : 设置一个键值对。
get(key) : 读取一个键。
has(key) : 返回一个布尔值，表示某个键是否在Map结构中。
delete(key) : 删除某个键。
clear() : 清除所有成员。

https://www.jianshu.com/p/287e0bb867ae

https://www.cnblogs.com/Wayou/p/es6_new_features.html

猜你喜欢