ES6
https://www.cnblogs.com/diligenceday/p/5503777.html
1.ES6 允许为函数的参数设置默认值
2.参数默认值可以与解构赋值的默认值,结合起来使用
// 报错
let getTempItem = id => { id : id , name : "Temp" };
// 不报错
let getTemp Item = id => ( {id : id , name : "Temp" } ); 加个括号
3.箭头函数作用域内没有 this,普通function函数和箭头函数的行为有一个微妙的区别,箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。
{...
addAll : functionaddAll (pieces)
{ _. each(pieces,piece => this . add(piece)) ;},
...}
addAll方法从它的调用者处获取了this值,内部函数是一个箭头函数,所以它继承了外围作用域的this值。
this对象的指向是可变的,箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。 除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments、super、new.target。
4. ES6 模块是编译时就完成模块加载,使得静态分析成为可能
ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
export 命令
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是使用export命令输出变量的方式:
//方式一
export let name = '张三';
//方式二(推荐)可以一起在模块结束位置输出
let age = 12;
let height = 14;
//导出多个数据,单个数据也一样。
export {age,height};
//export age;或者export 12;都是错误的写法
//方式三(输出函数)
//1 export let reduce1 = function reduce1(){
console.log('reduce1函数减少');
};
export let add1 = ()=>{
console.log('add1函数增加');
};
//2 let reduce2 =function reduce2(){
console.log('reduce2函数减少');
};
export {reduce2};
function reduce2k(){
console.log('reduce2k函数减少');
};
export {reduce2k};
let add2 = ()=>{
console.log('add2函数增加');
};
export {add2};
//3 export function reduce3(){
console.log('reduce3函数减少');
};
export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
import 命令
使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。
import {age,height} from './Modules';
import {reduce1,reduce2,reduce2k,reduce3,add1,add2} from './Modules';
reduce1();
reduce2();
reduce2k();
reduce3();
add1();
add2();
export和import命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错。这是因为处于条件代码块之中,就没法做静态优化了,违背了ES6模块的设计初衷。
export default 命令
使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。