【前端面试题】ES6新增特性

问题：ES6新增特性？（挑几个重要的）

参考答案：

字符串扩展

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 

---

箭头函数

// 通常定义函数的方法
var myFunc = function(obj){
    // 函数处理
}

// 可以简写为
var myFunc = (obj) => {
    // 函数处理
}

---

对象的函数属性简写

let person = {
    name:'张三',
    
    // 之前的语法
    speak:functon(word){
        console.log(this.name + "说" + word)
    }

    // ES6语法
    speak2(word){
        console.log(this.name + "说" + word)
    }

    // 或者用箭头函数
    speak3:word => {
        console.log(this.name + "说" + word)
    }
}

---

map方法

map()

接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

举例

// 将一个字符串数组arr，转为int数组

// 首先定义arr
let str_arr = ['1', '2', '-3', '-4'];
console.log(str_arr);

// 用map方法转化
int_arr = str_arr.map(s => parseInt(s));
console.log(int_arr)

运行结果

[ '1', '2', '-3', '-4' ]

[ 1, 2, -3, -4 ]

---

reduce方法

reduce()

接收一个函数，该函数接收两个参数

会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

举例①（有初始参数）

var arr = [1, 2, 3, 4]
arr.reduce((a, b) => a + b);
arr.reduce((a, b) => a * b);

运行结果为

10

24

计算过程详解：

运算1：加法

首先判断初始值，本例中没有初始值，所以直接存数组arr中计算

第一次：前两个元素进行+计算，即1+2=3，把3作为reduce第一次处理的结果，传给下面的计算

第二次：有前一次reduce的计算结果（3），直接作为第一个参数，然后找arr数组剩余的数，即3+3=6，把6作为reduce第二次处理的结果，传给下面的计算

第三次：有前一次reduce的计算结果（6），直接作为第一个参数，然后找arr数组剩余的数，即6+4=10，把10作为reduce第二次处理的结果，传给下面的计算

第四次：由于已经运算到数组中末尾，没有剩余的元素，结束计算，返回计算结果（10）

简单一句话：1+2+3+4=10

运算2：乘法

首先判断初始值，本例中没有初始值，所以直接存数组arr中计算

第一次：前两个元素进行+计算，即1*2=2，把2作为reduce第一次处理的结果，传给下面的计算

第二次：有前一次reduce的计算结果（2），直接作为第一个参数，然后找arr数组剩余的数，即2*3=6，把6作为reduce第二次处理的结果，传给下面的计算

第三次：有前一次reduce的计算结果（6），直接作为第一个参数，然后找arr数组剩余的数，即6*4=24，把24作为reduce第二次处理的结果，传给下面的计算

第四次：由于已经运算到数组中末尾，没有剩余的元素，结束计算，返回计算结果（10）

简单一句话：1*2*3*4=24

举例②（有初始值）

var arr = [1, 2, 3, 4]
arr.reduce((a, b) => a + b,10);
arr.reduce((a, b) => a * b),20);
 

运行结果为

20

480

计算过程解析

有初始值的话，直接把初始值当做数组的第一个数进行计算，即

加法：10+1+2+3+4=20

乘法：20*1*2*3*4=480

---

promise

Promise 是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果,从它可以获取异步操作的消息

通过Promise的构造函数来创建Promise对象

const promise = new Promise(function(resolve, reject) {
  // ... 执行异步操作

  if (/* 异步操作成功 */){
    resolve(value);// 调用resolve，代表Promise将返回成功的结果
  } else {
    reject(error);// 调用reject，代表Promise会返回失败结果
  }
});

等待异步执行完成后，可以用then方法执行一些动作

promise.then(function(value){
    // 异步执行成功后的回调
});

处理异步执行失败，可以用catch

promise.then(function(value){
    // 异步执行成功后的回调
}).catch(function(error){
    // 异步执行失败后的回调
})

---

模块化

概念：把代码进行拆分，方便重复利用，与java中的包类似

重点记忆export和import

export

可以理解成“导出”，用于规定模块的对外接口

const myFunc = {
    sum(a,b){
        return a + b;
    }
}
export myFunc;

// 也可以写成

export const myFunc = {
    sum(a,b){
        return a + b;
    }
}

这样，在其他js程序中，可通过import导包，来使用到你的myFunc方法

导出代码时，还可以省略名称，这样使用者可以任意起名进行使用

// 无需声明对象的名字
export default {
    sum(a,b){
        return a + b;
    }
}

import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

比如要我要使用myFunc

// 导入myFunc
import myFunc from 'my.js'
// 调用myFunc中的属性
myFunc.sum(1,2)

---

对象扩展

ES6给Object拓展了许多新的方法：

• keys(obj)：获取对象的所有key形成的数组
• values(obj)：获取对象的所有value形成的数组
• entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],...]

• assign(dest, ...src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）

---

数组扩展

ES6给数组新增了许多方法：

• find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素
• findIndex(callback)：与find类似，不过返回的是品牌到的元素的索引
• includes（callback）：与find类似，如果匹配到元素，则返回true，代表找到了