JS初学者求助：将箭头函数改为显式函数并实现对象属性添加

原箭头函数功能 #

原箭头函数的作用是接收一个对象和可选的时间参数，返回一个包含原对象所有属性、同时新增addedAt属性的新对象，代码如下：

const newPost = (post, addedAt = Date()) => ({
    ...post,
    addedAt,
})

const firstPost = {
    id: 1,
    name: 'Max'
}

console.dir(newPost(firstPost))

你尝试代码的问题 #

你写的代码存在两个关键错误：

• 参数顺序颠倒：默认参数addedAt被放在第一位，调用时传入的firstPost会被赋值给addedAt，而非预期的post参数
• 错误使用剩余参数...post：这会把传入的参数打包成数组，直接返回数组完全没实现添加属性的逻辑

正确的显式函数写法 #

把箭头函数改成普通显式函数，逻辑和原箭头函数完全一致，代码如下：

const firstPost = {
    id: 1,
    name: 'Bogdan'
}

function newPost(post, addedAt = Date()) {
    // 展开原对象所有属性，添加addedAt后返回新对象
    return {
        ...post,
        addedAt
    }
}

console.dir(newPost(firstPost))

工作原理解析 #

• 参数处理：第一个参数post接收传入的源对象；第二个参数addedAt设置了默认值Date()，调用时如果不传该参数，会自动使用当前时间字符串
• 对象创建逻辑：使用对象展开运算符...post将源对象的所有键值对复制到新对象中，随后添加addedAt属性——如果源对象原本有同名属性，会被这里的新值覆盖
• 返回值：返回新创建的对象，不会修改原firstPost对象，属于纯函数写法

内容的提问来源于stack exchange，提问作者The Vortex