JavaScript全解析——ES6函数中参数的默认值和解构赋值

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

<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>

<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>

<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>

<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>