ES6面试知识点和什么是语法糖

The..Fuir

已于 2022-05-13 18:39:28 修改

阅读量288

点赞数

分类专栏： ES6 面试文章标签： javascript 前端 es6

于 2022-05-13 11:36:01 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/124741443

版权

面试同时被 2 个专栏收录

152 篇文章 51 订阅

订阅专栏

ES6

28 篇文章 2 订阅

订阅专栏

本篇链接22个关于ES6的最新面试题汇总整理_前端达人的博客-CSDN博客

目录

ES6是什么，为什么要学习它，不学习ES6会怎么样？

Babel是什么，有什么作用？

let有什么用，有了var为什么还要用let

ES6对Function函数类型做的常用升级优化（重要）

2、升级部分:

Symbol是什么，有什么作用

Set是什么，有什么作用

Map是什么，有什么作用

Promise是什么，有什么作用

Iterator是什么，有什么作用？(重要)

for...in 和for...of有什么区别？

Generator函数是什么，有什么作用？

async函数是什么，有什么作用？

Class、extends是什么，有什么作用？

module、export、import是什么，有什么作用？

ES6是什么，为什么要学习它，不学习ES6会怎么样？

答：ES6是新一代的JS语言标准，对部分JS语言核心做了升级优化，规范了JS的使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用开发。

Babel是什么，有什么作用？

答：Babel是一个ES6的转码器，可以将ES6代码转为ES5代码，以便兼容那些还没支持ES6的平台。

let有什么用，有了var为什么还要用let

答：在ES6之前，声明变量只能用var，var方式声明变量不太合理，因为在ES5中，var是函数声明作用域，并没有块级作用域，所以有很大局限性。没有块级作用域会带来很多难以理解的问题，例如for循环var变量的泄露，变量数据覆盖等问题。但在ES6中新增了let,let声明的变量拥有自己的块级作用域，并且修复了var声明带来的变量提升问题，let声明的变量不能提升。

ES6对Function函数类型做的常用升级优化（重要）

答：1.优化部分：

a:箭头函数（核心）。箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this，这改变了以往JS函数中最让人难以理解的this机制，主要优化点：

Ⅰ.    箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。ES5函数里的this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一。ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this。

Ⅱ.    箭头函数不能用作构造函数，因为它没有自己的this，无法实例化。

Ⅲ.   也是因为箭头函数没有自己的this,所以箭头函数内也不存在arguments对象。（可以用扩展运算符代替）

b. 函数默认赋值。ES6之前，函数的形参是无法给默认值得，只能在函数内部通过变通方法实现。ES6以更简洁更明确的方式进行函数默认赋值。
function es6Fuc (x, y = 'default') {
    console.log(x, y);
}
es6Fuc(4) // 4, default
2、升级部分:

ES6新增了双冒号运算符，用来取代以往的bind，call,和apply。(浏览器暂不支持，Babel已经支持转码)
foo::bar;
// 等同于
bar.bind(foo);
 
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
复制代码
Symbol是什么，有什么作用

答：Symbol是ES6引入的第七种原始数据类型，所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题，对象中Symbol()不能被for...in遍历，但是也不是私有属性

Set是什么，有什么作用

答：Set是ES6引入的一种类似于Array的新的数据结构，Set实例的成员类似于item成员，区别是Set实例的成员都是唯一的，不重复的。这个特性可以轻松实现数组去重。

Map是什么，有什么作用

答：Map是ES6引入的一种类似Object的心得数据结构，Map可以理解是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object，可以更加全面的描述对象属性。

Promise是什么，有什么作用

答：Promise是ES6引入的一个新对象，它的主要作用是用来解决JS异步机制里，回调机制产生的“回调地狱”。它并不是什么突破性的API，只是封装了异步回调形式，使得异步回调可以写的更加优雅，可读性高，而且可以链式调用。

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用
reject。对于已经实例化过的 Promise 对象可以调用 Promise.then() 方法，传递 resolve
和 reject 方法作为回调。then()方法接收两个参数：onResolve 和 onReject，分别代表当
前 Promise 对象在成功或失败时
Promise 的3种状态
Fulfilled 为成功的状态，Rejected 为失败的状态，Pending 既不是 Fulfilld 也不是
Rejected 的状态，可以理解为 Promise 对象实例创建时候的初始状态

Iterator是什么，有什么作用？(重要)

答：Iterator是ES6中一个很重要概念，它并不是对象，也不是任何一种数据类型。因为ES6新增了Set、Map类型，他们和Array、Object类型很像，Array、Object都是可以遍历的，但是Set、Map都不能用for循环遍历，解决这个问题有两种方案，一种是为Set、Map单独新增一个用来遍历的API，另一种是为Set、Map、Array、Object新增一个统一的遍历API，显然，第二种更好，ES6也就顺其自然的需要一种设计标准，来统一所有可遍历类型的遍历方式。Iterator正是这样一种标准。或者说是一种规范理念。

for...in 和for...of有什么区别？

答：如果看到问题十六，那么就很好回答。问题十六提到了ES6统一了遍历标准，制定了可遍历对象，那么用什么方法去遍历呢？答案就是用for...of。ES6规定，有所部署了载了Iterator接口的对象(可遍历对象)都可以通过for...of去遍历，而for..in仅仅可以遍历对象。

这也就意味着，数组也可以用for...of遍历，这极大地方便了数组的取值，且避免了很多程序用for..in去遍历数组的恶习。

上面提到的扩展运算符本质上也就是for..of循环的一种实现。

Generator函数是什么，有什么作用？

答：如果说JavaScript是ECMAScript标准的一种具体实现、Iterator遍历器是Iterator的具体实现，那么Generator函数可以说是Iterator接口的具体实现方式。

执行Generator函数会返回一个遍历器对象，每一次Generator函数里面的yield都相当一次遍历器对象的next()方法，并且可以通过next(value)方法传入自定义的value,来改变Generator函数的行为。

Generator函数可以通过配合Thunk 函数更轻松更优雅的实现异步编程和控制流管理。

async函数是什么，有什么作用？

答：async函数可以理解为内置自动执行器的Generator函数语法糖，它配合ES6的Promise近乎完美的实现了异步编程解决方案。

概念
语法糖（Syntactic Sugar），也称糖衣语法。指的是在计算机语言中添加的某种语法，这种语法对语言的编译结果和功能并没有实际影响，但是却能更方便程序员使用该语言。

用处
通常来说使用语法糖能够减少代码量、增加程序的可读性，从而减少程序代码出错的机会。

Class、extends是什么，有什么作用？

答：ES6 的class可以看作只是一个ES5生成实例对象的构造函数的语法糖。它参考了java语言，定义了一个类的概念，让对象原型写法更加清晰，对象实例化更像是一种面向对象编程。Class类可以通过extends实现继承。它和ES5构造函数的不同点：

a. 类的内部定义的所有方法，都是不可枚举的。

b.ES6的class类必须用new命令操作，而ES5的构造函数不用new也可以执行。

c.ES6的class类不存在变量提升，必须先定义class之后才能实例化，不像ES5中可以将构造函数写在实例化之后。

d.ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

module、export、import是什么，有什么作用？

答：module、export、import是ES6用来统一前端模块化方案的设计思路和实现方案。export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务端的模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commondJS等等一系列前端模块不同的实现方案，使前端模块化更加统一规范，JS也能更加能实现大型的应用程序开发。

import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）。

import引入export导出的接口值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。