es6开发环境基本普及使用,但是浏览器支持还不好。所以在开发中使用es6的话,需要在开发时对其进行编译,否则浏览器中运行很容易出现问题。
面试问题:
1、ES6模块化如何使用,开发环境如何打包
答:ES6提供了import(导入)和export(导出),在使用时如果只导出一个模块,可以用export default来定义,在导入时直接导入就好,如果在一个js文件中导出多个模块,在引用的时候要通过import { 模块名}来导入,多个模块间用逗号 “ ,” 来分隔。如下所示:
util1.js
util2.js
main.js
开发环境对es6进行编译需要首先下载babel相关插件,如babel-core、babel-preset-es2015、babel-preset-latest( npm i babel-core babel-preset-es2015 babel-preset-latest --save-dev ) 。然后新建.babelrc文件(内容是一个对象)并且配置它的presets选项和plugins选项。
1首先: npm init来创建package.json文件
2接着:下载依赖:
3接着:创建.babelrc文件
4接着:全局下载babel-cli
5:创建index.js文件并编写es6代码
6:编译 通过babel index.js来编译
其他结局方法:
webpack: 下载babel-loader (cnpm i babel-loader --save-dev),然后配置webpack.config.js文件的module属性的rules里对于js的处理
module:{
rules:[
{ test: /\.js$/ , loader: 'babel-loader' }
]
}
rollup
2、Class和普通构造函数有何区别
js构造函数语法:
function MathHandle(x,y){ //定义了一个构造函数
this.x=x;
this.y=y;
}M
MathHandle.prototype.add=function(){ //为构造函数添加方法
return this.x+this.y;
}
var m=new MathHandle(1,2); //实例构造函数对象
m.add(); //调用实例的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(); //通过指定一个构造函数的原型是另一个构造函数的实例来形成继承关系
var hashiqi=new Dog(); //hashiqi是Dog构造函数的实例,所以可以调用bark方法,又由于Dog构造函数继承自Animal构造函数,所以hashiqi还可以调用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来实现继承,constructor中通过super方法来传递参数;
constructor (name){
super(name);
this.name=name;
}
bark(){
console.log(`${this.name} bark`)
}
}
const hashiqi=new Dog('哈士奇');
hashiqi.eat();
hashiqi.bark();
答:class在语法上更加贴合面向对象的写法;class实现继承更加易读易理解;更易于写java等后端语言的使用;本质还是语法糖,使用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()来定义一个promise对象,里面是一个函数,赋值要传的回调,在调用的时候通过then方法传入要调用的回调函数
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} 现在</p>
<p>${age}岁了</p>
<div>`;
解构赋值
const arr=['aaa','bbb','ccc','ddd','eee'];
const [x,y,z]=arr;
console.log(x); //'aaa'
console.log(y); //'bbb'
console.log(z); //'ccc'
块级作用域
const obj={a:100,b:20};
for (let item in obj){
console.log(item); //es6新增了块级作用域,在这里定义的item就处于for in循环的块级作用域中,在外面是访问不到的。
}
console.log(item); //undefined
函数默认参数
function (a,b=0){}
箭头函数
const arr=[1,2,3];
arr.map(item=>item+1);
arr.map((item)=>{
console.log('es6',this);
return item+1;
})