es6是什么？与JavaScript的关系以及重点语法应用

ES6就是ECMAScript6是新版本JavaScript语言的标准。虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法，该标准仍在更新中，但目前部门网站都指出ES6的语法。目前ES6也是使用最多的最新的javaScript语言标准。

ES6与JS

一、ECMAScript 和 JavaScript 到底是什么关系？

1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

二、ES6常用语法举例

声明变量：

新增let/const关键字，用于变量声明，在var的基础上，新增块级作用域概念。 （原来的var定义变量，只有全局作用域与函数内部局部作用域之分）

使用let定义变量时，有以下优点：

1.没有预解析，不存在变量提升，必须先定义，再使用；

2.同一作用域内不能重复定义变量；

（个人认为语法更加严谨，不会造成变量污染）

const特性和let相似，不过用于定义常量。

解构赋值：

数组解构赋值：

let [a,[b,c]] = [2,[3,4]];//注意解构赋值时，左右两边格式必须保持相同

console.log(a,b,c);

对象解构赋值：

let json={

    name:"李浩",

    age:21,

    job:"前端"

};

let{name:a,age,job}=json;//可以用":"给解构赋值变量一个别称，方便使用

console.log(a,age,job);

赋值时还可以给默认值

let[a,b,c="暂无数据"] = [12,10];

除此之外，解构赋值还可以用于函数中，比如函数返回值解构和函数传参解构，在实际应用中非常实用。

字符串模板

1.字符串连接

ES6中字符串连接可以使用``引用字符串，并且引用变量的方式也发生了改变，且允许字符串随意换行

`xxxxxxx${a}xxxxxxxxx`

2.字符串查找

str.includes()，返回true/false

str.indexOf()，返回索引，没有则返回-1

3.检测是否以xx开头、结尾

str.startsWith()，(检测协议http)

str.endsWith()，(检测文件格式)

4.重复

str.repeat()，(字符串重复)

函数

1.函数默认参数

fn(a=12,b=15){  //在形参中给默认值，并不影响后续运算，a和b还可以赋值

}

2.函数的参数是默认被定义过的，不可以再使用let/const定义

fn(a,b){

    let a=12;  //错误示范：重复定义

}

3.扩展运算符...

常用于数组操作：

...1,2,3,4,5=>[1,2,3,4,5]

...[1,2,3,4,5]=>1,2,3,4,5

[1,2,3,4,5]=>[a,b,...c] //剩余运算

箭头函数

fn()=>{

};

箭头函数的好处：

1.箭头函数中的this指的就是定义函数时所在的对象，而不再是运行函数时的对象；

2.箭头函数里不能使用arguments，作为替代可以使用扩展运算符...

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

数组

1.循环

先列举一些ES5中就存在的数组循环函数：

arr.forEach(function(value,index,arr){

});

arr.forEach()函数可用于数组循环，以一个回调函数作为参数，回调函数参数为数组每一项的值、索引、整个数组，下面几个函数也是如此；

arr.map()函数，参数同上，该函数非常常用，可以用于数据交互、映射，不同于arr.forEach()函数的是它有返回值，返回一个新数组。可以用于整理数据；

arr.filter()函数，参数同上，有返回值，用于筛选过滤，如果回调函数返回true，则留下；

arr.some()函数，参数同上，查找有无符合条件的项；

arr.every()函数，参数同上，判断是否全部符合条件；

下面这个是ES6新增：for...of循环

for(let val of arr){

}

for(let index of arr.keys()){

}

for(let item of arr.entries()){

}

2.数组的其余函数

arr.from():用于把类数组（一组元素、arguments）对象转化成数组；

arr.of():用于把一组元素转成数组；

arr.find():找出第一个符合条件的成员；

arr.findIndex():返回第一个符合条件成员的索引；

arr.includes():判断是否包含某元素；

三、ES6学习建议

就 ES6 本身来说，有很多内容是借鉴自其他语言。使用起来相对 ES5 会方便一些，而你在知乎看到的 demo 通常都是几个框架为主的，既然已经使用了新的框架知识，在这些 demo 中使用 ES6 也就很好解释了。

只看概念不实际应用的效果一般均不佳，所以最好是一边看这些资源，一边动手尝试，这样理解也会更快。浏览器不支持的部分先跳过，优先尝试直接支持的。后续再考虑配置 babel 并且补上不支持的部分。

您可能感兴趣的内容：

《Spring Cloud？小意思，读后面试官都不如你知道多》