{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "webpack": "^3.11.0"
  }
}

開啟一個本地服務(wù)

npm install http-server -g

http-server -p 8881

Promise語法

function loadImg(src){
  const promise = new Promise(function(resolve,reject){
    var img = document.createElement('img');
    img.onload = function(){
      resolve(img);
    }
    img.onerror = function(){
      reject()
    }
    img.src = src
  })
  return promise;
}
 var src = '#';
  result.then(function (img) {
    console.log(img.width);
  }, function () {
    console.log('failed');
  })
  result.then(function (img) {
    console.log(img.height);
  })

new Promise 實例桐绒，而且要return
new Promise時傳入函數(shù)撒踪，函數(shù)resolve reject 兩個參數(shù)
成功時執(zhí)行resolve()失敗執(zhí)行reject()
then監(jiān)聽結(jié)果

  // let / const
  // JS
  var i = 10;
  i = 100;
  var j = 20;
  j = 200;

  // ES6
  let i = 10;
  i = 100; //正確
  const j = 20;
  j = 200; //報錯

  // 多行字符串和模板解析
  // js
  var name = 'zhansan',
    age = 20,
    html = '';
  html += '<div>';
  html += ' <p>' + name + '</p>';
  html += ' <p>' + age + '</p>';
  html += '</div>';
  // es6
  const name = 'zhansan',age =20;
  const html = `
        <div>
            <p>${name}</p>
            <p>${age}</p>
        <div>
  `;

 // 解構(gòu)賦值
  // js
  var obj = {a:100,b:200}
  var a = obj.a;
  var b = obj.b;

  var arr = ['xxx','yyy','zzz'];
  var x = arr[0];
  var z = arr[0];

  // es6
  const obj = {a:100,b:200};
  const {a,b} = obj;
  const arr = ['xxx','yyy','zzz'];
  const [x,y,z] = arr;

 // 塊級作用域
  // js
  var obj = {a:100,b:200}
  for(var item in obj){
    console.log(item)
  }
  console.log(item); 'b'
  // es6
  const obj = {a:100,b:200}
  for(let item in obj){
    console.log(item)
  }
  console.log(item); //undefined

// 函數(shù)默認(rèn)參數(shù)
  // js
  function a(a,b){
    if(b == null){
      b=0
    }
  }
  // es6
  function a(a,b=0){

  }

  // 箭頭函數(shù)
  var arr = [1,2,3];
  arr.map(function(item){
    return item + 1
  })
  const arr = [1,2,3,4];
  arr.map(item => item +1);
  arr.map((item,index) => {
    console.log(index);
    return item + 1;
  })
  function fn(){
    console.log('real',this); //{a:100}
    var arr = [1,2,3];
    // 普通 JS
    arr.map(function(item){
      console.log('js',this); //window
      return item + 1;
    })
    // 箭頭函數(shù)
    arr.map(item =>{
      console.log('es6',this);//{a:100}
      return item + 1;
    })
  }

  fn.call({a:100})

總結(jié)-es6常用功能

let/const
多行字符串/模板變量
解構(gòu)賦值
塊級作用域
函數(shù)默認(rèn)參數(shù)
箭頭函數(shù)