ES6

原创于 2020-03-21 17:26:16 发布 · 473 阅读

10 ·

CC 4.0 BY-SA版权

es6 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析ES6（ECMAScript6.0）的新增特性，包括let与const声明、字符串模板、解构赋值、...运算符、箭头函数、实用API、类声明与继承、Symbol、Promise、迭代器、生成器、集合、反射与代理等，帮助读者掌握JavaScript最新标准。

一，简介

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版，ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

二，用法

1，let
let的声明全部不是挂在window上的
新增了一个块级作用域{}，以前只有函数作用域，全局作用域
let是不允许重复声明
代码演示：
在这里插入图片描述
2,const
const的声明全部不是挂在window上的
新增了一个块级作用域{}，以前只有函数作用域，全局作用域
const是不允许重复声明
const不允许被修改
代码演示:

3.字符串模板
方便了写法
代码演示：
在这里插入图片描述
4,解构
结构化赋值可以简化书写的长度，提升效率
代码演示：

5，…运算符
收集参数的时候只能放在最后一位，主要用在数组和函数中
代码演示：
在这里插入图片描述
6，箭头函数
箭头函数是一个函数表达式，任何使用函数表达式的地方都可以改成箭头函数
代码演示：

7，ES6一些实用API
代码演示：

8,类声明，类继承
代码演示：

9，Symbol
es6新增的一种新的数据类型，符号的设计，给对象去新增私有属性的，只能在对象内部进行访问
代码演示：
在这里插入图片描述
10，回调，Promise
运行某个函数实现某个功能的时候，传入一个函数作为参数，当发生某件事情的时候，会执行该函数
代码演示：

11,迭代器
从一个数据集合中按照一定的顺序，不断的取出数据的过程
对迭代过程的封装，通常为对象，不同的语言中，表现出来的迭代形式不一样
代码演示：
在这里插入图片描述

12，生成器
通过构造函数Generator创建出来的对象，生成器既是一个迭代器，同时又是一个可迭代的对象
代码演示：
在这里插入图片描述
13，集合
代码演示：

14，反射
内置的js对象，提供了一些方法，可以让开发者调用，访问js的底层功能
代码演示：

<script type="text/javascript">
        var obj = {
            a : 1,
            b : 2,
            c : 3
        }
        //Reflect.set(target,protertyKey,value)
        Reflect.set(obj , 'a' , 5);
        console.log(obj);
        //Reflect.get(target,protertyKey
        let Pget = Reflect.get(obj , 'c');
        console.log(Pget);
        //Reflect.apply(target,this,arguments)
        function fun(a, b) {
            console.log('fun' , a ,b);
        }
        Reflect.apply(fun, null , [1 , 2])
        //Reflect.deleteProperty(target,protertyKey)
        Reflect.deleteProperty(obj , 'a');
        console.log(obj);
        //Reflect.construct(target,arguments)
        function Test(a , b){
            this.a = a;
            this.b = b;
        }
        let ob = Reflect.construct(Test , [1 ,2]);
        console.log(ob);
        //Reflect.has(target,protertyKey)
        let aa = Reflect.has(obj , 'a');
        console.log(aa);
    </script>

15，代理
提供了修改底层实现的方式
代码演示：

<script type="text/javascript">
        class User{

        }
        function ConstructProxy(Class , ...arg){
             return new Proxy(Class , {
                construct(target , argumentsList){
                    const List = Reflect.construct(target , argumentsList);
                    arg.forEach((name , i) => {
                        List[name] = argumentsList[i]
                    })
                    return List;
                }
             })
        }
        const Userdom = ConstructProxy(User , 'username' , 'userage');
        const obj = new Userdom('aaa' , 11);
        console.log(obj);
    </script>