模板字符串&箭頭函數&三點運算符&解構賦值

1、let 與const

-let 1、只能在當前的代碼塊中有效 2、let變量不能提升 3、不能重複聲明 4、for循環體現let父子作用域

- cosnt 1、 聲明必須賦值,

2、模板字符串

    var obj = {
        name:'李明',
        age:34
        }
    //模板字符串
    console.log('名字'+obj.name+'年齡'+obj.age);
    //`名字:${obj.name} 年齡:${obj.age}`
    console.log(`名字:${obj.name} 年齡:${obj.age}`);

3、簡化對象的書寫

    var a=1;
    var b=2;
    var obj1={
        a,   //省略同名關鍵字
        b,
        setA(x){
            console.log('aaaa');  //省略function關鍵字
        }
    }
    console.log(obj1);

4、箭頭函數

**一般形式**:
let fn1=(x,y)=>{
    console.log(this);
}
fn1();

**/* 注意this指向的問題:箭頭函數的this指向不是在調用時決定的,而是在定義的時候決定的
* 1、如果外部有函數,那麼this指向外部函數的this
* 2、如果外部沒有函數,指向window*/**

總結:箭頭函數將它的詞法作用域綁定在原來的上下文中箭頭後面只有一條執行語句時,大括號可以不寫,此時執行後的語句會默認有返回值。
  // 當函數體只有一條語句的時候{}可省略不寫, 當{}省略不寫的時候會自動返回當前語句的執行結果;
  let fun4 = (x, y) => {
    return x + y
  };
  console.log(fun4(4, 1));   //5
let obj={};
let fn1=(x,y)=>{ console.log(this);//window 
let fn3=()=>{ console.log(this);//window 
function f4() { 
console.log(this); //obj 
} 
f4.call(obj); 
} 
fn3.call(obj); //call不會改變箭頭函數的this指向}
fn1.call(obj);//call會改變普通函數的this指向
function foo2() { 
let fn1=(x,y)=>{ 
console.log(this); //obj 
} 
fn1();
}
foo2.call(obj); //call會改變this指向

5、三點運算符

//三點運算符可以將僞數組轉換爲真數組
function args(a,b,c,d){
    //獲取實參列表,僞數組
    console.log(arguments); 
    //返回這個函數本身
    console.log(arguments.callee);

}
args(1,2,3,4);

//函數中的應用:真數組
function foo(...args){
    console.log(...args);   //1 2
    console.log(args);   //[1, 2]
}
foo(1,2);

//數組中的應用
let arr1=[1,2];
let arr2=[3,...arr1,4];
console.log(arr2);  //[3, 1, 2, 4]

6、形參默認值

function foo(x=1,y=2){
        this.x=x;
        this.y=y
    }
    var f=new foo();  //沒有實參,執行形參默認值
    console.log(f);
    var p=new foo(4,5);  //有實參,執行實參中的值
    console.log(p);

 

7、變量的解構賦值

   // 2 對象的解構賦值
    let obj = {name:'kobe',age:20};
    let {age} = obj;
    console.log(age);

    //3. 數組的解構賦值  不經常用
    let arr=[1,2,4,'ni'];
    let [,,,r] = arr;

 


 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章