张先觉 关注                    

ES6（ES2015）语法介绍

• 变量声明let、const

• 块级作用域

• 解构赋值

• 箭头函数

• 清楚简写形式

• 箭头函数的this指向问题

• 延展操作符...

• 应用1：剩下参数（函数）

• 应用2：展开数组

• 新增系统方法

• map，映射，Array方法

• forEach，循环，Array方法，不求结果

• filter，过滤，Array方法

• reduce,减少、合并，Array方法

• startsWith与endsWith,判断开头/结尾，String方法，返回Boolean

• JSON.stringify(),JSON对象方法，将JSON对象转成字符串，以便网络传输

• JSON.parse(),JSON对象方法，将JSON字符串，转成JSON对象

• Promise对象，语法糖,异步操作

• 特点：让所有的异步操作，看上去像是同步的，精包装。

• resolve与reject，我们自定义的变量对象，用于处理成功、失败，然后，将结果传给then。

• Promise.all([])，同时，处理多个Promise对象，然后，统一交给then

• async/await，语法糖,异步操作

• 目的：由于Promise只能读数据，毫无逻辑性，async/await便是为此而生。

• Promise与async/await，配合使用，形影不离。

• babel编译工具

• 目的：babel，将高阶语法转成低阶语法

• npm i @babel/core @babel/cli @babel/preset-env,“@”最新版、核心库/指令/编译预设

• .babelrc配置文件

• 面向对象

• 特性：继承性、封装性、多态性（JS里面没什么卵用）

• class关键字，声明一个类

• constructor关键字，声明构造器，改造函数

• extends关键字，继承

• extends-super()，继承中，获取父级的参数

• 闭包原理与CG垃圾回收机制

• 闭包，为了保存局部变量，以便后续人的使用。

• 不过，是被神话了而已。不重要！！！

• 模块化

• export,对外暴露，变量、类、函数等等

• export default,对外暴露，默认成员

• import * as mod1 from 'xxx.js'，引入，全部成员（modle）

• import {a,b,c} from 'xxx.js'，选 择性引入

• import a from 'xxx.js'，只能引入默认成员

• import 'xxx.jpg'，引入图片/css等非程序文件

• 正则表达式RegExp

• 数量为6/{a{6}}/,

• 数量1-5/{a{1,5}}/,

• 最少6个/{a{6,}}/，

• +最少一个{1,}

• ?可以没有，若是有，只有一个{0,1}，/https?/要么是http，要么是https

• 正则表达式,匹配字符串，只能适用于字符串。

• 定界符//规定正则的起始/结束位置，类似于let obj = {}。

• 元字符[],可表示任意一个a[abc]c、范围[0-9]、排除[^0-9]

• str.search(),String方法，寻找匹配的位置，类似于indexof()

• str.match(),String方法，返回数组，数组里面包含你所需要的东西

• str.replace(),String方法，替换匹配字符

• RegExp.test(),RegExp方法,检测字符是否满足正则的要求

• i选项,i，表示忽略大小写

• g选项,g，全局匹配

• 转义字符\d,转义字符，方便，匹配[0-9]的数字

• 量词{}，

• 修饰符-条件，^行首（开头），$行尾（结尾）

1.1解构赋值的使用

    //两边，结构相同，json对json，Array对Array
    let {a,b,c} = {a:1,b:2,c:3};
    let [a, b, c] = [1, 2, 3]

                   

1.2箭头函数的this指向问题

    //箭头函数，this，永远绑定在最初声明的作用域之下，绝对不会改变。
    let sum = (a, b) => {
        console.log(this);// this指向window
        return a + b;
    }
    let num = sum(1, 2);
    console.log(num);

                   

1.3展开操作符的使用

    //1 剩余参数 
    function show(a, b, ...arr) {
        console.log(a, b, ...arr);
    }
    show(1, 2, 3, 4, 5);

    //2 展开数组
    let arr1 = [1, 2, 3];
    let arr2 = [1, 2, 3];
    let arr = [...arr1, ...arr2];   

                   

1.4 ES6新增方法

    // 1.map，映射，Array方法，根据映射对象返回对象的结果（一一对应）
    let arr = [1, 2, 3, 4, 5, 6, 7];
    let reslut = arr.map(itme => itme >= 4);
    console.log(reslut);// [false, false, false, true, true, true, true]

    // 2.forEach，循环，Array方法
    let arr = ['天天', '甜甜', '田田'];
        arr.forEach((itme, index) => {
            alert(`第${index}个：${itme}`);
    });

    // 3.filter,根据写入条件，过滤数组内容
    let arr = [10, 40, 60, 80, 90, 100];
    let reslut = arr.filter(itme => itme <= 100 && itme >= 70);
    console.log(reslut);//[80, 90, 100]

    // 4.reduce,减少、合并，可以将无数的数据元素合并成为一个结果
    let arr = [0, 20, 40, 60];
    let reslut = arr.reduce((tmp, itme, index) => {//求平均数
        alert(`第${index}个:${tmp}+${itme}`)
        if (index < arr.length - 1) {
            return tmp + itme;
        } else {
            return (tmp + itme) / arr.length;
        }
    });
    console.log(reslut);

                   

1.5Promise大致流程

    //大致流程：首先，new Promise对象，然后，看数据是否成功，最后，交给then处理。

    let p = new Promise(function(reslove,reject){//new一个，Promise对象
        $.ajax({
            url:"http://baidu.com",
            dataType:'json',
            success(data){// 成功,接收数据
                reslove(data);
            },
            error(res){// 失败，接收原因
                reslove(res);
            }
        });
    });

    p.then(function(data){//处理，接收的数据（或是原因）
        alert('成功');
    },function(res){
        alert('失败');
    });

                   

1.6 ES5与ES6构造对象的比较

    // ES5的方式
    function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.show = function() {
            alert(this.name);
            alert(this.age);
        }
        let p = new Person('天天', 18);
        p.show();

    // ES6的方式   
    class Person { //class，声明类
            constructor(name, age) { //constructor，改造函数
                this.name = name;
                this.age = age;
            }
            show() {
                alert(this.name);
                alert(this.age);
            }
        }
        let p = new Person('天天', 18);
        p.show();

                   

1.7 ES6继承方式

     class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            show() {
                alert(this.name);
                alert(this.age);
            }
        }
        class Worker extends Person { //extends关键字，继承
            constructor(name, age, job) {
                super(name, age); //super关键字，获取父级的参数
                this.job = job;
            }
            Jop() {
                alert('敲代码的');
            }
        }
        let worker = new Worker('天天', 18, '程序员');
        worker.show();
        worker.Jop();

                   

1.8 剖析闭包原理

    // 闭包，一种不被CG回收的函数，使用过多，会导致内存泄露。
     for(bar i = 0;i < btn.lenght; i++){
         (function(i){
             btn[i].onclick = function(){
                 alert(i);// 保留着i的引用，导致函数不会被释放
             }
         })(i)
     }

                   

1.9 正则表示式

    // 1.找出字符串中，a/A的位置
    let str = 'Afdsgahkv';
    let re = /a/i;
    alert(str.search(/a/i));

    //2.匹配出0-9的数字
    let str = 'Afd1sga34k65v6';
    let re = /\d+/g;  //'+',表示量词，不加量词，输出一个一个的
    alert(str.match(re));

    //3.匹配实例 
    <input type="text" id="inp">
    <input type="button" value="提交" id="btn">
    <script>
        window.onload = function() {
            let inp = document.getElementById('inp');
            let btn = document.getElementById('btn');

            btn.onclick = function() {
                console.log(inp.value);
                let re = /^[1-9]\d{4,11}$/; //从头到尾，1-9的数字，4-11位数字
                if (re.test(inp.value)) {
                    alert('通过');
                } else {
                    alert('不通过');
                }
            }
        }
    </script>