ES6核心详解

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点：

1. i变量在全局只有一个，不论哪里都能访问，for循环执行后，其值确实为5
2. onclick代码赋值的是一个函数,而该函数在循环内并为执行，只有当被点击的时候才执行，最终去拿全局的i

那么我们想要解决这个问题，核心点就在于一个li的点击都对应不同的变量就好了，于是let关键字让我们在同样的for循环中，有了5个变量的存在

总结一下: let关键字用于变量声明，相对var来说，不会提升成全局变量

    if(true) {
        let a = 1;  // 这个a在外部无法使用
    }

• const 也是块级作用域，用于值不会改变的量（常量）的声明

// 变量
let num = 1;
// 常量
const PI = 3.1415926;

箭头函数

• 相对function/ES6函数简写， 箭头函数的this会向上级函数绑定

• 同时arguments也向上绑定

    var obj = {
        init:function() {
            var xx = () => {
    			// this是init的this，也就是obj对象
            }
        }
    }

• 写法非常爽: （左边）一个参数小括号可省，（右边）一行代码大括号可省

• 箭头函数本身没有this,会向上级function绑定this,其不可以做为构造函数的使用

箭头函数写法:

• 没有参数：()=>{}
• 一行代码做返回值: () => 'abc'
• 多个参数: (n,m) => n + m
• 一个参数: n => n
• 相对复杂一点点的写法:

ES6函数简写

• 用在对象的属性中

fn3() { //干掉了:function,用在对象的属性中
				console.log(this);
},

讲到这里ES6函数简写和箭头函数的差别就在于是否向上绑定this了

解构赋值

解构赋值方便了生活啊。。请看

• let obj = { a:1,b:2,c:3};
  // 我们需要只获取其中a和b属性
  let a = obj.a; let b = 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'
  

三点运算符

说到…很无语？ 不是！ 在前端中也有这样的操作符，名称也挺多，我们拨开云雾，直接分类！

你听过展开运算符，一个字形容它：开

var obj = { a:1,b:2 };
var newObj = { ...obj,c:3}; // { a:1,b:2,a:3 };
var arr = [1,2,3];
[4,5,...arr];  /// [4,5,1,2,3];

需要注意的是展开运算符属于浅拷贝，即:当展开时某属性是对象，会将对象引用赋值给新对象，而不是重新创建一个对象，差别在于修改该对象的属性则多处影响

好！接着再来一个"收"！ 该运算符叫做可变参数，主要是为了解决函数调用时，参数数量未知的问题

function add (n1,n2,n3,n4) { // 如果还有n5、n6呢?
}
function calc (operator,...nums) {
    // operator 可以是+-*/
    let result = '';
    for(let i = 0; i < nums.length; i ++) {
        if (i === nums.length - 1)
          	result += nums[i];
        else
        	result += nums[i] + operator;
    }
    return eval(result);
}
calc('+',1,2,3,4,5,66,7,8);  // 96

以上需求是计算器的简单实现，重点在于我们看到…nums它变成了一个数组，于此同时…nums在还有其他参数朋友的时候，只能放在最后的地方。

写再最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：??1018453829.欢迎大家进群交流讨论，学习交流，共同进步。

有些人对学习充满激情，但是缺少方向，而在浩瀚的知识海洋中看似无边无际，此时最重要的是要知道哪些技术需要重点掌握，避免做无用功，将有限的精力及状态发挥到最大化。

最后祝福所有遇到瓶颈且不知道怎么办的前端程序员们，祝大家在往后的工作与面试中一切顺利。