es6開發(fā)環(huán)境基本普及使用脏款，但是瀏覽器支持還不好围苫。所以在開發(fā)中使用es6的話，需要在開發(fā)時(shí)對(duì)其進(jìn)行編譯撤师，否則瀏覽器中運(yùn)行很容易出現(xiàn)問題剂府。
面試問題：
1、ES6模塊化如何使用剃盾，開發(fā)環(huán)境如何打包
答：ES6提供了import(導(dǎo)入)和export(導(dǎo)出)腺占，在使用時(shí)如果只導(dǎo)出一個(gè)模塊淤袜，可以用export default來定義，在導(dǎo)入時(shí)直接導(dǎo)入就好衰伯，如果在一個(gè)js文件中導(dǎo)出多個(gè)模塊铡羡，在引用的時(shí)候要通過import { 模塊名}來導(dǎo)入，多個(gè)模塊間用逗號(hào) “ 意鲸，” 來分隔烦周。如下所示：
util1.js
util2.js
main.js
開發(fā)環(huán)境對(duì)es6進(jìn)行編譯需要首先下載babel相關(guān)插件怎顾，如babel-core读慎、babel-preset-es2015、babel-preset-latest( npm i babel-core babel-preset-es2015 babel-preset-latest --save-dev ) 槐雾。然后新建.babelrc文件（內(nèi)容是一個(gè)對(duì)象）并且配置它的presets選項(xiàng)和plugins選項(xiàng)夭委。
1首先： npm init來創(chuàng)建package.json文件
2接著：下載依賴：
3接著：創(chuàng)建.babelrc文件
4接著：全局下載babel-cli?
5：創(chuàng)建index.js文件并編寫es6代碼
6:編譯 通過babel index.js來編譯
其他結(jié)局方法：
webpack:? 下載babel-loader (cnpm i babel-loader --save-dev),然后配置webpack.config.js文件的module屬性的rules里對(duì)于js的處理
module:{
rules:[
{? test: /\.js$/ , loader: 'babel-loader'? }
]
}
rollup
2桐磁、Class和普通構(gòu)造函數(shù)有何區(qū)別
js構(gòu)造函數(shù)語法：
function MathHandle(x,y){ //定義了一個(gè)構(gòu)造函數(shù)
this.x=x;
this.y=y;
}M
MathHandle.prototype.add=function(){? ?//為構(gòu)造函數(shù)添加方法
return this.x+this.y;
}
var m=new MathHandle(1,2);? ?//實(shí)例構(gòu)造函數(shù)對(duì)象
m.add();? ?//調(diào)用實(shí)例的add方法
Class語法：
class MathHandle{
constructor(x,y){
this.x=x; this.y=y;
}
add(){
return this.x+this.y;
}
}
const m=new MathHandle(1,2);
m.add();
js繼承
function Animal(){
this.eat=function(){? console.log(' animal? eat '); }
}
function Dog=function(){
this.bark=function(){? console.log('doy bark'); }
}
Dog.prototype=new Animal(); //通過指定一個(gè)構(gòu)造函數(shù)的原型是另一個(gè)構(gòu)造函數(shù)的實(shí)例來形成繼承關(guān)系
var hashiqi=new Dog(); //hashiqi是Dog構(gòu)造函數(shù)的實(shí)例锐想，所以可以調(diào)用bark方法喧务，又由于Dog構(gòu)造函數(shù)繼承自Animal構(gòu)造函數(shù)唆迁，所以hashiqi還可以調(diào)用eat方法
hashiqi.eat();
hashiqi.bark();
class 繼承
class Animal{
constructor(name ){ this.name=name; }
eat(){
console.log(`${this.name} eat`);
}
}
class Dog extends Animal(){ //class中通過extends來實(shí)現(xiàn)繼承芹扭，constructor中通過super方法來傳遞參數(shù)篮撑；
constructor (name){
super(name);
this.name=name;
}
bark(){
console.log(`${this.name}? bark`)
}
}
const hashiqi=new Dog('哈士奇');
hashiqi.eat();
hashiqi.bark();
答：class在語法上更加貼合面向?qū)ο蟮膶懛?class實(shí)現(xiàn)繼承更加易讀易理解纹安；更易于寫java等后端語言的使用毛俏；本質(zhì)還是語法糖幅恋，使用prototype杏死。
3、Promise的基本使用和原理
callback hell:
loadImg(src,callback,fail){
var img=document.createElement('img');
img.onload=function(){callback(img);}
img.onerror=function(){fail()}
img.src=src;
}
var src=https://www.imooc.com/static/img/index/logo.png;
loadImg(src,function(img){
console.log(img.width);
},function(){
console.log('failed');
}}
promise 語法
function loadImg(){//通過new Promise()來定義一個(gè)promise對(duì)象捆交，里面是一個(gè)函數(shù)淑翼，賦值要傳的回調(diào)，在調(diào)用的時(shí)候通過then方法傳入要調(diào)用的回調(diào)函數(shù)
const promise=new Promise(function(resolve,reject){
var img=document.createElement('img');
img.onload=function(img){
resolve(img);
}
img.onerror=function(){
reject();
}
img.src=src;
})
return promise;
}
var src=https://www.imooc.com/static/img/index/logo.png;
var result=loadImg(src);
result.then(function(img){
console.log(img.width);
},function(){
console.log('error');
})
result.then(function(img){
console.log(img.height);
})
4品追、ES6其他常用功能
let/const
答：let定義變量玄括，const定義常量，不能改變肉瓦。
多行字符串/模板變量
const name='guogaigai',age=20;
const html=`
<div>
? ? ? ? <p>${name} 現(xiàn)在</p>
? ? ? ? <p>${age}歲了</p>
<div>`;
解構(gòu)賦值
const arr=['aaa','bbb','ccc','ddd','eee'];
const [x,y,z]=arr;
console.log(x); //'aaa'
console.log(y); //'bbb'
console.log(z); //'ccc'
塊級(jí)作用域
const obj={a:100,b:20};
for (let item in obj){
console.log(item); //es6新增了塊級(jí)作用域遭京，在這里定義的item就處于for in循環(huán)的塊級(jí)作用域中，在外面是訪問不到的泞莉。
}
console.log(item); //undefined
函數(shù)默認(rèn)參數(shù)
function (a,b=0){}
箭頭函數(shù)
const arr=[1,2,3];
arr.map(item=>item+1);
arr.map((item)=>{
console.log('es6',this);
return item+1;
})
