ES6 基础概念汇总
let const命令 声明变量
let 声明的变量 没有变量提升的效果
1 let声明的变量只在代码块内有效
for循环的计数器
2 不存在变量提升 要在声明后使用
let bar = 2
3 暂时性死区 只要进入当前作用域,索要使用的变量就已经存在,但是不可获取,只有等到声明变量的那行代码出现,才可以获取和使用该变量。
4 不允许重复声明
块级作用域
原由:es5只有全局作用域和函数作用域 ,导致 内层变量可能会覆盖外层变量 ; 计数的循环变量泄漏为全局变量
1 let 实际上为js新增了块级作用域
2 块级作用域 可以替代了 立即执行匿名函数IIFE (function(){}()); 的写法。
const 声明一个只读的常量,一旦声明 常量的值就不会改变
1 只声明不赋值会报错
2 只在声明所在的块级作用域中有效。
字符串
for(let ch 0f s){ .... } for...of循环 使字符串可以被 for...of 循环遍历
at() 与 charAt()
'abc'.charAt(0) // "a"
'𠮷'.charAt(0) // "\uD842"
'abc'.at(0) // "a"
'𠮷'.at(0) // "𠮷"
JavaScript只有indexOf
方法,可以用来确定一个字符串是否包含在另一个字符串中
.includes() : 返回布尔值,
.startsWith()
.endsWith()
var s = 'Hello world!';
s.startsWith('Hello',0) // true
s.endsWith('!') // true
s.includes('o') // true
这三个方法都支持 第二个参数,表示开始搜索的位置
repeat() 返回一个新的字符串,表示将字符串重复n次 参数如果是小数,将会被取整;负数会报错;-0.9至0视为0;NaN是0
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
.padStart(10,'yyyy-mm-dd')
.padEnd()
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
模版字符串,用反引号(`)标识。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
标签模版 tagged template
‘标签’指的就是函数,紧跟在后面的模版字符串就是它的参数。tag`123` 等同于 tag(123);
String.raw() 方法,用来充当模版字符串的处理函数,返回一个连斜杠都转译的字符串。
二、RegExp构造函数
ES5 var regex = new RegExp('xyz','i');或 var regex = new RegExp(/xyz/i) 等价于 var regex = /xyz/i;
ES6 var regex = new RegExp(/xyz/ig,'i'); 原有正则的修饰符ig 会被第二个参数i覆盖。
2.字符串的正则方法
match() replace() search() split()
3.u修饰符 y修饰符:粘连
4 正则的sticky属性:与y修饰符相匹配,表示是否设置了y修饰符。
var r = /hello\d/y; r.sticky //返回true
5 正则的flags属性:返回正则表达式的修饰符。
/abc/ig.flags //gi 返回正则表达式的修饰符
/abc/ig.source //abc ES5中返回正则表达式的正文
三、数值的扩展
二进制 用前缀0b表示;
八进制 用前缀0o表示;
转换为十进制:Number('0b111')
2. Number.isFinite(24) 检查一个数值是否为有限的finite。
Number.isNaN(15) 检查一个值 是否为NaN.
3 Number.parseInt(12.34)
Number.parseFloat(123.34)
4 Number.isInteger() 判断一个值是否为整数
Number.EPSILON 是一个极小的常量,
Number.isSafeInteger() 判断一个整数是否在安全范围内。
5 Math对象的扩展 这些方法只能在Math对象上调用。
Math.trunc() 用于去除一个数的小数部分,返回整数部分。 Math.trunc(4.1) //4 Math.trunc('foo';NaN) // 对于无法截取整数的值返回NaN
Math.sign() 判断一个数到底是正数、负数、还是0 Math.sign(-5) //-1 参数为正 返回+1 ;为负,返回-1;为0,返回0;其他,返回NaN;
Math.cbrt() 用于计算一个数的立方根
6 指数运算符 **
2**2 //4 ; 2**3 //8;
赋值运算符 **=;
let a=2;a **= 2; //a= a * a;
四、数组的扩展
Array.from() 将两类对象转换为真正的数组:类似数组的对象 (就是必须有length属性的对象)(这里使用扩展运算符则不行),和可遍历的对象。第一个参数是对象,还可接受第二个参数 函数,作用类似于map();[].slice.call(obj); Array.from([1,2,3],(n) => n || 0)
Array.of() 用于将一组值转换为数组。Array.of(3) //[3] Array.of(3).length //1 。可以代替Array()、New Array()
copyWithin() 复制成员到其指定位置,覆盖并返回当前数组。[1,2,3,4,5].copyWithin(0,3,n) //[4,5,3,4,5] 表示从 3号位开始复制到n(或结尾)的数值 放至0位开始上。
4. 数组实例的find() 和 findIndex()
find() 方法,用于找出第一个符合条件的数组成员,参数为回调函数,找到第一个值为true的成员,并返回该成员,若没有则返回undefined [1,3,-5,10].find((n) => n < 0) //-5
findIndex() 用法与find相似,返回第一个符合条件的数组成员的位置,若都不符合则返回-1.
5.fill() 方法使用给定值,填充一个数组。
['a','b','c'].fill(7) // [7,7,7] new Array(3).fill(7) //[7,7,7] 用于空数组的初始化
['a','b','c'].fill(7,1,2) //['a','7','c'] fill方法从1号位开始,向原数组填充7,到2号位之前结束。
6.三个新的方法--entries(),keys()和values() ---用于遍历数组。可以用for....of循环进行遍历。不同点是:keys()是对健名的遍历、values() 是对健值得遍历、entries() 是对 键值对 的遍历
for (let index of ['a','b'].keys()){console.log(index);} //0 1
7. includes() 表示某个数组是否包含给定的值 返回true或false,第二个参数表示搜索的起始位置,默认为0; [1, 2, 3].includes(3, 3); // false
8 数组的空位,es6明确将数组的空位转化为undefined
五 函数的扩展
1 es6允许为函数的参数设置默认值,直接写在参数定义的后面 function Point(x = 0, y = 0){}
2 函数的length属性 ;返回没有制定默认值的参数个数
(function (a) {}).length // 1 (function (a = 5) {}).length // 0 (function (a, b, c = 5) {}).length // 2
3 rest参数 形式为(...变量名),用于获取函数的多余参数,rest参数搭配的变量是一个数组,改变量将多余的参数放入数组中。
function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
//arguments变量的写法
function sortNumbers(){
return Array.prototype.slice.call(arguments).sort();
}
//rest 参数的写法
const sortNumbers = (...numbers) => numbers.sort();
rest参数中的变量代表一个数组,所以数组特有的方法都可以用于这个变量。
function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log(item); }); } var a = []; push(a, 1, 2, 3)
4 扩展运算符 spread 是三个点(...)。好比rest参数的逆运算,将一个数组专为用逗号分隔的参数序列。
console.log(...[1,2,3]) // 1 2 3
扩展运算符取代apply方法的一个实际的例子
// ES5的写法 Math.max.apply(null, [14, 3, 77]) // ES6的写法 Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77);
[...'hello']
// [ "h", "e", "l", "l", "o" ] 将字符串转化为真正的数组
5 严格模式 'use strict'; 标准规定 只要参数使用了默认值、解构赋值、扩展运算符,就不能显示指定严格模式,但可以设置全局性严格模式。
6 函数的name属性:返回该函数的函数名。 function foo(){} foo.name //'foo'
bind返回的函数,name属性值会加上‘bound’前缀。 foo.bind({}).name //'bound foo'
7 箭头函数 (=>) var f = v =>v; 等价于 var f = function(v){return v;};
var f = () =>5; 函数不需要参数 用()表示;若多个参数(num1,num2)
如果箭头函数的代码块部分多于一条语句,就要用{}抱起来,并且使用return语句返回。
var sum = {num1,num2} => {return num1 +num2;}
在箭头函数里,this对象的指向是可变的,但在箭头函数中 this对象却是固定的。
8 函数绑定运算符 (::),双冒号左边是一个对象,右边是一个函数,自动将左边的对象,作为上下文环境this对象,绑定到右边的函数上。 由于双冒号运算符返回的还是原对象,因此可以采用链式写法。
9 尾调用:指某个函数的最后一步是调用另一个函数。function f(x){return g(x);}
........等后面脑子清醒了再
六、对象的扩展
1属性简写:es6允许只写属性名,不写属性值,这时 属性值就等于属性名所代表的变量。 var foo = 'bar';var baz = {foo}; //baz {foo:'bar'};
2方法简写:method(){return 'hello';} 等同于 method:function(){return 'hello';}
3属性名简写:es6允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在[]方括号内。
let propKey = 'foo'; let obj = { [propKey]:true, ['a' + 'bc']:123 };
4 方法的name属性:函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。
5 Object.is():比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。Object.is('foo','foo') //true
6 Object.assign():用于对象的合并,会有覆盖同名属性的问题 var target = {a:1}; var source1 = {b:2}; var source2 = {c:3}; Object.assign(target,source1,source2);//{a:1,b:2,c:3} target {a:1,b:2,c:3} ;Object.assign({},target,source1,source2)//{a:1,b:2,c:3} target = {a:1}
7 Object.getOwnPropertyDescriptor(obj,'foo');var obj = {foo:123} 属性的可枚举性 :对象的每个属性都有一个描述对象descriptor,用来控制该属性的描述行为。
8 属性的遍历 5种
for...in
Object.key(obj)
Object.getOwnPropertyName(obj)
Object.getOwnPropertySymbols(obj)
Reflect.ownKeys(obj)
9 __proto__属性,用来读取或设置当前对象的prototype对象。
但建议使用Object.setPrototypeOf() (写操作)设置原型对象,Object.getPrototypeOf() (读操作)、Object.create() (生成操作)
10 解构赋值:用于从一个对象取值,相当于将所有可遍历的 但尚未被读取的属性,分配到指定的对象上。所有的键和他们的值,都会拷贝到新对象上
let {x,y,....z} = {x:1,y:2,a:3,b:4}; // x 1 y 2 z {a:3,b:4}
11 扩展运算符 (...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
七、Symbol 引入的一种新的数据类型Symbol,表示 独一无二的值,可以保证不会与其他属性名产生冲突。是相继Undefined\Null\Bollen\String\Number\Object 之后的第七种数据类型。
let s = Symbol(My symbol); typeof s //'symbol'
Symbol值可以显示转为字符串 String(sym) or sym.toString() //'Symbol(My symbol)'
Object.getOwnPropertySymbols(obj对象) 方法返回一个数组,成员是当前对象的所有属性名的Symbol值。而Object.keys(obj) 和 Object.getOwnPropertyName(obj) 都无法获取到size=Symbol('size'),从而制造了一种非私有的内部方法的效果。
Symbol.for() 方法 可以使用同一个Symbol值,接受一个字符串作为参数,然后搜索有没有以该参数作为名称的symbol值。Symbol.for('bar') === Symbol.for('bar') //true
Symbol.keyFor()方法返回一个已登记的Symbol类型值的key。用Symbol.for()是已登记的,可在全局环境中搜索,而Symbol()是没有登记机制的
var s1 = Symbol.for("foo"); Symbol.keyFor(s1) // "foo" var s2 = Symbol("foo"); Symbol.keyFor(s2) // undefined
八 Proxy构造函数 用来生成Proxy实例。var Proxy = new Proxy (target,handler);
九 Set和Map数据结构
Set本身是一个构造函数,用来生成Set数据结构,其类似于数组,但其成员的值都是唯一的,没有重复性的值。
1.可通过add方法向Set结构加入成员,
var s = new Set(); [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)); //通过add方法向Set结构加入成员, for (let i of s) { console.log(i); } // 2 3 5 4 //Set函数可以接受一个数组作为参数,用来初始化。 var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4]
2. 可以去除数组的重复成员的方法。如上[...new Set(array)]
3. Set实例的属性:var r= new Set([1,2,3,4]); r.constructor //[Function: Set]
r.size //4 返回set实例的成员总数。
4 Set实例的方法分为两类:
操作方法:r.add(value):添加某个值 返回set结构本身
r.delete(value):删除某个值 返回布尔值
has(value): 返回布尔值
clear(): 清除所有成员
Array.from(set)方法可以将Set结构转为数组。[...set] 也可以转为数组
> items Set { 1, 2, 3, 4, 5 } > [...items] [ 1, 2, 3, 4, 5 ]
var array = Array.from(items);
array
[ 1, 2, 3, 4, 5 ]
遍历操作:Set结构的实例有四个遍历方法,用于遍历成员。用for...of 循环遍历 Set。
keys(): 返回键名的遍历器
values():返回键值的遍历器
entries(): 返回键值对的遍历器
forEach():使用回调函数遍历每个成员
let set = new Set(['red', 'green', 'blue']); for (let x of set.values()) { //Set结构的实例默认刻遍历,生成函数就是它的values方法。可以直接写成 for (let x of set){} console.log(x); } // red // green // blue
set.forEach((value,key)=>console.log(value*2))
WeakSet也是类似于set的构造函数,用new创建 但只接受类似数组的对象作为参数。var ws = new WeakSet([[1,2],[3,4]]);
WeakSet结构只有三个方法:WeakSet.add(value) WeakSet.delete(value) WeakSet.has(value);没有size属性,不能遍历。
5 Map数据结构 使用new创建 类似于对象,但其健不限于‘字符串’。Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应。
var m = new Map(); var o = {p: 'Hello World'}; m.set(o, 'content') m.get(o) // "content" m.has(o) // true m.delete(o) // true m.has(o) // false
//Map构造函数可接受数组作为参数
var m = new Map([
[true, 'foo'],
['true', 'bar']
]);
m.get(true) // 'foo'
m.get('true') // 'bar'
Map实例结构的属性:
size属性:.size
属性返回Map结构的成员总数。
set(key,value) :set
方法设置key
所对应的键值,然后返回整个Map结构。如果key
已经有值,则键值会被更新,否则就新生成该键。 set方法返回的是map本身,可以采用链式写法。
get(key): get
方法读取key
对应的键值,如果找不到key
,返回undefined
。
has(key):has
方法返回一个布尔值,表示某个键是否在Map数据结构中。
delete(key)
clear()
Map实例结构的遍历方法 keys();values();entries();forEach();
十、Iterator 和 for...of 循环
Iterator (遍历器)为四种数据结构提供提供统一的简便的接口,来完成遍历操作。即for...of循环;
ES6规定:默认的Iterator接口部署在数据结构的Symbol.iterator属性,可以说,一个数据结构只要具有
Symbol.iterator属性,就可以认为是‘可遍历的’。这也是一个方法,执行Symbol.iterator()这个方法,就可以返回一个遍历器对象。该对象便拥有next()方法,返回当前成员的信息对象value和 done两个属性。
let arr = ['a', 'b', 'c']; let iter = arr[Symbol.iterator](); iter.next() // { value: 'a', done: false } iter.next() // { value: 'b', done: false } iter.next() // { value: 'c', done: false } iter.next() // { value: undefined, done: true }
在es6中,有三类数据结构原生具备iterator接口:数组、类似数组的对象、set和map结构。
4 字符串的Iterator接口:字符串是一个类似数组的对象,也原生具有Iterator接口。
var someString = "hi"; typeof someString[Symbol.iterator] // "function" var iterator = someString[Symbol.iterator](); iterator.next() // { value: "h", done: false } iterator.next() // { value: "i", done: false } iterator.next() // { value: undefined, done: true }
5 遍历器的return(),throw()方法。
6 js的for...in,只能获得对象的键名,不能直接获取键值。es6的for...of允许遍历获得键值,但遍历只返回具有数字索引的属性。
十、Generator函数:一种异步编程解决方案;是一个状态机,封装了多个内部状态;执行此函数会返回一个遍历器对象,依次遍历Generator函数中的每一个状态。
写法:function关键字与函数名之间有一个*号;函数体内部使用yield(产出的意思)语句,定义不同的内部状态
function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator(); //返回的是一个指向内部状态的指针对象Iterator Object
//用next方法调用 返回value和done
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
yield
语句后面的表达式,只有当调用next
方法、内部指针指向该语句时才会执行,
十一、Promise对象:异步编程的一种解决方案,是一个对象,从他可以获取异步操作的消息;像是一个容器,里面保存着某个未来才会结束的事件的结果。
1.对象的状态不受外界影响。三种状态:pending进行中 Resolved已完成 Rejected已失败,由异步操作的结果决定哪一状态。
2 es6中,Promise对象是一个构造函数,用来生成Promise实例
var promise = new Promise(function(resolve, reject) { //promise接受一个函数作为参数,函数的两个参数是resolve和reject函数 // ... some code if (/* 异步操作成功 */){ resolve(value); //resolve函数的作用是在异步操作成功时调用 将状态从pending变为resolve } else { reject(error); //reject失败时调用,pending变味reject 将结果传递出去 } });
3 Promise.then()方法:promise实例生成以后,可以用then方法分别指定Resolved 和 Reject状态的回调函数。
promise.then(function(value) { // success }, function(error) { // failure });
4 getJson是用于发出一个针对JSON数据的HTTP请求,并且返回一个Promise对象,便有.then()方法。
getJSON("/post/1.json").then( post => getJSON(post.commentURL) ).then( comments => console.log("Resolved: ", comments), err => console.log("Rejected: ", err) );
5 Promise.catch()方法:用于指定发生错误时的回调函数。
getJSON("/posts.json").then(function(posts) { // ... }).catch(function(error) { //catch方法返回的是一个Promise对象,因此还有.then()方法 // 处理 getJSON 和 前一个回调函数then运行时发生的错误 console.log('发生错误!', error); });
6 Promise.all() 方法用于将多个Promise实例,包装成一个新的Promise实例。接受的参数是一个数组,且数组成员都是promise对象。只有promise数组的所有成员状态都变成fulfilled,或者其中一个变成rejected,才会被调用Promise.all()方法后面的回调函数。
7 Promise.race([Promise对象,Promise对象]) ,其中任一一个执行完出了结果,就返回出这个肯定或否定结果,终止掉其他没执行完的promise。
8 Promise.resolve() 将现有对象转为Promise对象。 resolve的Promise是在本轮实践循环的末尾执行,总是晚于本轮循环的同步任务。
var jsPromise = Promise.resolve($.ajax('/whatever.json')); Promise.resolve('foo') // 等价于 new Promise(resolve => resolve('foo'))
9 Promise.reject()
Promise.reject(reason)
方法也会返回一个新的Promise实例,该实例的状态为rejected
。它的参数用法与Promise.resolve
方法完全一致。
10 .done() 方法 处于回调连的尾端,保证跑出任何可能出现的错
11 .finally() 用于指定不管promise对象最后状态如何,都会执行的操作。接受一个普通的回调函数作为参数,该参数不管怎样都必须执行。
十二、Class类
es6引用class这个概念,作为对象的模版。通过class这个关键字 定义类,更像面向对象编程的语法。
//定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } }
// 等同于 Point.prototype = { toString(){}, toValue(){} };
var b = new Point(); //使用时,直接对类使用 new 命令,跟构造函数的用法一致
b.toString()
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
2 constructor方法是类的默认方法,默认返回的是实例对象this,
3 hasOwnProperty()方法是判断 实例对象自身属性中是否有这个属性。
4 类的构造函数必须用 new 构造。
5 class类 不存在变量提升
十三、Module模块化 设计思想是使得编译时就能确定模块的依赖关系,及输入输出的变量。
// ES6模块 import { stat, exists, readFile } from 'fs';
<script type="module" src="foo.js"></script>
模块功能主要由两个命令构成:export 和 import 。
export 命令用于规定模块的对外接口,
import 命令用于输入其他模块提供的功能。 具有变量提升的效果
// profile.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year}; 导出 // main.js import {firstName, lastName, year} from './profile'; 引入 function setName(element) { element.textContent = firstName + ' ' + lastName; }
//用*指定一个对象,所有输出值都加载在这个对象上面
import * as circle from './circle';
export default命令:为模块指定默认输出。
// export-default.js export default function () { console.log('foo'); } // import-default.js import customName from './export-default'; //import命令可以为该匿名函数指定任意名字 customName(); // 'foo'
www.w3cfuns.com ES6的十大特性
1.Default Parameters in ES6 (默认参数)
var link = function (height, color, url) { var height = height || 50; //当默认值为0的时,解析为false var color = color || 'red'; var url = url || 'http://azat.co'; ... }
var link = function(height = 50, color = 'red', url = 'http://azat.co') { //ES6 ... }
2.Template Literals in ES6 (模版文本)
var name = 'Your name is ' + first + ' ' + last + '.'; var url = 'http://localhost:3000/api/messages/' + id;
var name = `Your name is ${first} ${last}. `; //ES6 中使用${name}放到``反引号内; var url = `http://localhost:3000/api/messages/${id}`;
3. Multi-line String in ES6 (多行字符串)
var roadPoem = `Then took the other, as just as fair, 仅仅放到``反引号内就可以解决; And having perhaps the better claim Because it was grassy and wanted wear, Though as for that the passing there Had worn them really about the same,`; var fourAgreements = `You have the right to be you. You can only be you when you do your best.`;
4. Destructuring Assignment in ES6 (解构赋值)
var data = $('body').data(), // data has properties house and mouse house = data.house, //其中house和mouse 是key,同时house和mouse也定义成变量 mouse = data.mouse;
var jsonMiddleware = require('body-parser').jsonMiddleware ; //node.js 中使用ES5 var body = req.body, // body has username and password username = body.username, password = body.password;
var { house, mouse} = $('body').data(); // we'll get house and mouse variables var {jsonMiddleware} = require('body-parser'); //ES6中的赋值 var {username, password} = req.body;
var [col1, col2] = $('.column'), // ES6 适用于数组 [line1, line2, line3, , line5] = file.split('n');
5. Enhanced Object Literals in ES6 (增强的对象文本)
6. Arrow Functions in ES6 (箭头函数)
以前使用闭包,this总是预期之外地产生变化,而箭头函数的迷人之处在于,现在你的this可以按照预期使用,身处箭头函数里面,this还是原来的this。
就不必用that=this或 _this = this或.bind(this).
var _this = this; $('.btn').click(function(event){ _this.sendData(); })
$('.btn').click((event) => { //ES6箭头函数 this.sendData(); })
//ES5 创建一个消息数组
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']; var messages = ids.map(function (value) { return "ID is " + value; // explicit return }); //ES6 使用了字符串模版 ; var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']; var messages = ids.map(value => `ID is ${value}`); // implicit return //在箭头函数中,对于单个参数,括号()是可选的,但当超过一个参数的时候就必须要
var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']; var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `); // implicit return //参数需要被包含在括号里,且它是隐式的返回
7. Promises in ES6 ()
ES6规定了标准的promise
setTimeout(function(){ console.log('yay!'); },1000); var wait1000 = new Promise(function(resolve,reject){ setTimeout (resolve,1000); }).then(function(){ console.log('yay!'); }); var wait1000 = new Promise((resolve, reject)=> { setTimeout(resolve, 1000); }).then(()=> { console.log('Yay!'); }); var wait1000 = ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)}); wait1000() .then(function() { console.log('Yay!') return wait1000() }) .then(function() { console.log('Wheeyee!') });
8. Block-Scoped Constructs Let and Const (块作用域构造 Let Const)
Let是一种新的变量声明方式,它允许你把变量作用域控制在块级里面;
而var 是限制函数作用域;
const 就是一个不变量,也是块级作用域,一旦声明,则这个值就是常量,不会再改变。
9. Classes in ES6 (类)
ES6没有用函数,而是使用原型实现类。
class baseModel { // 用class 定义一个类 constructor(options, data) { // class constructor,node.js 5.6暂时不支持options = {}, data = []这样传参
// 方法名也不需要加 function关键字,冒号:也不需要了,不需要分配属性this this.name = 'Base'; this.url = 'http://azat.co/api'; this.data = data; this.options = options; } getName() { // class method console.log(`Class name: ${this.name}`); } };
class AccountModel extends baseModel{
constructor(options,data){
super({private:true},['32113123123','524214691']); //调用父级构造函数,使用super()用参数传递;
this.name = 'Account Model';
this.url += '/accounts/';
}
};
10. Modules in ES6 (模块)
之前的js不支持本地的模块,用AMD ReaquireJS CommonJS 解决方法。现在ES6可以引用模块import 和export操作了。
//module.js module.exports = { port: 3000, getAccounts: function() { ... } } //ES5 main.js var service = require('module.js'); console.log(service.port); //ES6 module.js export var port = 3000; export function getAccounts(url){...} //ES6 main.js import {port,getAccounts} from 'module'; console.log(port); //ES6 或者把整个module导入,并命名为service import * as service from 'module'; console.log(service.port);