前端面经（五）

面经 20191130 ES    未完待续....

 

1. less 的一些应用语法：

1）复制

2）定义样式class

3）嵌套 父 套 子

4）嵌套 冒泡

5）延迟加载

 

2.vue中的 is 属性 ：

is 是用来绑定组件 <li is = " 组件名 " > 除此以外 还可以绑定属性

:is <component :is = " data 属性变量 ">

 

3. ES6 的解构方法

数组解构 嵌套结构 函数传参解构 for循环解构

 

4. ... 扩展运算符 可以用来深拷贝数组 var arr2 = [ ... arr1 ] arr2 与 arr1 全等但是不三等 即不同内存地址

... rest 运算符 把逗号隔开的值组成一个数组 （1,2,3,4）实参 （ ... args）形参

 

5.super 关键字 初始化构造函数的时候应用 指向当前对象的原型对象

 

6. set ： 类似为 数组 但是成员的值都是唯一的， 没有重复的值

set的添加方法： var s = new Set() s.add(1) ;

s.size() 查询长度 s.delete(value) 删除一个元素，返回布尔，成功否

s.has(value) 查询是否存在 s.clear() 清空

set 可以接受一个数组 自动过滤掉重复元素

应用： 去重字符串 [...new Set('ababbc')].join('')

 

6.箭头函数和普通函数的区别：

1）箭头函数导致this总是指向函数定义生效时所在的对象

2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

3）不可以使用arguments对象，该对象在函数体内不存在。

4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

7.Promise.all 方法 ：

const p = Promise.all([p1, p2, p3]);

promise.all() 方法接受一个数组作为参数， p1、p2、p3都是 Promise实例 另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

只有 p1 p2 p3 全部变成 fulfilled (成功) p 才能返回到回调函数

如果有一个被reject 那么 p 就是 reject 然后一个被reject 的 返回值 返回到p 的回调函数

 

对比 Promise.race() 方法：

all 方法 是根据每一个 p 的 成功失败来 确定 返回的状态--- 都成功则成功 一失败则失败

race 方法则是 根据率先改变状态的 p 的状态来 返回状态

 

8. Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

 

9. Generator ： 是ES6 提供了一种异步编程解决方案 ， 它和Iterator有着相同的选择器 next ()

Generator 有两个特征 :

1. function 和 函数名 之间有一个 * 号 这个 星号现在可以放在任何位置

2. 函数体内使用 yield 表达式 定义不同的内部状态

里面的 yield 可以 通过 next 调用 返回 { value : '' , done : false }

 

10. async 和 await

对比 Generator 发现 async 就是把 function后的 * 变成了 async ， 把 yield 变成了 await

四点改进：

1）内置执行器 不需要next了

2）返回值是 Promise

3）比 * 和 yield 更好理解

await 后面是 一个 promise 对象

async function getStockPriceByName(name) {

const symbol = await getStockSymbol(name);

console.log('getStockSymbol1');

const stockPrice = await getStockPrice(symbol);

console.log('getStockPrice1')

return stockPrice;

}

function getStockSymbol(){

setTimeout(()=>{

console.log('getStockSymbol');

},0)

}

function getStockPrice(){

console.log('getStockPrice')

}

getStockPriceByName('goog').then(function (result) {

console.log(result);

});

 

11. class 类

和 java里的 类类似 都可以 在里面创建方法 通过实例化 去使用里面的函数

class 类里有一个默认方法 constructor 他是直接指向类的本身的 构造函数

Point.prototype.constructor === Point // true

方法：

1）点 hashasOwnProproty 检测是否含有实例对象的自身属性 this.x this.y的 x.y

实例对象的方法是false 因为他是定义在 类上

2）改变class类里方法内部的this指向

1>构造函数中 this.printName = this.printName.bind(this);

2>构造函数中 this.getThis = () => this; 箭头函数

 

注意：

1）实例化的两个对象 原型 ===

2）有 get 和 set 方法

3）var Myclass = class Me { getName() { return Me.name } }类也可以使用表达式的形式定义

在 Class 外部，这个类只能用MyClass引用

4) ** 不存在变量提升 内部是严格模式 name属性 Generation方法

5) 静态方法 +static ，就表示该方法不会被实例继承，而是直接通过类来调用 继承 私有公有 a 和 _a

 

12. Module

1）模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

2）import { area, circumference } from './circle'; import * as circle from './circle';

3）export default 模块指定默认输出