ES6函数中参数的默认值和解构赋值

╰半夏微凉° 2023-09-27 20:46 117阅读 0赞

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

●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>
    
    
    复制代码

#### [对象解构][Link 1] ####

●快速从对象中拿到对象中的数据  
●语法：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>

[ES6]: http://tuwen.1000phone.net/details?id=NjMwNw==#ES6%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC
[Link 1]: http://tuwen.1000phone.net/details?id=NjMwNw==#%E5%AF%B9%E8%B1%A1%E8%A7%A3%E6%9E%84

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关【ES6+】004-ES6新特性：ES6中函数参数的默认值、rest参数、扩展运算符

目录一、ES6中函数参数的默认值 1、概述 2、代码示例及相关说明二、rest参数 1、概述 2、代码示例及相关说明 3、运行结果三、扩展运算符 1、介

拼搏现实的明天。/ 2023年10月05日 16:02/ 0 赞/ 35 阅读

相关 ES6函数中参数的默认值和解构赋值

ES6函数中参数的默认值 ●给函数的形参设置一个默认值, 当你没有传递实参的时候, 使用默认值 ●直接使用赋值符号(=) 给形参赋值即可 function

╰半夏微凉°/ 2023年09月27日 20:46/ 0 赞/ 118 阅读

相关 ES6-函数参数默认值

在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法： function add(a , b) { // 判断b是否为空，为空就

红太狼/ 2023年07月23日 04:58/ 0 赞/ 62 阅读

相关 ES6——Day3（字符串的解构赋值+函数参数解构赋值）

1、字符串也可以进行解构赋值形成一个类似于“数组”的对象。案例1-1：简单的字符串（类似于“数组”） <script type="text/traceur">

旧城等待，/ 2022年09月28日 11:44/ 0 赞/ 179 阅读

相关 ES6解构赋值

原文转自[https://www.cnblogs.com/xiaohuochai/p/7243166.html][https_www.cnblogs.com_xiaohuoch

﹏ヽ暗。殇╰゛Y/ 2022年05月11日 16:24/ 0 赞/ 344 阅读

相关 ES6 学习笔记（一）let，const和解构赋值

let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在\{\}内有效，这点在for循环中

灰太狼/ 2022年03月07日 02:56/ 0 赞/ 152 阅读

相关 es6 解构赋值

ES6解构赋值传统的变量赋值：变量的解构赋值：数组的解构赋值: 对象的解构赋值:\`(和数组解构赋值类似)\`

短命女/ 2022年02月05日 11:13/ 0 赞/ 402 阅读

相关 ES6——解构赋值

原文链接：[小邵教你玩转ES6][ES6] 解构赋值解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的 let arr = [0

迷南。/ 2021年11月04日 21:46/ 0 赞/ 518 阅读

相关 ES6解构赋值

ES6解构赋值一、什么是解构赋值二、语法 1.数组解构 2.对象解构三、注意点一、什么是解构赋值允许从数组中

客官°小女子只卖身不卖艺/ 2021年09月07日 06:10/ 0 赞/ 486 阅读

相关 ES6中的解构赋值

解构：解构是一种打破数据结构，将其拆分为更小部分的过程对象的解构赋值对象的解构赋值是根据key值进行匹配 ![watermark_type_ZmFuZ3poZW

深碍√TFBOYSˉ_/ 2021年07月25日 12:02/ 0 赞/ 346 阅读