你知道ES5 和 ES6 的区别吗?，能说出说几个 ES6 的新增方法吗?
目录ES5 和 ES6 的区别ES6 的新增方法1、新增声明命令 let 和 const1.1）特点2、模板字符串（Template String）3、函数的扩展3.1）函数的默认参数3.2）箭头函数4、对象的扩展4.1）属性的简写4.2）Object.keys()方法4.3）Object.assign ()5、for...of 循环6、import 和 export7、Promise 对象8、解
·
目录
ES5 和 ES6 的区别
ECMAScript5，即 ES5，是 ECMAScript 的第五次修订，于 2009 年完成标准化
ECMAScript6，即 ES6，是 ECMAScript 的第六次修订，于 2015 年完成，也称 ES2015
ES6 是继 ES5 之后的一次改进，相对于 ES5 更加简洁，提高了开发效率.
ES6 的新增方法
1、新增声明命令 let 和 const
在 ES6 中通常用
let 和 const 来声明，let 表示变量、const 表示常量
1.1）特点
let 和 const
都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使用
不存在变量提升，只能先声明再使用，否则会报错。在代码块内，在声明变量之前，
该变量
都是不可用的。这在语法上，称为“暂时性死区”
（temporal dead zone，简称 TDZ，
在同一个代码块内，不允许重复声明
const 声明的是一个只读常量，在声明时就需要赋值。（如果 const 的是一个对象，对
象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而
变量成员 是可以修改的。）
2、模板字符串（Template String）
用一对反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以
在字符串中嵌入变量，js 表达式或函数，变量、js 表达式或函数需要写在${ }中。
3、函数的扩展
3.1）函数的默认参数
ES6 为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递
进去时使用。
3.2）箭头函数
在 ES6 中，提供了一种简洁的函数写法，我们称作“箭头函数”。
3.2.1）写法
函数名=(形参)=>{……}
当函数体中只有一个表达式时，{}和 return 可以省
略当函数体中形参只有一个时，()可以省略。
3.2.2）特点
箭头函数中的 this 始终指向箭头函数定义时的离 this 最近的一个函数，如果没有最
近的函数就指向 window。
4、对象的扩展
4.1）属性的简写
ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量 的值。
var foo = 'bar';
var baz = {foo};
//等同于 var baz = {foo: foo}; 方法的简写。省略冒号与 function 关键字。
var o = { method() { return "Hello!"; } };
// 等同于
var o = { method: function() { return "Hello!"; } };4.2）Object.keys()方法
获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组。
var obj={name: "john", age: "21", getName: function () { alert(this.name)}};
console.log(Object.keys(obj)); // ["name", "age", "getName"]
console.log(Object.keys(obj).length); //3
console.log(Object.keys(["aa", "bb", "cc"])); //["0", "1", "2"]
console.log(Object.keys("abcdef")); //["0", "1", "2", "3", "4", "5"]4.3）Object.assign ()
assign 方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，
第一个参数是目标对象，后面的都是源对象
var target = {}; //目标对象
var source1 = {name : 'ming', age: '19'}; //源对象 1
var source2 = {sex : '女'}; //源对象 2
var source3 = {sex : '男'}; //源对象 3，和 source2 中的对象有同名属性 sex
Object.assign(target,source1,source2,source3);
console.log(target); //{name : 'ming', age: '19', sex: '男'}5、for...of 循环
var arr=["小林","小吴","小佳"];
for(var v of arr){ console.log(v); }//小林 //小吴 //小佳6、import 和 export
ES6 标准中，JavaScript 原生支持模块(module)。这种将 JS 代码分割成不同功能的小块进行
模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通
过模块的导入的方式可以在其他地方使用.
export 用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import 用于在一个模块中加载另一个含有 export 接口的模块
import 和 export 命令只能在模块的顶部，不能在代码块之中
7、Promise 对象
Promise 是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层 嵌套的回调函数，要是为了解决异步处理回调地狱(也就是循环嵌套的问题)而产生的 Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回 调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。 对于已经实例化过的 Promise 对象可以调用 Promise.then() 方法，传递 resolve 和 reject 方法作为回调。then()方法接收两个参数：onResolve 和 onReject，分别代表当前 Promise 对 象在成功或失败时
Promise 的 3 种状态
Fulfilled 为成功的状态，Rejected 为失败的状态，Pending 既不是 Fulfilld 也不是 Rejected 的状态，可以理解为 Promise 对象实例创建时候的初始状态
8、解构赋值
8.1）数组的解构赋值
解构赋值是对赋值运算符的扩展。 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应如果有对应不上的就是 undefined.
let [a, b, c] = [1, 2, 3];
// a = 1 // b = 2 // c = 38.2）对象的解构赋值
对象的解构赋值和数组的解构赋值其实类似，但是数组的数组成员是有序的 而对象的属性则是无序的，所以对象的解构赋值简单理解是等号的左边和右边的结构 相同
et { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa' // bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'9、Set 数据结构
Set 数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数。
9.1）Set 属性和方法
Size（）
数据的长度
Add（）
添加某个值，返回 Set 结构本身。
Delete（） 删除某个值，返回一个布尔值，表示删除是否成功。
Has（） 查找某条数据，返回一个布尔值。
Clear（）清除所有成员，没有返回值。
9.2）主要应用场景：数组去重
10、class
class 类的继承 ES6 中不再像 ES5 一样使用原型链实现继承，而是引入 Class 这个概念
ES6 所写的类相比于 ES5 的优点：
区别于函数，更加专业化（类似于 JAVA 中的类）
写法更加简便，更加容易实现类的继承
11、…
展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
12、async、await
使用 async/await, 搭配 Promise,可以通过编写形似同步的代码来处理异步流程, 提高代码
的简洁性和可读性 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方
法执行完成
13、修饰器
@decorator 是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函
数
14、Symbol
Symbol 是一种基本类型。Symbol 通过调用 symbol 函数产生，它接收一个可选的名字参数，
该函数返回的 symbol 是唯一的
15、Proxy
Proxy 代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)