ES6对象字面量的增强与函数参数默认值
808 字
4 分钟
ES6对象字面量的增强与函数参数默认值
对象字面量的增强
属性和方法的简洁表示法
对象字面量是什么
在 JavaScript 中用一对 {} 直接创建对象的一种写法
//这整段 { name: "Alice", age: 20 } 就叫 对象字面量。//直接写出来就代表一个值，而不是通过 new 或函数生成const obj = { name: "Alice", age: 20};//构造方式（不是字面量）const obj = new Object();obj.name = "Alice";属性的简洁表示法
当 变量名 = 属性名 时，可以直接写变量名。
//标准const name = "Alice";const age = 20;const obj = { name: name, age: age};
//简洁const name = "Alice";const age = 20;const obj = { name, age};方法的简洁表示法
在对象里定义函数时，可以省略 function 关键字和冒号 :。
//传统const obj = { say: function () { console.log("Hello"); }};//简洁const obj = { say() { console.log("Hello"); }};方括号语法
方括号语法是 JavaScript 对象字面量里的一种写法，用来动态决定对象的属性名。
基本用法：
//传统const obj = { name: "Alice"};console.log(obj.name); // Alice
//方括号语法const key = "name1";const obj = { [key]: "Alice"};console.log(obj.name1); // Alice方括号语法可以放什么
//方括号里不只是变量，还可以是表达式，只要能求值：const obj = { ["user" + "Name"]: "Alice"};
console.log(obj.userName); // Alice函数参数默认值
函数参数的默认值是什么
**函数参数的默认值（Default Parameters）**是 ES6 提供的语法，用来给函数的参数设置“默认值”。简单说：如果调用函数时没传这个参数，就用默认值
基本语法
function greet(name = "Guest") { console.log("Hello " + name);}greet(); // Hello Guestgreet("Alice"); // Hello Alice多个参数
function add(a = 1, b = 2) { return a + b;}
add(); // 3add(5); // 7add(5, 10); // 15函数参数默认值的注意事项
只在“undefined”时生效
function test(x = 10) { console.log(x);}
test(undefined); // 10test(null); // null ❗不会用默认值默认值可以是表达式
function getTime(time = Date.now()) { return time;}function random(num = Math.random()) { return num;}//每次调用都会重新计算默认值可以依赖其他参数
function sum(a = 1, b = a + 1) { return a + b;}sum(); // 1 + 2 = 3开发小技巧：默认值最好从右边开始设置
//左边设置const add {x=1,y} => x+y;add(undefined,5)//6
//右边设置const add {x,y=1} => x+y;add(5)//6函数参数默认值的应用
//接受多个参数// const logUser = (username = '张三', age = 0, sex = 'male') => {// console.log(username, age, sex);// };
// logUser('Alex', 18, 'male');// logUser();
//接受一个对象// const logUser = (options) => {// console.log(options.username, options.age, options.sex);// };// logUser({ username: '张三', age: 0, sex: 'male' });
//接受一个对象，用解构赋值// const logUser = ({ username, age, sex }) => {// console.log(username, age, sex);// };// logUser({ username: '张三', age: 0, sex: 'male' });
//接受一个对象，用解构赋值，用默认值,如果什么都不传，有问题，不传是undefined，undefined不能解构赋值// const logUser = ({ username = '默认名字', age = 0, sex = '未知' }) => {// console.log(username, age, sex);// };// logUser({ username: '张三', age: 0 });
//const logUser = ({ username = '默认名字', age = 0, sex = '未知' } = {}) => { console.log(username, age, sex);};logUser();文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
ES6剩余参数
前端工程师2026-10-21
2
ES6箭头函数
前端工程师2026-10-21
3
ES6解构赋值
前端工程师2026-10-21
4
ES6遍历器与for…of循环
前端工程师2026-10-21
5
ES6类Class
前端工程师本文主要学习ES6类Class
随机文章随机推荐