ES5 6 7常用语法

2018-07-26  本文已影响0人  冬来Angus

ECMAScript

简介

  1. 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范
  2. 而我们学的JavaScript是ECMA的实现, 但术语ECMAScript和JavaScript平时表达同一个意思
  3. JS包含三个部分：

    1. ECMAScript（核心）

    2. 浏览器端扩展

      1. DOM（文档对象模型）
      2. BOM（浏览器对象模型）

    3. 服务器端扩展

      Node

  4. ES的几个重要版本
    1. ES5 : 09年发布
    2. ES6(ES2015) : 15年发布, 也称为ECMA2015
    3. ES7(ES2016) : 16年发布, 也称为ECMA2016 (变化不大)
  5. 扩展学习参考:
    1. ES5 :
    2. ES6
    3. ES7

严格模式("use strict")

ES5 常用方法

JSON对象

Object扩展

var o = {
    username: 'xiaoming',
    age: 20
};
var obj = Object.create(o, {
    sex: {
        value: '男',//指定值
        writable: true,//标识当前属性值是否是可修改的, 默认为false
        configurable: true,//标识当前属性值是否是可以被删除, 默认为false
        enumerable: true //标识当前属性能否用 for in 枚举,默认为false
    }
});

var o = {
    firstName: 'Xiaoming',
    lastName: 'Wang'
};
var obj = Object.defineProperties(o, {
    fullName: {
        get: function () {//获取扩展属性的值,获取拓展属性值是get方法自动调用（惰性求值）
            return this.firstName + ' ' + this.lastName;
        },
        set: function (data) {//监听扩展属性,当扩展属性发生变化的时候自动调用
            var names = data.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
});

var obj = {
    firstName: 'Xiaoming',
    lastName: 'Wang',
    get fullName() {//get 获取的值不能直接obj.fullName修改
        return this.firstName + ' ' + this.lastName;
    },
    set fullName(data) {
        var names = data.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
    }
};

ES6 常用语法

2个新的关键字

  1. let
  1. const

变量的解构赋值

let o = {
    firstName: 'Xiaoming',
    lastName: 'Wang'
};
//解构对象必须以对象形式解构
//必须赋值对象已有属性
let {firstName, lastName} = o;
console.log(firstName, lastName);//Xiaoming Wang

let arr = [1, 'a', true];
//解构数组必须以数组形式解构
//根据数组下标取值，不需要的则以逗号占位
let [, a, b, c] = arr;
console.log(a, b, c);//a true undefined
let [d, ...e] = arr;
console.log(d, e);//1 ["a", true]

function fun ({firstName, lastName}) {//{firstName, lastName} = o
    console.log(firstName, lastName);//Xiaoming Wang
}

各种数据类型的扩展

set/Map容器结构

Promise

Symbol

概念：

​ ES6中的添加了一种原始数据类型symbol

特点：

  1. Symbol属性对应的值是唯一的，解决命名冲突问题
  2. Symbol值不能与其他数据进行计算，包括同字符串拼串
  3. for in, for of遍历时不会遍历symbol属性。

使用：

  1. 调用Symbol函数得到symbol值

    let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
console.log(obj);//{Symbol(): "hello"}

  2. 传参标识

    let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')

  3. 内置Symbol值

    除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法

  4. Symbol.iterator

    • 对象的Symbol.iterator属性，指向该对象的默认遍历器方法
    let targetData = {
    //等同于在指定的数据内结构上部署了 iterator 接口
    //当 for of 去遍历某一个数据结构的时候，首先去找 Symbol.iterator
    [Symbol.iterator]: function () {
       let nextIndex = 0,
        len = this.length;
        return {//遍历器对象
            next: function () {
                return {
                    value: this[nextIndex++],
                    done: nextIndex < len ? false : true
                }
            }
        } 
    }
}

iterator

概念：

​ iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制。
作用:

  1. 为各种数据结构，提供一个统一的、简便的访问接口
  2. 使得数据结构的成员能够按某种次序排列
  3. ES6创造了一种新的遍历命令for of循环，iterator接口主要供for of消费。

工作原理：

//模拟指针对象（遍历器对象)
function myIterator (arr) {//iterator接口
    let nextIndex = 0,
        len = arr.length;
    return {//遍历器对象
        next: function () {
            return {
                value: arr[nextIndex++],
                done: nextIndex < len ? false : true
            }
        }
    }
}
//准备一个数据
let arr = [1, 2, 23, 'abc'];
let iteratorObj = myIterator(arr);

原生具备iterator接口的数据(可用for of遍历)

let arr = [1, 2, 23, 'abc'];
for(let i of arr) {
    console.log(i);
}

function fun () {
    for(let i of arguments) {
        console.log(i);
    }
}
fun(1, 2, 23, 'abc');

其他：

var o = {
    username: 'Tom',
    age: 23
}
for (let i of o) {
    console.log(i);//Uncaught TypeError: o is not iterable
}
//添加遍历器
o[Symbol.iterator] = function* test() {
    yield 1
}
for (let i of o) {
    console.log(i);//1
}

for--of循环

Generator

概念：

  1. ES6提供的解决异步编程的方案之一
  2. Generator函数是一个状态机，内部封装了不同状态的数据，用来生成遍历器对象
  3. 可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果

特点：

  1. function 与函数名之间有一个星号
  2. 内部用yield表达式来定义不同的状态
function* generatorExample(){
    yield 'hello';  // 状态值为hello
    yield 'generator'; // 状态值为generator
    return "result"
}
let a = generatorExample();
a.next();//{value: "hello", done: false}
a.next();//{value: "generator", done: false}
a.next();//{value: "result", done: true},有 return 返回值则为返回值，无返回值为 undefined
a.next();//{value: undefined, done: true}
  1. Generator函数返回的是指针对象(iterator)，而不会执行函数内部逻辑
  2. 调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
  3. 再次调用next方法会从上一次停止时的yield处开始，直到最后
  4. yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。
function* generatorExample(){
    let a = yield 'hello';  // 状态值为hello
    console.log(a);//a的值为 undefined
    yield 'generator'; // 状态值为generator
}
let a = generatorExample();
a.next();//{value: "hello", done: false}
a.next("para");//a的值变为传入的 ‘para’;//{value: generator, done: true}

class类

//定义父类
class Person {
    //类的构造方法
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    //类的一般方法
    showInfo() {
        console.log(this.name, this.age);
    }
}
let person = new Person('Tom', 23);
console.log(person);//Person {name: "Tom", age: 23}
person.showInfo();//Tom 23

//定义子类
class SubPerson extends Person {
    constructor(name, age, salary) {
        super(name, age);//调用父类的构造方法
        this.salary = salary;
    }
    //重写父类的方法
    showInfo() {
        console.log(this.name, this.age, this.salary);
    }
}
let sub = new SubPerson('Jack', 13, 10000);
console.log(sub);//SubPerson {name: "Jack", age: 13, salary: 10000}
sub.showInfo();//Jack 13 10000

ES7

async函数(源自ES2017)

概念：

​ 真正意义上去解决异步回调的问题，同步流程表达异步操作
本质：

`Generator`的语法糖

语法：

async function asyncFun(){
    let result = await Promise.resolve('success');
    console.log(result);//success,如果 Promise.resolve 未传参数则为 undefined
    result = await Promise.reject('fail');
    console.log(result);//Uncaught (in promise) fail
}
asyncFun();

特点：

  1. 不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
  2. 返回的总是Promise对象，可以用then方法进行下一步操作
  3. async取代Generator函数的星号*，await取代Generator的yield
  4. 语意上更为明确，使用简单
上一篇 下一篇

猜你喜欢

热点阅读