ES6入门二（常见的面试点）

项目中对应的代码github的地址：https://github.com/Barretem/ES6_demo_list

5、面向对象

es5类以及类的继承

//父类
function User(name, age) {
  this.name = name;
  this.age = age;
}

User.prototype.printUserInfo = function () {
  console.log(`${this.name}:${this.age}`);
}

//子类
function VipUser(name, age, level) {
  User.call(this, name, age);

  this.level = level;
}

VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;

VipUser.prototype.printLevel = function() {
  console.log(`${this.level}`)
}

const class1 = new VipUser('barret', 25, 999);
class1.printUserInfo();
class1.printLevel();

es6类以及类的继承

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  printUserInfo() {
    console.log(`${this.name} : ${this.age}`);
  }
}

//子类
class VipUser extends User {
  constructor(name, age, level) {
    super(name, age);

    this.level = level;
  }

  printLevel() {
    console.log(`${this.level}`)
  }
}

const class1 = new VipUser('barret', 25, 999);
class1.printUserInfo();
class1.printLevel();

es6所写的类相比于es5的优点：

（1）区别于函数，更加专业化（类似于JAVA中的类）

（2）写法更加简便，更加容易实现类的继承

6、Promise

（1）ajax与promise并联请求比较

/**
 * ajax 各个请求并联请求
 */
const ajaxData = () => {
    $.ajax({
        url: './mock/user1.json',
        dataType: 'json',
        success: (res) => {
            console.log(res)
        }
    })

    $.ajax({
        url: './mock/user2.json',
        success: (res) => {
            console.log(res);
        }
    })
};
//            ajaxData();

/**
 * promise 各个请求并联请求
 * --相比于ajax，更加便于数据进行统一处理
 */
const promiseData = function() {
    const p1 = new Promise(function(resolve, reject) {
        $.ajax({
            url: './mock/user1.json',
            dataType: 'json',
            success(res) {
                resolve(res)
            },
            error(err){
                reject(err);
            }
        })
    })

    const p2 = new Promise(function (resolve, reject) {
        $.ajax({
            url: './mock/user2.json',
            success(res) {
                resolve(res)
            },
            error(err){
                reject(err);
            }
        })

    })

    Promise.all([
        p1, p2
    ]).then(function(arr) {
        console.log(arr);
    },function(errArr) {
        console.error(errArr)
    })
}
promiseData();

（2）ajax与promise串联请求比较

/**
 * ajax 各个请求串联请求
 * --下一次请求依赖于上一次请求，如果依赖性比较多嵌入会很多，维护起来会很复杂
 */
const ajaxData = function() {
    $.ajax({
        url: './mock/user1.json',
        dataType: 'json',
        success: (res) => {
            console.log(res)
            if(res.userName == "老王"){
                $.ajax({
                    url: './mock/user1Info.json',
                    success: (res2) => {
                        console.log(res2)
                    }
                })
            }
        }
    })
}
//            ajaxData();

/**
 * promise 各个请求串联请求
 * --缺点，下一个请求依赖于上一个请求也是会嵌套，维护起来会很复杂
 */
const promiseData = function() {
    const p1 = new Promise(function(resolve, reject) {
        $.ajax({
            url: './mock/user1.json',
            success(res) {
                resolve(res);
            },
            error(err) {
                reject(err);
            }
        })
    })

    const p2 = function (input) {
        return new Promise(function(resolve, reject) {
            $.ajax({
                url: './mock/user1Info.json',
                success(res) {
                    resolve({
                        ...res,
                        ...input
                    });
                },
                error(err) {
                    reject(err);
                }
            })
        })
    }

    p1.then(p2)
        .then((res) => {
            console.log(res)
        })
}

promiseData()

7、generator（生成器）

    generator看上去像是一个函数，实际上可以返回多次

    与函数的不同

    （1）generator用function*定义

    （2）generator用yield返回多次

    （3）function一步到底，generator中间可以停顿（踹一脚走一步）

    7.1 基本使用：

function* show() {
    console.log('a');
    yield ;
    console.log('b');
}

const genObj = show();
genObj.next(); //输出a
genObj.next(); //输出b
genObj.next(); //输出{value: undefined, done: true}

    7.2  yield可以传参：  

function* show(num1, num2) {
    console.log(num1 + ' ' + num2);
    const a = yield;
    console.log(a)
}

const genObj = show(66, 99);
genObj.next(12); //输出 "66 99" 没法给yield传参（原因：generator在执行yield前半部分，没走到赋值操作）
genObj.next(55); //输出55
genObj.next(67); //输出{value: undefined, done: true}

    7.3  yield可以返回（相当于return）：

function* show() {
    const a = yield 99;
    yield a;
    return 66;
}

const genObj = show();

const a1 = genObj.next(12);
console.log(a1); //输出{value: 99, done: false}

const a2 = genObj.next(55);
console.log(a2); //输出{value: 55, done: false}

const a3 = genObj.next(99);
console.log(a3); //输出{value: 66, done: true}

    7.4 generator与promise处理并联ajax请求

注：使用到的runner.js方便处理generator，源码都在github远程仓库

/**
 * promise 各个请求并联请求
 * --相比于ajax，更加便于数据进行统一处理
 */
const promistData = function() {
    const p1 = new Promise(function(resolve, reject) {
        $.ajax({
            url: './mock/user1.json',
            dataType: 'json',
            success(res) {
                resolve(res);
            },
            error(err) {
                reject(err)
            }
        })
    });

    const p2 = new Promise(function (resolve, reject) {
        $.ajax({
            url: './mock/user2.json',
            success(res) {
                resolve(res)
            },
            error(err){
                reject(err);
            }
        })
    })

    Promise.all([p1, p2]).then(function (arr) {
        console.log(arr)
    }, function (errArr) {
        console.error(errArr)
    })
}
//            promistData();

/**
 * generator 各个请求并联请求
 * --相比promise写法更加简便
 */
runner(function *(){
    let data1=yield $.ajax({url: './mock/user1.json', dataType: 'json'});
    let data2=yield $.ajax({url: './mock/user2.json', dataType: 'json'});

    console.log(data1);
    console.log(data2)
});

    7.4 generator与promise处理串联ajax请求

注：使用到的runner.js方便处理generator，源码都在github远程仓库

/**
 * promise 各个请求串联请求
 * --缺点，下一个请求依赖于上一个请求也是会嵌套，维护起来会很复杂
 */
const promiseData = function() {
    const p1 = new Promise(function(resolve, reject) {
        $.ajax({
            url: './mock/user1.json',
            success(res) {
                resolve(res);
            },
            error(err) {
                reject(err);
            }
        })
    })

    const p2 = function (input) {
        return new Promise(function(resolve, reject) {
            $.ajax({
                url: './mock/user1Info.json',
                success(res) {
                    resolve({
                        ...res,
                        ...input
                    });
                },
                error(err) {
                    reject(err);
                }
            })
        })
    }

    p1.then(p2)
        .then((res) => {
            console.log(res)
        })
}

//            promiseData()

/**
 * generator 各个请求并联请求
 * --相比promise写法更加简便
 */
runner(function *(){
    let data1=yield $.ajax({url: './mock/user1.json', dataType: 'json'});

    if(data1.userName == '老王') {
        let userInfo = yield $.ajax({url: './mock/user1.json', dataType: 'json'});
        console.log(userInfo);
    }
});