• ES6,ES7重点介绍


    1. 字符串模板  
    <!--旧版拼接字符串-->
    var str = '我是时间:'+new Date();
    <!--新版拼接字符串-->
    let str = `我是时间${new Date()}`;
    
    
    2. 对象简写
    <!--旧版对象写法-->
    var name = "liming";
    var age = 20;
    var person = {name:name, age:age};
    <!--新版对象写法-->
    let name = "liming";
    let age = 20;
    let person = {name, age};
    
    
    3. 箭头函数
    <!--旧版定时器写法-->
    setTimeout(function(res){
        alert(res)
    },50)
    采用箭头函数后的写法
    setTimeout((res) => {
        alert(res)
    })
    
    
    4. 模块化
    export 导出模块
    import 导入模块
    
    
    5. 解构
    <!--解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值-->
    let arr = ['string', 2, 3];
    //传统方式
    let a = arr[0],
        b = arr[1],
        c = arr[2];
    //解构赋值,是不是简洁很多?
    let [a, b, c] = arr;
    console.log(a);<!--string-->
    console.log(b);<!--2-->
    console.log(c);<!--3-->
    
    <!--嵌套数组解构:-->
    let arr = [[1, 2, [3, 4]], 5, 6];
    let [[d, e, [f, g]], h, i] = arr;
    console.log(d);<!--1-->
    console.log(f);<!--3-->
    console.log(i);<!--6-->
    
    <!--函数传参解构:-->
    var arr = ['string', 2, 3]
    function fn1([a, b, c]) {
        console.log(a);
        console.log(b);
        console.log(c);
    }
    fn1(arr);
    <!--string-->
    <!--2-->
    <!--3-->
    
    <!--还有好多结构方法... 这里就不详细说了-->
    
    6. Promise
    <!--为了优化异步的回调地域,也便于复用和阅读,支持链式调用-->
    new Promise((resolve,reject) => {
        <!--这里写逻辑来判断走resolve(走的then分支)或者reject(走的catch分支,抛出异常)-->
    })
    .then((res) =>{})
    .catch((err) =>{})
    <!--es7还添加了一个async await语法糖,来解决回调地域-->
    

    async await 讲解

    一眼看懂promise async

    <!--这里是新加的一些最常用字符串方法-->
    1. includes  
    <!--查看是否包含字符串,直接返回布尔值,类似于indexOf().-->
    <!--includes()比indexOf()的优势在于,indexOf()的返回结果不是布尔值,须与-1对比,不够直观。-->
    let s = 'Hello world!';
    s.includes('o') // true
    
    2. repeat()
    <!--可能在mvc框架中经常看到这个方法-->
    <!--表示重复多少次。-->
    <!--如果参数是正小数,会取整。-->
    <!--如果参数是负数,会报错。-->
    <!--如果参数是0,会得到空串。-->
    <!--如果参数是字符串、布尔型或其他类型,会先换算成整数-->
    
    <!--这里是最新添加的一些数组方法-->
    1.最常见的循环
    <!--forEach()
    有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.-->
    let array = [1, 2, 3, 4];
    array.forEach((item, index, arr) => {
      console.log(item);
    });
    
    
    
    <!--map()-->
    <!--map()的参数和forEach()是一样的-->
    <!--map()不会改变原数组,-->
    let array = [1, 2, 3, 4 ,5];
    let temp = array.map((item, index, arr) => {
        return item + 1;
    });
    <!--如果map循环里不return一个值的话,效果跟forEach()完全一样;-->
    <!--如果map循环里return值的话会返回经过处理的新数组-->
    <!--下面可以看到批量处理数据是非常方便快捷的-->
    let array = [{name:'liming'},{name:'zhangsan'},{name:'wangwu'}]
    let newArray = array.map((item, index, arr) => {
        return {'姓名':`${item.name}***`}
    })
    console.log(newArray);<!-- [{'姓名':'liming***'},{'姓名':'zhangsan***'},{'姓名':'wangwu***'}]-->
    
    
    
    <!--some()-->
    <!--遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.-->
    <!--应用场景比如判断学生成绩有没有不及格的,有的话循环停止,节省时间-->
    let array = [100, 25, 35, 98, 67];
    array.some((item, index, arr) => {
        return item < 60 ;
    });
    <!--到第二次即能判断出来结果,循环两次即结束-->
    
    2.filter
    <!--类似于map-->
    let array = [1, 2, 3, 4, 5];
    let temp = array.filter((item, index, arr) => {
        return item > 3;    
    });
    console.log(temp);
    console.log(array);
    3.reduce
    <!--reduce(),这个东西用的好的话可以省很多事,这个为一个累加器,类似于之前封装的回调函数,不明白的话看看下面写法就懂了-->
    <!--它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组-->
    let array = [1, 2, 3, 4, 5];
    let total = array.reduce((a, b) => {
        return a + b;
    });
    console.log(total);     <!-- 15 -->
    
    4. 还有类似于array.keys(),array.values()等就不多说了
    
  • 相关阅读:
    OpenGL中FrameBuffer使用
    每天进步一点点>结构化异常处理(SEH)
    js操作cookies
    [转]高性能网站优化与系统架构
    正则-匹配超链接地址及内容
    在c#.net中操作XML
    ActionScript 3 step by step (6) 元标记
    Facebook CEO:终极目标并非出售或上市
    ActionScript 3 step by step (3) 事件处理
    ActionScript 3 step by step (2) 使用Trace()跟踪输出
  • 原文地址:https://www.cnblogs.com/zddzz/p/10843492.html
Copyright © 2020-2023  润新知