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原对象方法的扩展,包括编码的变化,字符串模版的扩展,函数的扩展,对象的扩展等知识点。

你可能感兴趣的:(javascript,前端)