如何在JavaScript对象中通过已有键为另一键赋值？附config.js优化示例

嘿，这两个问题都是JavaScript对象使用中很常见的小场景，我给你拆解下实用的解决办法～

首先得明确：在对象字面量的初始化过程中，直接引用同一个对象的其他键是行不通的——因为这时候对象还没被完全创建出来，JavaScript引擎找不到对应的属性。不过有几种靠谱的替代方案：

• 方案一：先创建对象，后续补赋值
  先初始化基础对象，之后再把需要复用的属性值赋值给目标键：

const myObj = {
  src: './src/assets/**/*'
};
// 对象创建完成后，就可以安全引用它的属性了
myObj.watch = myObj.src;

• 方案二：提前定义共享变量
  把需要复用的值先存在一个变量里，再在对象字面量中多次引用这个变量，这也是最常用的简洁写法：

const targetPath = './src/assets/**/*';
const myObj = {
  src: targetPath,
  watch: targetPath
};

• 方案三：用getter实现动态同步
  如果需要后续修改src的值时，watch能自动同步更新，可以用对象的getter方法：

const myObj = {
  src: './src/assets/**/*',
  get watch() {
    // 每次访问watch时，都会返回当前的src值
    return this.src;
  }
};

// 测试一下：修改src后，watch会跟着变
myObj.src = './new/assets/path';
console.log(myObj.watch); // 输出: ./new/assets/path

针对你给出的config.js，css.src和css.watch值完全重复，我们可以用上面提到的方法来简化，这里给你适配场景的几种写法：

方法一：提前定义共享变量（最推荐） #

这种写法清晰直观，后续要修改路径只需要改一处：

const sassGlobPath = './src/sass/**/*.scss';
module.exports = {
  css: {
    src: sassGlobPath,
    dist: './dist/css/',
    watch: sassGlobPath,
  }
}

方法二：先构建css对象再补全watch #

如果不想额外定义变量，可以先创建css的基础配置，再给watch赋值：

const cssConfig = {
  src: './src/sass/**/*.scss',
  dist: './dist/css/'
};
cssConfig.watch = cssConfig.src;

module.exports = {
  css: cssConfig
}

方法三：用getter实现动态同步（适合需要后续更新的场景） #

如果你的项目后续可能需要动态修改src路径，同时希望watch自动同步，就用getter：

module.exports = {
  css: {
    src: './src/sass/**/*.scss',
    dist: './dist/css/',
    get watch() {
      return this.src;
    }
  }
}

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