千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  行业资讯  > JavaScript全解析——ES6函数中参数的默认值和解构赋值

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

来源:千锋教育
发布人:zyh
时间: 2023-06-01 16:03:00 1685606580

  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>

tags: ES6函数
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT
开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区
  • 南昌校区
  • 哈尔滨校区