es6新增属性和方法

首先要说let，他是只在代码块中执行的变量，例如：

{
    let a= 10;
    var b= 1;
}
console.log(a);//defined
console.log(b);//1

面试题系列咱们说过，闭包的经典应用是在循环的时候：

var a= [];
for (vari = 0; i <10; i++) {
    a[i] =function () {
        console.log(i);
    };
}
a[6]();// 10

这样是得不出你想要的结果的，以前只有利用闭包，但是现在我们有了let：

var a= [];
for (leti = 0; i <10; i++) {
    a[i] =function () {
        console.log(i);
    };
}
a[6]();// 6

我们发现它神奇的执行了。另外let不允许重复声明，它主要就是应用在函数内部的块级作用域。另外还新增const只读常量，一旦声明就无法改变，作用域和let一样。

For...of循环：

let iterable= [10, 20, 30];
for (constvalue of iterable) {
    console.log(value);
}

我们不仅可以这样用它来循环数组，甚至能用它来循环字符串。

let iterable= "boo";
for (letvalue of iterable) {
    console.log(value);
}
// "b"
// "o"
// "o"

新增字符串遍历的三个方法，以前我们只有indexOf这个方法来来判定一个字符串，是否含在另外一个字符串中，它返回字符串首次出现的位置，这显然不能满足我们。

所以es6新增includes:返回布尔值，表示是否找到字符串。startsWith:返回布尔值，表示字符串是否在源字符串的头部位置。endsWith:返回布尔值，表示参数字符串是否在源字符串尾部。

var s= 'Hello world!';
s.startsWith('Hello')// true
s.endsWith('!')// true
s.includes('o')// true

三个方法都支持第二个参数，表示开始搜索的位置。

var s= 'Hello world!';
s.startsWith('world',6) // true
s.endsWith('Hello',5) // true
s.includes('Hello',6) // false

 

字符串操作新增repeat方法，返回一个新字符串，表示将源字符串重复多少次。

'x'.repeat(3)// "xxx"
'hello'.repeat(2)// "hellohello"
'na'.repeat(0)// ""

字符串操作里面最麻烦的莫过于拼接字符串，为解决这个问题ec6提供了模板字符串解决方案。

$('#result').append(
        'There are <b>' + basket.count +'</b> ' +
        'items in your basket, ' +
        '<em>' + basket.onSale +
        '</em> are on sale!'
);

以前我们是这么写的，现在我们只需要这么写：

    $('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

记住开头结尾要加上反引号。模板中嵌入变量需要写在${}中。

 

Ec6里面终于新增了类的方法。以前我们我们是这么写构造函数的：

function Point(x, y) {
    this.x= x;
    this.y= y;
}

Point.prototype.toString= function () {
    return '('+ this.x+ ', ' +this.y+ ')';
};

var p= new Point(1,2);

而现在有了类之后：

//定义类
class Point {
    constructor(x, y) {
        this.x= x;
        this.y= y;
    }

    toString() {
        return '('+ this.x+ ', ' +this.y+ ')';
    }
}

注意方法之间不要加逗号，否则会报错。

使用的时候我们直接new就可以了。

class Bar {
    doStuff() {
        console.log('stuff');
    }
}

var b= new Bar();
b.doStuff()// "stuff"

是不是简单方便了好多！其实类里面的方法，就等同于它的原型下面的方法。

class Point {
    constructor(){
        // ...
    }

    toString(){
        // ...
    }

    toValue(){
        // ...
    }
}

// 等同于

Point.prototype = {
    toString(){},
    toValue(){}
};

 只提了一部分，明天继续。

更多请关注公众号：FE学习笔记