es6

ECMAScript6 #

ECMAScript简称就是ES,你可以把它看成是一套标准,JavaScript就是实施了这套标准的一门语言现在主流浏览器使用的是ECMAScript5

1. 作用域变量 #

作用域就是一个变量的作用范围。也就是你声明一个变量以后,这个变量可以在什么场合下使用,以前只有全局作用域和函数作用域。

if (true) {
        var a = "a"; // 期望a是某一个值
    }
console.log(a);

1.2 块级作用域 #

在用var定义变量的时候，变量是通过闭包进行隔离的，现在用了let，不仅仅可以通过闭包隔离，还增加了一些块级作用域隔离。块级作用用一组大括号定义一个块,使用 let 定义的变量在大括号的外面是访问不到的

if(true){
    let name = 'zfpx';
}
console.log(name);// ReferenceError: name is not defined

1.3 练习: #

请使用 let 在浏览器里写一个九九乘法表

2. 解构 #

2.1 解析数组 #

解构意思就是分解一个东西的结构,可以用一种类似数组的方式定义N个变量，可以将一个数组中的值按照规则赋值过去。

var [name,age] = ['zfpx',8];
console.log(name,age);

2.2 解构对象 #

对象也可以被解构

var obj = {name:'zfpx',age:8};
//对象里的name属性的值会交给name这个变量，age的值会交给age这个变量
var {name,age} = obj;
console.log(name,age);

2.3 练习: 请解析对象 #

从对象中解构出name province city三个局部变量

 ver person = {name:'zfpx',address:{province:'江苏',city:'南京'}},

3. 字符串 #

3.1 模板字符串 #

模板字符串用反引号(数字1左边的那个键)包含，其中的变量用${}括起来

var name = 'zfpx',age = 8;
let desc = `${name} is ${age} old!`;
console.log(desc);

//所有模板字符串的空格和换行，都是被保留的
var str = `<ul>
<li>a</li>
<li>b</li>
</ul>`;
console.log(str);

其中的变量会用变量的值替换掉

3.2 练习: #

编写一段JS脚本，使用模板字符串把users数组转成li添加到id内部

<ul id="content">

</ul>
<script>
    var users = [{id:1,name:'zpfx1'},{id:2,name:'zpfx2'}
    ,{id:3,name:'zpfx3'}];
    //....
</script>

结果:

<ul id="content">
 <li>1:zfpx1</li>
 <li>2:zfpx2</li>
 <li>3:zfpx3</li>
</ul>

4. 函数 #

4.1 函数定义 #

ES6允许使用“箭头”（=>）定义函数。箭头函数简化了函数的的定义方式，一般以 "=>" 操作符左边为输入的参数，而右边则是进行的操作以及返回的值inputs=>output

var double = v => v*2;

上面的箭头函数等同于

var double = function(v) {
  return v*2;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var fn = () => 100;

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var add = (a,b) => a+b;

4.2 练习: #

使用箭头函数对一个数组进行排序

var arr = [6,3,1,5,8];
/// TODO
console.log(arr); //输出 1 3 5 6 8

4.3 this指针 #

箭头函数根本没有自己的this，导致内部的this就是外层代码块的this 正是因为它没有this，从而避免了this指向的问题

var person = {
    name:'zfpx',
    getName:function(){
      //在浏览器执行的话this指向window
        setTimeout(function(){console.log(this);},1000);
        //在浏览器执行的话this指向person
        setTimeout(() => console.log(this),1000);
    }
}
person.getName();

4.4 练习: #

请判断下面的控制台会输出什么值?

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);//输出多少
setTimeout(() => console.log('s2: ', timer.s2), 3100);//输出多少

5. 对象 #

5.1 对象字面量 #

如果你想在对象里添加跟变量名一样的属性，并且属性的值就是变量表示的值就可以直接在对象里加上这些属性

let name = 'zfpx';
let age = 8;
let getName = function(){
    console.log(this.name);
}
let person = {
    name,
    age,
    getName
}
person.getName();

6. 类 #

6.1 class #

使用class这个关键词定义一个类,基于这个类创建实例以后会自动执行constructor方法,此方法可以用来初始化

class Person {
    constructor(name){
        this.name = name;
    }
    getName(){
        console.log(this.name);
    }
}
let person = new Person('zfpx');
person.getName();

6.2 继承extends #

一个类可以去继承其它的类里的东西

class Person {
   constructor(name){
     this.name = name;
   }
}

class Teacher extends Person{
    constructor(name,age){
        super(name);
        this.age = age;
    }
}
var teacher = new Teacher('zfpx',8);
console.log(teacher.name,teacher.age);

6.3 练习 #

使用es5实现一个类似的功能

function Teacher(){
 //TODO
}
//TODO
var teacher = new Teacher('zfpx',8);
console.log(teacher.name,teacher.age);

6.4 get与set #

getter可以用来得获取属性，setter可以去设置属性

class Document {
    constructor(){
        this.cookies = [];
    }
    set cookie(cookie){
        this.cookies.push(cookie);
    }
    get cookie(){
        return this.cookies;
    }
}
let document = new Document();
document.cookie = 'name=zfpx';
document.cookie = 'age=6';
console.log(document.cookie);

6.5 练习 #

实现一个类似于cookie的功能

7. 模块 #

模块功能主要由两个命令构成：export和import

export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能。

7.1 导出 #

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

export var name = 'zfpx';
export var age = 8;

var name = 'zfpx';
var age = 8;
export {name,age};

7.2 导入 #

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）

import {name,age} from './person.js';
console.log(name,age);

7.3 在页面中引用 #

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="index.js"></script>

7.4 默认导出 #

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出此模块的默认输出是一个函数

export default function say(){
    console.log('say');
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

import say from './person.js';