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;

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

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