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

  • JavaScript全解析——ES6函数中参数的默认值和解构赋值已关闭评论
  • 151 次浏览
  • A+
所属分类:Web前端
摘要

本文为千锋资深前端教学老师带来的【JavaScript全解析】系列,文章内含丰富的代码案例及配图,从0到1讲解JavaScript相关知识点,致力于教会每一个人学会JS!

本文为千锋资深前端教学老师带来的【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> 

以上就是我们这篇的全部内容啦!更多技术类干货,戳我主页

视频教程速戳:免费视频教程