IT博客汇 | 常用es6特性学习

常用es6特性学习

admin发表于 2016-12-20 08:05:12

ES6给我们提供了许多的新语法和代码特性来提高javascript的体验。

定义函数

我们先来看一个基本的新特性，在javascript中，定义函数需要关键字function，但是在es6中，还有更先进的写法，我们来看：

es6写法：

var human = {
    breathe(name) {   //不需要function也能定义breathe函数。
        console.log(name + ' is breathing...');
    }
};
human.breathe('jarson');   //输出 ‘jarson is breathing...’

转成以前的js代码：

var human = {
    breathe: function(name) {
        console.log(name + 'is breathing...');
    }
};
human.breathe('jarson');

创建类

我们知道，javascript不像java是面向对象编程的语言，而只可以说是基于对象编程的语言。所以在js中，我们通常都是用function和prototype来模拟类这个概念。

但是现在有了es6，我们可以像java那样‘明目张胆’的创建一个类了：

class Human {
    // 构造方法，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数。
    constructor(name) {
    	this.name = name;
    }
    // 是原型对象上的属性
    breathe() {
        console.log(this.name + " is breathing");
    }
}
var man = new Human("jarson");
man.breathe();    // jarson is breathing

man.hasOwnProperty("name"); // true
man.__proto__.hasOwnProperty('breathe'); // true

hasOwnProperty() 方法用来判断某个对象是否含有指定的自身属性。和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。
__proto__属性的值就是它的原型。

上面代码转为js格式：

function Human(name) {
    this.name = name;
    this.breathe = function() {
        console.log(this.name + ' is breathing');
    }
}
var man = new Human('jarson');
man.breathe();    //jarson is breathing

所以我们看到，我们可以像java那样语义化的去创建一个类。另外，js中的继承父类，需要用prototype来实现。那么在es6中，又有什么新的方法来实现类的继承呢？

继续看：

假如我们要创建一个Man类继承上面的Human类，es6代码：

class Man extends Human {
    constructor(name, sex) {
        // 子类必须要在constructor中指定 super 方法，否则在新建实例的时候会报错
        // 如果没有置顶consructor,默认带 super 方法的constructor将会被添加
        super(name); // 即调用父类的构造函数
        this.sex = sex;
    }
    info(){
        console.log(this.name + ' is ' + this.sex);
    }
}
var xx = new Man('jarson', 'boy');
xx.breathe();   // jarson is breathing
xx.info();   // jarson is boy

console.log(xx instanceof Human); // true
console.log(xx instanceof Man); // true

代码很简单，不作赘述，可以使用文章里提到的在线工具去试试效果就能明白了。需要注意的是： super() 是父类的构造函数。

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

let与const

在我看来，在es6新特性中，在定义变量的时候统统使用 let 来代替 var 就好了， const 则很直观，用来定义常量，即无法被更改值的变量。

for (let i=0;i<2;i++) {
    console.log(i);  //输出: 0,1
}

箭头函数

ES6中新增的箭头操作符 => 简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，这样的写法可以为我们减少大量的代码，看下面的实例：

let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];

上面的 (item, i) 就是参数，后面的 console.log(item, i) 就是回到函数要执行的操作逻辑。

上面代码转为js格式：

var arr = [6, 8, 10, 20, 15, 9];
arr.forEach(function(item, i) {
	return console.log(item, i);
});
var newArr = arr.filter(function(item) {
    return (item < 10);
});
console.log(newArr);

字符串模版

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。看一下实例就会明白了：

//产生一个随机数
let num = Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

摘录自：
http://www.open-open.com/lib/view/open1462951574598.html
https://segmentfault.com/a/1190000002904199

Feed enhanced by Better Feed from Ozh