本文为千锋资深前端教学老师带来的【JavaScript全解析】系列，文章内含丰富的代码案例及配图，从0到1讲解JavaScript相关知识点，致力于教会每一个人学会JS！
文末有本文重点总结，可以收藏慢慢看~ 更多技术类内容，主页关注一波！
ES6函数中参数的默认值
给函数的形参设置一个默认值, 当你没有传递实参的时候, 使用默认值
直接使用 赋值符号(=) 给形参赋值即可
function fn(a, b = 100) { console.log(a, b) } fn() fn(10) fn(10, 20)ES6的函数默认值
在ES5之前是没有函数默认值的。函数的默认值是ES6的新语法
函数的默认值是给函数的形参设置一个默认值, 当你没有传递实参的时候来使用
书写: 直接在书写形参的时候, 以赋值符号(=) 给形参设置默认值就可以了
任何函数都可以使用
注意: 如果你给箭头函数设置参数默认值, 那么不管多少个形参, 都得写小括号
普通函数
// 给形参 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() //给a设置了默认值，b 没有设置默认值 function fn(a = 10, b) { console.log('fn 普通函数内的打印') console.log('a : ', a) console.log('b : ', b) } //调用函数都不传递实参 fn()箭头函数
// 箭头函数也可以设置默认值 // 给形参 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()随机数案例
// 范围内的随机数 // 定义函数, 两个数字分别默认值设置成 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))ES6解构赋值
ES6允许按照一定的模式，从数组或对象中提取值，给变量进行赋值，称为解构赋值。
解构赋值分为数组解构和对象解构
数组解构
快速的从数组拿到数组中的数据
语法：var [变量1,变量2, 变量3，....] = 数组
会按照数组的索引依次把数组中的数据拿出来，赋值给对应的变量
//定义一个数组 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 // 解构数组 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解构多维数组
数组怎么写, 解构怎么写，把数据换成变量
// 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对象解构
对象结构就是快速从对象中拿到对象中的数据
语法：var {键名1, 键名2, 键名3, ... } = 对象
按照键名, 依次定义变量从对象中获取指定成员
之前获取对象里面的值
// 解构对象 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 男 解构获取对象里面的值
// 解构对象 const obj = { name: 'Jack', age: 18, gender: '男' } // 解构 const { name, age, gender } = obj console.log(name, age, gender) //Jack 18 男解构的时候可以给变量起一个别名
语法：var { 键名: 别名, 键名2: 别名 } = 对象
注意： 当你起了别名以后, 原先的键名不能在当做变量名使用了, 需要使用这个别名
// 解构对象 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 // 解构对象 const obj = { name: 'Jack', age: 18, gender: '男' } const { name: a, gender, age: b } = obj console.log(a, b, gender) //Jack 18 男以上就是我们这篇的全部内容啦！更多技术类干货，戳我主页
视频教程速戳：免费视频教程