本文為千鋒資深前端教學老師帶來的【JavaScript全決議】系列，文章內含豐富的代碼案例及配圖，從0到1講解JavaScript相關知識點，致力于教會每一個人學會JS！

文末有本文重點總結，可以收藏慢慢看~ 更多技術類內容，主頁關注一波！

ES6函式中引數的默認值

給函式的形參設定一個默認值, 當你沒有傳遞實參的時候, 使用默認值

直接使用 賦值符號(=) 給形參賦值即可

function fn(a, b = 100) { 
   console.log(a, b)
 } 
 
 fn() 
 fn(10) 
 fn(10, 20)

ES6的函式默認值

在ES5之前是沒有函式默認值的，函式的默認值是ES6的新語法

函式的默認值是給函式的形參設定一個默認值, 當你沒有傳遞實參的時候來使用

書寫: 直接在書寫形參的時候, 以賦值符號(=) 給形參設定默認值就可以了

任何函式都可以使用

注意: 如果你給箭頭函式設定引數默認值, 那么不管多少個形參, 都得寫小括號

普通函式

<script>
    // 給形參 a 設定了默認值為 10
    // 給形參 b 設定了默認值為 20
    function fn(a = 10, b = 20) {
        console.log('fn 普通函式內的列印')
        console.log('a : ', a)
        console.log('b : ', b)
    }
    // // 第一次呼叫
    // // 給 兩個形參 賦值了, 那么就不使用默認值了
    fn(100, 200)
    // // 第二次呼叫
    // // 沒有給 b 賦值, 那么 b 就會使用 20 這個默認值
    fn(1000)
    // // 第三次呼叫
    // // a 和 b 都沒有實參進行賦值, 都會使用 默認值
    fn()
</script>

<script>
    //給a設定了默認值，b 沒有設定默認值
    function fn(a = 10, b) {
        console.log('fn 普通函式內的列印')
        console.log('a : ', a)
        console.log('b : ', b)
    }
    //呼叫函式都不傳遞實參
    fn()
</script>

箭頭函式

<script>
    // 箭頭函式也可以設定默認值
    // 給形參 a 設定了默認值為 10
    // 給形參 b 設定了默認值為 20
    const fn = (a = 10, b = 20) => {
        console.log('fn 箭頭函式內的列印')
        console.log('a : ', a)
        console.log('b : ', b)
        console.log('---------------------')
    }
    // // 第一次呼叫
    // // 給 兩個形參 賦值了, 那么就不使用默認值了
    fn(100, 200)
    // // 第二次呼叫
    // // 沒有給 b 賦值, 那么 b 就會使用 20 這個默認值
    fn(1000)
    // // 第三次呼叫
    // // a 和 b 都沒有實參進行賦值, 都會使用 默認值
    fn()
</script>

亂數案例

<script>
    // 范圍內的亂數
    // 定義函式, 兩個數字分別默認值設定成 0 和 255
    const randomNum = (a = 255, b = 0) => Math.floor(Math.random() * (Math.abs(a - b) + 1)) + Math.min(a, b)
    console.log(randomNum(20, 30))
</script>

ES6解構賦值

ES6允許按照一定的模式，從陣列或物件中提取值，給變數進行賦值，稱為解構賦值，

解構賦值分為陣列解構和物件解構

陣列解構

快速的從陣列拿到陣列中的資料

語法：var [變數1,變數2, 變數3，....] = 陣列

會按照陣列的索引依次把陣列中的資料拿出來，賦值給對應的變數

<script>
    //定義一個陣列
    const arr = [100, 200, 300, 400, 500]
        //需求: 單獨定義五個變數獲取五個資料
    const a = arr[0]
    const b = arr[1]
    const c = arr[2]
    const d = arr[3]
    const e = arr[4]
    console.log(a, b, c, d, e); //100 200 300 400 500
</script>

<script>
    // 解構陣列
    const arr = [100, 200, 300, 400, 500]
    //需求: 單獨定義五個變數獲取五個資料
    const [a, b, c, d, e] = arr
    console.log(a, b, c, d, e) // 100 200 300 400 500
</script>

解構多維陣列

陣列怎么寫, 解構怎么寫，把資料換成變數

<script>
    // 1-2. 解構多維陣列
    const arr = [1, 2, [3, 4, [5, 6, [7, 8, [9]]]]]
    console.log(arr)
    //需求: 定義變數拿到資料 9
    const a = arr[2][2][2][2][0]
    console.log(a) //9
    //解構
    const [a,b, [c, d, [e, f, [g, h, [i]]]]] = arr
    console.log(i) //9
</script>

物件解構

物件結構就是快速從物件中拿到物件中的資料

語法：var {鍵名1, 鍵名2, 鍵名3, ... } = 物件

按照鍵名, 依次定義變數從物件中獲取指定成員

之前獲取物件里面的值

<script>
    // 解構物件
    const obj = {
        name: 'Jack',
        age: 18,
        gender: '男'
    }
    const name = obj.name
    const age = obj.age
    const gender = obj.gender
    console.log(name, age, gender) //Jack 18 男
 </script>

解構獲取物件里面的值

<script>
        // 解構物件
        const obj = {
            name: 'Jack',
            age: 18,
            gender: '男'
        }

        // 解構
        const {
            name,
            age,
            gender
        } = obj
        console.log(name, age, gender) //Jack 18 男
</script>

解構的時候可以給變數起一個別名

語法：var { 鍵名: 別名, 鍵名2: 別名 } = 物件

注意： 當你起了別名以后, 原先的鍵名不能在當做變數名使用了, 需要使用這個別名

<script>
    // 解構物件
    const obj = {
        name: 'Jack',
        age: 18,
        gender: '男'
    }
    //  解構的時候起一個別名
    const {
        name: a
    } = obj //等價于 const a = obj.name
    console.log(name, a); //Jake
    //注意name是一個特殊的屬性，物件里面自帶有改屬性所以不會報錯
    const {
        age: b
    } = obj //等價一const b = obj.age
    //console.log(age, b); //Uncaught ReferenceError: age is not 
    console.log(b); //18
</script>

<script>
    // 解構物件
    const obj = {
        name: 'Jack',
        age: 18,
        gender: '男'
    }
    const {
        name: a,
        gender,
        age: b
    } = obj
    console.log(a, b, gender) //Jack 18 男
</script>

以上就是我們這篇的全部內容啦！更多技術類干貨，戳我主頁

視頻教程速戳：免費視頻教程

標籤：JavaScript

上一篇：520示愛小工具

下一篇：返回列表