在从函数返回的对象上使用 ES6 扩展运算符

Question

我正在使用一个函数将十六进制代码转换为 rgb 值，这是我在本网站上找到的一个，并且一切正常。 该函数接受一个字符串作为参数，并返回一个带有r,g,b属性及其关联值的 obj。

然后我将这些值打印在 React 功能组件中。 我只是想整理一下语法并避免：

rgbValue={'rgb=(' + hexToRgb('#000').r + ', ' + hexToRgb('#000').g + ', ' + hexToRgb('#000').b + ')'}

并用以下内容替换它：

rgbValue={ 'rgb=(' + ...hexToRgb('#000') + ')'}

希望这会从对象返回r,g,b值，最终结果是：

rgbValue={'rgb=(0,0,0)'}

但是，这并没有按预期工作。 我不知道这是逻辑问题还是语法错误。 我是使用扩展运算符的新手，所以我不太熟悉它，但是有没有办法使用我当前的设置来实现这一点？

用于显示返回内容的 JS 函数：

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  // return rgb values as properties on an object
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

Answer 1

我不知道这是逻辑问题还是语法错误。

这是一个语法错误。 您只能在定义 spread 的地方使用 spread （这就是为什么它是符号/语法，而不是运算符的部分原因）。

如果你想在字符串连接中使用hexToRgb的结果，你有几个选择：

1. 让它返回一个字符串。

2. 让它返回一个数组并在该数组上调用.join(",") ； 确保数组按 r、g、b 顺序排列。

    rgbValue={'rgb=(' + formatRgb(hexToRgb('#000')) + ')'}

3. 让它返回一个对象（总是，有时不为null ）并使用Object.values(hexToRgb('#000')).join(",") 。 确保对象是按 r、g、b 顺序创建的（您的顺序是），并且此代码仅在现代 JavaScript 引擎上运行。 对象属性的顺序仅用于定义Object.values最近（的变化，将在ES2020）; 在此之前，尽管某些操作存在顺序，但Object.values和其他一些操作不需要它。 但是现代引擎已经实现了定义的顺序，所以只要你不必为 IE11 或类似的东西进行转换......

    // See caveats in the text rgbValue={'rgb=(' + Object.values(hexToRgb('#000')).join(",") + ')'}

4. 有一个格式化函数，你将结果传递给

   rgbValue={'rgb=(' + formatRgb(hexToRgb('#000')) + ')'}

---

我没有完全掌握这条线

这是一个语法错误。 您只能在定义 spread 的地方使用 spread （这就是为什么它是符号/语法，而不是运算符的部分原因）。

但我会调查一下。

公平地说，这是对一些复杂事物的非常简短的总结。 只是 FWIW：

...不是运营商。 运算符具有操作数（如函数的参数）和单个结果值（如函数的返回值），并且几乎可以在任何需要表达式的地方使用。 ...不是运算符，也不可能是，因为它没有单个结果值。 相反， ...被定义为具有五种含义的主要语法：

1. Iterable spread : ...在数组文字或函数参数列表中，将可迭代值作为新数组的离散条目或函数调用的离散参数展开。

 const source = [1, 2, 3, 4]; // In an array literal const dest = [...source, 5, 6]; console.log(dest); // [1, 2, 3, 4, 5, 6] function example1(a, b, c, d) { console.log(a, b, c, d); // 1 2 3 4 } // In a function argument list example1(...source);

2. 休息参数: ...在函数参数列表中的最终声明参数之前标记“休息参数”，它将接收从该点开始作为数组提供的所有参数。

 function example2(a, b, ...rest) { console.log(`a = ${a}, b = ${b}, rest = ${JSON.stringify(rest)}`); } example2(1, 2, 3, 4); // a = 1, b = 2, c = [3,4]

3. Property spread : ...在对象字面量中，将对象自己的可枚举属性展开为正在创建的对象的离散属性。

 const source = {a: 1, b: 2, c: 3}; const dest = {...source, d: 4, e: 5}; console.log(dest); // {a: 1, b: 2, c: 3, d: 4, e: 5}

4. 可迭代剩余（解构），数组文字中可迭代传播的反面： ... ）。

 const source = [1, 2, 3, 4]; const [a, b, ...rest] = source; console.log(`a = ${a}, b = ${b}, rest = ${JSON.stringify(rest)}`); // a = 1, b = 2, rest = [3,4]

5. 属性剩余（解构），属性传播的反义词： ...在对象解构模式中标记目标，该目标将接收模式中其他目标未消耗的属性的“剩余”（作为对象）。

 const source = {a: 1, b: 2, c: 3}; const {a, ...rest} = source; console.log(a); // 1 console.log(rest); // {b: 2, c: 3}

除此之外， ...的含义没有定义，因此会导致语法错误。

Answer 2

改为返回数组

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  // return rgb values as properties on an object
  return result ? [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ] : [];
}

rgbValue='rgb=(' + hexToRgb('#000').join(',') + ')';
// rgb=(0,0,0)

Answer 3

首先，这是一个错误，因为扩展运算符仅适用于可迭代对象（例如数组），而不适用于对象（除非您正在创建对象）。

其次，如果您首先通过将对象值转换为数组来解决此问题，例如 ( ...Object.values(myHex) )，这将产生意外结果，因为对象条目是无序的。 即，不能保证r会在g之前出现。

IMO，您当前的代码足够清晰。 但是如果你真的想使用扩展运算符，你可以修改你的hexToRgb以返回一个有序数组result.map(v => parseInt(v, 16))