ECMAScript6
来源:互联网 发布:sql语句select from 编辑:程序博客网 时间:2024/05/16 17:12
参考: ECMAScript6 入门
一、import和export
(1)、概念
- export:用于输出本模块变量的接口
- import:用于一个模块加载另一个含有export接口的模块。
(2)、实例1
// a.jsvar sex="boy";var echo=function(value){ console.log(value)}export {sex,echo} // b.jsimport {sex,echo} from "./a.js" console.log(sex) // boyecho(sex) // boy
- 通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
- 不能写成export sex这样的方式,如果这样就相当于export “boy”,外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
- 通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
(3)、实例2 export default
//a.jsvar sex="boy";export default sex(sex不能加大括号)// b.jsimport any from "./a.js"import any12 from "./a.js" console.log(any,any12) // boy,boy
- b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
- 本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
- 一条import可以同时导入默认方法和其它变量:import defaultMethod, { otherMethod } from ‘xxx.js’;
- 一个模块只能使用 export default 一次
二、let、const和块级作用域
- var可以变量提升,let不可以。
- let不允许在相同作用域重复声明,var可以。
- let的作用域是块,而var的作用域是函数。
- let声明变量,值可以改变,const声明变量值不可变,其它属性const和let一致。
实例1:let块级作用域
{ let a = 1; var b = 1;}a; // Uncaught ReferenceError: a is not defined(…)b; // 1
实例2:let不会发生“变量提升”现象
function test(){ console.log(a); console.log(b); var a = 1; let b = 1;}test(); // a:undefined;b:Uncaught ReferenceError: b is not defined(…)
三、箭头函数
(1)、语法
([param] [, param]) => { statements}param => expression
param 是参数,根据参数个数不同,分这几种情况:
- () => { … } // 零个参数用 () 表示;
- x => { … } // 一个参数可以省略 ();
- (x, y) => { … } // 多参数不能省略 ();
(2)、示例1 :单个参数
// ES5var selected = allJobs.filter(function (job) { return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected());
(3)、示例2 :多个参数
// ES5var total = values.reduce(function (a, b) { return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0);
四、Use Strict严格模式
(1)概述
除了正常运行模式,ES5添加了第二种运行模式:”严格模式”(strict mode)
(2) 进入标志
“use strict”;
(3)如何调用
针对单个脚本
< script>
“use strict”;
console.log(“这是严格模式。”);
针对单个函数
function strict(){
“use strict”;
return “这是严格模式。”;
}
function notStrict() {
return “这是正常模式。”;
}
(4)语法与行为改变
- 严格模式禁止一个变量没有声明就赋值
- 禁止this关键字指向全局对象
- 严格模式下无法删除变量,只有configurable设置为true的对象属性,才能被删除。
- 正常模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。
- 函数不能有重名的参数
五、class
(1)、基本语法
ES6引入了Class(类)这个概念,可以只看做一个语法糖。
- constructor是构造方法。
- 类的数据类型就是函数,类本身就指向构造函数。
实例1:
class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}
六、super关键字
(1)、语法
super关键字用于访问父对象上的函数
- super([arguments]); //访问父对象上的构造函数
- super.functionOnParent([arguments]); //访问父对象上的方法
- super(props)的目的:在constructor中可以使用this.props
实例1:
class Person { constructor (name) { this.name = name; }}class Student extends Person { constructor (name, age) { super(); // 用在构造函数中,必须在使用this之前调用 this.age = age; }}
- super()调用会生成一个空对象,作为context来调用父类的constructor,返回this对象,作为子类constructor的context继续调用构造函数。
- 在子类的constructor中必须先调用super才能引用this
实例2:调用父类的静态函数
class Human { constructor() {} static ping() { return 'ping'; }}class Computer extends Human { constructor() {} static pingpong() { return super.ping() + ' pong'; } // 只有在子类的静态函数中才能调用父类的静态函数(babel环境测试,按理说,在实例函数中应该也可以调用,不过实际测试环境中报错)}Computer.pingpong(); // 'ping pong'
七、扩展运算符
扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值。
var foo = function(a, b, c) { console.log(a); console.log(b); console.log(c);}var arr = [1, 2, 3];//传统写法foo(arr[0], arr[1], arr[2]);//使用扩展运算符foo(...arr);//1//2//3
阅读全文
1 0
- ECMAScript6
- ECMAScript6
- ECMAScript6
- ECMAScript6
- ECMAScript6
- ECMAScript6
- ECMAScript6
- ECMAScript6
- ECMAScript6笔记:ECMAScript6简介
- ECMAscript6 set
- ECMAscript6 map
- ECMAScript6 Promise
- ECMAScript6 async
- ECMAScript6/ES6
- ECMAScript6 Promise
- ECMAScript6 规范
- ECMAScript6 规范
- ECMAScript6入门
- Java垃圾回收机制
- maven基础配置
- VMware vSphere Web Services SDK编程指南(十一)- 11.1 vSphere Networks
- SQl数据
- Elasticsearch之深入映射。
- ECMAScript6
- 特征选择
- 前端之页面性能优化
- 【2017.10.4】怪自己年纪大吗
- 一个简单的shell
- HDOJ2061Treasure the new start, freshmen!
- C语言 system设置背景色
- Gin框架初识
- 解决refreshing gradle project 和Building gradle project info 一直卡住\速度慢