ES6汇总（附加面试考点，冷知识点）————关于简洁性汇总（共2200+字）

前言

文章为个人原创手写，内容参考部分书籍(《深入理解ES6》)与博客（阮一峰），个人的汇总与总结。
如有不对，希望指出。

话题	链接
es6严谨性	https://juejin.im/post/5eea3020f265da02ab172265
es6简洁性	https://juejin.im/post/5ef0116df265da02ba14e261
es6原对象方法的扩展	https://juejin.im/editor/drafts/5ef0d2626fb9a058ad35cfb8
es6新概念的引入	正在更新中

ES6的重点

本人把ES6的改革从性质上分成四个部分，包括严谨性，简洁性，原对象方法的扩展，以及新概念的引入

本文重点___简洁性

ES6的引入，使前端的越来越简洁性，可能我们过去100行的代码，今日通过es6只需要30~40行就搞定。当然这中间需要我们不断的积累相关的语法，已经相关语法带来的优势与意义。下边将解释一下哪些语法会带来简洁性。

字符串模版

说到es6带来的简洁性，我第一个想起的就是字符串模版。
在es6之前，我们只能用字符串拼接的功能则尽可能简单。而且他拥有弊端，如下：

多行字符串：针对多行字符串的形式概念；
基本的字符串格式化：将字符串部分替换为已存在的变量值的能力；
HTML 转义：能转换字符串以便将其安全插入到 HTML 中的能力。

而es6字符串模版,解决了上述问题。
此外，他还支持"制造替换位", “标签化模板”

面试考点

es6字符串模版解决了什么问题？

参考答案：

模板字面量是 ES6 的一项重要补充，允许你创建领域专用语言（ DSL ）让字符串的创建更容
易。能将变量直接嵌入到模板字面量中，意味着开发者在组合长字符串与变量时，有了一种
比字符串拼接更为安全的工具。
内置的多行字符串支持，是普通 JS 字符串绝对无法做到的，这使得模板字面量成为凌驾于前
者之上的有用升级。尽管在模板字面量中允许直接使用换行，你依然可以使用 \n 或其它字
符转义序列。

---

箭头函数

在单页面架构时代，万物皆为对象。而对象的this指向问题已经是一个棘手的问题。 箭头函数就是为解决函数this指向的问题而产生，且十分简洁。当然他还有一些其他的特点。可参考下述面试题

var sum = (num1, num2) => num1 + num2;
 // 有效等价于：
var sum = function(num1, num2) {
return num1 + num2;
};

冷知识点：

箭头函数不能修改它们的 this 绑定，因此不能被用作构造器。

面试考点：

this指向有几种情况？

参考答案：

1.绑定事件指向事件本身
2.普通函数的，指向方法体。
3.new函数的指向当前类
4.箭头函数，指向上级上下文
5.call/apply/bind 

---

箭头函数跟普通函数有什么区别

参考答案：

1. 没有 this 、 super 、 arguments ，也没有 new.target 绑定： this 、 super 、
arguments 、以及函数内部的 new.target 的值由所在的、最靠近的非箭头函数来决定
（ super 详见第四章）。
2.不能被使用 new 调用： 箭头函数没有 [[Construct]] 方法，因此不能被用为构造函
数，使用 new 调用箭头函数会抛出错误。
没有原型： 既然不能对箭头函数使用 new ，那么它也不需要原型，也就是没有
prototype 属性。
3.不能更改 this ： this 的值在函数内部不能被修改，在函数的整个生命周期内其值会
保持不变。
4.没有 arguments 对象： 既然箭头函数没有 arguments 绑定，你必须依赖于具名参数或
剩余参数来访问函数的参数。
5.不允许重复的具名参数： 箭头函数不允许拥有重复的具名参数，无论是否在严格模式
下；而相对来说，传统函数只有在严格模式下才禁止这种重复。

class写法

JS在都不存在类的概念，但是可以通过构造器，然后将方法指派到该构造器的原型上。这是一种仿类结构。而es6新引入了class写法，更是一种糖语法。

function PersonClass(name){
  this.name = name;
}

PersonClass.prototype.sayName(){
     console.log(this.name);
}

等价于

class PersonClass {
    // 等价于 PersonType 构造器
    constructor(name) {
        this.name = name;
    }
        
    sayName() {
        console.log(this.name);
    }
}

此外，class写法，还自带访问器属性。

class CustomHTMLElement {
    constructor(element) {
        this.element = element;
    }
    get html() {
        return this.element.innerHTML;
    }
    set html(value) {
        this.element.innerHTML = value;
    }
}

面试考点

class写法与常规写法有什么区别呢？

参考答案：

1. 类声明不会被提升，这与函数定义不同。类声明的行为与 let 相似，因此在程序的执行
到达声明处之前，类会存在于暂时性死区内。
2. 类声明中的所有代码会自动运行在严格模式下，并且也无法退出严格模式。
第九章 JS的类
172
3. 类的所有方法都是不可枚举的，这是对于自定义类型的显著变化，后者必须用
Object.defineProperty() 才能将方法改变为不可枚举。
4. 类的所有方法内部都没有 [[Construct]] ，因此使用 new 来调用它们会抛出错误。
5. 调用类构造器时不使用 new ，会抛出错误。
6. 试图在类的方法内部重写类名，会抛出错误

解构

为了简化提取信息的任务， ES6 新增了解构（destructuring ），这是将一个数据结构分解为更小的部分的过程。
解构可以分为下边几种

对象解构

用简单的案例来说明：

let node = {
    number_0: "小明",
    number_1: "小红",
    number_2: "小张",
    .
    .
    .
    number_9: "小甲"
};

如我们需要分别获取前10名的参数。在es6之前只能通过：
var number_0 = node.number_0;
var number_1 = node.number_1;
var number_2 = node.number_2;
.
.
.
var number_9 = node.number_9;

而有了我们的解构函数之后，一句话搞定：
const {number_0, number_1, ...., number_9 } = node;

数组解构

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

我们可以通过数组解构，快速拿到数组对应的值。如上案例。

此外，我们还可以利用数组的解构，建立新数组。
let [ firstColor, ...restColors ] = colors;
此时restColors将等于 [  "green", "blue" ];
这在我们的函数接受未知数量参数时，将大大的方便。

冷知识：

1.解构赋值，如果该对象（或其他）没有对应的值，会默认给与underfined。
但是我们可以在解构的同时给于赋值。以上述为例：let { number_0, number_1, number_9999 = '小陈' } = node;

2.解构赋值，我们可以赋予非对象名称。以上述为例：let { number_0: num0, number_1: num1 } = node;这样，我们的num0就可以直接拿到number_0的值。

3.解构取值，还支持有多次层次关系。例如：
    let person = {
        attr: {
            sex: '男'
        },
    }
   let { attr: { sex } } = person;
   这样sex会直接指向person.attr.sex。
   同理，支持数组嵌套。

方法简写

var person = {
    name: "Nicholas",
    sayName: function() {
        console.log(this.name);
    }
};

而es6引入的方法简写，使语法变得更简洁：
var person = {
    name: "Nicholas",
    sayName() {
        console.log(this.name);
    }
};

幂运算符

ES2016 对 JS 语法引入的唯一改进就是幂运算符（ exponentiation operator ），此数学运
算能将指数运用到底数上。 虽然已经有 Math.pow() 方法可用于幂运算，然而 JS 也是在此
方面只能调用方法而不能使用运算符的少数语言之一（并且一些开发者认为运算符可读性更
强、更易于检查）。
幂运算符是两个星号（ ** ），其左侧是底数，右侧则是指数，例如：

let result = 5 ** 4;
等价与
let result = 5 * 5 * 5 * 5;

---

思考题：    
let result = 2 * 5 ** 2;
console.log(result);
幂运算符的优先级在 JS 的二元运算符中是最高的：所以答案为50

js原型简洁写法（setPrototypeOf/super）

我们谈谈ES6 就给原型引入了一些改进。

尽管ES5 添加了 Object.getPrototypeOf() 方法来从任意指定对象中获取其原型，但仍然缺少在初始化之后更改对象原型的标准方法。ES6 通过添加 Object.setPrototypeOf()方法而改变了这种假定，此方法允许你修改任意指定对象的原型。

Object.setPrototypeOf(对象, 新原型)可以直接改变原型。

此外，我们还可以使用 super 引用的简单原型访问。当使用多级继承时， super 引用就是非常强大的。

友情提示

es6严谨性 ： https://juejin.im/post/5eea3020f265da02ab172265

es6简洁性 ： https://juejin.im/post/5ef0116df265da02ba14e261

es6原对象方法的扩展： https://juejin.im/post/5ef0116df265da02ba14e261

es6新概念的引入： 正在更新中

---

该文章已结束，下一篇文章，将谈一下es6原对象方法的扩展，包括编码的变化，字符串模版的扩展，函数的扩展，对象的扩展等知识点。