关于ES6，新增的特性和自己理解！

一、es6中新增的特性？
1、块级作用域（let，const）
2、提供了定义类的语法糖（class）
3、新增了一种基本数据类型（symbol）
4、新增了变量的结构赋值
5、函数参数允许设置默认值，引入rest参数新增了箭头函数
6、数组新增了一些API，如isArray/from、of方法；数组实例新增了entries（）keys（）
和values（）等方法
7、对象和数组新增了扩展运算符
8、ES6新增了模块化（import、export）
9、ES6新增了set和map数据结构
10、ES6原生提供Proxy构造函数，用来生成proxy实例
11、ES6新增了生成器（Generator）和遍历器（Lterator）
1、块级作用域？
JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。
块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。
var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
同一个变量只能使用一种方式声明，不然会报错
关于ES6，新增的特性和自己理解！

2、定义类的语法糖（class）
在es5中,生成实例对象的方法是通过构造函数
在es6中,通过class关键字,可以定义类,
类必须要用new调用否则会报错
new的属性
new.target:返回实例的构造函数(类),但在一些情况下回返回new后面的实例
关于ES6，新增的特性和自己理解！
**constructor是类的默认方法,通过new命令生成对象实例时,自动调用这个方法
一个类必须有constructor方法,如果没有显示定义,一个空的constructor方法会默认添加
constructor默认返回实例对象(this),还可以指定返回另外一个对象
关于ES6，新增的特性和自己理解！
类的静态方法static关键字
所有在类中定义的方法,都会被实例继承,
如果在一个方法前,加上static关键字,就表示这方法不会被实例继承,而是直接通过类调用

**class继承
extends关键字实现继承
子类必须在construct方法中调用super方法,否则新建实例时会报错,在子类的构造函数中,只有调用了super之后,才可以使用this关键字,否则会报错,super()只能在constructor中执行
super()当做函数使用的时候 1.执行父类的constructor方法2.把this指向子类的实例
super当做对象使用(在普通函数中)1.super指向父类的原型对象2.方法里的this指向子类的实例
super当做对象使用(在私有方法中)1.super指向父类2.方法里的this指向子类
父类的静态方法,会被子类继承
关于ES6，新增的特性和自己理解！
4、新增了变量的结构赋值：
在模块导出的时候使用，在引入ui组件库的时候按需引入和全局引入
ES6 允许按照一定模式，提取数组和对象中的值，对变量进行赋值，这种方法就称为解构赋值
解构赋值左右两边结构必须一样，使用左边定义的值，快速取出数据中对应的数据值，定义和赋值必须
放到一起，否则会报错。左边必须是一个js存在的数据结构。而且解构赋值就是对js的赋值运算符的扩展，
它的好处就是让我们能够快速的能从复杂的对象中取出我们想要的数据
关于ES6，新增的特性和自己理解！
箭头函数

扩展运算符
…运算符用于操作数组，有两种层面

第一个叫做展开运算符(spread operator)，作用是和字面意思一样，就是把东西展开。可以用在array和object上都行。
比如:

let a = [1,2,3];
let b = [0, …a, 4]; // [0,1,2,3,4]

let obj = { a: 1, b: 2 };
let obj2 = { …obj, c: 3 }; // { a:1, b:2, c:3 }
let obj3 = { …obj, a: 3 }; // { a:3, b:2 }

第二个，第三个叫做剩余操作符(rest operator)，是解构的一种，意思就是把剩余的东西放到一个array里面赋值给它。一般只针对array的解构，其他的没见过。。。
比如：
let a = [1,2,3];
let [b, …c] = a;
b; // 1
c; // [2,3]

// 也可以
let a = [1,2,3];
let [b, …[c,d,e]] = a;
b; // 1
c; // 2
d; // 3
e; // undefined

// 也可以
function test(a, …rest){
console.log(a); // 1
console.log(rest); // [2,3]
}

test(1,2,3)
便捷的数组合并

let arr1 = [‘Aixi’, ‘Bill’];

let arr2 = [‘Cate’];

let arr3 = […arr1, …arr2];
console.log(arr3); // [“Aixi”, “Bill”, “Cate”]
ES6新增了模块化（import、export）
import命令
重命名

import {name as name1} from ‘xxx.js’
console.log(name)//空
console.log(name1)//成功使用模块的变量
1
2
3
①import 导入的值都是只读的，不允许修改输入的接口。

②可以修改导入的对象，可以修改导入对象的属性，但不推荐这样做，建议把导入的变量（不管是普通变量还是对象）都当做只读的。

③import…from 中 from 后面的路径可以是绝路径也可以是相对路径。

④js模块导入时可以省略后面的 .js后缀。

⑤import 命令具有提升效果，它会把import命令提升到模块的头部，首先执行。

⑥执行同一个import命令多次，默认只会执行一次，不会执行多次

⑦从同一个模块通过多条import加载不同变量，但它们对应的是同一个模块实例。import语句是单例模式（Singleton）

⑧不推荐 import 和 require 在同一个模块使用，因为他们的执行时期不一样，导致的结果可能就不一样。目前在模块中使用 require 还需要 Babel 转换比较麻烦。
⑨整体加载模块（常用）

export可以理解为抛出变量。我们在.js文件中定义的变量怎么让其能够被引用呢。那就是要在js文件的最后把我们需要给外面的变量用export命令抛出

模块功能主要有两个命令构成：export 和 import。 export 命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个js文件就是一个模块，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部某个变量，就必须使用export关键字输出该变量。

注意：export 命令规定的是对外接口，接口名与模块内部变量之间，必须与模块的变量建立一一对应关系。（有种键值对的意思），简单来说导出的变量他必须有一个值。export 语句不能放在代码块内，如函数内，否则会报错。因为此做法使其无法做到静态化，违背了 ES6 模块的设计理念。

ES6原生提供Proxy构造函数，用来生成proxy实例
proxy是代理（前端代理和后端通常通过 nginx 实现反向代理）
前端代理我在vue 中主要是通过vue 脚手架中的config 中的index 文件来配置的，其中有个 proxyTable 来配置跨域的
前端代理核心实现通过 http-proxy-middleware 插件来实现的，vue2.x 和00000

ES6新增了生成器（Generator）和遍历器（Lterator）：
generator（异步编程、yield、next()、await 、async）
Generator 是一个迭代器生成函数，其返回值是一个迭代器（Iterator），可用于异步调用
generator 函数时ES6提供的一种异步编程解决方案，通过yield 标识与next() 结合使用，实现函数的
分段执行
yield相当与ruturn
next():里面可以就收一个参数代表上一个yield的参数
的结果
遍历器就不经常用了所以这里就不多说了。。。
key 的作用
1，主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes，相当于唯一标识ID。
2，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，因此使用key值可以提高渲染效率，
同理，改变某一元素的key值会使该元素重新被渲染

多多指教了各位！！

关于ES6，新增的特性和自己理解！

相关推荐