ES6特性笔记

发表于   |   分类于   |   阅读次数

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布。 以下将着重介绍几个常用的新特性，希望大家多多翻阅阮老师的 es6入门，多看、多练、多用。

箭头函数

使用箭头函数，简化了函数的书写，你可以用更优雅的方式书写代码。

比如这样：

1
2
3
4
5
6
7
// 使用箭头函数
var sum = x => x * x ;
// 等价于
var sum = function( x ) {
	return x * x;
}

或者这样(无参数)：

1
2
var b = 4;
var a = () => { 3 * b }

同时，可以使用箭头函数简化回调函数：

1
2
3
4
5
6
[1,2,3].map(function(x){
	return x * x;
});
//使用箭头函数
[1,2,3].map( x => x * x );

注意

  1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，可以省去我们的.bind(this) 操作。
  2. 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。请使用class代替。

2. let\const关键字

let

1.let 和 var 的使用方法类似，只在块级作用域有效（不是函数级作用域

1
2
3
4
5
6
7
{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

const

const声明一个只读的常量。一旦声明，常量的值就不能改变

注意

  1. let、const不存在变量声明提升
  2. let、const不允许重复声明
  3. 两种声明变量不在window下
1
2
3
4
5
6
7
8
var a = 1;
window.a  // 1
const b = 2;
window.b // undefined

class 类的支持

es5通过构造函数来定义并生成对象，和传统的OO语言差距很大。因此ES6 提供了新的模板来创建类。

使用姿势

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//类的定义
class Animal {
	//ES6中新型构造器
	constructor(name) {
		//用来定义属性	
   		this.name = name;
   	}
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//类的继承
class Programmer extends Animal {
    constructor(name) {
    	//直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’

getter/setter

与es5一样，可以使用get\set关键字，来拦截存取行为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class MyClass {
  constructor() {
    this.prop = 0;
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}
let inst = new MyClass();
// setter: 0;
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'

注意

  1. Class不存在变量声明提升

字符串模板

可以使用字符串模板来省去复杂的字符串拼接;

1
2
3
var name = 'WWX';
console.log(`my name is ${name}`);

解构赋值

ES6允许我们以一种神奇的方式直接从数组和对象中提取值并赋值到变量，也就是解构

使用姿势

1
2
3
4
5
6
7
8
9
10
11
12
var a = {
	name: 'wwx',
	age: 18,
	sex: 'male',
}
//old
var name = a.name,
	age = a.age;
	
//new
var { name, age } = a;
var { name, ...others } = a;

默认值

解构允许我们使用默认值来进行解构

1
2
3
var [ a, b = 2] = [ 1 ];
a // [ 1, 2 ]

用法

  • 交换变量

    1
    var [ y, x ] = [ x, y ];

  • 函数参数定义

    1
    2
    3
    4
    5
    function f({x, y, z}) {
     ... 
    }
    f( { y: 1, x: 2} );

  • 提取json数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    let { id, status, data: number } = jsonData;
    console.log(id, status, number);
    // 42, "OK", [867, 5309]

  • 参数默认值

    1
    2
    3
    4
    5
    6
    function test( { 
    		a = 1,
    		b = 2
    	}, c }{
    	...
    }