es5和es6指的是什么(es5,es6,开发技术)

es5全称“ECMAScript 5”，是ECMAScript标准的第5版，它通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化；ES5还引入了一个语法的严格变种，被称为”严格模式”。es6全称ECMAScript6，是于2015年6月正式发布的JS语言的标准；它的目标是使得JS语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

es全称“ECMAScript”

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。ECMAScript最先被设计成一种Web脚本语言，用来支持Web页面的动态表现以及为基于Web的客户机—服务器架构提供服务器端的计算能力。但作为一种脚本语言， ECMAScript具备同其他脚本语言一样的性质，即“用来操纵、定制一个已存在系统所提供的功能，以及对其进行自动化”。

es5是什么

es5全称“ECMAScript 5”，也被称为ECMAScript2009，是ECMAScript标准的第5版，与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ES5还引入了一个语法的严格变种，被称为”严格模式(strict mode)”。

es5的新功能：

这些是 2009 年发布的新功能：

The "use strict" Directive

String.trim()

Array.isArray()

Array.forEach()

Array.map()

Array.filter()

Array.reduce()

Array.reduceRight()

Array.every()

Array.some()

Array.indexOf()

Array.lastIndexOf()

JSON.parse()

JSON.stringify()

Date.now()

Property Getters and Setters

New Object Property Methods

ES5的严格模式 'use strict'

es5是什么

es6全称ECMAScript6（ECMAScript的第6个版本），是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6是JavaScript语言的主要增强，允许我们编写程序。ES6适用于复杂的应用程序。尽管ES5和ES6在本质上有一些相似之处，但它们之间也有许多不同之处。

es5和es6的区别

ES5和ES6之间的比较列表如下：

代码转换

到目前为止，还没有完全支持ES6功能的浏览器。 但是，我们可以使用转译将ES6代码转换为ES5代码。

有两个主要的编译器Babel和Traceur，用于在构建过程中将ES6代码转换为ES5代码。

扩展运算符（…）

它在ES6中引入，使合并数组和对象变得容易。

ES6常用特性：

（1）基本用法

ES6 新增了let命令，用来声明变量。类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{

（2）let在for循环中使用

这个例子中，i 由 var 声明，在全局范围有效，a 的所有组员里面的 i 都是指向同一个 i，导致所有组员运行输出的都是最后一轮的 i 的值。

这个例子中， i 由 let 声明，当前的 i 只在本轮循环有效，所有每次循环的 i 其实都是一个新的变量。

Tips： 每轮循环的 i 都是重新声明的，JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的 i 时，就在上一轮循环的基础上进行计算。

（3）for循环的特别之处

在 for 循环中，设置循环变量的那部分是一个父作用域，而循环内部是一个单独的子作用域。

（4）不能重复声明

let 不允许在相同作用域内，重复声明同一个变量。

（5）不存在变量提升

var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined。 let 命令改变了语法行为，它所声明的变量一定要在声明后使用，否则会报错。

（6）暂时性死区

ES6规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前使用这些变量，就会报错。这在语法上称为 “暂时性死区”。

Tips：“暂时性死区”的本质就是：只要一进入当前作用域，所要使用的变量就已经存在了，但不可获取（否则报错），只有等到声明的那一行代码出现，才可以获取和使用。

const命令的用法和let相似，最大不同点就是：const声明一个只读的常量。一旦声明，常量的值就不能改变。

Tips：这个不可改变的是指针，所以对于const声明的对象和数组还是可以改变的。如果真的想将对象冻结，应该使用Object.freeze方法。

ES5 只有两种声明变量的方法：var命令和function命令。

ES6 除了添加let和const命令，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

顶层对象：在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

ES6为了保持兼容性，规定：a. var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性。b. let，const，class 命令声明的全局变量，不属于顶层对象的属性。

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

（1）基本用法

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

如果解构不成功，变量的值就等于undefined。

上面一种情况是解构不成功的；另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

上面两个例子，都属于不完全解构，但是可以成功。

如果等号的右边不是数组，那么将会报错。

（2）默认值

解构赋值允许指定默认值。例如：

Tips：ES6 内部使用严格相等运算符(===)去判断一个位置是否有值。所以，只有当一个数组成员严格等于 undefined ，默认值才会生效。例如：

登录后复制

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

（1）基本用法

对象的解构与数组的解构，一个重要的不同点在于： 数组元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量名与属性同名，才能取到正确的值。

如果没有与变量名对应的属性名，导致取不到值，最后等于undefined。

如果变量名和属性名不一样，必须写才下面这样：

这实际上说明，对象的解构赋值是下面形式的简写：

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

（2）默认值

对象的解构也可以指定默认值。默认值生效的条件是对象的属性值严格等于 undefined。

Tips：如果要将一个已经声明的变量用于解构赋值，需要注意：

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

类似数组的对象都有一个 length 属性，因此还可以对这个属性解构赋值。

解构赋值时，如果等号右边是数值和布尔值，则会先转化为对象：

上面代码中，数值和布尔值的包装对象都有 toString 属性，因此变量 s 都可以取到值。

解构赋值的规则是：只要等号右边的值不是对象或数组，就先将其转化为对象。 由于 undefined 和 null 无法转化为对象，所以对他们进行解构赋值都会报错。

上面代码中，函数 add 的参数看似是一个数组，但在传入参数时，数组参数就解构为变量 x 和 y。对于函数内部代码来说，参数就是 x 和 y。

函数参数的解构也可以使用默认参数：

上例中，函数 move 的参数是一个对象，通过对这个对象进行解构，得到变量 x 和 y 的值。如果解构失败，x 和 y 等于默认值。

再看下面这种写法：

上面的代码是为函数 move 的参数指定默认值，而不是为变量 x 和 y 指定默认值。

（1）交换变量的值

（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里面返回。有了解构赋值，取出这些值就非常方便。

（3）函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来。

（4）提取JSON数据

（5）遍历Map解构

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

上面代码检查函数log的参数y有没有赋值，如果没有，则指定默认值为World。这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。就像上面代码的最后一行，参数y等于空字符，结果被改为默认值。

为了避免这个问题，通常需要先判断一下参数y是否被赋值，如果没有，再等于默认值。

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值生成。

如果函数foo调用时没提供参数，变量x和y就不会生成，从而报错。

通过提供函数参数的默认值，就可以避免这种情况。

下面是另一个解构赋值默认值的例子：

上面代码中，如果函数fetch的第二个参数是一个对象，就可以为它的三个属性设置默认值。

这种写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

上面代码中，函数fetch没有第二个参数时，函数参数的默认值就会生效，然后才是解构赋值的默认值生效，变量method才会取到默认值GET。

因此，与解构赋值默认值结合使用时，切记，函数要定义默认参数，防止函数不传参时报错。

模板字符串是增强版的字符串，用反引号 (`) 标识。它可以当普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

Tips：
a. 如果在模板字符串中需要使用反引号，则前面需要使用反斜杠转义。
b. 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

(1) 在模板字符串中嵌入变量，需要将变量名写在 ${} 之中。
(2) 大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
(3) 模板字符串之中还能调用函数。
(4) 如果大括号中的值不是字符串，将按照一般的规则转为字符串。如： 如果大括号中是一个对象，将默认调用对象的 toString 方法。
(5) 如果模板字符串中的变量没有声明将会报错。
(6) 如果大括号内部是一个字符串，将原样输出。

ES6 允许使用 “箭头” (=>)定义函数。

=> 前面的部分是函数的参数，=> 后面的部分是函数的代码块。

（1）如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

（2）如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。

（3）由于大括号会被解释为代码块，所以如果箭头函数直接返回一个对象，就必须在对象外面加上括号，否则会报错。

（4）箭头函数内部，可以嵌套箭头函数

（1）简化代码

（2）简化回调函数

ES5中 this 的指向是可变的，但是箭头函数中 this 指向固定化。

this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数内部根本没有自己的this，导致内部的this 就是外层代码块的 this 。

箭头函数的this是比较难理解的，但只要能想象到他是如何从ES5转化来的，就可以完全理解它的作用对象。 箭头函数转成 ES5 的代码如下：

Tips：

(1) 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
(2) 不可以当构造函数，即不可以使用 new 命令，因为它没有 this，否则会抛出一个错误。
(3) 箭头函数没有自己的 this，所以不能使用 call()、apply()、bind() 这些方法去改变 this 指向。
(4) 不可以使用arguments 对象，该对象在函数体内不存在。如果要用，可以使用rest参数代替。

（1）基本用法

　　扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

　　该运算符主要用于函数调用。扩展运算符与正常的函数参数可以结合使用，非常灵活。function push(array, ...items) {

如果扩展运算符后面是一个空数组，则不产生任何效果。 [...[], 1] // [1]

注意，扩展运算符如果放在括号中，JavaScript 引擎就会认为这是函数调用，否则就会报错。(...[1,2])

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

3、扩展运算符引用

（1）复制数组

数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针（浅拷贝），而不是克隆一个全新的数组。

如何实现深拷贝呢？下面看看ES5和ES6的实现：

（2）合并数组

不过，这两种方法都是浅拷贝，使用的时候需要注意。如果修改了原数组的成员，会同步反映到新数组。

（3）与解构赋值结合

注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

（4）字符串

扩展运算符可以将字符串和函数参数arguments转成真正的数组

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值

属性简写：

方法简写：

CommonJS 模块输出一组变量，就非常合适使用简洁写法。

JavaScript 定义对象的属性，有两种方法。

上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内。

但是，如果使用字面量方式定义对象（使用大括号），在 ES5 中只能使用方法一（标识符）定义属性。

ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

表达式还可以用于定义方法名。比如我们熟悉的Vuex定义Mutation就是推荐这种方式：

扩展运算符（展开语法）：扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

扩展运算符可以应用于合并数组

构造函数方法：Array.from()

将伪数组或可遍历对象转换为真正的数组

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到返回undefined

实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

实例方法：includes()

判断某个数组是否包含给定的值，返回布尔值。

arr.splice(index,len,[item])

表示从数组中删除或者添加元素，返回新数组保存所有删除的元素
index表示要操作的索引位置，len表示要删除的个数，如果len的值为0表示不删除，item表示要添加的元素，可以是多个

arr.filter()

返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

String 的扩展方法

实例方法：repeat()

repeat方法表示将原字符串重复n次，返回一个新字符串

Set 数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构

Set函数可以接受一个数组作为参数，用来初始化。

实例方法

add(value)：添加某个值，返回 Set 结构本身

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

has(value)：返回一个布尔值，表示该值是否为 Set 的成员

clear()：清除所有成员，没有返回值

遍历

Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。