当前位置 博文首页 > 苦海:javascript中es6语法

    苦海:javascript中es6语法

    作者:[db:作者] 时间:2021-09-10 10:22

    es6语法简介:

    // 1.历史:
      // 1995-----JavaScript诞生
      // 1997-----ECMAScript标准确立
      // 1999-----ES3出现,与此同时IE5风靡一时
      // 2009-----ES5出现,现在绝大所数使用的是ES5
      // 2015-----ES6/ECMAScript2015出现
    
    // 2.函数的Rest参数和扩展:----rest参数实际就是一种动态的参数,不知道外面传递多少个参数的时候可以说传入rest参数,语法...m,m是可以写成其他字母的。
      // 1.ES6中输出变量和循环的使用:
      function sum(...m){
        var sum = 0;
        for (var i of m){//----------ES6中 var * of m 循环
          sum += i;
        };
        console.log(`sum:${sum}`);//-----ES6中反引号里面${}可以输出变量的值
      };
      sum(1,2,3);//-----6
    
      //2.ES6中箭头函数使用:
      let sum2 = (...f)=>{//ES5中小括号就代表function,当函数体里面只有一行代码时,可以省略箭头后面的{}直接写,当为多行时,后面的{}不能省略。
        var sum = 0;
        for (var i of f){
          sum += i;
        };
        console.log(`sum:${sum}`);
      };
      sum2(2,3);//----5
    
      //3.数组的扩展:数组前面放三个点 ... 表示把数组拆分出来。
        // 1.简单拆分数组:
        console.log(...[1,2,3]);//------1,2,3
        // 2.合并多个数组:----实现concat() API功能
        var arr1 = [1,2]; [3,4]; var arr3 = [5,6];
        console.log([...arr1,...[3,4],...arr3]);//-------[1, 2, 3, 4, 5, 6]
        // 3.数组项前面加... 此项形参为一个数组,实参可以传递多个值,没有...时是一一对应的。
        var [x,y] = [2,5];
        console.log(y);//------5
        // ============================================//
        var [x,...y] = [2,5,6,7,8];
        console.log(y);//-------[5, 6, 7, 8]
        //4.后面接字符串:
        console.log(...'qwert');//-----q w e r t
        //============================================//
        var [x,...y] = 'qwert';
        console.log(y);//-------["w", "e", "r", "t"]
    
    
    // 3.Promise使用:------解决回调地狱,代码拥堵问题,演示:
      // 判断input是否传入大于5的参数,并随机产生一个奇数或者偶数案例:
      let input = function(x){
        // new 一个Promise对象,里面传入一个函数并return
        return new Promise(function(resolve,reject){//resolve表示接口成功后执行的回调函数,reject表示接口报错后执行的回调函数
          let flag = x > 5 ? true : false;
          if (flag) {
            resolve({stat:0}) 
          } else {
            reject({stat:1})
          }
        });
      };
    
      let inputs = ()=>{
        return new Promise((resolves,rejects)=>{
          var y = Math.floor(Math.random()*100);
          let flags = y % 2 == 0 ? true : false;
          if (flags) {
            resolves({stats:2});
          } else {
            rejects({stats:3})
          }
        })
      }
    
      // input此时接收到的是Promise返回的一个对象,可以点出属性then和catch
      input(51).then((res)=>{//then属性表示接口成功后执行的回调函数,回调函数里面的参数实际就是resolve()里面的对象
        if (res.stat == 0) {
          console.log('输入的参数大于5');
          return inputs();//返回新的带有Promise函数的对象供下一个then和catch调用
        }
      }).catch((rej)=>{//catch属性表示接口失败后执行的回调函数,回调函数里面的参数实际就是reject()里面的对象
        if (rej.stat == 1) {
          console.log('输入的参数不大于5');
          return inputs();//返回新的带有Promise函数的对象供下一个then和catch调用
        }
      }).then((ress)=>{
        if (ress.stats==2) {console.log('并随机产生了一个偶数')}
      }).catch((rejs)=>{
        if (rejs.stats==3) {console.log('并随机产生了一个奇数')}
      })
    
      // Promise提供了一个方法:.all()可以同时发多个请求:
      Promise.all([input(),inputs()]).then(([res1,res2])=>{
        console.log(`result1:${res1.stat},result2:${res2.stats}`)
      })
    
    
    
    // 4.Common.js中和ES6中导入导出模块区别:
      // 1.export default {name:'app'}-------ES6中默认导出一个模块
        // export var obj = '声明式'  或者 var obj = '声明式'  , export {obj}---------声明式导出
        //module.exports = {name:'app'}------ common.js导出一个模块
    
      // 2.import uter from './uter' -----ES6默认导入模块
        // import {obj1,obj2,obj3} from './module' -----ES6声明式导入模块
        //var uter = require('./uter')---common.js导入模块
    
      // 3.import和export只能在顶级作用域执行,其他作用域会报错,这里介绍全体导入:
        // import * as obj from './test.js' ------此导入方式返回的是一个导入模块的对象
    
    
    
    // 5.AMD、CMD、CommonJS、和ES6对比:
      // 1.AMD、CMD、CommonJS是模块化开发的标准,规范。
        // 1.AMD是RequireJS在推广过程中对模块定义的规范化产出,是一个异步模块定义。
          define(['package/lib'],function(lib){
            function foo(){
              lib.log('hello world!')
            };
    
            return {
              foo:foo
            };
          });
    
        // 2.CMD是SeaJS在推广过程中对模块定义的规范化产出,是个同步模块定义。
          define(function(require,exports,module){
            var $ = require('jquery');
            var Spinning = require('./spinning');
          })
        
        // 3.CommonJS规范通过-module.exports定义的,前端浏览器不支持module.exports,在node后端使用
      
    
    
    
    // 6.对象属性的声明:
      // 1.变量的简写
      var person = {
        name, //--------当name的属性值和name属性一样时,可以简写,这里即表示 name:name
        sex:1,
        age:15
      }
    
      // 2.函数的简写:
      var play = {
        add:function(x){
          return x;
        },
        add2(x){  //-----函数声明简写为:函数名(){ 函数体 }
          return x;
        }
      }
    

    提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
    笔者:苦海

    cs