es6新增功能
声明命令
1
2
3
4
5
6
|
{ let a = 10; var b = 1; } console.log(b); // 1 console.log(a); // 报错a没有定义 |
1
2
3
4
|
for ( let i = 0; i < 10; i++) { // ... } console.log(i); // 报错i没有定义 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var a = []; for ( var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 var a = []; for ( let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 |
1
2
3
4
5
6
7
8
9
10
11
12
|
let a = 10; // 即使声明是var a = 10;后面一样报错 let a = 1; // 报错 function func(arg) { let arg; // 调用时报错 } function func(arg) { { let arg; // 不报错,因为对上一个arg来看在子模块中 } } |
1
2
3
4
5
6
7
8
9
10
11
|
let i = 123; console.log(i); for ( let i = 0; i < 2; i++,console.log(i)) { let i = 'abc' ; console.log(i); } // 123 // abc // 1 // abc // 2 |
1
2
|
typeof x; // 报错:同一块作用域在let x之前,x无法进行任何操作 let x; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function text1(){ let n = 5; //或var n = 5; if ( true ) { let n = 10; } console.log(n); // 5 } function text2(){ var n = 5; if ( true ) { var n = 10; } console.log(n); // 10 } function text3(){ let n = 5; if ( true ) { var n = 10; //报错,已经声明了n } } |
1
2
3
4
|
const PI = 3.1415; PI = 3; //报错,赋值给常量 const a; //报错,缺少初始化 |
1
2
3
4
|
const foo = {}; // const foo = []同理,可以正常使用push等功能 foo.prop = 123; // 为foo添加一个属性,可以成功 console.log(foo.prop); //123 foo = {}; // 将foo指向另一个对象,就会报错 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function Point(x, y) { this .x = x; this .y = y; } Point.prototype.toString = function () { return '(' + this .x + ', ' + this .y + ')' ; }; // 上面为原先写法,下面为ES6的Class写法 class Point { constructor(x, y) { // 构造方法,this关键字代表实例对象 this .x = x; this .y = y; } toString() { // 自定义方法,方法之间不需要逗号分隔,加了会报错 return '(' + this .x + ', ' + this .y + ')' ; } } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
class Point { constructor() { } toString() { } toValue() { } } console.log(Object.keys(Point.prototype)); // [] 不可枚举 console.log(Object.getOwnPropertyNames(Point.prototype)); // ["constructor", "toString", "toValue"] // 相当于 function Point() { } Point.prototype = { constructor() {}, toString() {}, toValue() {}, }; console.log(Object.keys(Point.prototype)); // ["constructor", "toString", "toValue"] |
1
2
3
4
5
|
let methodName = 'getArea' ; class Square { [methodName]() { } } |
1
2
3
4
5
6
7
8
|
const MyClass = class Me { // 如果类的内部没用到的话,可以省略Me getClassName() { return Me.name; } }; let inst = new MyClass(); console.log(inst.getClassName()) // Me Me.name // 报错,Me没有定义 |
1
2
3
4
5
6
7
8
|
class Foo { static classMethod() { return 'hello' ; } } Foo.classMethod() // 'hello' var foo = new Foo(); foo.classMethod() // 报错foo.classMethod不是一个函数(不存在该方法) |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
class Foo { static bar () { this .baz(); //等同于调用Foo.baz } static baz () { console.log( 'hello' ); } baz () { console.log( 'world' ); } } Foo.bar() // hello class Bar extends Foo { } Bar.classMethod() // hello |
1
2
3
4
5
6
7
8
9
10
|
// profile.js export var firstName = 'Michael' ; export function f() {}; export var year = 1958; //写法2,与上等同 var firstName = 'Michael' ; function f() {}; var y = 1958; export {firstName, f, y as year}; |
1
2
3
4
5
6
|
export var foo = 'bar' ; setTimeout(() => foo = 'baz' , 500); // 输出变量foo,值为bar,500毫秒之后变成baz function foo() { export default 'bar' // 语法错误 } |
1
2
3
4
5
6
|
import {firstName as name, f, year} from './profile.js' ; import * as p from './profile.js' ; function setName(element) { element.textContent = name + ' ' + year; // 值等同于p.firstName + ' ' + p.year; } |
1
2
3
4
5
6
7
8
9
10
11
12
|
import {a} from './xxx.js' ; // 也可以是绝对路径,.js后缀可以省略 a.foo = 'hello' ; // 合法操作 a = {}; // 报错:a是只读的 import { 'f' + 'oo' } from '/my_module.js' ; // 报错,语法错误(不能用运算符) if (x === 1) { import { foo } from 'module1' ; // 报错,语法错误(import不能在{}内) } else { import { foo } from 'module2' ; } |
1
2
3
4
|
foo(); import { foo } from '/my_module.js' ; // 不会报错,因为import的执行早于foo的调用 import '/modules/my-module.js' ; // 不引入变量,但执行其中全局代码 import { a } from '/modules/my-module.js' ; // 重复引入不执行全局代码,但引入变量a |
1
2
3
4
5
6
7
8
|
// export-default.js export default function () { console.log( 'foo' ); } // import-default.js import customName from './export-default.js' ; //customName可以是任意名字 customName(); // 'foo' |
解构赋值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
let a = 1; let b = 2; let c = 3; // 等价于 let [a, b, c] = [1, 2, 3]; let [ , third] = [ "foo" , "bar" , "baz" ]; third // "bar" let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = [ 'a' ]; x // "a" y // 变量解构不成功,赋值为undefined z // 数组解构不成功,赋值为[] |
1
2
3
4
|
let [foo = true ] = []; // foo = true let [x, y = 'b' ] = [ 'a' ]; // x='a', y='b' let [q = 1, w = 'b' ] = [ 'a' , undefined]; // q='a', w='b' let [e = 1] = [ null ]; // e = null |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
let { bar, foo } = { foo: "aaa" , bar: "bbb" }; foo // "aaa" bar // "bbb" let { abc } = { foo: "aaa" , bar: "bbb" }; abc // undefined let { foo: baz } = { foo: 'aaa' , bar: 'bbb' }; baz // "aaa" const node = { loc: { start: { line: 1, column: 5 } } }; let { loc, loc: { start }, loc: { start: { line }} } = node; line // 1 loc // Object {start: Object} start // Object {line: 1, column: 5} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; //提取 JSON 数据 let jsonData = { id: 42, status: "OK" , data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309] //遍历 Map 结构 const map = new Map(); map.set( 'first' , 'hello' ); map.set( 'second' , 'world' ); for ( let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world |
兼容问题
1
2
3
4
5
6
7
|
/// 转码前 input.map(item => item + 1); // 转码后 input.map( function (item) { return item + 1; }); |
1
2
3
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//引用外部ES6的js <script type= "module" > import './Greeter.js' ; </script> //直接写ES6的JS <script type= "module" > class Calc { constructor() { console.log( 'Calc constructor' ); } add(a, b) { return a + b; } } var c = new Calc(); console.log(c.add(4,5)); //正常情况下,会在控制台打印出9。 </script> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script> // 创建系统对象 window.System = new traceur.runtime.BrowserTraceurLoader(); // 设置参数 var metadata = { traceurOptions: { experimental: true , properTailCalls: true , symbols: true , arrayComprehension: true , asyncFunctions: true , asyncGenerators: exponentiation, forOn: true , generatorComprehension: true } }; // 加载模块 System. import ( './myModule.js' , {metadata: metadata}). catch ( function (ex) { console.error( 'Import failed' , ex.stack || ex); }); </script> |
es6新增功能的更多相关文章
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- 【ES6新增语法详述】
目录 1. 变量的定义 let const 2. 模版字符串 3. 数据解构 4. 函数扩展 设置默认值 箭头函数 5. 类的定义 class 6. 对象的单体模式 "@ ES6新增了关于变 ...
- ADO.NET 中的新增功能
ADO.NET 中的新增功能: .NET Framework (current version) 以下是 .NET Framework 4.5 中 ADO.NET 的新增功能. SqlClient D ...
- .NET Framework3.0/3.5/4.0/4.5新增功能摘要
Microsoft .NET Framework 3.0 .NET Framework 3.0 中增加了不少新功能,例如: Windows Workflow Foundation (WF) Windo ...
- 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能
[源码下载] 与众不同 windows phone (40) - 8.0 媒体: 音乐中心的新增功能, 图片中心的新增功能, 后台音乐播放的新增功能 作者:webabcd 介绍与众不同 windows ...
- PHP V5.2 中的新增功能,第 1 部分: 使用新的内存管理器
PHP V5.2:开始 2006 年 11 月发布了 PHP V5.2,它包括许多新增功能和错误修正.它废止了 5.1 版并被推荐给所有 PHP V5 用户进行升级.我最喜欢的实验室环境 —— Win ...
- WPF4.5 中的新增功能和增强功能的信息
本主题包含有关 Windows Presentation Foundation (WPF) 版本 4.5 中的新增功能和增强功能的信息. 本主题包含以下各节: 功能区控件 改善性能,当显示大时设置分组 ...
- .NET Framework 4.5、4.5.1 和 4.5.2 中的新增功能
.NET Framework 4.5.4.5.1 和 4.5.2 中的新增功能 https://msdn.microsoft.com/zh-cn/library/ms171868.aspx
- openstack【Kilo】汇总:包括20英文文档、各个组件新增功能及Kilo版部署
OpenStack Kilo版本发布 20英文文档OpenStack Kilo版本文档汇总:各个操作系统安装部署.配置文档.用户指南等文档 Kilo版部署 openstack[Kilo]入门 [准备篇 ...
随机推荐
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- 关于onConfigurationChanged
这两天测试app时,发现一个奇怪问题,app在启动后,Activity会onCreate两次,起初以为是横屏设置导致,随即在Activity中添加了android:configChanges=&quo ...
- 关于new Handler()与new Handler(Looper.getMainLooper())区别
如果你不带参数的实例化:Handler handler=new Handler();那么这个会默认用当前线程的Looper对象. 一般而言,如果你的Handler是要用来刷新UI的,那么就需要在主线程 ...
- Runtime - Associated Objects (关联对象) 的实现原理
主要围绕3个方面说明runtime-Associated Objects (关联对象) 1. 使用场景 2.如何使用 3.底层实现 3.1 实现原理 3.2 关联对象被存储在什么地方,是不是存放在被 ...
- docker使用Dockerfile构建ssh容器
一.使用Dockerfile构建centos 1.创建 Dockerfile mkdir centos # 创建一个目录存放之后的Dockerfile,目录名无所谓 cd centos # 进入目录 ...
- Gitflow工作流
什么是Gitflow工作流 Gitflow工作流定义了一个围绕项目发布的严格分支模型.虽然比功能分支工作流复杂几分,但提供了用于一个健壮的用于管理大型项目的框架. Gitflow工作流没有用超出功能分 ...
- wpf tooltip 样式自定义
<Style BasedOn="{StaticResource {x:Type ToolTip}}" TargetType="ToolTip"> & ...
- Codeforces 264B Good Sequences(DP+素数筛)
题目链接:http://codeforces.com/problemset/problem/264/B 题目大意:给出n个单调递增的数,让你找出最长的好序列,好序列是一种单调递增的并且相邻元素的最大公 ...
- Linux学习笔记:rm删除文件和文件夹
使用rm命令删除一个文件或者目录 使用rmdir可以删除空文件夹 参数: -i:删除前逐一询问确认 -f:即使原档案属性设为唯读,亦直接删除,无需逐一确认 -r:递归 删除文件可以直接使用rm命令,若 ...
- MySQL 连接本地数据库、远程数据库命令
一.MySQL 连接本地数据库,用户名为“root”,密码“123”(注意:“-p”和“123” 之间不能有空格) C:/>mysql -h localhost -u root -p123 二. ...