【面试】web前端经典面试题试题及答案-es6

向右看齐 2022-02-27 01:05 256阅读 0赞

> es6  
> class、module、generator/ promise/ async/ await、let/ const、解构赋值、块级作用域、函数默认参数、箭头函数、set数据结构、es6基础

*  class
 *  module
 *  generator/ promise/ async/ await
 *  let/ const
 *  解构赋值
 *  块级作用域
 *  函数默认参数
 *  箭头函数
 *  set数据结构
 *  es6基础

--------------------

*  ### *class* ###

1、class语法相对原型、构造函数、继承更接近传统语法，它的写法能够让对象原型的写法更加清晰、面向对象编程的语法更加通俗

# <table>   <tbody>    <tr>     <td align="left">class和普通构造函数有何区别？</td>    </tr>   </tbody>  </table> #

1、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); // new一个实例
    console.log(m.add())

2、class基本语法

class MathHandler{ // MathHandler是一个构造函数，构造函数都有显式原型:prototype
    	constructor(x, y) { // 构造器，java,c#的语法，面向对象高级语言的语法
    		this.x = x;
    		this.y = y;
    	}
    	add() {
    		return this.x + this.y;
    	}
    }
    const m = new MathHandle(1, 2); // 实例，所有实例都会有一个隐式原型:__proto__
    console.log(m.add());
    
    typeof MathHandle  // 'function'
    MathHandle.prototype.constructor === MathHandle; // true
    m.__proto__ === MathHandle.prototype; // true

3、语法糖  
class本身就是一个语法糖  
4、继承  
（1）低级构造函数的原型，赋值成高级构造函数的实例  
（2)

function Animal(){this.eat = function() {console.log('animal eat')}}
    function Dog(){this.bark = function() {console.log('dog dark')}}
    Dog.prototype = new Animal(); // 绑定原型，实现继承
    var hashiqi = new Dog();

class的继承

class Animal() {
    	constructor(name) {
    		this.name = name;
    	}
    	eat() {
    		alert(this.name + 'eat);
    	}
    }
    class Dog extends Animal{
    	constructor(name) {
    		super(name); // 如果有class,extends，则要用super(),super是被继承的class的constructor
    		this.name = name;
    	}
    	eat() {
    		alert(this.name + 'eat);
    	}
    }

--------------------

# module #

## <table>   <tbody>    <tr>     <td align="left">common.js 和 es6 中模块引入的区别？[字节跳动] </td>    </tr>   </tbody>  </table> ##

CommonJS 是一种模块规范，最初被应用于 Nodejs，成为 Nodejs 的模块规范。运行在浏览器端的 JavaScript 由于也缺少类似的规范，在 ES6 出来之前，前端也实现了一套相同的模块规范 (例如: AMD)，用来对前端模块进行管理。自 ES6 起，引入了一套新的 ES6 Module 规范，在语言标准的层面上实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对 ES6 Module 兼容还不太好，我们平时在 Webpack 中使用的 export 和 import，会经过 Babel 转换为 CommonJS 规范。在使用上的差别主要有：  
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。  
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。  
CommonJs 是单个值导出，ES6 Module可以导出多个  
CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层  
CommonJs 的 this 是当前模块，ES6 Module的 this 是 undefined

--------------------

# generator、promise、async/await #

*  **generator**

# <table>   <tbody>    <tr>     <td align="left">Generator原理？</td>    </tr>   </tbody>  </table> #

待完善

*  **promise**

1、promise 有 3 种状态：pending（进行中）、fulfilled（已完成，又称为Resolved） 或 rejected（已失败）。状态改变只能是 pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变。  
2、new promise实例，要return  
3、new promise时要传入函数，函数有resolve、reject两个参数  
4、成功时执行resolve()，失败时执行reject()  
5、then监听结果

# <table>   <tbody>    <tr>     <td align="left">手写一个promise？</td>    </tr>   </tbody>  </table> #

# <table>   <tbody>    <tr>     <td align="left">jQuery的ajax返回的是promise对象吗？</td>    </tr>   </tbody>  </table> #

jquery的ajax返回的是deferred对象，通过promise的resolve()方法将其转换为promise对象。  
`var jsPromise = Promise.resolve($.ajax('/whatever.json'));`