函数默认值设置
const sum = (x, y = 2) => x * y;
console.log(sum(2));
函数参数默认值的注意
- 默认这生效条件
//不传参数,或者明确传递undefined作为参数,只有两种情况下,默认值才会生效
const mutiply = (x, y = 1) => x + y;
console.log(mutiply(2, 0));
console.log(mutiply(2, null));
console.log(mutiply(2, undefined));
console.log(mutiply(2));
- 默认值表达式
// 如果默认值是表达是,默认值表达式的惰性求着的
- 设置默认值得小技巧
// 函数参数的默认这,最好从参数列表的右边开始设置
const mutiply = (x, y = 1) => {};
函数参数默认值得应用
- 接受很多参数的时候
const lobd = (name = "zhang", age = 18, sex = "mos") => {
console.log(name, age, sex);
};
- 接受一个对象作为参数
let lobd1 = (iop) => console.log(iop.name, iop.age);
const lobd = ({ name = "张三", age = 18, sex = "nv" } = {}) => {
console.log(name, age, sex);
};
var iop = {
name: "Aasy",
age: 19,
sex: "nan",
};
lobd(iop);
剩余参数
const add = (x, y, ...arr) => {
console.log(arr);
};
add(1, 2, 3, 4, 5, 6, 7);
剩余参数的注意事项
- 箭头函数的剩余参数
- 建构函数的参数部分即使只有一个剩余参数,也不能省略圆括号
- 使用剩余参数代替arguments 获取实际参数
const add = function () {
console.log(arguments);
};
add(1, 2, 2, 3, 3, 1, 4);
const add = (...arr) => {
console.log(arr);
};
add(12, 3, 1, 4, 5, 97);
- 剩余参数的位置
- 剩余参只能是最后一个参数,之后不能有其他参数否则就会报错
数组的展开运算符
// 展开运算符
// console.log(Math.min([3, 2, 1]));
// 2. 展开数组的基本用法
console.log(Math.min(...[1, 2, 3]));
区别剩余参数和展开预算符
// 1.根本区别
// 展开运算符
//[3,2,1] = 3,2,1
// 剩余预算符
//3,2,1=[3,2,1]
// 剩余参数
// const add = (...arr) => {
// console.log(arr);
// };
// console.log(add(1, 2, 3));
//展开预算符
// const add = (...arr) => {
// console.log(...arr);
// };
// add(1, 2, 3, 4);
数组展开预算符的应用
// 复制数组
// let a = [1, 2];
// let c = [...a];
// c[0] = 5;
// console.log(a);
// console.log(c);
// 合并数组
// const a = [1, 2];
// const b = [4, 5];
// const c = [6, 7];
// const d = [...a, ...b, ...c];
// console.log(d);
// 字符串转换为数组
// 字符串可以按照数组的形式展开
// console.log([..."asxex"]);
// console.log("asxex".split(""));
// 常见的类数组转化为数组
// arguments
// const add = function () {
// console.log([...arguments].push);
// };
// add(1, 2, 3);
//Nodelist 类数组转换为数组
console.log([...document.querySelectorAll("p")]);
对象的展开运算符
script>
// 展开对象
// const apple = {
// name: "显春",
// ageL18,
// sex: "nv",
// };
// console.log({ ...apple });
// console.log({ ...apple } === apple);
// false;
// 合并对象
// const apple = {
// name: "显春",
// ageL: 18,
// sex: "nv",
// };
// const pen = {
// name: "显春2",
// ageL: 18,
// sex: "nv",
// };
// console.log({ ...apple, ...pen });.
// 新对象拥有全部属性,相同属性,后者覆盖前者
对象展开运算符的注意事项
//1.对空对象的展开
// 如果展开一个空对象,则没有任何效果
// console.log(...{}); 会报错
// console.log({ ...{}, a: 1 });
//2. 非对象的展开
// 如果展开的不是对象,则会自动将其转为对象再将其属性罗列出来
// console.log(...1);
// console.log(...undefined);
// console.log(...null);
// console.log(...true);
// 如果展开运算符后面是字符串,它会自动成一个类似数组的对象因此返回的不是空对象
// console.log({ ..."adbds" });
// console.log([..."adbds"]);
// console.log(..."asvsd");
// 3.对象中对象属性的展开
// const aoop = {
// data: {
// name: "张三",
// age: 18,
// },
// };
// const iop = {
// data: {
// name: "李四",
// age: 19,
// },
// use: "男",
// };
// console.log({ ...aoop, ...iop });
对象展开运算符的应用
//1.复制对象
// const a = { b: 1, d: 2 };
// const c = { ...a };
// console.log(c, c === a);
// 2.用户参数和默认参数
// const add = ({ name = "zhang", age = 0, sex = "nul" } = {}) => {
// console.log(name, age, sex);
// };
// add(undefined);
const aoop = {
// name: undefined,
age: 18,
sex: "男",
};
const add = (userParam = {}) => {
const data = {
name: "zhangsan",
age: 18,
sex: "男",
};
console.log({ ...data, ...userParam });
};
add(aoop);