ES6基础知识总结(下)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情 >

---

字符串

字符串新方法

//startWith — 返回boolean类型
let str='abcd'; alert(str.startsWith('a')) 
//true
//endsWith — 返回boolean类型
let str='abcd'; 
alert(str.endsWith('a')) 
//flase

字符串模板

let num=1; 
let str=`ab${num}c`; 
//【``反单引号】 
alert(str) 
//【ab1c】——可以直接将变量塞进字符串中
//直接将变量塞进字符串中 ${东西}

面向对象—class关键字

构造器和类分开了
class里面直接加方法
继承 extends super

//class定义 
class User{ 
    constructor(name,tel){
        this.name=name; this.tel=tel; 
    } 
    showName(){ 
        alert(this.name); 
     } 
     showTel(){ 
         alert(this.tel); 
     } 
 }

//class继承 
class VipUser extends USer{ 
    constructor(name,tel,leave){ 
        super(name,tel) 
        //super 关键字用于访问父对象上的函数。 
        this.leave=leave; 
    } 
    showLeave(){ 
        alert(this.leave)
    } 
}

Promise—简化异步操作

• 异步：操作之间没啥关系，同时进行多个操作【代码更复杂】
• 同步：同时只能做一件事【代码简单】

let p1 = new Promise(function (resolve, reject) {
    //异步代码
    // resolve——success
    // reject——fail
    $.ajax({
        url: 'arr.txt', dataType: 'json', success(arr) {
            //json方法简写
            resolve(arr);
        }, error(err) {
            reject(err);
        }
    });
});
let p2 = new Promise(function (resolve, reject) {
    $.ajax({
        url: 'arr.txt', dataType: 'json', success(arr) {
            resolve(arr);
        }, error(err) {
            reject(err);
        }
    });
})
p1.then(function (arr) {
    alert('success' + arr);
}, function (err) {
    alert('fail' + err);
})
Promise.all([p1, p2]).then(function (arr) {
    let [res1, res2] = arr;
    //解构赋值
    alert('全部执行成功')
}, function () {
    alert('至少有一个失败')
})

function createPromise(url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url, dataType: 'json', success(arr) {
                resolve(arr);
            }, error(err) {
                reject(err);
            }
        });
    })
}

Promise.all([createPromise(url1), createPromise(url2)]).then(function (arr) {
    let [res1, res2] = arr;
    //解构赋值 
    alert('全部执行成功')
}, function () {
    alert('至少有一个失败')
})

//Jquery现成promise——JQ中ajax返回的为promise数据 

Promise.all([$.ajax({url: '', dataType: 'json'}), $.ajax({
    url: '',
    dataType: 'json'
}),]).then(function (arr) {
    let [res1, res2] = arr;
    alert('全部执行成功')
}, function () {
    alert('至少有一个失败')
})


Promise.all([$.ajax({}), $.ajax({})]).then(results => {
    //success 
}, err => {
    //err 
})

Promise其他操作

• Promise.all
• Promise.race——竞速

Generator—生成器

• 普通函数 —— 一路到底
• generator函数 —— 中间能停 不能写成箭头函数

function *show(){ 
    //*位置随意 
    alert('a'); 
    var y=yield; 
    //暂时放弃执行 
    console.log(y); 
    alert('b'); 
} 
let genObj=show(); 
//创建generator对象 
genObj.next(); 
//踹一脚走一步，走走停停 
genObj.next(3); 
//传递参数

yield函数

• yield传参——可以在next中传递参数
• yield返回

function *show() {
    alert('a');
    yield 7;
    alert('b');
    yield 9;
    alert('c');
    return 55;
}

let genObj = show();
let res1 = genObj.next();
console.log(res1);
//{value: 7, done: false} 
let res2 = genObj.next();
console.log(res2);
//{value: 9, done: false} 
let res3 = genObj.next();
console.log(res3);
//{value: undefined, done: true} 
// {value: 55, done: true} 最后一步的结果依靠return

异步操作

1.回调函数嵌套

2.Promise

3.Generator

//带逻辑的请求
runner(function* () {
    let userData = yield $ajax({url: 'getUserData', dataType: 'json'});
    if (userData.type == 'Vip') {
        let items = yield $ajax({url: 'getVipItem', dataType: 'json'});
    } else {
        let items = yield $ajax({url: 'getItem', dataType: 'json'});
    }
    //其他操作 
});

• Promsie适用于一次读一堆
• Generator适用于逻辑性

runner详细介绍：zhuanlan.zhihu.com/p/68969045
runner下载链接：blog.zhanghuayi.tech/runner.zip

构造函数与普通函数的区别

//1.构造函数也是一个普通函数,创建方式与普通函数一样,但是构造函数习惯上首字母大写.

//普通函数

function person(){
    console.log(this==window) 
    //true
}

//构造函数
function Person(){
    console.log(this);
    //构造函数内部的this指向函数本身
}

//2.调用方式不一样,作用不同.
person(); //普通函数调用
new Person(); //构造函数调用
//3.this指向不同
//(1)普通函数指向调用并执行对象
//(2)构造函数指向当前对象

之前整理的笔记分享
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧