为何函数中return会中断循环？如何返回完整键值对列表？

为什么console.log和return表现差异这么大？ #

• console.log(${key}: ${value})只是打印当前循环的键值对，不会中断函数执行，所以循环能完整遍历所有键值对，把a、b、c的结果都输出。
• 而return ${key}: ${value}``会立即终止整个函数，第一次循环到a时执行return，函数直接结束并返回该值，后面的b和c循环根本没机会运行，所以只会得到第一个键值对的结果。

怎么修改函数得到完整的键值对列表？ #

要得到预期的"a: somestring, b: 42,c: false"，可以先收集所有键值对字符串，最后统一返回，推荐两种简单写法：

方法1：用map+join（最简洁） #

利用Object.entries把对象转成键值对数组，再用map转换成目标格式的字符串数组，最后用join(', ')拼接成整体字符串：

const object1 = {
  a: "somestring",
  b: 42,
  c: false,
};

const defineKeyValPairs = (data) => {
  return Object.entries(data).map(([key, value]) => `${key}: ${value}`).join(', ');
};

console.log(defineKeyValPairs(object1)); // 输出：a: somestring, b: 42, c: false

方法2：循环累加字符串 #

初始化一个空字符串，在循环里逐个拼接键值对，最后返回拼接好的结果：

const object1 = {
  a: "somestring",
  b: 42,
  c: false,
};

const defineKeyValPairs = (data) => {
  let result = '';
  for (const [key, value] of Object.entries(data)) {
    // 第一个元素不加前缀逗号，后续元素前面加逗号分隔
    if (result) {
      result += ', ';
    }
    result += `${key}: ${value}`;
  }
  return result;
};

console.log(defineKeyValPairs(object1)); // 输出：a: somestring, b: 42, c: false

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