ES6核心详解
本章你将学习到如下知识点
ES6模块
ES6关键字
ES6模块
相信学习过前端的同学们都听说过前端的模块懒加载和前置加载，其最早来源于前端模块加载器RequireJS和SeaJS中的AMD和CMD的概念。
其中AMD规定和CMD对模块的规定如下图
为什么要扯这么远呢？ 因为我们接下来学习的ES6模块是加载前置的，让然不一定要提前声明，而是你声明之后，最终会变编译到代码的最上方。
好了，我们接下来看看应该怎么使用吧
默认
导入: import num from './文件';
导出:export default num变量或常量;
声明的导入导出
导入:import { name,age } from './文件';
导出:export var age = 18; export {name};
全部导入
import * as 变量名 from './文件'
下面我们看看代码和预测执行效果
最终运行一下程序（未来我们在项目中可以看到这一节的测试效果）
模块最后:我们注意一下,import和export关键字只能写在顶级作用域中，而不能写在if{} 之类这样的代码块中，至于原因嘛... 嘿嘿，就是前面讲的加载前置！！！！
关键字
let和const都是块级作用域，它们的出现最显著的解决了我们变量类型提升的问题，我们来看看他能解决什么问题？
点击1，当我们点击后:
天哪！那么这个原因，主要有2点：
i变量在全局只有一个，不论哪里都能访问，for循环执行后，其值确实为5
onclick代码赋值的是一个函数,而该函数在循环内并为执行，只有当被点击的时候才执行，最终去拿全局的i
那么我们想要解决这个问题，核心点就在于一个li的点击都对应不同的变量就好了，于是let关键字让我们在同样的for循环中，有了5个变量的存在
总结一下: let关键字用于变量声明，相对var来说，不会提升成全局变量
if(true) {
leta=1;// 这个a在外部无法使用
}
const 也是块级作用域，用于值不会改变的量（常量）的声明
// 变量
letnum=1;
// 常量
constPI=3.1415926;
箭头函数
相对function/ES6函数简写， 箭头函数的this会向上级函数绑定
同时arguments也向上绑定
varobj={
init:function() {
varxx=()=>{
// this是init的this，也就是obj对象
}
}
}
写法非常爽: （左边）一个参数小括号可省，（右边）一行代码大括号可省
箭头函数本身没有this,会向上级function绑定this,其不可以做为构造函数的使用
箭头函数写法:
没有参数：()=>{}
一行代码做返回值: () => 'abc'
多个参数: (n,m) => n + m
一个参数: n => n
相对复杂一点点的写法:
ES6函数简写
用在对象的属性中
fn3() {//干掉了:function,用在对象的属性中
console.log(this);
},
讲到这里ES6函数简写和箭头函数的差别就在于是否向上绑定this了
解构赋值
解构赋值方便了生活啊。。请看
letobj={a:1,b:2,c:3};
// 我们需要只获取其中a和b属性
leta=obj.a;letb=obj.b;
// 也可以这样
let{a,b}=obj;// 只获取其中部分key值
let[a,,,d]=[1,2,3,4];// a:1 d:4
// 还可以用别名
let{name:myName}={name:'jack'};
console.log(myName);// 'jack'
三点运算符
说到...很无语？ 不是！ 在前端中也有这样的操作符，名称也挺多，我们拨开云雾，直接分类！
你听过展开运算符，一个字形容它：开
varobj={a:1,b:2};
varnewObj={...obj,c:3};// { a:1,b:2,a:3 };
vararr=[1,2,3];
[4,5,...arr];/// [4,5,1,2,3];
需要注意的是展开运算符属于浅拷贝，即:当展开时某属性是对象，会将对象引用赋值给新对象，而不是重新创建一个对象，差别在于修改该对象的属性则多处影响
好！接着再来一个"收"！ 该运算符叫做可变参数，主要是为了解决函数调用时，参数数量未知的问题
functionadd(n1,n2,n3,n4) {// 如果还有n5、n6呢?
}
functioncalc(operator,...nums) {
// operator 可以是+-*/
letresult='';
for(leti=0;i<nums.length;i++) {
if(i===nums.length-1)
result+=nums[i];
else
result+=nums[i]+operator;
}
returneval(result);
}
calc('+',1,2,3,4,5,66,7,8);// 96
以上需求是计算器的简单实现，重点在于我们看到...nums它变成了一个数组，于此同时...nums在还有其他参数朋友的时候，只能放在最后的地方。
写再最后**
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：??947552909.欢迎大家进群交流讨论，学习交流，共同进步。
有些人对学习充满激情，但是缺少方向，而在浩瀚的知识海洋中看似无边无际，此时最重要的是要知道哪些技术需要重点掌握，避免做无用功，将有限的精力及状态发挥到最大化。
最后祝福所有遇到瓶颈且不知道怎么办的前端程序员们，祝大家在往后的工作与面试中一切顺利。
