es6(中)

目录

5. 对象

对象字面量

属性简写

方法名简写

属性名表达式

对象的拓展运算符

拷贝 - 拓展运算符（...）

合并

6. 箭头函数

使用场景

7. ES 6 中的 class

实例化

继承

8.ES6 中的模块

导出：

 导入：

export default 命令

export default 导入文件不需要加入{}

---

5. 对象

对象字面量

属性简写

const age = 12;
const name = "Thomas";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同于
const person = {age: age, name: name}

方法名简写

const person = {
  sayHello(){
    console.log("Hello");
  }
}
person.sayHello();  //"Hello"
//等同于
const person = {
  sayHello:function(){
    console.log("Hello");
  }
}
person.sayHello();//"Hello"

属性名表达式

ES6允许用表达式作为属性名，但是一定要将表达式放在方括号内。

const obj = {
 ["he"+"llo"](){
   return "Hello";
  }
}
obj.hello();  //"Hello"

对象的拓展运算符

拷贝 - 拓展运算符（...）

let person = {name: "Thomas", age: 16};
let someone = { ...person };
someone;  //{name: "Thomas", age: 16}

合并

let age = {age: 16};
let name = {name: "Thomas"};
let person = {...age, ...name};
person;  //{age: 16, name: "Thomas"}

---

6. 箭头函数

更加简洁的函数书写方式

参数 => 函数体

注意： 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。

function fn(){
  setTimeout(()=>{
    // 定义时，this 绑定的是 fn 中的 this 对象
    console.log(this.a);
  },0)
}
var a = 30;
// fn 的 this 对象为 {a: 20}
fn.call({a: 20});  // 20

不可以作为构造函数，也就是不能使用 new 命令，否则会报错

使用场景

 JavaScript中经常看到 var that= this 这样的代码，为了将外部 this 传递到回调函数中，那么有了箭头函数，就不需要这样做了，直接使用 箭头函数就行。

// 回调函数
var Person = {
    'age': 20,
    'sayHello': function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 30;
Person.sayHello();  // 20
 
//箭头函数
var Person1 = {
    'age': 50,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 50

---

7. ES 6 中的 class

 class 的本质是 function

class Example {
    constructor(a) {
        this.a = a;
    }
}

实例化

必须通过new关键字 let example = new Example()

继承

关键字extends

class Father {
    constructor() {}
}
class Child extends Father {
    constructor() {
        super()
    }
}
let child = new Child(); 

---

8.ES6 中的模块

ES6 的模块化分为导出（export） @与导入（import）两个模块。

export{...变量};import{...变量}

模块导入导出各种类型的变量，如字符串，数值，函数，类。

导出：

methods.js

let foo = 1;
let bar = 2;
export { foo, bar };

 导入：

test.js

import { foo, bar } from "methods.js";

as 

import { foo as name1 } from "./methods.js";

export default 命令

• 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。

• export default 中的 default 是对应的导出接口变量。

• 通过 export 方式导出，在导入时要加{ }，export default 则不需要。

• export default 向外暴露的成员，可以使用任意变量来接收。

var a = "My name is Thomas!";
export default a; // 仅有一个

export default 导入文件不需要加入{}

import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收