前端学习记录笔记

ES6

2019-03-26  本文已影响0人  VictoriaZsj

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命令,为模块指定默认输出。

上一篇下一篇

猜你喜欢

热点阅读