学习 NodeJS 5-ES6常用语法

5 ES6常用语法

5.1 ES6简介

• 1995：JavaScript诞生。
• 1997：ECMAScript标准确立。
• 1999：ES3出现，与此同时IE5风靡一时
• 2009：ES5出现，例如foreach，Object.keys，Object.create和JSON标准。
• 2015：ES6/ECMAScript2015出现。
• 目标：JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

5.2 ES6常用命令

• 函数的Rest参数和扩展
• Promise使用
• module.exports 和 ES6 import / export 的使用

函数的Rest参数和扩展 :

// 函数Rest操作符 (...m)
let sum3 = (...m) =>{
  let total = 0;
  for (var i of m){
    total += i;
  }
  console.log(`total3:${total}`);
};
sum3(4,8,9,10);

// 扩展 (...m)
let arr1 = [1,3];
let arr2 = [4,8];
// 效果如同：console.log(arr1.concat(arr2));
console.log([...arr1,...arr2]);

var [x,y] = [4,8];     // x=4;y=8
console.log(...[4,8]); // 拆分成4和8
let xy = [...'ES6'];   // 拆分成'E','S','6'
var [x,...y] = [4,8,10,30]; // x=4,y=[8,10,30]

Promise的使用：resolve放置结果，reject放置错误信息，promise避免callback，使用链式操作，清晰。

let checkLogin = function () {
  return new Promise(function (resolve,reject) {
    let flag = document.cookie.indexOf("userId")>-1?true:false;
    if (flag = true){
      resolve({
        status:0,
        results:true
      })
    } else {
      reject("error");
    }
  })
};

let getUserInfo = () =>{
  return new Promise((resolve,reject)=>{
    let userInfo = {
      userId:"101"
    }
    resolve(userInfo);
    console.log(userInfo);
  })
};

checkLogin().then(res=> {
  if(res.status==0){
    console.log("login success");
    return getUserInfo();
  }
}).catch((error)=>{
  console.log(`error:${error}`);
}).then((res2)=>{
  console.log(`userId:${res2.userId}`)
});

Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
  console.log(`res1:${res1.results},res2:${res2.userId}`);
});

ES6 import / export 的使用:

export let sum=(x,y)=>{
  return x+y;
}

export let minus = (m,n) =>{
  return m-n;
}

// 引入JS模块
export default {
  props:[ "num" ] ,

  data () {
    return {
      num:0,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  
  methods:{
    increament(){
      this.$emit("incre");
      import('./../util');
    },
    decreament(){
      this.$emit("decre");
    }
  }
}

import {sum,minus} from './util'     // import * as util from './util' 作为服务
console.log(`sum:${sum(1,2)}`);      // console.log(`sum:${util.sum(1,2)}`);
console.log(`minus:${minus(1,2)}`);  // console.log(`minus:${util.minus(1,2)}`);

5.3 AMD CMD CommonJS和ES6

什么是AMD CMD CommonJS？是一个规范也是一个标准？他们之间有什么区别？项目当中都是如何运用的？

• AMD是RequireJS在推广过程中对模块定义的规范化产出。异步模块加载，依赖前置。

define(['package/lib], function(lib){
  function foo(){
    lib.log('hello world!');
  }

  return {
    foo: foo
  };
})

• CMD是SeaJS在推广过程中对模块定义的规范化产出。同步模块加载，依赖前置。

define(function (require, export, module) {
  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');
})

• CommonJS规范 - module.exports。在NodeJS后台使用，前端浏览器不识别。相当于export-default输出。

exports.area = function (r) {
  return Math.PI * r * r;
};
exports.circumference = function (r) {
  return 2 * Math.PI * r;
};

• ES6 export/import特性

export default {
  props:[ "num" ] ,

  data () {
    return { }
  },

  methods:{
    increament(){
      this.$emit("incre");
      import('./../util');
    },
    decreament(){
      this.$emit("decre");
    }
  }
}