JS基础入门篇（四十三）— ES6（一）

1.var , let , const

var

    1.预解析（变量提升）
    2.可以重复声明变量       

let

    1.不支持预解析（必须先声明，后使用） 
    2.不支持重复声明
    3.支持块级作用域 

1.举例说明—预解析

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

    console.log(b);//报错,b is not defined。
    let b=3;

由于var存在预解析，所以不会报错。let不存在预解析

    console.log(a);//undefind
    var a=2;
    
//  以上代码相当于:
    var a;
    console.log(a);
    a=2;
    

2.举例说明—重复声明变量

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

    let b=1;
    let b=2;
    console.log(b);//报错，Identifier 'b' has already been declared。b已经被声明了

3.举例说明—块级作用域

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

    console.log(a);//1
    console.log(b);//报错，b is not defined

---

const 常量

    1.初始化之后,内部值不可改,必须初始化赋值的问题。
    2.不支持预解析
    3.不允许重复声明
    4.支持块级作用域

const举例说明：

    const a;
    console.log(a);//报错，Missing initializer in const declaration。a没有赋值。

    const b=1;
    b=2;
    console.log(b);//报错， Assignment to constant variable.不能改变常量的值

2.解构赋值

1.对于 对象 解构赋值，变量名要和键名相同，顺序不重要,用{}括起来

（1）变量声明并赋值时的解构

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

（2）变量声明 后 赋值时的解构

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. 对于 数组 解构赋值，按数组顺序赋值，变量名不重要，用[ ]括起来

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

3. 默认值配置

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.重命名并且设默认值

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.解构赋值的应用，交换两个变量的值

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

4.箭头函数

箭头函数: 函数的简短写法

    变体方式
        只有一个参数省略括号
        只有一条语句省略大括号和return
            返回对象 需要 用 () 包起来
    注意
        没有arguments
        不可以作为构造函数
        this绑定

举例一：将函数表达式用箭头函数表示

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

//将以上函数表达式 用箭头函数 表示
    let fn=()=>{};
    fn();

举例二：只有一个 参数 省略括号, 没有参数或者1个以上参数都不可以省略

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

//只有一个参数省略括号
let fn=num=>console.log(num);
fn(2);//2

举例三：函数体仅有一条语句,并且有返回值 可以省略 {} 和 return

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

//函数体仅有一条语句并且有返回值, 省略 { } 和 return
let fn=(a,b) => a+b; 
fn(1,3);//4

注意：如果 返回的是一个对象 ,则需要 () 包起来

let a=userName=>{
    return {
        name : userName
    }
}
console.log( a("lzf") );//{name: "lzf"}
//---------- 如果 返回的是一个对象 ,则需要 () 包起来 -------------

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);//报错，arguments is not defined。

举例五：不可以作为构造函数

    let fn=(a,b)=>a+b;
    var f=new fn(); //报错,fn is not a constructor.

举例六：this绑定,箭头函数在哪声明的，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.函数参数

1.默认参数

    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.剩余参数

    let a = function(x,y,...r){
        console.log( x,y );
        console.log( r );
    }
    a("a","b","c","d");
    //运行结果:
    //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.扩展运算符

把集合变成参数的形式
    push 数组
    合并数组
    字符串转换数组
    类数组转变为数组
    扩展对象的属性
        
    注意
        如果被扩展的内容中存在项是对象,那么被扩展后依然是地址引用

举例说明一：

    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 数组

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

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

举例说明三：合并数组

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

举例说明四：字符串转换数组

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

举例说明五：扩展对象的属性

注意：如果被扩展的内容中存在项是对象,那么被扩展后依然是地址引用。

    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转化为字符串，再转化为对象。
    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}