let和const关键字

解构赋值

模板字符串

箭头函数 =>

参数默认值

rest参数

spread扩展运算符

Symbol

|

Symbol 内置值

迭代器

///////////////////////////迭代器自定义遍历对象/////////////////////////
// 声明一个对象
const banji = {
    name: "终极一班",
    stus: [
        '小明',
        '小宁',
        '小田',
        '小花'
    ],
    [Symbol.iterator]() {
        let index = 0;
        let _this = this;
        return {
            next: function () {
                if (index < _this.stus.length) {
                    const result = { value: _this.stus[index], done: false };
                    index++;
                    return result;
                } else {
                    return { value: undefined, done: true };
                }
            }
        }
    }
}
// 遍历这个对象
for (let v of banji) {
    console.log(v);
}

生成器

生成器的函数参数

| | | function* gen(arg) {
console.log(arg);
let one = yield 111;
console.log(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
}
//执行获取迭代器对象
let iterator = gen(‘AAA’);
console.log(iterator.next());
//next方法可以传入实参
console.log(iterator.next(‘BBB’));
console.log(iterator.next(‘CCC’));
console.log(iterator.next(‘DDD’)); | | | |

|

生成器函数实例1

| | —- | | //异步编程 文件操作 网络操作(ajax,request) 数据库操作
//1s后控制台输出111 2s后控制台输出222 3s后输出 333 |

////////回调地狱////////////////////////////////////////////////////////////
setTimeout(() => {
    console.log(111);
    setTimeout(() => {
        console.log(222);
        setTimeout(() => {
            console.log(333);
        }, 3000);
    }, 2000);
}, 1000);
///////////解决了回调地狱////////////////////////////////////////////////////
function one() {
    setTimeout(() => {
        console.log(111);
        iterator.next();
    }, 1000)
}
function two() {
    setTimeout(() => {
        console.log(222);
        iterator.next();
    }, 2000)
}
function three() {
    setTimeout(() => {
        console.log(333);
        iterator.next();
    }, 3000)
}
function* gen() {
    yield one();
    yield two();
    yield three();
}
let iterator = gen();
iterator.next();

|

生成器函数实例2

| | —- | | //模拟获取 用户数据 订单数据 商品数据 |

function getUsers() {
    setTimeout(() => {
        let data = '用户数据';
        iterator.next(data);
    }, 1000);
}
function getOrders() {
    setTimeout(() => {
        let data = '订单数据';
        iterator.next(data);
    }, 1000);
}
function getGoods() {
    setTimeout(() => {
        let data = '用商品数据';
        iterator.next(data);
    }, 1000);
}
function*gen() {
    let users = yieldgetUsers();
    let orders = yieldgetOrders();
    let goods = yieldgetGoods();
}
let iterator = gen();
iterator.next();

promise【重要】

Promise基本语法

//实例化Promise对象
const p = new Promise(function (resolve, reject) {
    setTimeout(function () {
        // let data = '数据库中的用户数据';
        // resolve(data);
        let err = '获取数据失败';
        reject(err);
    }, 1000);
});//调用promise对象中的then方法
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
})

Promise读取文件

Promise读取多个文件

//地域回调的方法-------------------------------------------------------------------------
// 引入fs模块
const fs = require('fs');
fs.readFile('./论语第一则.md', (err, data1) => {
    fs.readFile('./论语第二则.md', (err, data2) => {
        fs.readFile('./论语第三则.md', (err, data3) => {
            let result = data1 + '\r\n' + data2 + '\r\n' + data3;
            console.log(result);
        });
    });
});
//使用promise实现------------------------------------------------------------------------
const p = new Promise((resolve, reject) => {
    fs.readFile("./论语第一则.md", (err, data) => {
        resolve(data);
    });
});
p.then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./论语第二则.md", (err, data) => {
            resolve([value, data]);
        });
    })
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./论语三则.md", (err, data) => {
            //压入
            value.push(data);
            resolve(value);
        });
    })
}).then(value => {
    console.log(value.join('\r\n'));
})

Promise封装AJAX

//原生ajax
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = xhr.responseText;   // 后台接口返回的后台数据
    }
}
xhr.open("get", url, true)   // true表示异步请求   false表示同步请求
xhr.send()

//接口地址：https://api.apiopen.top/getJoke
const p = new Promise((resolve, reject) => {
    // 1.创建对象
    const xhr = new XMLHttpRequest();
    // 2.初始化
    xhr.open("GET", "https://api.apiopen.top/getJoke");
    // 3.发送
    xhr.send();
    // 4.绑定事件，处理响应结果
    xhr.onreadystatechange = function () {
        //判断
        if (xhr.readyState === 4) {
            //判断响应状态码 200-299
            if (xhr.status >= 200 && xhr.status < 300) {
                //表示成功
                console.log(xhr.response);
            } else {
                //如果失败
                console.error(xhr.status);
            }
        }
    }
})
//指定回调
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
});

Promise-then方法

// 1.创建 promise对象
const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('用户数据');
        // reject('出错了');
    }, 1000)
});
//调用 then 方法 then方法返回的结果是 Promise对象对象返回状态由回调函数的执行结果决定
//1.如果回调函数中返回的结果是， 非promise 类型的属性,状态为成功，返回值为对象的成功值
const result = p.then(value => {
    console.log(value);
    // 1.非 promise 类型的数据
    // return 'iloveyou';
    // 2.是promise 对象
}, reason => {
    console.warn(reason);
});
console.log(result);

//链式调用
p.then(value => {

}).then(value => {

});

Promise-chatch方法

//创建Promise对象
const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        //设置p对象的状态为失败，并设置失败的值
        reject("出错了！");
    }, 1000)
})
// p.then(function (value) { }, function (reason) {
//     console.error(reason);
// });
p.catch(function (reason) {
    console.warn(reason);
})

Set集合

Map方法

class类

///////////////////es5构造函数实现的语法///////////////////////////////////////
************语法糖***********

//手机
function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}
//添加方法
Phone.prototype.call = function () {
    console.log("我可以打电话!!");
}
//实例化对象
let Huawei = new Phone('华为', 5999);
Huawei.call();
console.log(Huawei);

//////////////////class///////////////////////////////////////////////////////
class Phone {
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }
    call() {
        console.log("我可以打电话!!");
    }
}
let onePlus = new Phone("1+", 1999);
console.log(onePlus);

get 和 set

//get对对象的动态属性封装,set用来判断是否合法，
class Phone {
    get price() {
        console.log('价格属性被读取了');
        return 'iloveyou';
    }
    set price(newVal) {
        console.log('价格属性被修改了');
    }
}
// 实例化对象
let s = new Phone();
console.log(s.price);
s.price = 'free';

类的静态成员

function Phone() {
}
Phone.name = '手机';
Phone.change = function () {
    console.log("我可以改变世界");
}
Phone.prototype.size = '5.5inch';
let nokia = new Phone();
console.log(nokia.name);
console.log(nokia.size);
/////////////////////////////////////////////////////
class Phone {
    //静态对象
    static name = '手机';
    static change() {
        console.log("我可以改变世界");
    }
}
let nokia = new Phone();
console.log(nokia.name);  //undefined
console.log(Phone.name);

类继承

es5构造函数继承

 //父级构造函数
 //手机
 function Phone(brand, price) {
     this.brand = brand;
     this.price = price;
 }
 Phone.prototype.call = function () {
     console.log('我可以打电话');
 }
 //智能手机
 function SmartPhone(brand, price, color, size) {
     Phone.call(this, brand, price);
     this.color = color;
     this.size = size;
 }
 //设置子级构造函数的原型
 SmartPhone.prototype = new Phone;
 SmartPhone.prototype.constructor = SmartPhone;  //矫正
 SmartPhone.prototype.photo = function () {
     console.log('我可以拍照');
 }
 SmartPhone.prototype.playGame = function () {
     console.log('我可以玩游戏');
 }
 const chuizi = new SmartPhone('锤子', 2499, '黑色', '5.5inch')
 console.log(chuizi);

类继承

class Phone {
    //构造方法
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }
    //父类成员属性
    call() {
        console.log("我可以打电话!!");
    }
}
class SmartPhone extends Phone {
    //构造方法
    constructor(brand, price, color, size) {
        super(brand, price);    //Phone.call(this,brand,price)
        this.color = color;
        this.size = size;
    }
    photo() {
        console.log("拍照");
    }
    playGame() {
        console.log("玩游戏");
    }
}
const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');
console.log(xiaomi);
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();

数值扩展

axios ajax请求库

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

//常用请求方式  一般使用get post
get***
    格式：
        axios.get("url", {
            params: {
                参数名1: 参数值1,
                参数名2: 参数值2,
                ...
            }
        }).then(res=> {
            // 成功回调
        }).catch(err=> {
            // 失败回调 
        })
post***
    格式：
        axios.post("url", {
            参数名1: 参数值1,
            参数名2: 参数值2,
            ...
        }).then(res=> {
            // 成功回调
        }).catch(err=> {
            // 失败回调
        })
///////////////////////////////////////////////////////////////////////////////
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get("https://cnodejs.org/api/v1/topics", {
        params: {
            page: 1,
            limit: 10,
            tab: "good"
        }
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
    function rei() {
        axios.post("http://localhost:3000/register", {
            admin: "lisi",
            password: 123456
        }).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
    }
</script>

import export 导出导入

格式：
    如果需要输出的是一个变量的时候
        输出文件 a.js
            let a=123
            let b=456

            export default a;

        需要使用的文件 b.js
            import a from "路径"

            console.log(a)

    如果需要输出的是多个变量时候
        a.js

            export {变量1, 变量2}

        b.js
            import {变量1, 变量2} from "路径"

        如果b.js文件中已经声明相同变量  这个时候为了避免冲突 我们可以使用as别名

            import {变量1 as 新的变量名1, 变量2 as 新的变量名2} from "路径"

        如果输出多个变量  但是在引入时候只要其中一个  我们可以直接在引入的文件中只写一个

——————————————————————————————-

es6数组方法

—————————————————————————-

面向对象

特征：封装性、继承性、多态性

cnode切换和分页

<script>
    const content=document.querySelector(".content")
    const page=document.querySelector("#page")
    const getList=(tab='all',page=1)=> {
        let str=""
        fetch(`https://cnodejs.org/api/v1/topics?page=${page}&tab=${tab}&limit=20`).then(res=> res.json()).then(res1=> {
            console.log(res1)
            for(let i=0; i<res1.data.length; i++) {
                str+=`
                    <p>${res1.data[i].title}</p>
                `
            }
            content.innerHTML=str
        }).catch(err=> {
            console.log(err)
        })
    }
    getList()
    document.querySelector("#tab").onclick=()=> {
        console.log(event.target.innerHTML)
        getList(event.target.innerHTML=="全部"?"all":"good")
        localStorage.setItem('tab',event.target.innerHTML=="全部"?"all":"good")
    }
    page.onclick=()=> {
        getList(localStorage.getItem("tab")?localStorage.getItem('tab'):"all", event.target.innerHTML)
    }
</script>