JS基礎(chǔ)入門篇（四十三）— ES6（一）

ideaa 發(fā)布于2019-08-30 15:54 / 718人閱讀

摘要：已經(jīng)被聲明了舉例說明塊級(jí)作用域報(bào)錯(cuò)，常量初始化之后內(nèi)部值不可改必須初始化賦值的問題。不支持預(yù)解析不允許重復(fù)聲明支持塊級(jí)作用域舉例說明報(bào)錯(cuò)，。解決地址引用的方法通過轉(zhuǎn)化為字符串，再轉(zhuǎn)化為對(duì)象。此方法存在問題中缺少

1.var , let , const

var

    1.預(yù)解析（變量提升）
    2.可以重復(fù)聲明變量

let

    1.不支持預(yù)解析（必須先聲明，后使用） 
    2.不支持重復(fù)聲明
    3.支持塊級(jí)作用域

1.舉例說明—預(yù)解析

    console.log(a);//undefind
    var a=2;

    console.log(b);//報(bào)錯(cuò),b is not defined。
    let b=3;

由于var存在預(yù)解析，所以不會(huì)報(bào)錯(cuò)。let不存在預(yù)解析

    console.log(a);//undefind
    var a=2;
    
//  以上代碼相當(dāng)于:
    var a;
    console.log(a);
    a=2;

2.舉例說明—重復(fù)聲明變量

    var a=1;
    var a=2;
    console.log(a);//2

    let b=1;
    let b=2;
    console.log(b);//報(bào)錯(cuò)，Identifier "b" has already been declared。b已經(jīng)被聲明了

3.舉例說明—塊級(jí)作用域

 {
        var a=1;
        let b=2;
        console.log(b);//2
        {
            console.log(b);//2
        }
 }

    console.log(a);//1
    console.log(b);//報(bào)錯(cuò)，b is not defined

const 常量

    1.初始化之后,內(nèi)部值不可改,必須初始化賦值的問題。
    2.不支持預(yù)解析
    3.不允許重復(fù)聲明
    4.支持塊級(jí)作用域

const舉例說明：

    const a;
    console.log(a);//報(bào)錯(cuò)，Missing initializer in const declaration。a沒有賦值。

    const b=1;
    b=2;
    console.log(b);//報(bào)錯(cuò)， Assignment to constant variable.不能改變常量的值

2.解構(gòu)賦值

1.對(duì)于對(duì)象解構(gòu)賦值，變量名要和鍵名相同，順序不重要,用{}括起來

（1）變量聲明并賦值時(shí)的解構(gòu)

var obj = {
        a: 1,
        b: 2,
        c: "lzf"
    };
var {a,c,b} = obj;
console.log( a,b,c );//1 2 "lzf"

（2）變量聲明后賦值時(shí)的解構(gòu)

var obj = {
    a: 1,
    b: 2,
    c: "lzf"
};
var a,b,c;
({a,b,c}=obj);
console.log(a,b,c);//1 2 "lzf"

2. 對(duì)于數(shù)組解構(gòu)賦值，按數(shù)組順序賦值，變量名不重要，用[ ]括起來

var attr=["a","b","c"];
var [x,y,z]=attr;
console.log(x,y,z);// "a","b","c"

3. 默認(rèn)值配置

var attr=["a",,"c"];
var [x=1,y=2,z=3]=attr;
console.log(x,y,z);//a 2 c

4.占位

var attr=["a","b","c"];
var [x=1,,z=3]=attr;
console.log(x,z);//a c

5.重命名

var obj = {
        a: 1,
        b: 2,
        c: "lzf"
    };
var {a:x,c,b} = obj;
console.log( x,b,c );//1 2 "lzf"

6.重命名并且設(shè)默認(rèn)值

var obj = {
        a: 1,
        b: 2,
        c: "lzf"
    };
var {a:x,c,b,d:z=3} = obj;
console.log( x,b,c,z);//1 2 "lzf" 3

3.解構(gòu)賦值的應(yīng)用，交換兩個(gè)變量的值

    var a=1;
    var b=10;
    [b,a]=[a,b];
    console.log(a,b);//10 1

4.箭頭函數(shù)

箭頭函數(shù): 函數(shù)的簡短寫法

    變體方式
        只有一個(gè)參數(shù)省略括號(hào)
        只有一條語句省略大括號(hào)和return
            返回對(duì)象 需要 用 () 包起來
    注意
        沒有arguments
        不可以作為構(gòu)造函數(shù)
        this綁定

舉例一：將函數(shù)表達(dá)式用箭頭函數(shù)表示

    let a=function () {};
    a();

//將以上函數(shù)表達(dá)式 用箭頭函數(shù) 表示
    let fn=()=>{};
    fn();

舉例二：只有一個(gè) 參數(shù) 省略括號(hào), 沒有參數(shù)或者1個(gè)以上參數(shù)都不可以省略

let a=(num) => { console.log(num); };
a(1);//1

//只有一個(gè)參數(shù)省略括號(hào)
let fn=num=>console.log(num);
fn(2);//2

舉例三：函數(shù)體僅有一條語句,并且有返回值可以省略 {} 和 return

let a=(a,b) => { return a+b; };
a(1,2);//3

//函數(shù)體僅有一條語句并且有返回值, 省略 { } 和 return
let fn=(a,b) => a+b; 
fn(1,3);//4

注意：如果返回的是一個(gè)對(duì)象 ,則需要 () 包起來

let a=userName=>{
    return {
        name : userName
    }
}
console.log( a("lzf") );//{name: "lzf"}
//---------- 如果 返回的是一個(gè)對(duì)象 ,則需要 () 包起來 -------------

let fn=userName=>({
    name : userName
})

console.log( fn("hzq") );//{name: "hzq"}

舉例四：沒有arguments

    let a=function () {
        console.log( arguments );
    };
    a(1,2,3,4,5);// Arguments(5)?[1, 2, 3, 4, 5, callee: ?, Symbol(Symbol.iterator): ?]

    let fn=()=>console.log( arguments );
    fn(1,2,3,4,5);//報(bào)錯(cuò)，arguments is not defined。

舉例五：不可以作為構(gòu)造函數(shù)

    let fn=(a,b)=>a+b;
    var f=new fn(); //報(bào)錯(cuò),fn is not a constructor.

舉例六：this綁定,箭頭函數(shù)在哪聲明的，this就指向哪

    let fn = () => {console.log( this );};
    fn();//Window

    document.onclick = fn;//Window

    document.onclick = function(){
        setTimeout(function(){
            console.log( this );
        },500)
    }//Window

//    document.onclick = function(){
//        setTimeout( () => {
//            console.log( this );
//        },500)
//    }//#document

5.函數(shù)參數(shù)

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

    let add = function( a,b,c=20 ) {
        return a + b + c;
    };
    
    console.log( add( 1,2,3 ) );//6
    console.log( add( 1,0,2 ) );//3
    console.log( add( 20,10 ) );//50

2.剩余參數(shù)

    let a = function(x,y,...r){
        console.log( x,y );
        console.log( r );
    }
    a("a","b","c","d");
    //運(yùn)行結(jié)果:
    //a b
    //?["c", "d"]
    
    let fn = (...arg)=>{
        console.log( arg )
    }
    fn( 1,2,3,4,5 )//[1,2,3,4,5]

    let fn1 = (...arg)=>{
        console.log( ...arg )
    }
    fn1( 1,2,3,4,5 )//1,2,3,4,5

6.擴(kuò)展運(yùn)算符

把集合變成參數(shù)的形式
    push 數(shù)組
    合并數(shù)組
    字符串轉(zhuǎn)換數(shù)組
    類數(shù)組轉(zhuǎn)變?yōu)閿?shù)組
    擴(kuò)展對(duì)象的屬性
        
    注意
        如果被擴(kuò)展的內(nèi)容中存在項(xiàng)是對(duì)象,那么被擴(kuò)展后依然是地址引用

舉例說明一：

    var arr1 = [1,2,3];
    console.log( arr1 );//?[1, 2, 3]
    console.log( ...arr1 );// 1 2 3

    var arr2 = [1,2,31,231,23,12,3,123];
    
    console.log( Math.max(2,10) ) ;//10
    console.log( Math.max(...arr2) ) ;//231

舉例說明二：push 數(shù)組

    var arr = [1,2,3];
    var arr2 = [4,5,6];

    arr.push( ...arr2 );
    console.log( arr );[1, 2, 3, 4, 5, 6]

舉例說明三：合并數(shù)組

    var arr = [1,2,3];
    var arr2 = [4,5,6];
    console.log( [ ...arr,...arr2 ] );//?[1, 2, 3, 4, 5, 6]

舉例說明四：字符串轉(zhuǎn)換數(shù)組

    var str = "miaov";
    console.log( str.split("") );//?["m", "i", "a", "o", "v"]
    console.log( [...str] );//?["m", "i", "a", "o", "v"]

舉例說明五：擴(kuò)展對(duì)象的屬性

注意：如果被擴(kuò)展的內(nèi)容中存在項(xiàng)是對(duì)象,那么被擴(kuò)展后依然是地址引用。

    var obj = {
        arr : [1,2]
    }
    var c = {
        name : "k",
        ...obj
    }

    c.arr.push( 3 );
    console.log( c );//{name: "k", arr: Array(3)}
    console.log( obj );//{arr: Array(3)}

解決地址引用的方法

    var obj = {
        arr : [1,2],
        name: "k"
    }
//通過 JSON轉(zhuǎn)化為字符串，再轉(zhuǎn)化為對(duì)象。
    var c = JSON.parse( JSON.stringify( obj ) );
    c.arr.push(3,4,5,);
    console.log( c );//{arr: Array(5), name: "k"}
    console.log( obj );//{arr: Array(2), name: "k"}

此方法存在問題：

var obj = {
        arr : [1,2],
        name: "k",
        fn: function(){},
        a: undefined,
        b: NaN
    }
    var c = JSON.parse( JSON.stringify( obj ) );
    c.arr.push(3,4,5);
    //c中缺少 fn,a,b
    console.log( c );//{arr: Array(5), name: "k", b: null}
    console.log( obj );//{arr: Array(2), name: "k", fn: ?, a: undefined, b: NaN}

云服務(wù)器 GPU云服務(wù)器四十三 ES6入門 js零基礎(chǔ)入門視頻入門篇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116853.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ideaa

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

學(xué)習(xí)Python想放棄，因?yàn)槟銢]有培養(yǎng)自己的興趣！

閱讀 2413·2021-11-23 09:51
如何構(gòu)建自己的云數(shù)據(jù)庫？建立云數(shù)據(jù)庫是否要收費(fèi)？

閱讀 1223·2021-11-22 13:54
cubecloud，慶祝中秋，全場VPS 88折，可選中國香港CN2 GIA/美國CN2 GIA/美

閱讀 3433·2021-09-24 10:31
WordPress網(wǎng)站10W+數(shù)據(jù)，數(shù)據(jù)庫查詢優(yōu)化。

閱讀 1107·2021-08-16 10:46
前端每日實(shí)戰(zhàn)：77# 視頻演示如何用純 CSS 創(chuàng)作旗幟飄揚(yáng)的動(dòng)畫

閱讀 3634·2019-08-30 15:54
JS基礎(chǔ)入門篇（四十三）— ES6（一）

閱讀 719·2019-08-30 15:54
阿里試用，女朋友逼著我給她排序

閱讀 2899·2019-08-29 17:17
Nuxt.js的踩坑指南（常見問題匯總）

閱讀 3174·2019-08-29 15:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JS基礎(chǔ)入門篇（四十三）— ES6（一）

相關(guān)文章

**JS基礎(chǔ)入門篇（四十三）—ES6（二）**

**JS基礎(chǔ)入門篇（四十三）—ES6（二）**