ES6 common.js和es6中模块引入的区别

ES6 common.js和es6中模块引入的区别:

1、common.js和es6中模块引入的区别
Common.js是一种模块系统，主要用于node.j。使用require函数引入模块，使用module.exports导出模块

特点：

动态导入，require可以在函数体中，条件语句动态引入模块
同步加载：require是同步的，模块在执行require时会立即加载并返回结果
导出的是值的拷贝
ES6模块：

ES6模块系统是ECMAScript标准的一部分，使用import和export进行导入和导出模块

export const name = ‘shanghai’

特点：

静态导入，在文件的顶部定义，在编译时确定依赖关系
异步加载
导出的是值的引用，这就意味着值发生改变后，所有的引用处发生反映
兼容性和转换：使用Babel或者Webpack等可以将ES6转为Common.js

2、箭头函数
– 箭头函数和普通函数的区别
使用=>来定义箭头函数，省去了function关键字，采取=>定义函数，函数的参数写在=>前的括号，函数体写在后面花括号

区别：

语法上来看，箭头函数更简洁、清晰，很便捷

箭头函数不会创建自己的this,它是捕获自己定义时所处的外层执行环境的this，并继承这个值。

箭头函数继承而来的this指向永远不会改变

.call()\.apply()\.bind()不会改变箭头函数的this指向

虽然这些方法可以动态的修改函数执行时的this指向，但是箭头函数的this指向在定义时就已经确认了

箭头函数不能作为构造函数使用

构造函数的new做了什么

JS内部生成一个对象，继承构造函数的原型对象：Object.create(constructor.prototype)
将函数中的this指向该对象
执行构造函数中的语句
返回该对象的实例
由于箭头函数的this指向在定义时就已经确定，并且无法改变，因此this指向无法随在哪里调用、被谁调用而改变，因此箭头函数不能作为构造函数使用

箭头函数没有自己的arguments

arguments对象是一个函数内部的类数组的对象，作用存储函数调用时传入的所有参数。

箭头函数没有原型prototype

箭头函数不能用作Generator函数，不能使用yeild关键字

Generator函数是一种特殊的函数，function* 语法定义，可以暂停和恢复程序执行，返回一个迭代器对象

yield 是 Generator 函数中的关键字，用于暂停函数执行并返回一个值。每次调用迭代器的 next() 方法时，函数会从上次暂停的位置继续执行。

适合回调函数，避免普通函数的this丢失问题（不再用 var that = this 或者bind）

– 箭头函数的this指向问题
箭头函数没有属于自己的this，它所谓的this是指捕获其所在上下文的this值，作为自己的this，它没有自己独立的this上下文

从作用域机制来看，普通函数的this是在运行时动态绑定的，谁调用函数，this就指向谁；而箭头函数他是在定义时静态绑定的，继承外部词法作用域的this，并不会改变的

从babel转译来看，转译后用闭包（变量 var _this = this ）保存当前作用域的this，箭头函数被转为普通函数，就直接使用闭包保存的_this

– new一个箭头函数会怎么样
报错：TypeError: ArrowFunction is not a constructor

核心原因：

没有自己的this，无法通过new绑定到新创建的实例上
没有[construct]内部方法，用于创建对象实例这个方法
不能使用arguments、super
3、var\const\let区别
var

在ES5中，顶层对象和全局对象是等价的，var声明的变量既是全局变量也是顶层变量

使用var声明的变量存在变量提升的现象，就是在编译阶段将其提升到顶部

使用var，能够对一个变量多次声明并且后面会覆盖前面的

函数中使用var声明变量，该变量是局部

le

ES6新增的，存在块级作用域，在let命令所在的代码块中有效

不存在变量提升，未声明直接使用会报错（ReferenceError），使用let声明变量前，该变量都不可用（暂时性死区）

let不允许在相同作用域重复声明

const

声明一个只读变量，一旦声明，常量的值就不可变了，实际上是保证变量指向的内存地址所保存的数据不可改动

– 区别
变量提升：

var声明的变量存在变量提升，值为undefined

let和const声明的变量不存在变量提升，即声明的变量一定要在声明后使用，否则报错

这种说法也不全对，只能说暂时性死区使得我们感受不到变量提升的效果，会被提升只是不会被初始化、被引用

从变量赋值的过程来看，创建变量时会在内部中开辟空间，然后初始化，再赋值，但是let不会进行初始化

暂时性死区

var不存在，let和const存在

块级作用域

var不存在，let和const存在

重复声明

var允许，且后声明的会覆盖前面声明的，const和let在同一个作用域不允许重复声明

修改声明的变量

var和let可以修改，const声明一个只读的常量不可以进行修改

使用

优先使用const，其次let，避免var

4、Symbol作用
主要解决ES5中属性名都是字符串导致的属性名冲突问题，保证每个属性名都是独一无二的

Symbol：表示独一无二的值，继undefined、null、boolean、string、Number、Object、BigInt：表示任意精度的整数，ECMAScript2020中引入

通过Symbol函数生成，对象属性名有两种：字符串、Symbol类型

5、ES6新特性
主要有四大类

解决原有语法的不足

对原有语法进行增强

解构、展开、参数默认值、模板字符串

全新的对象、方法、功能

promise、proxy、object的assign、is

全新的数据类型和结构

symbol、set、map