黄色视频在线观看入口,中文字精品码无卡一区

ES6最重要最復(fù)雜的知識(shí)點(diǎn)： 1. 類和繼承 2.promise 3. ES6模塊化(在vue中講)

與深拷貝相關(guān)的知識(shí)點(diǎn)

Object.assgin()方法: 可以實(shí)現(xiàn)第一層對(duì)象的深拷貝
簡單粗暴的深拷貝

JSON.parse(JSON.stringify(obj))

完整的深拷貝：參考網(wǎng)上資料

常見的數(shù)組方法

下面的方法都有回調(diào)函數(shù)，回調(diào)的兩個(gè)形參分別為項(xiàng)目值和索引
除了forEach, 其它的方法都需要return

arr.forEach()
arr.map()
arr.filter()
arr.some()
arr.every()
arr.reduce()

let: 聲明塊級(jí)作用域

不存在聲明提前的問題
在同一個(gè)塊中，不能重復(fù)聲明
通過let可獲取正確的索引

    let arr = []
    for (let i = 0; i < 6; i++){
        arr[i] = function(){
            console.log(i)
        }
    }
    arr[3]()

const: 聲明常量

const也是塊級(jí)作用域
聲明的同時(shí)要賦值

箭頭函數(shù)

arr.forEach(()=>{})
setInterval(()=>{},1000)

let fun = ()=>{}
let fun = x => {}
let fun = (x,y) => {}
let fun = (x,y) => 3
let fun = (x,y) => ({
        name: 1,
        age: 2
    })

箭頭函數(shù)的this指向

箭頭函數(shù)自身沒有this,它內(nèi)部的this是定義箭頭函數(shù)所在環(huán)境的this

        box.onclick = function(){
            // console.log(this);
            let i  = 0
            setInterval(()=>{
                this.innerHTML = i;  //this是box
                i++
            },1000)
        }

對(duì)象字面量的簡寫

    let color = 'red',
        age = 18;

    let obj = {
        color,
        age,
        run(){
            console.log('run')
        }
    }

類和繼承

定義父類

class Animal {
    constructor(color){
        this.type = 'animal';
        this.eye = true;
        this.color = color;
    }
    sound(){
        console.log('sound')
    }
}

var ani = new Animal('red')

定義子類

class Cat extends Animal{
    constructor(nickname,age,color){
        super(color);
        this.nickname = nickname;
        this.age = age;
    }
    eat(){
        console.log('eat')
    }
}
var cat = new Cat('小貓咪',5,'white')
cat.sound()

模板字符串

    let color = 'red';
    let str = `this is ${color}`

解構(gòu)賦值

    let obj = {
            title: 'aaaa',
            price: 300,
            discount: 200
        }

    let {title,price} = obj;

展開運(yùn)算符

把數(shù)組中的值打散，一個(gè)一個(gè)羅列

        let arr = [34, 56, 78];

        function total(Ch, En, Math) {
            return Ch + En + Math;
        }
        let result = total(...arr)

        let divList = document.querySelectorAll("div");

        //偽數(shù)組可以調(diào)用 forEach,不能調(diào)用其它數(shù)組的遍歷方法
        divList.forEach((el)=>{
            console.log(el);
        })

        var arr = [...divList].map((el)=>{
            return el.innerHTML
        })
        console.log(arr);

默認(rèn)參數(shù)

        function draw(radius=100){
            console.log(radius);
        }
        draw(30)

        // 默認(rèn)(default)參數(shù)必須設(shè)置在最后
        function draw(y,x=2,z=20){
            console.log(x,y,z);
        }

        draw(1)
        draw(1,3)

剩余參數(shù)

        function total(...args){
            console.log(args);
            console.log(args instanceof Array);  //true
        }
        total(23,45)

Symbol數(shù)據(jù)類型

獲取唯一的不會(huì)重復(fù)的變量，是ES6新增的基本數(shù)據(jù)類型

        // Symbol的應(yīng)用場景

        //第三方的庫中定義了一個(gè)對(duì)象(對(duì)用戶來講是隱蔽的)

        let obj = {
            name: '23',
            count() {
                console.log('count');
            }
        }

        // 對(duì)對(duì)象的功能進(jìn)行擴(kuò)展：希望用一個(gè)一定不會(huì)和對(duì)象已有屬性重復(fù)的屬性名

        let count = Symbol();

        obj[count] = function(){
            console.log('數(shù)量');
        }

        obj.count()  // count
        obj[count]();  //數(shù)量

Set類型的數(shù)據(jù)

是ES6中新增的集合的數(shù)據(jù)類型，用來存放數(shù)組。但是，數(shù)組的元素不允許重復(fù)

數(shù)組去重

    var arr = [1,2,3,2,5,1]
    var result = [...new Set(arr)]
    console.log(result);

Set常用的API

        1. add
        2. delete
        3. has
        4. clear

for...of語句

for: （1）需要明確遍歷次數(shù) (2)不能遍歷對(duì)象，可以遍歷對(duì)象以外的集合 array,偽數(shù)組（3）可以使用break和continue
forEach: (1) 可以遍歷對(duì)象以外的集合（數(shù)組，Set, NodeList--->dom集合）（2）不能使用break和continue
for...in (1)遍歷對(duì)象 (2)不能直接訪問對(duì)象的屬性值 (3)（3）可以使用break和continue
新增的for...of:
(1) 自定義的對(duì)象不能使用for...of,但大部分原生的數(shù)據(jù)集合都可以使用 (數(shù)組、字符串、Set類型、Map類型、NodeList)
(2)可以使用break和continue

    //作用于數(shù)組
    var arr = ['a','c','d']
        for(let i of arr){
            console.log(i);
        }

//作用于元素節(jié)點(diǎn)NodeList
    let divList = document.querySelectorAll("div");
        for (let el of divList){
            console.log(el);
        }

Object的API

Object.assign: 合并對(duì)象
Object.keys()：返回對(duì)象所有鍵組成的集合

        let obj = {
            name: 'Peppa',
            age: 4,
            sex: '女'
        }
        // ["name","age","sex"]
        console.log(Object.keys(obj));

Map類型的數(shù)據(jù)

類似于對(duì)象，用來存儲(chǔ)鍵值對(duì)。

對(duì)象只能使用字符串作為屬性名，而Map可以使用任意類型的數(shù)據(jù)做為屬性名

//第一個(gè)鍵是"a",值是1, 第二個(gè)鍵是b,值是2
        var map1 = new Map([["a",1],["b",2]]);
        console.log(map1);

Map的API

        屬性: size 
        方法: set , get , has, delete ,clear

for...of 遍歷

    var map1 = new Map([["a", 1], ["b", 2]]);
        
        //只遍歷鍵
        for (let key of map1.keys()){
            console.log(key);
        }

        // 只遍歷值
        for (let val of map1.values()){
            console.log(val);
        }


        // val是數(shù)組，存儲(chǔ)了每一個(gè)的鍵和值
        for (let val of map1){
            console.log(val[0]);
            console.log(val[1]);
        }

        //同時(shí)返回鍵值對(duì)
        for (let [key,value] of map1){
            console.log(key);
            console.log(value);
        }

        // 等價(jià)于上面的寫法
        for (let [key,value] of map1.entries()){
            console.log(key);
            console.log(value);
        }

Promise:

promise用來解決回調(diào)地獄的問題，把異步的代碼用同步的方式來實(shí)現(xiàn)
Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。
它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。
一個(gè)Promise的三種狀態(tài)
pending: 初始狀態(tài)，既不是成功，也不是失敗狀態(tài)。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗。
Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供，不用自己部署。
Resolve函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved），在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；
Reject函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆　保磸?pending 變?yōu)?rejected），在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。
Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)。

    ```
        // 需求： ajax1執(zhí)行完再執(zhí)行ajax2,ajax2執(zhí)行完再執(zhí)行task
        function ajax1() {
            setTimeout(function () {
                console.log('ajax1');
            }, 1000)
        }
        function ajax2() {
            setTimeout(function () {
                console.log('ajax2');
            }, 2000)
        }
        function task() {
            console.log('task');
        }
    ```

用Promise實(shí)現(xiàn)

       var flag1 = true;
       var flag2 = false;

       function error(err) {
           console.log(err);
       }
       function ajax1() {
           return new Promise((resolve, reject) => {
               setTimeout(function () {
                   if (flag1) {
                       resolve('ajax1的結(jié)果')
                   } else {
                       reject('ajax1錯(cuò)誤')
                   }
               }, 1000)
           })
       }

       function ajax2(data) {
           return new Promise((resolve, reject) => {
               setTimeout(function () {
                   console.log('ajax2接收ajax1的參數(shù)', data);
                   if (flag2){
                       resolve()
                   }else{
                       reject('ajax2錯(cuò)誤')
                   }
               }, 2000)
           })
       }

       function task() {
           console.log('task');
       }

       ajax1()
           .then(ajax2)
           .then(task)
           .catch(error)

Promise.all() Promise.race()

Promise.all() 兩個(gè)異步操作都成功完成后，再執(zhí)行的邏輯
Promise.race() 最先得到結(jié)果的異步操作執(zhí)行成功，即執(zhí)行下面的邏輯
all()和race()中的參數(shù)必須是promise實(shí)例

   Promise.all([ajax1(),ajax2()])
           .then(function(data){
               console.log('兩個(gè)請(qǐng)求都成功后的數(shù)據(jù)',data);
               task(data)
           })
           .catch(err)

   Promise.race([ajax1(), ajax2()])
           .then(function (data) {
               console.log('請(qǐng)求返回最快的任務(wù)的結(jié)果', data);
               task(data)
           })
           .catch(err)

async和await的用法

async: 定義一個(gè)異步函數(shù),消除promise中then的鏈?zhǔn)秸{(diào)用，讓代碼更加清晰，優(yōu)雅
await后面接一個(gè)會(huì)return new promise的函數(shù)并執(zhí)行它
await只能放在async函數(shù)里
async函數(shù)通過try...catch處理失敗時(shí)要執(zhí)行的邏輯

    var flag1 = false;
        var flag2 = true;
        function ajax1() {
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log('ajax1任務(wù)執(zhí)行完畢');
                    if (flag1) {
                        resolve('ajax1的結(jié)果')
                    } else {
                        reject('ajax1錯(cuò)誤')
                    }
                }, 1000)
            })
        }
        function ajax2(data) {
            return new Promise((resolve, reject) => {
                setTimeout(function () {
                    console.log('ajax2', data);
                    console.log('ajax2任務(wù)執(zhí)行完畢');
                    if (flag2) {
                        resolve('ajax2的結(jié)果')
                    } else {
                        reject('ajax2錯(cuò)誤')
                    }
                }, 2000)
            })
        }
        function task(data) {
            console.log('task任務(wù)執(zhí)行完畢');
            console.log('task', data);
        }
       

        async function render() {
            try {
                let result1 = await ajax1()
                await ajax2(result1)
                task()
            }catch(err){
                console.log('catch',err);
            }
        }
        render()

Object.defineProperty()

定義對(duì)象的屬性

let obj = {
    name: '西游記',
    addTime: '739754975945489'
}

//必須使用一個(gè)臨時(shí)變量，來存儲(chǔ)name屬性的值
let temp = obj.name;


// 攔截器
Object.defineProperty(obj,"name",{
    //存取器
    get: function(){
        console.log('get');
        //get中一定要有return,return的結(jié)果即為name屬性的新值
        return "《" + temp + "》"
    },
    set: function(newVal){
        console.log('set');
        temp = newVal;
    }
})

obj.name = "窗邊的小豆豆";
console.log(obj.name);

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Es6重點(diǎn)總結(jié)

Es6重點(diǎn)總結(jié)

與深拷貝相關(guān)的知識(shí)點(diǎn)

常見的數(shù)組方法

let: 聲明塊級(jí)作用域

const: 聲明常量

箭頭函數(shù)

箭頭函數(shù)的this指向

對(duì)象字面量的簡寫

類和繼承

模板字符串

解構(gòu)賦值

展開運(yùn)算符

默認(rèn)參數(shù)

剩余參數(shù)

Symbol數(shù)據(jù)類型

Set類型的數(shù)據(jù)

for...of語句

Object的API

Map類型的數(shù)據(jù)

Promise:

Promise.all() Promise.race()

async和await的用法

Object.defineProperty()

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Es6重點(diǎn)總結(jié)

與深拷貝相關(guān)的知識(shí)點(diǎn)

常見的數(shù)組方法

let: 聲明塊級(jí)作用域

const: 聲明常量

箭頭函數(shù)

箭頭函數(shù)的this指向

對(duì)象字面量的簡寫

類和繼承

模板字符串

解構(gòu)賦值

展開運(yùn)算符

默認(rèn)參數(shù)

剩余參數(shù)

Symbol數(shù)據(jù)類型

Set類型的數(shù)據(jù)

for...of語句

Object的API

Map類型的數(shù)據(jù)

Promise:

Promise.all() Promise.race()

async和await的用法

Object.defineProperty()

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av