ES6

es6开发环境基本普及使用,但是浏览器支持还不好。所以在开发中使用es6的话,需要在开发时对其进行编译,否则浏览器中运行很容易出现问题。

面试问题:

1、ES6模块化如何使用,开发环境如何打包

答:ES6提供了import(导入)和export(导出),在使用时如果只导出一个模块,可以用export default来定义,在导入时直接导入就好,如果在一个js文件中导出多个模块,在引用的时候要通过import { 模块名}来导入,多个模块间用逗号 “ ” 来分隔。如下所示:

util1.js


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接着:下载依赖:

cnpm下载速度更快

3接着:创建.babelrc文件

配置babelrc文件

4接着:全局下载babel-cli 

全局下载
查看版本看是否安装成功

5:创建index.js文件并编写es6代码

编写了一个箭头函数

6:编译 通过babel index.js来编译


会发现编译后的es6代码会把转换成es5的格式

其他结局方法:

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;

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • es6总结 往期文章 ES5总结 1.es6简介 回顾javascrip组成:核心(ECMAScript)由ECM...
    理想三旬7阅读 602评论 0 5
  • 更合理的方式写 JavaScript 原文看 这里 ,收录在此为便于查阅。 类型 1.1 基本类型:直接存取。字符...
    杀破狼real阅读 8,847评论 0 6
  • 兼容性 IE:可以看到IE6,IE7是完全不支持的。而IE8是只支持一些内容,参考引用4,IE9是大部分支持,支持...
    菜园被偷了阅读 464评论 0 0
  • ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015...
    陈大冲阅读 795评论 0 0
  • babel转码 在项目安装babel-cli npm install --global babel-cli ba...
    tency小七阅读 421评论 0 0