17C一卡二卡15P,天码水蜜桃,国产女同久久久久

ES6語法

1.ES5和ES6聲明變量的方式對比

ES5中聲明變量的方式：

//1.通過var聲明
var num;

//2.函數(shù)方式聲明
function fn(num){ return num; }
fn(10);

ES6中聲明變量的方式：

//1.使用let聲明
let a = 10;

//2.使用const聲明
const name = "小紅";

2. var ，let ， const 的區(qū)別：

不存在變量提升
- var 命令會發(fā)生變量提升現(xiàn)象，即變量可以在聲明之前使用，值為undefined。
- let 和 const 則沒有變量聲明提升的功能，必須要先聲明才能使用
不允許重復(fù)聲明
- var命令能重復(fù)聲明，后者覆蓋前者
- let 和 const不允許在相同作用域內(nèi)，重復(fù)聲明同一個變量
作用域
- var 的作用域是以函數(shù)為界限
- let 和 const 的作用域是塊作用域，塊級作用域指 { } 內(nèi)的范圍
- var 可以定義全局變量和局部變量，let 和 const 只能定義局部變量
- const 的聲明的常量不能被修改，但對于引用類型來說，堆內(nèi)存中的值是可以被改變的。
變量作為全局屬性
- 定義的變量會作為window對象的屬性，let不會

常量定義的引用類型可以修改，如：

        //1.使用常量定義數(shù)組
        const arr = [100, 200, 300];
        console.log(arr);

        arr[0] = "hello";
        console.log(arr);   //['hello', 200, 300]

        //2.使用常量來定義對象
        const obj = {
            name: "Jack",
            age: 22,
            no: "001"
        }
        console.log(obj);

        obj.age = 100;
        console.log(obj);   //{name: "Jack", age: 100,  no: "001"}

3. 暫時性死區(qū)

定義：塊級作用域內(nèi)存在let命令時，所聲明的變量就“綁定”這個區(qū)域，不再受外部的影響。

{
    //let a 之前的區(qū)域成為暫時性死區(qū)，調(diào)用a 會報錯
    let a = "hello";
}

4.for循環(huán)中的作用域問題

//設(shè)置循環(huán)變量的部分是父級作用域，而循環(huán)體內(nèi)部是一個單獨的子作用域。
//ES6 中引用變量采用就近原則

5.變量的解構(gòu)

本質(zhì)：模式匹配
   1. 完全解構(gòu)：模式完全匹配
   2. 不完全解構(gòu)：模式不完全匹配

   - 為解構(gòu)變量設(shè)置默認值，不會出現(xiàn) undefined 的現(xiàn)象
   - 解構(gòu)成功時，解構(gòu)變量的默認值會被覆蓋
   - 解構(gòu)不成功時，解構(gòu)變量的值為默認值
   
  對象的解構(gòu)注意：
    1.對象在解構(gòu)時，變量名要與屬性名一致
    2.對象解構(gòu)的解構(gòu)變量不考慮順序
    3.對象在解構(gòu)時，為對象屬性重命名，可以方便程序的編寫。注：重命名不會更改對象的屬性
    4.和解構(gòu)數(shù)組一樣，解析對象時可以設(shè)置默認值 outLookURL:url = 111

6.函數(shù)添加參數(shù)的默認值

1. 利用解構(gòu)傳參，參數(shù)設(shè)置默認值   //show({ name = 'lucy', age = 22 } = {})  
                                 //show([a = 0, b = 0])
2. ES6 直接為參數(shù)添加默認值     //show(a = 0, b = 0)

7.rest參數(shù)

rest 參數(shù)： 接收不定參
--
1. rest 參數(shù)是一種方式(形參)，rest參數(shù)可以重命名為其他參數(shù) ...a
2. rest 參數(shù)只能作為最后一個參數(shù)

8.ES5 中的兩種函數(shù)定義方法:

1. 函數(shù)式       //var fn = function(){}
2. 聲明式       //function show(){}

9.ES6 中箭頭函數(shù)

ES6 中函數(shù)式聲明方式被箭頭函數(shù) => 取代
箭頭函數(shù)：使用 => 定義函數(shù)

當(dāng)函數(shù)沒有參數(shù)時，（）不能省略
當(dāng)函數(shù)只有一個參數(shù)，且函數(shù)體是一句代碼，且是返回語句
參數(shù)的（）可省略、函數(shù)體 {} 可省略、return 可省略、
中間使用 => 連接
若函數(shù)體只有一句，且不是return 語句，不能省略 {}
若函數(shù)體有多條語句，不能省略 {}
若函數(shù)有多個參數(shù)，不能省略()
若函數(shù)的返回值為對象，此時不能省略return

使用箭頭函數(shù)注意

箭頭函數(shù)不適用于聲明函數(shù)
箭頭函數(shù)不適用于DOM事件
箭頭函數(shù)不能作為構(gòu)造函數(shù)（迭代器）
箭頭函數(shù)內(nèi)不能使用arguments
不能使用yield命令

10.箭頭函數(shù)this指向

箭頭函數(shù)沒有this，this是父級的
定義時候綁定，就是this是繼承自父執(zhí)行上下文??！中的this
ES5中，this指調(diào)用者，ES6中，this指定義時候綁定

11.字符串遍歷

    let str = "hello";
    //1.for遍歷
    for (let i = 0; i < str.length; i++) {
        console.log(i, str[i]);     //i 索引    數(shù)值類型
    }
    
    //2.數(shù)組->for->for in
    let arr = [1, 2, 3];
    for (let i in arr) {
        console.log(i, arr[i]);     //i 索引    字符串類型
    }
    
    //3.for... of
    for(let i of str){
        console.log(i);     //數(shù)據(jù)
    }
    
    //4.解構(gòu)
    let [a, b, c, d ,e] = str;
    console.log(a, b, c, d ,e);

12.ES6 新增字符串方法

//字符串新增方法：
方法                返回值          作用
includes('str')     boolean         判斷字符串中包含子串
endWith('str')      boolean         判斷字符串以"str"結(jié)尾
startWith('str')    boolean         判斷字符串以"str"開頭
repeat(n)           重復(fù)拼接自身     重復(fù)n次輸出字符串 repeat + repeat

//不全方法: 補全字符串長度
padStart(length, s);        字符串開頭補全
endStart(length, s);        字符串末尾補全

13.ES6模板字符串

模板字符串反引號 ``

1.支持換行 //空白會打印出來
2.模板中傳變量 ${變量}

    let obj = {
        name: 'jack',
        age: 20
    };
    console.log(`名稱：${obj.name},年齡：${obj.age}`);  //名稱：jack,年齡：20

14.ES6 對于對象的擴展

對象擴展：

    //1.對象的屬性簡寫: 當(dāng)對象的屬性名和屬性值（變量）名稱一致，可省略賦值
    //2.對象的方法簡寫：
    let name = "jack";
    let age = 22;

    let obj = {
        name,
        age,
        walk: function () {
            console.log(this.name + " is walk");
        },
        say() {
            console.log(this.name + ` say`);
        }
    }

15.ES6的Set結(jié)構(gòu)

set結(jié)構(gòu)：此結(jié)構(gòu)中元素是唯一的，不能重復(fù)

方法：返回值是set可以連綴
    add(val)           加元素
    delete(val)        刪元素
    has(val)           判斷是否包含元素     boolean
    clear()            刪除所有數(shù)據(jù)

屬性：
    size    元素個數(shù)

使用new Set()實例化

set結(jié)構(gòu)的遍歷

for of 遍歷set
for of 遍歷keys()
for of 遍歷values()
for of 遍歷對象實體 entries
forEach遍歷 set
使用擴展運算符和解構(gòu) 將set結(jié)構(gòu)轉(zhuǎn)為數(shù)組

    // for of 遍歷數(shù)據(jù)
    for (let i of set) {
        console.log(i);     //1  2  5  3
    }
   
    // 遍歷 keys    等于遍歷set
    for (let i of set.keys()) {
        console.log(i);
    }

    //遍歷values
    for (let i of set.values()) {
        console.log(i);
    }

    //遍歷對象實體 entries
    for (let i of set.entries()) {
        console.log(i[0]);
    }
    
    //解構(gòu)的方式遍歷對象實體
    for (let [k, v] of set.entries()) {
        console.log(k, v);
    }

    // for  each遍歷 set
    set.forEach(i => {
        console.log(i);
    })

16.ES6的Map結(jié)構(gòu)

Map 結(jié)構(gòu)：由于對象的屬性只能接受字符串類型，所有產(chǎn)生了Map結(jié)構(gòu)，優(yōu)化對象結(jié)構(gòu)

方法：返回值是Map實例可以連綴
    set(key,val)        加元素
    get(key)            取元素
    has(key)            判斷是否包含元素     boolean
    clear()             刪除所有數(shù)據(jù)

使用new Map()實例化

     // 1.添加數(shù)據(jù) set()
    map.set('name', 'jack').set('age', 22).set(0,100);
    console.log(map);

    // 2.獲取數(shù)據(jù) get()
    console.log(map.get(0));        //100
    console.log(map.get('name'))    //jack

    // 3.判斷存在數(shù)據(jù) has()
    console.log(map.has(0));        //true

    // 4.刪除數(shù)據(jù) delete()
    map.delete(0);
    console.log(map);       //Map(2) {"name" => "jack", "age" => 22}

    // 5.清空數(shù)據(jù) clear()
    map.clear();
    console.log(map);       //Map(0) {}

Map結(jié)構(gòu)規(guī)則

    //1. map 支持數(shù)組作為構(gòu)造函數(shù)的參數(shù),但必須是二維數(shù)組
    // let arr = [1, 2, 3, 4, 5];  //Iterator value 1 is not an entry object
    let arr = [['name', 'jack'], ['age', 23]];
    let map = new Map(arr);
    console.log(map);   //Map(4) {"name" => "jack", "age" => 23}


    // 2.key 不能重復(fù)，val可以重復(fù), key如果重復(fù)會將原來的值覆蓋
    map.set('name','tom');
    map.set('hob','sing');
    console.log(map);   //Map(5) {"name" => "tom", "age" => 23, "hob" => "sing"}

Map的遍歷

let of 遍歷map
forEach 遍歷 map
let of 遍歷map.keys
let of 遍歷map.values
let of 遍歷map.entries
let of 遍歷 map.entries + 解構(gòu)

    // 1.let of 遍歷map
    for (let i of map) {
        console.log(i[0], i[1]);
    }
   
    // 2.foreach 遍歷 map
    map.forEach((v, k) => {
        console.log(k, v);
    })
  
    // 3.let of 遍歷map.keys
    for (let k of map.keys()) {
        console.log(k, map.get(k));
    }
    
    // 4.let of 遍歷map.values
    for (let v of map.values()) {
        console.log(v);
    }
    
    // 5.let of 遍歷map.entries
    for (let i of map.entries()) {
        console.log(i[0], i[1]);
    }
    
    // 6.let of 遍歷 map.entries + 解構(gòu)
    for (let [k, v] of map.entries()) {
        console.log(k, v);
    }

16.ES6的set結(jié)構(gòu)、map結(jié)構(gòu)類型間轉(zhuǎn)換

Set 和 數(shù)組
    1.set -> 數(shù)組
        1.Array.from();
        2.遍歷set然后push
        3.擴展運算符

    2.數(shù)組 -> set
        1.new Set(arr);
    
Map 和 對象 和 string
    1.map -> 對象 -> String
        1.forEach遍歷Map -> 對象 -> JSON.stringify
    2.String -> 對象 -> map
        1.JSON.parse -> 對象 -> for...in 遍歷對象 -> Map.add()

Set 和數(shù)組之間

let set = new Set();
set.add(1).add(2).add(3).add(2);

// 1.Array.from();
var arr = Array.from(set);
console.log(arr);

// 2.遍歷set然后push
var arr  = [];
set.forEach(i=>{
    arr.push(i);
});
console.log(arr);

// 3.擴展運算符
var arr = [...set];
console.log(arr);

map、對象和字符串之間

let map = new Map();
map.set('name', 'jack').set('age', 22).set('tel', 151);

// 1.map -> 對象 -> String
var obj = {};
map.forEach((v,k)=>{
    obj[k] = v;
})
console.log(obj);

var str = JSON.stringify(obj);
console.log(str);

// 2.String -> 對象 -> map
var obj1 = JSON.parse(str);
var map1 = new Map();
for(let i in obj1){
    map1.set(i,obj1[i]);
}
console.log(map1);

16.rest 和擴展運算符區(qū)別

rest參數(shù)，出現(xiàn)在函數(shù)參數(shù)位置
作用： 離散數(shù)據(jù) -> 數(shù)組

function fn(...rest) {
    console.log(rest);
}
fn(100, 110, 120);    //(3) [100, 110, 120]

... 擴展運算符出現(xiàn)在非參數(shù)位置
作用:

數(shù)組 -> 離散的數(shù)據(jù)
拆分偽數(shù)組： NodeList HTMLCollection arguments...

let arr = [1, 2, 3, 4, 5];
console.log(...arr);    //1 2 3 4 5    

function fn1() {
    console.log(arguments);     //Arguments(3) [2, 3, 4]
    console.log(...arguments);  //2 3 4
}
fn1(2,3,4);

17.ES6 面向?qū)ο?/h4>

17-1、class 類、模板

構(gòu)造器：當(dāng)類被實例化時，自動執(zhí)行構(gòu)造器
每個類必須至少一個構(gòu)造器，若沒有，系統(tǒng)自動添加一個無參構(gòu)造器
構(gòu)造函數(shù)，不能主動調(diào)用

17-2、set 和 get 設(shè)置和獲取屬性

get 不能傳遞參數(shù)
只有當(dāng)有set方法時才可以寫get方法，同時出現(xiàn)

17-3、靜態(tài)方法：

類自身的方法，不用實例化即可調(diào)用
不會被實例繼承,直接通過類來調(diào)用

17-4、靜態(tài)屬性：

類名.屬性名 = 值;

17-5、extends 實現(xiàn)繼承

繼承是單向的
被繼承的類屬于父類，基類，也稱超類
靜態(tài)方法可以被子類繼承
繼承屬性super()必須放在構(gòu)造器第一句
一個父類可以有多個子類，一個子類只有一個父類

17-6、注意：

父類可調(diào)用自己的成員方法

父類可以調(diào)自己的靜態(tài)方法

父類不能調(diào)子類的成員方法

子類的實例可以調(diào)父類成員方法

子類的實例不能調(diào)父類靜態(tài)方法

子類可以調(diào)父類靜態(tài)方法

class Person {
    constructor(uname, uage) {
        this.uname = uname;
        this.uage = uage;
    }
    //成員方法
    walk() {
        console.log(`${this.uname}正在奔跑！`);
    }

    // 靜態(tài)方法:類自身的方法
    static cry() {
        console.log('人生下來就會哭！');
    }
}
// 靜態(tài)屬性
Person.living = 'earth';


//學(xué)生類繼承Person類
class Student extends Person {
    constructor(sname, sage, sno) {
        super(sname, sage);  //此句必須在構(gòu)造器第一句
        this.sno = sno;
    }

    // 成員方法
    study() {
        console.log(`${this.sname}在學(xué)習(xí)呢！`);
    }
    
    //set 訪問器 控制屬性的設(shè)置
    set sage(age) {
       
    }

    // get 訪問器，獲取屬性
    get sage() {
        
    }
}

//創(chuàng)建類的實例   類的實例化
var stu = new Student('王颯', 23, '001');

18.JS中的異常處理

try..catch
try..finally
try...catch..finally

19.ES6 Promise 解決回調(diào)地獄

19-1、 promise:為了解決異步編程中的回調(diào)地獄而產(chǎn)生

Promise的實例需要接收一個函數(shù)作為參數(shù)
該函數(shù)又需要接收兩個函數(shù)數(shù)作為參數(shù)
resolve 函數(shù)
reject 函數(shù)

19-2、promise 的三種狀態(tài)

pending 進行中
fullfilled 已成功 resolved 成功執(zhí)行resolve函數(shù)
rejected 已失敗 rejected 失敗執(zhí)行reject函數(shù)

19-3、then方法

參數(shù)一：是resolve函數(shù)的實現(xiàn)
參數(shù)二：是reject函數(shù)的實現(xiàn)

19-4、then方法返回值的是一個新的Promise實例

注意，不是原來那個Promise實例

若前一個回調(diào)函數(shù)返回的是一個Promise對象（即有異步操作）時，
后一個回調(diào)函數(shù)，會等待該Promise對象的狀態(tài)發(fā)生變化，才會被調(diào)用。

19-5、promise的異常處理

建議總是使用catch方法。
Promise 對象的錯誤具有“冒泡”性質(zhì)，會一直向后傳遞，直到被捕獲為止。
Promise 的狀態(tài)一旦改變，就永久保持該狀態(tài)，不會再變了。
catch方法返回的還是一個 Promise 對象
catch和reject同時出現(xiàn)時，只執(zhí)行reject

19-6、多個異步操作

// 加載圖片函數(shù)
function loadPic(id, src, sec) {
    return new Promise((resolve, reject) => {
        let oImg = new Image();
        oImg.onload = function () {
            resolve(oImg);
        }
        oImg.onerror = function () {
            reject(`編號為${id}的任務(wù)失敗`);
        }
        // oImg.src = src;
        setTimeout(() => {
            oImg.src = src;
        }, sec);   //延遲加載函數(shù)
    })
}

let s1 = "遠程圖片";
let s2 = "遠程圖片";
let p1 = loadPic('001', s1, 1000);
let p2 = loadPic('002', s2, 100);

// Promise.all 方法
// 當(dāng)所有圖片都加載完在執(zhí)行后續(xù)動作，有一張失敗都不執(zhí)行then
let p = Promise.all([p1, p2]);  //all返回新的promise對象
p.then(data=>{
    console.log(data,'加載成功');
    document.body.append(data[0],data[1]);
}).catch(err=>{
    console.log(err);
}).finally(()=>{
    console.log('不論成功與否，我都執(zhí)行');
}); 


// Promise.race 方法
// 注：
//  1.只要有一張圖片加載完成，就執(zhí)行then的resolve實現(xiàn)
//  2.如果先加載的圖片有失敗的情況，后續(xù)圖片就不加載，直接執(zhí)行catch 或 reject

let p = Promise.race([p1, p2]);
p.then(data => {
    console.log(data);      //只返回最先加載成功的那個
    document.body.append(data);    //由于設(shè)置了延遲，所以第二個先加載完成
}).catch(err => {
    console.log(err);
})

20.ES模塊導(dǎo)入規(guī)則

容易出錯的地方

頁面不基于服務(wù)器運行，會出現(xiàn)跨域的錯誤
origin 'null' has been blocked by CORS policy: Cross origin requests are only
使用模塊化時，頁面不加type = "module" 會出現(xiàn)語法錯誤
app.js:1 Uncaught SyntaxError: Unexpected token {
```
<script src="./module/app.js" type="module"></script>
```
import導(dǎo)入模塊時不添加 .js 的后綴名會報找不到module錯誤
GET xxx net::ERR_ABORTED 404 (Not Found)
```
import { Student } from './Student.js';
```

導(dǎo)入導(dǎo)出方式

導(dǎo)出方式
- 定義時導(dǎo)出
- 批量導(dǎo)出
- 導(dǎo)出重命名（不建議）
- 默認導(dǎo)出

    // 1.定義時導(dǎo)出
    export let uname = '李四';
    
    export function showStudentName(){
        console.log(uname);
    }
    
    export class SomeAnimalInfo{
        constructor(type,age){
            this.type = type;
            this.age = age;
        }
        showInfo(){
            console.log(`物種:${this.type},年齡：${this.age}`);
        }
    }
    
    // 2.批量導(dǎo)出
    const PI = 3.1415926;
    const DBNAME = 'Local';
    ... ...
    
    export { PI, DBNAME };
    
    // 3.默認導(dǎo)出 - 工具類
    export default class {
        static log(msg) {
            let now = new Date();
            console.log(`${now.toLocaleString()}    ${msg}`);
        }
        
        static setCookie(){
            
        }
        ... ...
    }

導(dǎo)入方式
- 導(dǎo)入重命名
- 導(dǎo)入整個模塊
- 導(dǎo)入默認模塊

    //1.導(dǎo)入重命名  as語法
    import {num, showStudentName as showName} from './all.js';
    
    // 2.導(dǎo)入整個模塊   需要使用as重命名，接收的是一個對象
    import * as cons from './const.js';
    
    // 3.導(dǎo)入默認模塊   需要起名，名字包含導(dǎo)出內(nèi)容
    import Tool from './tools.js';

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

ES6語法

ES6語法

ES6語法

1.ES5和ES6聲明變量的方式對比

2. var ，let ， const 的區(qū)別：

3. 暫時性死區(qū)

4.for循環(huán)中的作用域問題

5.變量的解構(gòu)

6.函數(shù)添加參數(shù)的默認值

7.rest參數(shù)

8.ES5 中的兩種函數(shù)定義方法:

9.ES6 中箭頭函數(shù)

10.箭頭函數(shù)this指向

11.字符串遍歷

12.ES6 新增字符串方法

13.ES6模板字符串

14.ES6 對于對象的擴展

15.ES6的Set結(jié)構(gòu)

16.ES6的Map結(jié)構(gòu)

16.ES6的set結(jié)構(gòu)、map結(jié)構(gòu)類型間轉(zhuǎn)換

16.rest 和擴展運算符區(qū)別

18.JS中的異常處理

19.ES6 Promise 解決回調(diào)地獄

20.ES模塊導(dǎo)入規(guī)則

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

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

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

ES6語法

ES6語法

1.ES5和ES6聲明變量的方式對比

2. var ，let ， const 的區(qū)別：

3. 暫時性死區(qū)

4.for循環(huán)中的作用域問題

5.變量的解構(gòu)

6.函數(shù)添加參數(shù)的默認值

7.rest參數(shù)

8.ES5 中的兩種函數(shù)定義方法:

9.ES6 中箭頭函數(shù)

10.箭頭函數(shù)this指向

11.字符串遍歷

12.ES6 新增字符串方法

13.ES6模板字符串

14.ES6 對于對象的擴展

15.ES6的Set結(jié)構(gòu)

16.ES6的Map結(jié)構(gòu)

16.ES6的set結(jié)構(gòu)、map結(jié)構(gòu)類型間轉(zhuǎn)換

16.rest 和 擴展運算符區(qū)別

18.JS中的異常處理

19.ES6 Promise 解決回調(diào)地獄

20.ES模塊導(dǎo)入規(guī)則

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

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

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

16.ES6的set結(jié)構(gòu)、map結(jié)構(gòu)類型間轉(zhuǎn)換

16.rest 和擴展運算符區(qū)別