ES6新特性超快速入门（大量实例）
ES新特性超快速入门
举例说明为主，基本概念叙述不多，建议配着相关概念文字理解。主要写了一些最常用的特性方法。
let和const
两者都是用来定义变量的，与var相比，let和const没有了变量提升，不能声明但不定义，产生了块级作用域的概念
if(true){
var i = 1;
}
console.log(i); //结果为1
if(true){
let i = 1;
}
console.log(i); //直接报错，显示i is not defined
并且const定义的值不可修改，let可以正常修改赋值
const a = 1;
const a = 2; //直接报错，显示a已被定义（Identifier 'a' has already been declared）
值得注意的一点，const写死的其实是值所在的地址，而不是具体的数值。例如：
const a = [1,2];
a.push(3);
console.log(a); //输出[1, 2, 3]
但是直接令 a = [1, 2, 3] 就会报错。
数组解构
通常我们取数组值用下列传统方法
function arr(){
return [1,2,3]
}
var temp = arr();
let t1 = temp[0];
t2 = temp[1];
t3 = temp[2];
console.log(t1, t2, t3) //1, 2, 3
利用数组解构方法更简单：
function arr(){
return [1,2,3]
}
let [t1, t2, t3] = arr();
console.log(t1,t2,t3); // 1, 2, 3
对象解构
{
function obj() {
return {t1:'1',t2:'2',t3:'3'}
}
let tempobj = obj();
let a = tempobj.t1,
b = tempobj.t2,
c = tempobj.t3;
console.log(a, b, c); //1, 2, 3
}
利用对象解构的话，要注意一点，不能使用自定义变量名（例如上面的a, b, c），要与对象中的键值对中的键保持一致
function obj() {
return {t1:'1',t2:'2',t3:'3'}
}
let {t1, t2, t3} = obj();
console.log(t1, t2, t3); //1, 2, 3
模板字符串（超级好用）
如何打模板字符串：数字键1的左边、esc键的下边、table键上边的那个键就是了
下面用传统字符串和模板字符串写一个例子：
let a = '稀饭',
b = '油条';
let str1 = '今天早上吃了'+ a +'和' + b;
let str2 = `今天早上吃了${a}和${b}`;
console.log(str1); //今天早上吃了稀饭和油条
console.log(str2); //今天早上吃了稀饭和油条
可以看出模板字符串的对于引用变量要方便很多，在没有模板字符串的时候，js里写的全是引引加加让人头疼。并且模板字符串也允许中间回车换行可以正常输出。后台早就有这种操作了，但js在ES6中才添加进来。
接下来顺便介绍几种新的字符串操作：字符串开头结尾中间包含的判断。
console.log(str2.startsWith('今天')); //true 检测字符串开头
console.log(str2.startsWith('明天')); //false
console.log(str2.endsWith('油条')); //true 检测字符串结尾
console.log(str2.endsWith('稀饭')); //false
console.log(str2.includes('吃了')); //true 检测字符串中间
console.log(str2.includes('下午')); //false
支持函数默认参数
function func(a=1, b=2){
return a+b;
}
console.log(func()); //3 没有输入时按照默认参数来
console.log(func(2,4)); //6 有输入时会覆盖默认
展开运算符（超级超级好用）
利用三个点可以只把数据提取出来，可以用来合并数组：
let arr1 = [1, 2, 3],
arr2 = [4, 5, 6];
console.log(...arr1); //1 2 3
console.log(...arr2); //4 5 6
console.log([...arr1,...arr2]); //[1, 2, 3, 4, 5, 6]
当…作为参数时是叫做剩余运算符，接受“纯数据”可以转换成数组
function func(...arg) {
console.log(arg);
}
func(1, 3, 5, 6, 3, 8, 33, 66); //[1, 3, 5, 6, 3, 8, 33, 66]
for of 循环
遍历数组时，for of可以直接拿到值，for in要考索引才能拿到，当处理对象时只能用for in才行
let arr = [10, 20, 30]；
let obj = {
name:'zhangsan'
}
for (const key in obj) {
console.log(key, obj[key]); //name zhangsan
}
for (const val of arr) {
console.log(val); //10 20 30
}
for (const key in arr) {
console.log(key); //0 1 2
}
箭头函数
利用箭头函数简化代码
我们利用传统方法进行数组平方操作
let arr = [10, 20, 30];
let newArr = arr.map(function(value, index){
return value*value;
})
console.log(newArr); //[100, 400, 900]
上面代码和下面用箭头函数是等价的
let arr = [10, 20, 30];
let newArr = arr.map(value => value*value)
console.log(newArr);
类定义class
class user{
constructor(name, age){ //构造函数，类必须的部件
this.name = name;
this.age = age;
}
show(){ //可以在类中添加函数，实例可以直接调用
console.log(`用户姓名${this.name},年龄${this.age}`);
}
}
let u = new user('张三',20); //new一个实例函数
u.show(); //用户姓名张三,年龄20
set
//Set 允许我们存储任何类型的唯一值，常用来去重
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6, 1, 2, 3];
let newArr = new Set([...arr1,...arr2]);
console.log(newArr); //[1, 2, 3, 4, 5, 6]
Map
// Map 以键值对形式存储
let myMap = new Map();
myMap.set('a','1');
let keyObj = {};
myMap.set(keyObj,'我的key是对象');
let keyFunc = function () {};
myMap.set(keyFunc, '我的key是函数');
console.log(myMap); //{"a" => "1", {…} => "我的key是对象", ƒ => "我的key是函数"}
console.log(myMap.get(keyObj)); //我的key是对象
console.log(myMap.get({})); //undefined 直接传相同的值是不行的因为引用的是地址，用空{}的话地址改变了
模块导入导出
//主文件
import abc from '引用文件路径' //利用import从引用文件中导入，abc是自定义的变量名，用于调用引用文件中的变量和方法
console.log(abc.a, abc.b, abc.c); //吃饭 睡觉 打豆豆
let a = '吃饭',
b = '睡觉',
c = '打豆豆';
export default {a,b,c}; //export是导出，default是参数，加上这个就可以在主文件中定义变量。（例如上面主文件中的abc）
其他常用资源
上述是对常见ES6的特性进行实例讲解，如果想对ES6进行进一步的深入学习，我在这里推荐一个很不错的仓库，里面有大量实例和详细讲解。
https://github,com/lukehoban/es6features
另外虽然大部分主流浏览器都已经支持ES6语法，但是仍有一些不兼容。这里推荐一个转换网站，可以将你输入的ES6语法自动转换为ES5。
https://babeljs.io/learn-es2015