Xc's Blog

ES6的发布也已经有几年时间了，本文是我自己学习Nodejs的一点笔记，更深入的学习可以查看阮一峰老师的开源书籍——《ECMAScript 6 入门》。

Let 与 Const

Let是ES6中新增的命令，用法类似于Var。但Let声明的变量不存在预解析

console.log(num);
//预解析
var num = 123;
// return : 123

console.log(num);
let num = 123;
//ReferenceError: num is not defined

es6引入了块级作用域，let声明的变量在块级作用域有效

{
    let str = "hello";
}
console.log(str);  //ReferenceError: str is not defined

 for(let i = 0;i < 3; i++)
{
    console.log(i); // return : 0 1 2
}
console.log(i); //ReferenceError: i is not defined

暂时性死区：只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。在块级作用域内，声明let之前给tmp赋值都会报错。

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

同一个作用内，let不可以声明重名的变量

let a = 3;
let a = 4;//SyntaxError: Identifier 'a' has already been declared

const变量不能重新赋值，必须在声明的时候进行初始化

const abc = 456;
abc = 123;
console.log(abc);//TypeError: Assignment to constant variable.

变量的解构赋值

原来的赋值方法：

var a = 4, b = 5, c = 6;
console.log(a,b,c);

数组的解构赋值

let [a,b,c] = [123,456,789];
let [a,,c] = [123,789]
let [a,[num,abc],c] = [123,[111,123],789];//解构赋值内部支持嵌套
let [a=1,b,c] = [,123,456];

Example：交换x和y的值

let [x,y] = [1,2];
[x,y] = [y,x];
console.log(x,y);

对象的解构赋值

let {name:username,age}={name:'zhangsan',age:12};
let {name:username='lisi',age}={age:12};

var obj = {
    name : 'zhangsan',
    age : 13,
    friend : {
        fname : 'lisi',
        sex : 'male'
    }
};
let {name,age,friend} = obj;
console.log(name,age,friend.fname,friend.sex);

字符串解构赋值

let [a,b,c,d,e,f,length] = 'hello';
console.log(a,b,c,d,e,f,length);//这种方法不能输出length
--------------------------------
console.log('hello'.length);
let {length:l} = 'hello';
console.log(l);

字符串扩展

includes() 判断字符串中是否包含特定的字串

let str = 'Hello world';
console.log(str.includes('world',7))

startWith() 判断字符串是否以特定的字符串开始
endsWith() 判断字符串是否以特定的字符串结束

let url = 'admin/index.php';
console.log(url.startsWith('index',6))
console.log(url.endsWith('.html'))

模板字符串

var tag = `
    <div>
        <span>${data.name}</span>
        <span>${data.age}</span>
        <span>${1+1}</span>
        <span>${foo('nihao')}</span>
    </div>
`;
console.log(tag);

函数扩展

rest 参数

function foo(a,...rest){
    console.log(a);
    console.log(rest);
}
foo(1,2,3,4,5,6);
// return ：1
// return ：[ 2, 3, 4, 5, 6 ]

扩展运算符 …

let arr = [1,2,3,4,5,6];
function foo (a,b,c,d,e){
    console.log(a,b,c,d,e);
}
foo(...arr);//...作用就是把数组转成单个的数据项
//也可以使用apply函数
foo.apply(null,arr);//apply作用就是把数组或者类数组转成单个的数据项

Example:数组的合并

let arr1 = ['red','green'];
let arr2 = ['blue','orange','yellow'];
let arr = [...arr1,...arr2];
console.log(arr);

箭头函数

let foo = value => value;
let ret = foo(456);
console.log(ret);

注意事项

函数中的this是声明时的对象，不是调用时的对象

function foo(){
setTimeout(() => {
    console.log(this.num);
},100)
}
let num = 1;
foo.call({num:2});

箭头函数不可以new，也就是说它不是构造函数
```
let foo =()=>{};
new foo();
```

函数内部不可以使用arguments，可以使用rest参数替代

let foo = (a,b) =>{
console.log(a,b);
console.log(arguments[0]);
}
foo(12,13);

类（本质上就是构造函数）

类的基本用法

class Person{
    constructor(sex,weight){
        this.sex = sex;
        this.weight = weight;
    }
    showWeight(){
        console.log('weight:'+this.weight);
    }
    showSex(){
        console.log('sex:'+this.sex);
    }
}
let p = new Person('female','75kg');
p.showSex();
p.showWeight();

继承 extends

class Student extends Person{
    constructor(sex,weight,score){
        super(sex,weight);//调用父类的构造函数,这个步骤是必须的
        this.score = score;
    }
    showScore(){
        console.log('score:'+this.score);
    }
}
let stu = new Student('male','70kg','100');
stu.showScore();
stu.showSex();
stu.showWeight();
Student.showInfo();

尾声

这就是个人的一点笔记，用于开发查询时使用，写的比较仓促，不适合作为教程学习。感谢阅读。

Notes:ES6标准几个新特性

Let 与 Const

变量的解构赋值

字符串扩展

函数扩展

类（本质上就是构造函数）

尾声