ECMAScript 6
1.声明了let命令,与var不同的是,let声明的变量只在代码块内有效
eg> var a = [];
for(var i = 0; i < 10; i++){
var c = i;
a[i] = function(){
console.log(c);
}
}
a[6](); // out:9, var声明的c在整个遍历过程中都有效,
var b = [];
for(var i = 0; i < 10; i++){
let c = i;
b[i] = function(){
console.log(c);
}
}
b[6](); // out:6, let声明的c只在遍历到i=6的过程中有效
2.let不允许在相同的作用域内定义相同的变量
eg> {
let a = 1;
let a = 23; // error
}
{
let a = 1;
var b = 23; //error
}
3.块级作用域
con>let实际上为JavaScript新增了块级作用域
eg> function(){
let n = 5;
if(true){
let n = 10;
}
console.log(n); // out:5
}
con>上面的函数中声明了两个n变量,但是外层n与内层n不属于同一级作用域,也表明了外层不受内层的影响,在外层进行输出时为5。
同时,块级作用域的出现使得广为使用的立即执行函数(IIFE)不在必要了。
//IIFE写法
(function(){
//do something
})()
//块级作用域写法
{
//do something
}
4.不存在变量提升
con>用var声明的变量会存在变量提升,用let声明的变量不存在变量提升
eg> console.log(x); // out:undefined
var x = 10;
console.log(x); // error
let x = 10;
5.const命令
con>const命令用来定义一个常量,const声明的常量重新赋值不会失败,只会默默地失败.
eg> const a = 10;
console.log(a); // out: 10
const a = 23;
console.log(a); // out: 10
6.set数据结构
con>ES6提供了新的数据结构Set,它类似于数组,但是它的值都是唯一的,没有重复的值.
Set本身是一个构造函数,用来生成数据结构
eg> var set = new Set();
[1,2,3,4,5,4,2,1].map(x => set.add(x));
for(i of set){
console.log(i); //out:1,2,3,4,5
}
pro>size(); //返回成员总数
add(value);
delete(value);
has(value);
clear();
7.Map数据结构
con>ES6还提供了Map数据结构,他提供了一种键值对存储,键不仅可以是字符串,还可以是对象
eg> var map = new Map();
var person = {name:'tiai', age:23};
map.set(person, "student");
map.get(person); //out: "student"
pro>size();
set(key, value);
get(key);
delete(key);
clear();
8.rest(...)运算符
con>ES6引入rest运算符,该运算符取代了arguments.length,运算符后面的数组变量将参数放入该数组变量中
eg> function add(...values){
let value = 0;
for(i of values){
value += i;
}
console.log(value);
}
add(1,2,3); //out:6
con>rest还有一个重要的作用就是将数组转为参数序列
eg> function add(s1, s2, s3){
return s1+s2+s3;
}
var a = [2, 3];
add(1, ...a); //out:6
//ES5
Math.max.apply(null, [s1,s2,s3]);
//==ES6
Math.max(...[s1,s2, s3]);
//==
Math.max(s1,s2,s3);
9.Iterator
con>遍历器是一种协议,任何对象都可以部署遍历器协议,从而可以使用(for ... of)遍历这个对象。遍历器协议规定,任意对象只要部署了next方法,就可以作为遍历器,但是next方法必须返回一个包含value和done两个属性的对象。其中,value属性当前遍历位置的值,done属性是一个布尔值,表示遍历是否结束。
eg>var Iterator = function(arr){
var nextindex = 0;
return {
next: function(){
return nextindex<arr.length?{value:arr[nextindex++], done:false}:{done:true};
}
}
}
10.generator
con>上一部分的遍历器,用来依次取出集合中的每一个成员,但是某些情况下,我们需要的是一个内部状态的遍历器。也就是说,每调用一次遍历器,对象的内部状态发生一次改变(可以理解成发生某些事件)。ECMAScript 6 引入了generator函数,作用就是返回一个内部状态的遍历器,主要特征是函数内部使用了yield语句。
当调用generator函数的时候,该函数并不执行,而是返回一个遍历器(可以理解成暂停执行)。以后,每次调用这个遍历器的next方法,就从函数体的头部或者上一次停下来的地方开始执行(可以理解成恢复执行),直到遇到下一个yield语句为止,并返回该yield语句的值。
ECMAScript 6草案定义的generator函数,需要在function关键字后面,加一个星号。然后,函数内部使用yield语句,定义遍历器的每个成员。
generator函数的这种暂停执行的效果,意味着可以把异步操作写在yield语句里面,等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了,因为异步操作的后续操作可以放在yield语句下面,反正要等到调用next方法时再执行。所以,generator函数的一个重要实际意义就是用来处理异步操作,改写回调函数。
eg>{
function loadUIWindow(){
console.log("loadUIWindow is loading");
}
function loadDataAsync(){
console.log("data load over...");
return true;
}
funciton hideUI(){
console.log("Ui is hidded");
}
function* UIgenerator(){
loadUIWindow();
yield let ret = loadDataAsync();
if(ret){
hideUI();
}else{
console.log("data load fail");
loadDataAsync();
}
}
let UIgen = new UIgenerator();//return a iterator object
UIgen.next();
UIgen.next(false);
}
11.增强的对象写法
con>ES6允许直接写入函数和变量,作为写入对象的属性和方法
eg> var person = {
name:'ta',
age,
say(){console.log("my name is ", this.name);}
}
12.arrow函数
13.con>ES6允许为函数设置默认值
eg> function add(x=0, y=0){
return x + y;
}
14.模板字符串
con>模板字符串(template string)是增强版的字符串,即可以当作普通字符串使用,也可以在字符串中嵌入变量。它用反引号(`)标识。
eg>var person = function(name, female){
this.name = name;
this. female = female;
}
person.prototype.whois = function(){
console.log(`my name is ${this.name}, my sex is ${this.female}`);
}
var wsc = new person('wsc', 'female');
wsc.whois();
15.数组推导
con>允许直接通过现有数组生成新数组,这被称为数组推导(array comprehension)
eg> [for(i of [1,2,3] i * i )]
16.多变量赋值
eg>var [x, y] = [1, 2]
var o = {
p1:['hello', {p2:'we'}],
}
var {a, [b, {c}]} = o;
16.类
eg>//ES5
var person = function(name){
this.name = name;
}
person.prototype.init = function(){
console.log(`${this.name} has created`);
}
//ES6
class person{
constructor(name){
this.name = name;
}
init(){
console.log(this.name);
}
}
//还允许使用extends关键字
class boy extends person{
constructor(name, sex){
super(name);
this.sex = sex;
}
init(){
console.log(this.name, this.sex);
}
}
17.module
con>ES6允许定义模块。也就是说,允许一个JavaScript脚本文件调用另一个脚本文件。
eg> //circle.js
export function area(len, width){
return len*width;
}
//main.js引用这个模块
import {area} from 'circle';
console.log('面积是', area(1,2););
//也可以的导入整个包
module circle form 'circle'
console.log('面积是', area(1,2););