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();
Vip.prototype.constructor = Vip;

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

const class1 = new Vip('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 各个请求
9011
并联请求
* --相比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);
}
});