面向物件編程-終結篇 es6新增語法-有解無憂

各位，各位，終于把js完成了一個段落了，這次的章節一過我還沒確定下面要學的內容可能是vue也可能是前后端互動，但無論是哪個都挺興奮的，因為面臨著終于可以做點看得過去的大點的案例專案了，先憋住激動地情緒，看看今天的一個內容，今天是es6新增的一些語法，簡單也是真的簡單，但是我要是沒學今天這一天那看到了也是真的看不懂，就跟昨天的正則運算式一樣一樣的，今天的案例我都沒怎么做，而且也都是一些比較簡單的案例，我先把今天的一些有代表性的案例傳上來吧，是一些面試題之類的，然后我就說下我今天學了些啥子語法，今天著重采取說的方式來換個方式，不像原來全是代碼

首先第一個案例，是一個關于let的經典面試題，既然碰到了我就先把let說了吧，這個案例主要是用來比較var和let兩個在不同的作用域各自的表現，這個我要是沒聽講解我還真不知道居然是輸出些這些個結果，第一個是var宣告的for回圈

首先全程是用的var來宣告的值，然后回圈現在主堆疊道跑到上先執行完，結束過后再來呼叫陣列里面的元素也就是函式，里面存放的i就要向上級一級一級查找，這個時候找到i，是回圈結束過后i結束回圈的值，也就是2 第二個是let宣告的for回圈，這里又是輸出什么首先我們要知道，這里全程是用的let來宣告的變數，所以就要有一個很關鍵的印象，每一個let過后都會創造一個屬于自己的塊級作用域，所以這里的每個i都是在回圈往陣列里面放元素的時候單獨保存的，所以下面的陣列訪問值就會進入到單獨的塊級作用域里面訪問到屬于自己的那個值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* var arr = []
        for (var i = 0; i < 2; i++) {
            arr[i] = function() {
                console.log(i);
            }
        }
        arr[0]()
        arr[1]() */
        /* 這個輸出的是什么？這個輸出的是兩個二為什么呢？首先全程是用的var來宣告的值，然后回圈現在主堆疊道跑到上先執行完，結束過后再來呼叫
        陣列里面的元素也就是函式，里面存放的i就要向上級一級一級查找，這個時候找到i，是回圈結束過后i結束回圈的值，也就是2 */
        let arr = []
        for (let i = 0; i < 2; i++) {
            arr[i] = function() {
                console.log(i);
            }
        }
        arr[0]()
        arr[1]()
        /* 這里又是輸出什么 首先我們要知道，這里全程是用的let來宣告的變數，所以就要有一個很關鍵的印象，每一個let過后都會創造一個屬于自己的塊級作用域，
        所以這里的每個i都是在回圈往陣列里面放元素的時候單獨保存的，所以下面的陣列訪問值就會進入到單獨的塊級作用域里面訪問到屬于自己的那個值 */
    </script>
</body>
</html>

第二個我想說一下const的一些注意點，const我們是拿來宣告常量的，也就是宣告了之后值不能變化，但是這里的值不能變化其實是分兩種情況的，如果說const宣告的是數值型或者字串型別，那確實不能變化，如果說是復雜資料型別如陣列、物件等，那么就可以通過下標或者屬性的方式對修改單個值，但是對整體陣列賦值是不行的，

繼續是解構賦值，解構賦值就是可以將陣列或者物件的值通過順序依次結構給前面的變數宣告并賦值，解構賦值中有一點我需要說一下，就是對物件解構賦值，他有兩種寫法，一種是前面的變數名與屬性名對應，二個就是前面也來個鍵值對的形式，屬性名對應屬性名，后面的值就是我們變數的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* let person = {name : '張三', age : 14}
        let {name, age} = person
        console.log(name);
        console.log(age); */
        let person = {name : '張三', age : 14}
        let {name:a, age:b} = person
        console.log(a);
        console.log(b);
    </script>
</body>
</html>

然后是箭頭函式，箭頭函式是函式的一種簡寫形式，（）=》｛｝然后引數這里如果只有一個引數，那么這個小括號可以省略，后面函式體如果只有一句代碼且這句代碼就是輸出結果，那么后面的花括號也可以省略，return也可以省略，箭頭函式的關鍵點其實是里面的this，箭頭函式是沒有this的，如果在箭頭函式里面使用了this，那這個this就是定義箭頭函式位置的this，一般是他的父級的this，注意是他父級的this并非父級，這里有一個箭頭函式的經典面試題可以看一看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* var obj = {
            this : this
        }
        console.log(obj.this); */

        var obj = {
            age : 20,
            say : () => {
                console.log(this.age);
            }
        }
        obj.say()
        /* 這個案例主要是考察對箭頭函式this的熟悉程度，大家應該知道箭頭函式是沒有this的他的this指向的是定義它位置中的this，所以這里的this
        應該是obj的this而并非obj，而obj的this是window所以這里就會報錯 */
    </script>
</body>
</html>

接下來是剩余引數，剩余引數就是當我們不知道要傳多少實參進來的時候就額可以用到剩余引數，像我們以前是用的函式的內置物件arguments，但是箭頭函式沒有arg所以就要用到剩余引數，剩余引數就是在形參這里寫上，，，arg，arg是你的陣列名，三個點是必須要寫上的，然后剩余引數可以和解構來一個配合，我們知道解構前面是變數，那如果我們不知道陣列有多少元素的時候，這個時候變數可以來一個剩余引數，，，，來接受陣列的值

接下來是擴展運算子，擴展運算子可以算作是剩余引數的內容，擴展運算子就是三個點，只是說他其實還有其他的一些用途的

首先他可以將陣列或物件拆分為以，分割的引數序列，也就是分割陣列后陣列就是一個以逗號分割的幾個引數，沒有了外面的中括號，這點要先明確

然后他第一個應用是可以合并陣列，想一想是不是這個道理壩上一句話結合起來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr1 = [1, 2, 3]
        var arr2 = [4, 55, 6]
        var arr3 = [...arr1, ...arr2]
    </script>
</body>
</html>

合并陣列還有一個方法直接，arr1.push（...arr2）

除了合并陣列，它還可以將偽陣列轉換為真陣列，直接將一個維陣列添加三個點是不是變成了引數序列，那我直接將這個序列來一個陣列字面量賦給一個變數

接下來看到es6新增的一些陣列array的方法，第一個是用方法實作將偽陣列轉換為真陣列，Array.form（）括號里面兩個引數，第一個是你要轉換的陣列，第二個為可選，可以寫一個箭頭函式，類似于foreach可以傳值和下標，相當于可以在轉換程序中對每一個值進行修改再變為真陣列

第二個方法查找陣列中第一個滿足條件的值未找到回傳undefined，Array.find（）里面是一個箭頭函式可以輸入你的條件與之對應的還有一個.fingIndex（）是回傳的滿足第一個條件的索引號

第四個方法是檢測該陣列是否包含這個元素.includes()

模板字串,很久之前就看到過但那是一直沒有去學過,其實也并不難，就跟普通字串一樣只是他的引號是反引號，它的特點就是可以很方便的添加變數、物件、甚至函式，${name()}類似于這種形式，然后就是它里面的內容可以換行，這點也非常可以，之前復制過來的內容總是報錯字串，

然后是es6新增的一些string的一些方法，.starsWith()endsWith()分別是查看引數在字串的頭部還是尾部，.repeat()是將這個字串重復n次

今天的最后一個新增語法，set資料結構，他也是復雜資料型別，類似陣列，但他里面的值都是唯一的不重復的

創建的話直接new創建 let s = new Set() 可以在里面放陣列，然后有一個屬性，size可以查看這個set有多少個值在倆面

他的一個應用是做陣列去重，首先我們可以把重復的陣列放進set資料結構，因為她的特性所以這里面，現在也沒有重復的了，然后通過擴展運算子在通過【】將其轉回陣列

他也有四個方法 .add（）是添加資料回傳的是這個set資料結構所以這個可以像連式編程一樣一只添加，第二個delete（）洗掉資料，這個回傳的是布林值，看你刪沒刪成功，第三個是has（）檢測有咩有這個資料也是一個布林值，

最后一個是clear（）清空所有資料無回傳值

最后set也可以遍歷，可以通過forEach來遍歷，里面來一個箭頭函式

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458030.html

標籤：JavaScript

上一篇：css中的邊框圖片

下一篇：正則運算式整理