ES6

ES6 是模板语言

var 定义的变量有变量提升(把变量提到代码第一行),声明的变量有内存泄露,没有被销毁
let 是块级作用域
const 定义常量,不能被改变

const b={a:1};//object地址,有内存
b.a=2;
内存地址不能改变,里面的值可以改变

varfunction 有变量提升,letconst没有

console.log(a);//undefined
var a=1;
console.log(b);//报错 is not defined
let b=2;
//块级作用域
{//大括号限制块级作用域
    let a=1;//在块级的外面没法找到
    var b=2;//var是函数集作用域,在块级里依然可以被变量提升
}

模板语言

var str=`
a
b
`
let name="jack";
console.log(`I'm ${name}`)

声明函数的默认参数

//默认参数,防止忘记传
function add(flag=true){

}

箭头函数

a:function(){}
//ES6
a(){}
function(res){
    this //指向内部
}

//ES6
res=>{//箭头函数
    this //指向外部
}

数组的解构

var [a,b]=[3,3,2];//数组的分解,a=3
var [x,y,z]="vue";//字符串的分解,x=v
var {m,n}={m:10,n:20};//对象的结构,对key进行拆分
//函数的解构
function sum([x,y]){
  return x+y;
}
sum([2,5])

var a=[1,2,3,2]
[...new Set(a)]//得到[1,2,3]去重

Rest 拓展参数

//function sum(...m){
let sum=(...m)=>{//...rest参数,动态的
  let total=0;
  for(var i of m){
    total+=i;
  }
  console.log(`total:${total}`)
}
sum(4,21,3,2)
//对数组的扩展,对数组拆解
 console.log(...[4,8]) //4 8
let a=[1,2];let b=[3,4];[...a,...b] //1 2 3 4
[x,...y]=[1,2,3,4] //x=1,y=[2,3,4]
//对字符串的扩展,对字符串拆解
xy=[...'ES6']; //["E", "S", "6"]

Promise

解决callback回调,通过链式调用,.then对Promise的封装

let checkLogin = function() {
    return new Promise(function(resolve, reject) { //resolve成功回调,reject失败回调
        let flag = document.cookie.indexOf("userId") > 1 ? true : false;
        if (flag = true) {
            resolve({
                status: 0,
                result: true
            })
        } else {
            reject("error");
        }
    })
}
let getUserInfo = () => {
    return new Promise((resolve, reject) => {
        let userInfo = {
            userId: '101'
        }
        resolve(userInfo);
    })
}
/*
checkLogin().then(res=>{//回调
    if(res.status==0){
        //登录成功
        console.log('登录成功');
    }
}).catch(error=>{//捕获异常
   console.log(`errors:${error}`);
})
*/
Promise.all([checkLogin(), getUserInfo()]).then(([res1, res2]) => {
    console.log(res1.result);
    console.log(res2.userId)
})

module.exports和ES6 import/export的使用

//通过export导出,在util文件夹下
export default{ //默认导出
}
export let sum=(x,y)=>{
    return x+y;
}

//import导入
import util from './util' //sum(1,2)
import {sum} form './util' //sum(1,2)
import * as util from './util' //util.sum(1,2)

import('./../util')//可以异步加载js文件

模块化开发中的解决方案

AMD(异步模块定义):是requirejs在推广过程中对模块定义的规范化产出。特点:依赖前置
CMD(同步模块定义):是seajs在推广过程中对模块定义的规范化产出。特点:依赖就近,在什么时候使用就在时候时候引入
CommonJS:前端浏览器不支持,在nodejs后端定义模块,在服务端使用,module.exports匿名输出,exports.a带名字的输出
ES6特性export/import

posted @ 2018-08-27 17:31  conglvse  阅读(131)  评论(0编辑  收藏  举报