es6和es7区别js（谈谈ES5和ES6的区别）

我们都知道JavaScript是由三部分组成：

1. ECMAScript(核心)：规定了语言的组成部分=>语法 
    
    
、类型
     


     


     、语句 




 




 



、关键字 

   

   

、保留字
     

     

    、操作符  




  




  


、对象

2. BOM(浏览器对象模型): 支持访问和操作浏览器窗口 
    
    
，可以控制浏览器显示页面以外的部分    
    
    
。

3. DOM(文档对象模型): 把整个页面映射为一个多层节点结果
     


     


     ，可借助DOM提供的API 




 




 



，可删除 


  


  


、添加和修改任何节点

 

什么是ES5？

ES5全称ECMAScript5 

   

   

，即 ES5
     

     

    ，是ECMAScripts的第五次修订（第四版因为过于复杂废弃了）  




  




  


，又称ECMAScript2009 


  


  


，于 2009 年完成标准化  


     


     


。

什么是ES6？

ES6
     
     
   ， 全称 ECMAScript 6.0    




   




   

，即 ES6 



 



 



，是ECMAScripts的第六次修订            ，又称 ES2015
    




    




    
，于2015年06 月发版














，是 JavaScript 的下一个版本标准


 




 




 。

ES6 主要是为了解决 ES5 的先天不足            ，目前浏览器的 JavaScript 是 ES5 版本
     



     



     ，大多数高版本的浏览器也支持 ES6














，不过只实现了 ES6 的部分特性和功能   

   

   
。ES6 是继 ES5 之后的一次改进 
    
    
，相对于 ES5 更加简洁
     


     


     ，提高了开发效率

首先 




 




 



，说说ES5的特性：

1. strict模式：严格模式 

   

   

，限制一些用法   

     

     

。

2. Array增加方法：有every
     
     
   、some   




   




   

、forEach 



 



 



、filter            、indexOf
    




    




    
、lastIndexOf














、isArray            、map
     



     



     、reduce














、reduceRight方法



  




  




 。

3. Object方法： Object.getPrototypeOf 
    
    
、Object.create等方法  


  


  
。

Object.getPrototypeOf Object.create Object.getOwnPropertyNames Object.defineProperty Object.getOwnPropertyDescriptor Object.defineProperties Object.keys Object.preventExtensions / Object.isExtensible Object.seal / Object.isSealed Object.freeze / Object.isFrozen

其次
     

     

    ，谈谈ES6的特性：

1. 块级作用域 => 关键字let  




  




  


，常量const

在 ES6 中通常用 let 和 const 来声明 


  


  


，let 表示变量
     


     


     、const 表示常量

◼️ 特点

let 和 const 都是块级作用域    
     
     
。以{}代码块作为作用域范围 只能在代码块里面使用
     
     
   ，不存在变量提升   




   




   

，只能先声明再使用 



 



 



，否则会报错




   




   




 。在代码块内            ，在声明变量之前
    




    




    
，该变量 都是不可用的 



 



 
。这在语法上














，称为“暂时性死区 
    
    
”（temporal dead zone            ，简称 TDZ）
     



     



     ，在同一个代码块内














，不允许重复声明               。

const 声明的是一个只读常量 
    
    
，在声明时就需要赋值




    




    




 。（如果 const 的是一个对象
     


     


     ，

对象所包含的值是可以被修改的











。抽象一点儿说 




 




 



，就是对象所指向的地址不能改变 

   

   

，而

变量成员 是可以修改的               。）

2. 对象的扩展

◼️ 属性和方法的简写

对象字面量属性的简写

ES6 允许在对象之中
     

     

    ，直接写变量 



     



     



 。这时  




  




  


，属性名为变量名, 属性值为变量的值











。

var foo = bar; var baz = {foo}; // 等同于 var baz = {foo: foo};

对象字面量方法的简写    
    
    
。省略冒号与 function 关键字

var o = { method() { return "Hello!"; } }; // 等同于 var o = { method: function () { return "Hello!"; } };

◼️ 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"]

◼️ 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: 男}

3. 解构赋值

◼️ 数组的解构赋值

解构赋值是对赋值运算符的扩展   

   

   
。是一种针对数组或者对象进行模式匹配            ，然后对其中的变量进行赋值   

     

     

。在代码书写上简洁且易读
    




    




    
，语义更加清晰明了；也方便了复杂对象中数据字段获取



  




  




 。数组中的值会自动被解析到对应接收该值的变量中














，数组的解构赋值要一一对应如果

有对应不上的就是 undefined

let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3

◼️ 对象的解构赋值

对象的解构赋值和数组的解构赋值其实类似            ，但是数组的数组成员是有序的
     



     



     ，而对象的属性则是无序的














，所以对象的解构赋值简单理解是等号的左边和右边的结构相同  


  


  
。

let { foo, bar } = { foo: aaa, bar: bbb }; // foo = aaa // bar = bbb let { baz : foo } = { baz : ddd };  // foo = ddd

4. 展开运算符（Spread operator）

展开运算符（spread operator）允许一个表达式在某处展开    
     
     
。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用




   




   




 。

let obj1 = { value1: 1, value2: 2 }; let obj2 = {...obj1 }; console.log(obj2); // {value1: 1, value2: 2}

上面的用法实际相当于

obj2 = {value1: 1, value2: 2}

展开运算符的写法与obj2 = obj1直接赋值的写法的区别在于如果直接赋值的话 
    
    
，对于引用类型来说
     


     


     ，相当于只是赋值了obj1的内存空间地址 




 




 



，当obj2发生改变的时候 

   

   

，obj1也会随着发生改变 



 



 
。而是用展开运算符写法的话
     

     

    ，由于obj1对象中的属性类型都是基本类型  




  




  


，相当于重新创建了一个对象 


  


  


，此时obj2发生改变的时候
     
     
   ，并不会影响obj1这个对象               。但是仅限于其属性都为基本类型的情况（或者说只进行了一层的深拷贝）




    




    




 。如果该对象中的属性还有引用类型的话   




   




   

，修改属性中引用类型的值 



 



 



，则两个对象的属性值都会被修改











。

let obj1 = { attri1: [3, 6, 0], attri2: 4, attri4: 5 }; let obj2 = {...obj1 }; obj2.attri2 = 888; obj2.attri1[0] = 7; console.log(obj1:, obj1); console.log(obj2:, obj2);

展开运算符的应用

1.在函数中使用展开运算符

function test(a, b, c){}; let arr = [1, 2, 3]; test(...arr);

2.数组字面量中使用展开运算符

let arr1 = [1, 2]; let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4] // 使用push方法 let arr1 = [1, 2]; let arr2 = [3. 4]; arr1.push(...arr2); // [1, 2, 3, 4]

3.用于解构赋值            ，解构赋值中展开运算符只能用在最后
    




    




    
，否则会报错               。

// 解构赋值中展开运算符只能用在最后 



     



     



 。 let [a, b, ...c] = [1, ,2, 3, 4] console.log(a, b, c) // 1, 2, [3, 4]

4.类数组变成数组

let oLis = document.getElementsByTagName("li"); let liArr = [...oLis];

5.对象中使用展开运算符

ES7中的对象展开运算符符可以让我们更快捷地操作对象： let {x,y,...z}={x:1,y:2,a:3,b:4}; x; // 1 y; // 2 z; // {a:3,b:4}

将一个对象插入另外一个对象当中：

let z={a:3,b:4}; let n={x:1,y:2,...z}; console.log(n); //{x:1,y:2,a:3,b:4}

合并两个对象:

let a={x:1,y:2}; let b={z:3}; let ab={...a,...b}; console.log(ab); // {x:1,y:2,z:3}

5. 函数的扩展

◼️ 函数的默认参数

ES6 为参数提供了默认值











。在定义函数时便初始化了这个参数














，以便在参数没有被传

递进去时使用    
    
    
。

◼️ 箭头函数

在 ES6 中            ，提供了一种简洁的函数写法
     



     



     ，我们称作“箭头函数
     


     


     ”  


     


     


。

写法：函数名=(形参)=>{……} 当函数体中只有一个表达式时














，{}和 return 可以省 略

当函数体中形参只有一个时 
    
    
，()可以省略


 




 




 。

特点：箭头函数中的 this 始终指向箭头函数定义时的离 this 最近的一个函数
     


     


     ，如果没有最

近的函数就指向 window   

   

   
。

6. 模板字符串

用一对反引号(`)标识 




 




 



，它可以当作普通字符串使用 

   

   

，也可以用来定义多行字符串
     

     

    ，也可以

在字符串中嵌入变量  




  




  


，js 表达式或函数 


  


  


，变量 




 




 



、js 表达式或函数需要写在${ }中   

     

     

。

var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` // return "Hello Bob, how are you today?"

7. for...of循环

var arr=["小林","小吴","小佳"]; for(var v of arr){ console.log(v); } //小林 //小吴 //小佳

8. Class类
     
     
   ，有constructor 

   

   

、extends
     

     

    、super   




   




   

，本质上是语法糖 



 



 



，（对语言的功能并没有影响            ，但是更方便程序员使用）



  




  




 。

class Artist { constructor(name) { this.name = name; } perform() { return this.name + " performs "; } } class Singer extends Artist { constructor(name, song) { super.constructor(name); this.song = song; } perform() { return super.perform() + "[" + this.song + "]"; } } let james = new Singer("Etta James", "At last"); james instanceof Artist; // true james instanceof Singer; // true james.perform(); // "Etta James performs [At last]"

class 类的继承 ES6 中不再像 ES5 一样使用原型链实现继承
    




    




    
，而是引入 Class 这个概念  


  


  
。

◼️ ES6 所写的类相比于 ES5 的优点：

区别于函数














，更加专业化（类似于 JAVA 中的类）;

写法更加简便            ，更加容易实现类的继承;

9. Map + Set + WeakMap + WeakSet

四种集合类型
     



     



     ，WeakMap  




  




  


、WeakSet作为属性键的对象如果没有别的变量在引用它们














，则会被回收释放掉    
     
     
。

// Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true; // Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34; //WeakMap var wm = new WeakMap(); wm.set(s, { extra: 42 }); wm.size === undefined // Weak Sets var ws = new WeakSet(); ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

10. Math + Number + String + Array + Object APIs

一些新的API

Number.EPSILON Number.isInteger(Infinity) // false Number.isNaN("NaN") // false Math.acosh(3) // 1.762747174039086 Math.hypot(3, 4) // 5 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2 "abcde".includes("cd") // true "abc".repeat(3) // "abcabcabc" Array.from(document.querySelectorAll(*)) // Returns a real Array Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior [0, 0, 0].fill(7, 1) // [0,7,7] [1, 2, 3].find(x => x == 3) // 3 [1, 2, 3].findIndex(x => x == 2) // 1 [1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2] ["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"] ["a", "b", "c"].keys() // iterator 0, 1, 2 ["a", "b", "c"].values() // iterator "a", "b", "c" Object.assign(Point, { origin: new Point(0,0) })

11. proxies：使用代理（Proxy）监听对象的操作 
    
    
，然后可以做一些相应事情




   




   




 。

var target = {}; var handler = { get: function (receiver, name) { return `Hello, ${name}!`; } }; var p = new Proxy(target, handler); p.world === Hello, world!;

可监听的操作： get 


  


  


、set
     
     
   、has   




   




   

、deleteProperty 



 



 



、apply            、construct
    




    




    
、getOwnPropertyDescriptor














、defineProperty            、getPrototypeOf
     



     



     、setPrototypeOf














、enumerate 
    
    
、ownKeys
     


     


     、preventExtensions 




 




 



、isExtensible 



 



 
。 

12. Symbol： 唯一命名

Symbol是一种基本类型               。Symbol 通过调用symbol函数产生
     


     


     ，它接收一个可选的名字参数 




 




 



，该函数返回的symbol是唯一的




    




    




 。

var key = Symbol("key"); var key2 = Symbol("key"); key == key2 //false

13. Promises：处理异步操作的对象 

   

   

，使用了Promise对象之后可以用一种链式调用的方式来组织代码
     

     

    ，让代码更加直观（类似jQuery的deferred 对象）











。

function fakeAjax(url) { return new Promise(function (resolve, reject) { // setTimeouts are for effect, typically we would handle XHR if (!url) { return setTimeout(reject, 1000); } return setTimeout(resolve, 1000); }); } // no url, promise rejected fakeAjax().then(function () { console.log(success); },function () { console.log(fail); });

Promise 对象Promise 是异步编程的一种解决方案  




  




  


，将异步操作以同步操作的流程表达出来 


  


  


，避免了层层嵌套的回调函数
     
     
   ，要是为了解决异步处理回调地狱(也就是循环嵌套的问题)而产生的               。

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的

回调 



     



     



 。在回调中执行一些操作（例如异步）   




   




   

，如果一切都正常 



 



 



，则调用 resolve            ，否则调用

reject











。

对于已经实例化过的 Promise 对象可以调用 Promise.then() 方法
    




    




    
，传递 resolve 和

reject方法作为回调    
    
    
。

then()方法接收两个参数：onResolve 和 onReject














，分别代表当前Promise 对象在成功或失败时Promise 的 3 种状态：Fulfilled 为成功的状态            ，Rejected 为失败的状态
     



     



     ，Pending 既不是 Fulfilld 也不是Rejected 的状态














，可以理解为 Promise 对象实例创建时候的初始状态

14. import 和 export

ES6 标准中 
    
    
，JavaScript 原生支持模块(module)  


     


     


。这种将 JS 代码分割成不同功能的小块进

行模块化
     


     


     ，将不同功能的代码分别写在不同文件中 




 




 



，各模块只需导出公共接口部分 

   

   

，然后通

过模块的导入的方式可以在其他地方使用


 




 




 。

export 用于对外输出本模块（一个文件可以理解为一个模块）变量的接口   

   

   
。

import 用于在一个模块中加载另一个含有 export 接口的模块   

     

     

。

import 和 export 命令只能在模块的顶部
     

     

    ，不能在代码块之中



  




  




 。

15 

   

   

、Set 数据结构

Set是 ES6 提供的一种新的数据结构  




  




  


，类似于数组  


  


  
。所有的数据都是唯一的 


  


  


，没有重复的值    
     
     
。它本身是一个构造函数




   




   




 。由于成员都是唯一的
     
     
   ，不重复的特点   




   




   

，因此可以通过Set轻松实现对数组的 去重
     

     

    、交  




  




  


、并 


  


  


、补等操作 



 



 
。

◼️ Set 属性和方法

 

Size（） 数据的长度

Add（） 添加某个值 



 



 



，返回 Set 结构本身               。

Delete（） 删除某个值            ，返回一个布尔值
    




    




    
，表示删除是否成功




    




    




 。

Has（） 查找某条数据














，返回一个布尔值











。

Clear（）清除所有成员            ，没有返回值               。

interface Set { add(value): this; clear(): void; delete(value): boolean; forEach(callbackfn: (value, value2, set: Set) => void, thisArg?: any): void; has(value): boolean; readonly size: number; }

◼️ Set主要应用场景：数组去重
     
     
   、交集   




   




   

、并集 



 



 



、补集 



     



     



 。

 

根据Set的特点
     



     



     ，有很多场景可以通过Set快速实现











。JavaScript Set 实用场景(数组: 去重            、交
    




    




    
、并














、补)

let arr1 = [1, 2, 3, 4, 5, 6, 7, 4, 3, 2, 1]; // 去重 let newArr = [...new Set(arr1)]; console.log(arr1); // [LOG]: [ 1, 2, 3, 4, 5, 6, 7, 4, 3, 2, 1 ] console.log(newArr); // [LOG]: [ 1, 2, 3, 4, 5, 6, 7 ] let arr1 = [1, 2, 3, 4, 5]; let arr2 = [3, 4, 5, 6, 7]; let arr1_set = new Set(arr1); let arr2_set = new Set(arr2); // 交集 let intersectionArr = [...arr1_set].filter(val => arr2_set.has(val)); console.log(intersectionArr ); // [LOG]: [ 3, 4, 5] // 并集 let unionArr = [...new Set([...arr1, ...arr2])]; console.log(unionArr ); // [LOG]: [ 1, 2, 3, 4, 5, 6, 7 ] // 补集 let complementaryArr = [...arr1_set].filter(val => !arr2_set.has(val)); console.log(complementaryArr ); // [LOG]: [ 1, 2 ]

15.  Modules

ES6的内置模块功能借鉴了CommonJS和AMD各自的优点：

(1) 具有CommonJS的精简语法            、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点    
    
    
。

(2) 类似AMD














，支持异步加载和可配置的模块加载  


     


     


。

// lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.141593; // app.js import * as math from "lib/math"; alert("2π = " + math.sum(math.pi, math.pi)); // otherApp.js import {sum, pi} from "lib/math"; alert("2π = " + sum(pi, pi)); Module Loaders: // Dynamic loading – ‘System’ is default loader System.import(lib/math).then(function(m) { alert("2π = " + m.sum(m.pi, m.pi)); }); // Directly manipulate module cache System.get(jquery); System.set(jquery, Module({$: $})); // WARNING: not yet finalized

最后 
    
    
，我们来看看ES5和ES6的区别：

1. 系统库的引入

ES5：需要先使用require导入React包
     


     


     ，成为对象 




 




 



，再去进行真正引用；

ES6：可以使用import方法来直接实现系统库引用 

   

   

，不需要额外制作一个类库对象

2. 导出及引用单个类

ES5：要导出一个类给别的模块用
     

     

    ，一般通过module.exports来实现


 




 




 。引用时  




  




  


，则依然通过require方法来获取；

ES6：可以使用用export default来实现相同的功能 


  


  


，使用import方法来实现导入

3. 定义组件

ES5：组件类的定义可以通过React.createClass实现

ES6：让组件类去继承React.Component类就可以了

4. 组件内部定义方法

ES5：采用的是 ###:function()的形式
     
     
   ，方法大括号末尾需要添加逗号；

ES6：省略了【: function】这一段   




   




   

，并且结尾不需要加逗号来实现分隔   

   

   
。

5. 定义组件的属性类型和默认属性

ES5：属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现(这两个方法应该是固定名称的)；

ES6：统一使用static成员来实现   

     

     

。

6. 初始化STATE

ES5：初始化state的方法是固定的getInitialState；

ES6：第一种 



 



 



，直接构造state函数；第二种            ，相当于OC中的方法重写
    




    




    
，重写constructor方法