本文為千鋒資深前端教學(xué)老師帶來(lái)的【JavaScript全解析】系列，文章內(nèi)含豐富的代碼案例及配圖，從0到1講解JavaScript相關(guān)知識(shí)點(diǎn)，致力于教會(huì)每一個(gè)人學(xué)會(huì)JS！

文末有本文重點(diǎn)總結(jié)，可以收藏慢慢看~ 更多技術(shù)類內(nèi)容，主頁(yè)關(guān)注一波！

ES6函數(shù)中參數(shù)的默認(rèn)值

給函數(shù)的形參設(shè)置一個(gè)默認(rèn)值, 當(dāng)你沒(méi)有傳遞實(shí)參的時(shí)候, 使用默認(rèn)值

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

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

ES6的函數(shù)默認(rèn)值

在ES5之前是沒(méi)有函數(shù)默認(rèn)值的。函數(shù)的默認(rèn)值是ES6的新語(yǔ)法

函數(shù)的默認(rèn)值是給函數(shù)的形參設(shè)置一個(gè)默認(rèn)值, 當(dāng)你沒(méi)有傳遞實(shí)參的時(shí)候來(lái)使用

書寫: 直接在書寫形參的時(shí)候, 以賦值符號(hào)(=) 給形參設(shè)置默認(rèn)值就可以了

任何函數(shù)都可以使用

注意: 如果你給箭頭函數(shù)設(shè)置參數(shù)默認(rèn)值, 那么不管多少個(gè)形參, 都得寫小括號(hào)

普通函數(shù)

<script>
    // 給形參 a 設(shè)置了默認(rèn)值為 10
    // 給形參 b 設(shè)置了默認(rèn)值為 20
    function fn(a = 10, b = 20) {
        console.log('fn 普通函數(shù)內(nèi)的打印')
        console.log('a : ', a)
        console.log('b : ', b)
    }
    // // 第一次調(diào)用
    // // 給 兩個(gè)形參 賦值了, 那么就不使用默認(rèn)值了
    fn(100, 200)
    // // 第二次調(diào)用
    // // 沒(méi)有給 b 賦值, 那么 b 就會(huì)使用 20 這個(gè)默認(rèn)值
    fn(1000)
    // // 第三次調(diào)用
    // // a 和 b 都沒(méi)有實(shí)參進(jìn)行賦值, 都會(huì)使用 默認(rèn)值
    fn()
</script>

<script>
    //給a設(shè)置了默認(rèn)值，b 沒(méi)有設(shè)置默認(rèn)值
    function fn(a = 10, b) {
        console.log('fn 普通函數(shù)內(nèi)的打印')
        console.log('a : ', a)
        console.log('b : ', b)
    }
    //調(diào)用函數(shù)都不傳遞實(shí)參
    fn()
</script>

箭頭函數(shù)

<script>
    // 箭頭函數(shù)也可以設(shè)置默認(rèn)值
    // 給形參 a 設(shè)置了默認(rèn)值為 10
    // 給形參 b 設(shè)置了默認(rèn)值為 20
    const fn = (a = 10, b = 20) => {
        console.log('fn 箭頭函數(shù)內(nèi)的打印')
        console.log('a : ', a)
        console.log('b : ', b)
        console.log('---------------------')
    }
    // // 第一次調(diào)用
    // // 給 兩個(gè)形參 賦值了, 那么就不使用默認(rèn)值了
    fn(100, 200)
    // // 第二次調(diào)用
    // // 沒(méi)有給 b 賦值, 那么 b 就會(huì)使用 20 這個(gè)默認(rèn)值
    fn(1000)
    // // 第三次調(diào)用
    // // a 和 b 都沒(méi)有實(shí)參進(jìn)行賦值, 都會(huì)使用 默認(rèn)值
    fn()
</script>

隨機(jī)數(shù)案例

<script>
    // 范圍內(nèi)的隨機(jī)數(shù)
    // 定義函數(shù), 兩個(gè)數(shù)字分別默認(rèn)值設(shè)置成 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解構(gòu)賦值

ES6允許按照一定的模式，從數(shù)組或?qū)ο笾刑崛≈担o變量進(jìn)行賦值，稱為解構(gòu)賦值。

解構(gòu)賦值分為數(shù)組解構(gòu)和對(duì)象解構(gòu)

數(shù)組解構(gòu)

快速的從數(shù)組拿到數(shù)組中的數(shù)據(jù)

語(yǔ)法：var [變量1,變量2, 變量3，....] = 數(shù)組

會(huì)按照數(shù)組的索引依次把數(shù)組中的數(shù)據(jù)拿出來(lái)，賦值給對(duì)應(yīng)的變量

<script>
    //定義一個(gè)數(shù)組
    const arr = [100, 200, 300, 400, 500]
        //需求: 單獨(dú)定義五個(gè)變量獲取五個(gè)數(shù)據(jù)
    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>
    // 解構(gòu)數(shù)組
    const arr = [100, 200, 300, 400, 500]
    //需求: 單獨(dú)定義五個(gè)變量獲取五個(gè)數(shù)據(jù)
    const [a, b, c, d, e] = arr
    console.log(a, b, c, d, e) // 100 200 300 400 500
</script>

解構(gòu)多維數(shù)組

數(shù)組怎么寫, 解構(gòu)怎么寫，把數(shù)據(jù)換成變量

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

對(duì)象解構(gòu)

對(duì)象結(jié)構(gòu)就是快速?gòu)膶?duì)象中拿到對(duì)象中的數(shù)據(jù)

語(yǔ)法：var {鍵名1, 鍵名2, 鍵名3, ... } = 對(duì)象

按照鍵名, 依次定義變量從對(duì)象中獲取指定成員

之前獲取對(duì)象里面的值

<script>
    // 解構(gòu)對(duì)象
    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>

解構(gòu)獲取對(duì)象里面的值

<script>
        // 解構(gòu)對(duì)象
        const obj = {
            name: 'Jack',
            age: 18,
            gender: '男'
        }

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

解構(gòu)的時(shí)候可以給變量起一個(gè)別名

語(yǔ)法：var { 鍵名: 別名, 鍵名2: 別名 } = 對(duì)象

注意： 當(dāng)你起了別名以后, 原先的鍵名不能在當(dāng)做變量名使用了, 需要使用這個(gè)別名

<script>
    // 解構(gòu)對(duì)象
    const obj = {
        name: 'Jack',
        age: 18,
        gender: '男'
    }
    //  解構(gòu)的時(shí)候起一個(gè)別名
    const {
        name: a
    } = obj //等價(jià)于 const a = obj.name
    console.log(name, a); //Jake
    //注意name是一個(gè)特殊的屬性，對(duì)象里面自帶有改屬性所以不會(huì)報(bào)錯(cuò)
    const {
        age: b
    } = obj //等價(jià)一const b = obj.age
    //console.log(age, b); //Uncaught ReferenceError: age is not 
    console.log(b); //18
</script>

<script>
    // 解構(gòu)對(duì)象
    const obj = {
        name: 'Jack',
        age: 18,
        gender: '男'
    }
    const {
        name: a,
        gender,
        age: b
    } = obj
    console.log(a, b, gender) //Jack 18 男
</script>

以上就是我們這篇的全部?jī)?nèi)容啦！更多技術(shù)類干貨，戳我主頁(yè)

視頻教程速戳：免費(fèi)視頻教程文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-450632.html

到了這里，關(guān)于JavaScript全解析——ES6函數(shù)中參數(shù)的默認(rèn)值和解構(gòu)賦值的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！