2020.11.21 ES6--11 解構賦值 ES6新增字串的簡易宣告(反引號) 物件宣告的簡化 箭頭函式 傳參時可以賦初始值

tatakae發表於2020-11-21

ES 6–11

解構賦值

定義:允許按照一定模式從陣列和物件中提取變數,並對變數進行賦值

型別一:陣列型別的解構賦值

  //型別一:陣列型別
        const Name = ['鄧柱', '燈珠', '燈柱'];
        //定義四個變數分別對應陣列中的值
        let [a, b, c] = Name;
        console.log(a);
        console.log(b);
        console.log(c);


型別二:物件型別的解構賦值

    //型別二:物件的解構
        const zhao = {
            name: '趙本山',
            xiaopin: function() {
                console.log('我會小品');
            }
        }
        let {
            name, //將name等從 zhao中解出來 就可以直接用了,定義了一個變數等於zhao中的name;
            xiaopin
        } = zhao;
        console.log(name); //不需要寫 zhao.name
        console.log(xiaopin);

、、、、
、、、、、
、、、、、
、、、、、

ES6新增字串的簡易宣告

用反引號宣告

   let str = `鄧柱無敵啦`; //反引號

特性:內容之間可以出現換行符;//字串可以拼接 : ${ 字元變數 };

//特性:內容之間可以出現換行符
        let string =
            `鄧柱
            又
            行啦`;

        console.log(string);


        //字串可以拼接 :  ${ 字元變數 };
        let string2 = `${str} 這是好的`
        console.log(string2);

、、、、、、
、、、、、
、、、、、
、、、、、、
、、、、、、

物件宣告的簡化:可以直接在{}內書寫變數和函式,作為物件的屬性和方法;

//物件宣告的簡化
        //可以直接在{}內書寫變數和函式,作為物件的屬性和方法;
        let change = function() {
            alert('鄧柱在改變');
        }
        let duixiang = {
            a, //呼叫了前面定義的變數a
            change, //直接呼叫方法函式
            //新的方法建立
            improve() {
                alert(str);
            }

        }

箭頭函式

箭頭函式的定義


        //箭頭函式
        //箭頭函式的定義:
        let fn = (a, b) => {
                return a + b;
            }
            //省掉了function

箭頭函式的特性

箭頭函式的特性 一: 箭頭函式中的this是靜態的 始終指向函式宣告時的this的值
   // call 可以改變函式內部的屬性name值

在這裡插入圖片描述

特性二:不能作為建構函式去例項化物件

在這裡插入圖片描述

特性三:當 傳入引數只有一個時 小括號()可以省略;當函式內部的程式碼只有一句時 ,{}可以省略。

如:

箭頭函式的應用

一、
在這裡插入圖片描述
在設定 setTimeout時 如果用常規方法不能用this來指代點選的地方
因為 setTimeout 中的 this 指向的是全域性作用域
如果用剪頭表示式就可以 因為 箭頭表示式中的this是靜態的不會改變;

、、、、、、
二、
array.filter()方法:括號內為陣列中的數滿足什麼條件的能被返回


        const arr = [1, 3, 4, 5, 6, 12];
        let result = arr.filter(function(item) {
            if (item < 6) {
                return true;
            } else {
                return false;
            }
        });
        console.log(result);

通過箭頭函式可以更加簡便的書寫:

let result = arr.filter(item => item < 6);

、、、、、、、、
、、、、、、、、
、、、、、、、、、
、、、、、、、、、、
、、、、、、、
、、、、、、、、、

傳參時可以賦初始值

 function add(a, b, c = 10) {
            return a + b + c;
        }
        add(1, 2, 10);

傳參賦初始值和解構賦值的連用

在傳參時 將傳入的物件引數解構賦值,並且還可以新增新的屬性dislike ='girl’

//在傳參時 將傳入的物件引數解構賦值,並且還可以新增新的屬性dislike ='girl';
        function person({
            dislike = 'girl',
            name,
            age,
            hobby
        }) {
            alert(name +
                age +
                hobby +
                dislike);
        }

        //在呼叫person
        person({
            name: '鄧柱',
            age: '19',
            hobby: 'processing'

        });

相關文章