blog-web/source/_posts/JavaScript/ES6的重要新特性.md

title	date	tags	categories
ES6的重要新特性	2018-4-22 19:50:19	JavaScript ECMAScript6	JavaScript

1. 函数的默认参数

var link = function(height=50,color="red"){
  //some code...
}

在没有这种写法的时候 我们通常需要通过下面的方式来设置函数参数的默认值

var link = function(height,color) {
  height = height || 50;
  color = color || "red";
  //some code...
}

但是这种方式存在缺陷 , 就是当实参为0 或者 ""等这种会被判定为false的值 , 他们就会被默认值所替代 而包含参数默认值的函数则不会存在这个问题

2. 模板表达式 以往如果需要在字符串中嵌入某个变量值 , 需要使用加号进行拼接

var port = 7001;
console.log("the server is listening at " + port + "!");

在ES6当中 , 使用反引号包裹的字符串 , 可以使用${varName}的形式来表示模板字符

var port = 7001;
console.log(`the server is listening at ${port}!`);

用法类似JSP当中的 EL表达式

3. 多行字符串 以往要在代码中换行显示字符串 , 需要使用加好进行拼接 , 如果要使字符串当中实际包含换行 , 则需要使用转义字符\n

反引号当中的字符串可以直接进行换行 , 而不需要使用\n符号

4. 拆包表达式 如果要把一个JS对象当中的值赋给局部变量 , 以往通常需要这么做

var data = {
  name : "Sookie",
  age : 18
};
var name = data.name;
var age = data.age;
console.log(`name : ${name}, age : ${age}`);

在ES6当中 , 使用以下语句可以达到相同的效果

var {name,age} = data;

对于数组的支持

var data = {
  name : "Sookie",
  age : 18,
  skill : ["JavaScript","Java","MongoDB"]
};
//这里相当于产生了3个局部变量
var [sk1, sk2, sk3] = data.skill;
console.log(sk1, sk2, sk3);

如果要跳过数组中某个位置的元素也是可以的

var [sk1, , sk3] = data.skill;

5. 块级作用域的let和const let可以认为是一个更新的var , 使用它定义的局部变量 , 作用域仅存在与当前的代码块( 包括复合语句 ) 而由于变量的定义提升问题 , var是不能完全做到这一点的 例如 , 从习惯了写Java的程序员 , 通常习惯于下面这种写法

var sum = 0;
for(var i=0 ; i<10 ; i++){
  sum += i;
}
console.log(sum);//45
console.log(i);//10

但是变量 i 的作用域并不仅限于for循环的子句 如果使用如下方式

var sum = 0;
for(let i=0 ; i<10 ; i++){
  sum += i;
}
console.log(sum);//45
console.log(i);
//ReferenceError: i is not defined

就把 i 的作用域限制在了代码块当中

对于使用const定义的变量 , 可以参照C语言中的const关键字 , 和Java当中的final关键字 作用仅仅是该引用的指向不可变 , 但是指向的对象本身是可变的 6. 类与面向对象 在ES5当中 , 要定义一个类, 只能是编写一个构造函数 , 这个函数与普通的函数没有本质区别 , 只是使用new关键字进行调用 , 它就可以构造一个对象 而class关键字 , 在ES6之前 , 只是作为一个没有意义的保留字存在的 现在 , 我们可以使用与Java十分相像的方式去写一个类

class BaseModel {
  constructor(options = {}, data = []) {
    this.name = "Sookie";
    this.options = options;
    this.data = data;
  }
  showName() {
    console.log(`the name is ${this.name}`);
  }
}

var model = new BaseModel();
model.showName();

constructor表示这个类的构造函数 需要注意的是 : 对于对象当中属性的赋值 , 必须要在构造函数当中完成 , 而不能像Java那样直接对类中的属性设定初始值 #####继承 继承的实现方式与Java也十分类似

class MyModel extends BaseModel {
  constructor(options = {}, data = []) {
    //如果要显式调用父类的构造方法, super必须放在第一条语句
    super(options, data);
    this.age = 18;
  }
  showAge() {
    console.log(`the name is ${this.age}`);
  }
}
var model = new MyModel();
model.showName();
model.showAge();