激情亚洲第三区,精品三极久久久

ES 6 語法

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

與深拷貝相關的知識點

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

JSON.parse(JSON.stringify(obj))

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

常見的數(shù)組方法

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

arr.forEach()

 =====================================================forEach
        /forEach不需要明確循環(huán)次數(shù)，直接獲取值
         不支持break,continue
         var arr = ['red','blue','black']
         arr.forEach(function(item){
           console.log(item);
         })

arr.map()

  ======================================================map(映射)
        1、map方法也是實現(xiàn)遍歷，但一定要有返回值(處理后的每一項的值)
        2、返回的新值會構成新的數(shù)組
        var arr = ['red','blue','black']

        var newArr = arr.map(function(item){
            return item + '00'
        })
        console.log(newArr);

arr.filter()

 ======================================================filter(過渡)
        1、filter方法也是實現(xiàn)遍歷，一定要有返回值 (布爾值)
        2、會獲取所有返回值為真的數(shù)據(jù)

        var arr = ['red','blue','black','green']

        var newArr = arr.filter(function(item){
            return item.length > 4
        })
        console.log(newArr);

arr.some()

 ======================================================some
        1、some方法也是實現(xiàn)遍歷，一定要有返回值  (布爾值)
        2、只要一個為真，結果就為真

        var arr = [90,45,89,70]

        var result = arr.some(function(item){
            console.log(item);
            return item < 60
        })
        console.log(result);

arr.every()

 ======================================================every
        1、every方法也是實現(xiàn)遍歷，一定要有返回值 (布爾值)
        2、如果全部數(shù)據(jù)都返回真，則結果為真，否則為假  (只要一個為假，結果就為假，并結束循環(huán))

        var arr = [90,78,89,70]

        var result = arr.every(function(item){
            console.log(item);
            return item > 60
        })
        console.log(result);

arr.reduce() 常用來實現(xiàn)累加

刪除指定位置的數(shù)據(jù)

        var index = 2
        var arr = [90,45,89,70]
        arr.splice(index,0,45) //第一個參數(shù)為索引,第二個參數(shù)是刪除幾個,第三個參數(shù)是在刪除之后添加新的數(shù)據(jù)

let: 聲明塊級作用域

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

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

const: 聲明常量

const也是塊級作用域
聲明的同時要賦值

箭頭函數(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)
        }

對象字面量的簡寫

    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}`

解構賦值

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

    let {title,price} = obj;

展開運算符

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

        let arr = [34, 56, 78];

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

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

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

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

默認參數(shù)

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

        // 默認(default)參數(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ù)類型

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

        // Symbol的應用場景

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

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

        // 對對象的功能進行擴展：希望用一個一定不會和對象已有屬性重復的屬性名

        let count = Symbol();

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

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

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

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

數(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)不能遍歷對象，可以遍歷對象以外的集合 array,偽數(shù)組（3）可以使用break和continue
forEach: (1) 可以遍歷對象以外的集合（數(shù)組，Set, NodeList--->dom集合）（2）不能使用break和continue
for...in (1)遍歷對象 (2)不能直接訪問對象的屬性值 (3)（3）可以使用break和continue
新增的for...of:
(1) 自定義的對象不能使用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é)點NodeList
    let divList = document.querySelectorAll("div");
        for (let el of divList){
            console.log(el);
        }

Object的API

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

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

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

類似于對象，用來存儲鍵值對。
對象只能使用字符串作為屬性名，而Map可以使用任意類型的數(shù)據(jù)做為屬性名

//第一個鍵是"a",值是1, 第二個鍵是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ù)組，存儲了每一個的鍵和值
        for (let val of map1){
            console.log(val[0]);
            console.log(val[1]);
        }

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

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

Promise:

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

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

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

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

Promise.all() Promise.race()

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

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

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

async和await的用法

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

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

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

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

ES 6 語法

ES 6 語法

與深拷貝相關的知識點

常見的數(shù)組方法

刪除指定位置的數(shù)據(jù)

let: 聲明塊級作用域

const: 聲明常量

箭頭函數(shù)

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

對象字面量的簡寫

類和繼承

模板字符串

解構賦值

展開運算符

默認參數(shù)

剩余參數(shù)

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

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

for...of語句

Object的API

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

Promise:

Promise.all() Promise.race()

async和await的用法

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

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

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

ES 6 語法

與深拷貝相關的知識點

常見的數(shù)組方法

刪除指定位置的數(shù)據(jù)

let: 聲明塊級作用域

const: 聲明常量

箭頭函數(shù)

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

對象字面量的簡寫

類和繼承

模板字符串

解構賦值

展開運算符

默認參數(shù)

剩余參數(shù)

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

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

for...of語句

Object的API

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

Promise:

Promise.all() Promise.race()

async和await的用法

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

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

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