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) {
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.欢迎大家进群交流讨论,学习交流,共同进步。
有些人对学习充满激情,但是缺少方向,而在浩瀚的知识海洋中看似无边无际,此时最重要的是要知道哪些技术需要重点掌握,避免做无用功,将有限的精力及状态发挥到最大化。
最后祝福所有遇到瓶颈且不知道怎么办的前端程序员们,祝大家在往后的工作与面试中一切顺利。