前端知识整理--ES6

es6

(1)  模块化：

export default {  a: 100 }

export function fn1(){  } 

export function fn2(){ }

import util from './util1.js'

import { fn1, fn2 } from './util2.js'

(2) 使用babel:

npm install babel-core babel-preset-es2015 babel-preset-latest

创建.babelrc文件

npm intall -g babel-cli  安装babel的命令行工具

babel --version

babel myfile.js  直接输出到终端

babel myfile.js -o upfile.js 将结果写到新的文件

babel src -d build: src目录对应build目录的输出

babel是插件机制，只安装babel-core不能将es5进行转换，必须要按照相应的插件

一个插件只能做一件事情，可以使用预设（一堆插件）

npm install babel-preset-es2015

在.babelrc中写 { "presets":["es2015"],"plugins":[]}

babel-preset-latest: 是一个特殊的presets，总是包括最新的编译插件

babel-preset-env: 只编译所编译环境所缺少的代码，比较推荐

如使用webpack，需要安装babel-loader

module: {
  loaders: [{
    loader: 'babel',
    test: /\.jsx?$/,
    include: path.join(__dirname, 'src'),
    query: {
      plugins: ['transform-runtime'],
      presets: [
        ["env", {
          "targets": {
            "chrome": 52
          },
          "modules": false,
          "loose": true
        }],
        'stage-2',
        'react'
      ],
    }
  }]
}

如使用gulp，需要安装gulp-babel

babel几乎可以编译所有的新的js语法，但是对于API来说并非如此，新增的对象如promise和Array.find()等方法，并没有转换。

这时需要用到babel-polyfill或者babel-runtime

(3) promise

new Promise实例，而且要return

new Promise时要传入函数，函数有resolve和reject两个参数

成功时执行resolve()，失败时执行reject()

then监听结果

function loadImg(src){
  const promise=new     Promise(function(resolve,reject){
    var img = document.createElement('img')
    img.οnlοad=function(){
      resolve(img)
    }
    img.οnerrοr=function(){
      reject()
    }
  })
  return promise
}

var src=''
var result=loadImg(src)
result.then(function(img){
  console.log(img.width)
},function(){
  console.log('failed')
})

(4)其他

let/const:

多行字符串/模板变量：

const html = `<div>
                <p>${name}</p>
              </div>`

解构赋值

const obj={a:10, b:20,c:40}
const {a,c}=obj
console.log(a)  //10
console.log(c)  //40

函数默认参数

function(a, b=0){}

可以用来代替：

function(a,b){

  if(b==null){  

     b=0

}

}

箭头函数