ES6基础面试之四大问

阿源Hecate
446 阅读4分钟

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

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;
})
avatar
文章
阅读
粉丝