欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

JScript语言——ES6(ES2015)有大用

JScript语言——ES6(ES2015)

96 
张先觉 关注                    
 1.3 2019.06.13 17:35* 字数 904 阅读 417评论 2喜欢 7                    

ES6(ES2015)语法介绍

  • 变量声明letconst

  • 块级作用域

  • 解构赋值

  • 箭头函数

    • 清楚简写形式

    • 箭头函数的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>
               

小礼物走一走,来简书关注我

赞赏支持
     JScript语言            
    © 著作权归作者所有
    举报文章            
    96关注张先觉                 

    写了 5401 字,被 6 人关注,获得了 10 个喜欢

    哟,今天天气不错。
    喜欢                    
     
    7                    
       更多分享            
    Web note ad 1        


       

    普通分类: