ES6基础面试之四大问

ES6基础面试整理

• 开发环境已经普及使用
• 浏览器环境却支持不好（需要开发环境编译）
• 重点了解常用语法
• 关注：开发环境的使用+重点语法的掌握

问题1 ES6模块化如何使用，开发环境如何打包？

模块化的使用和编译环境

模块化-export语法

//utils1.js
export default{
    a:100
}

//utils2.js
export function fn1(){
    alert('fn1')
}

export function fn2(){
    alert('fn2');
}

// index.js
import utils1 from './utils1.js'
import {fn1,fn2} from  './utils2/js'

console.log(utils1);
fn1();
fn2();

模块化-开发环境- babel

• 电脑要有node环境，运行npm init

• npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest

• 创建 .babelrc文件

• npm install --global babel-cli

• babel --version

• 创建 ./src/index.js

模块化-开发环境- webpack

• npm install webpack babel-loader --save-dev
• 配置 webpack.config.js
• 配置package.json中的script
• 运行 npm start

模块化-开发环境 -rollup

官网： rollupjs.org/guide/en/

中文官网：www.rollupjs.com/guide/intro…

• npm init

• npm i --save-dev rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest babel-core

• 配置 .babelrc

• 配置 rollup.config.js

• rollup功能单一，webpack功能强大。

• 参考设计原则和《Linux/Unix设计思想》

• 工具要尽量功能单一，可集成，可扩展

关于JS众多模块化标准

• 没有模块化
• AMD成为标准， require.js（也有CMD（国内的标准））
• 前端打包工具，是nodejs模块化可以被使用（CommentJS标准）
• ES6出现， 想统一现在所有模块化标准
• nodejs积极支持，浏览器尚未统一
• 你可以自造lib，但是不要自造标准。

问题解答：

• 语法： import export(注意有无default)
• 环境： babel编译ES6语法，模块化可用webpack和rollup
• 扩展：说一下自己对模块化标准统一的期待

问题2 Class何普通构造函数有何区别？

• class怎么用，语法是什么？
• class和构造函数的对比？有何优缺点。

JS构造函数回顾

例子：react例子

// Ad 继承了 React.Component
class Ad extends React.Component{
    //构造函数
    constructor(props){
        super(props);
        this.state = {
            data:[]
        }
    }
    render(){
        return {
            <div>hello imooc</div>
        }
    }
    componentDidMount(){
        
    }
}

JS构造函数：

//构造函数
function MathHandle(x,y){
    this.x = x;
    this.y = y;
}
// 原型的扩展
MathHandle.prototype.add = function(){
    return this.x + this.y;
};

// 创建一个构造函数的实例
var m = new MathHandle(1,2)
console.log(m.add()) //所有的构造函数的实例都会有其原型扩展的方法

Class基本语法

/**
 * class形式
 */
class MathHandle{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }

    add(){
        return this.x + this.y;
    }
}

const m = new MathHandle(1,2);
console.log(m.add());

语法糖

class MathHandle{
    // ...
}

typeof MathHandle //“function”
MathHandle === MathHandle.prototype.constructor; //true
// 这种语法糖形式，看起来和实际原理不一样的东西。(个人不太赞同)（原本class的含义）
// 形式上强行模仿 java C#，却失去了它的本性和个性。

语法糖，两者本质是一样的，然后用一种更简洁的方式去实现相同的功能。

// 构造函数的显式原型的constructor属性等于构造函数本身
MathHandle.prototype.constructor === MathHandle // true
// 构造函数new出来的实例有一个隐式的原型， 等于构造函数的原型
m.__proto__ === MathHandle.prototype; // true

继承

从抽象到聚象的关系，从高级到低级的关系

//普通JS版本继承
// 动物
function Animal(){
    this.eat = function(){
        console.log('animal eat');
    }
}

// 狗
function Dog(){
    this.bark = function(){
        console.log('dog bark');
    }
}

Dog.prototype = new Animal();

//哈士奇
var hashiqi = new Dog();
hashiqi.bark();
hashiqi.eat();

用class实现继承

class Animal{
    constructor(name){
        this.name = name;
    }

    eat(){
        console.log(`${this.name} eat`)
    }
}

class Dog extends Animal{
    constructor(name){
        super(name);
        this.name = name;
    }
    say(){
        console.log(`${this.name} say`);
    }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()

总结

• class在语法上更加贴合面向对象的写法
• class 实现继承更加易读、易理解
• 更易于写java等后端语言的使用
• 本质还是语法糖，使用prototype

Promise的基本使用和原理。

• Callback Hell(回调地狱)
• Promise的语法

Callback Hell

function loadingImg(src, callback, fail){
    var img = document.createElement('img');
    img.onload = function(){
        callback(img);
    }
    img.onerror = function(){
        fail();
    }
    img.src = src;
}
var src = "https://profile.csdnimg.cn/9/F/8/3_april_4";
loadingImg(src,function(img){
    console.log(img.width);
},function(){
    console.error('failed');
})

Promise语法改造

使用promise改造后的方法：

function loadingImg(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 = "https://profile.csdnimg.cn/9/F/8/3_april_4";
var result = loadingImg(src);
result.then(function(img){
    console.log(img.width);
},function(){
    console.log('failed');
});
result.then(function(img){
    console.log(img.height);
});

• promise的基本使用是什么？

promise问题总结

• new Promise 实例，而且要return
• new Promise 时要传入函数，函数要有resolve reject两个参数
• 成功时执行resolve(),失败时执行reject()
• then监听结果

总结一下ES6的其他常用功能

（3～5）

• let/const (变量/常量)
• 多行字符串/模版变量
• 解构赋值
• 块级作用域
• 函数默认参数
• 箭头函数

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 obj = {a:100,b:200}
var a = obj.a;
var b = obj.b;

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


// ES6

const obj1 = {a:10,b:20,c:30};
const {a1,c1} = obj1;

console.log(a1);
console.log(c1);

const arr1 = ['xxx','yyy','zzz'];
const [x,y,z] = arr1;

console.log(x);
console.log(y);
console.log(z);

块级作用域

//js
var obj = {a:100,b:200}
for(var item in obj){
    console.log(item) //a，b
}
console.log(item); //b

// ES6
const obj1 = {a:100,b:200}
for(let item1 in obj1){
    console.log(item1); // a,b
}
console.log(item1) //报错，item1 is not defined;

函数默认参数

//js
function something(a,b){
    if(b==null){
        b = 0;
    }
}

//ES6
function something2(a,b=0){
    
}

箭头函数

//js
var arr = [1,2,3];
arr.map(function(item){
    return item +1;
})

//ES6
const arr1 = [1,2,3];
arr1.map( item => item+1);

arr1.map((item,index) => {
    console.log(index);
    return item +1;
})