javascript - 在从函数返回的对象上使用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)'}

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

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

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


这是语法错误。您只能在定义了价差的地方使用价差（这就是为什么要使用符号/语法而不是运算符的原因）。

如果要在字符串连接中使用hexToRgb的结果，则有几种选择：


让它返回一个字符串。
让它返回一个数组并对该数组调用.join(",")；确保数组按r，g，b顺序排列。

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

让它返回一个对象（总是，有时不是 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(",") + ')'}

具有将结果传递到的格式化功能

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

  我没有完全掌握这条线
  
  
    这是语法错误。您只能在定义了价差的地方使用价差（这就是为什么要使用符号/语法而不是运算符的原因）。
  
  
  但我会调查一下。


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

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


可迭代的扩展：数组文字或函数参数列表中的 ...将可迭代的值扩展为新数组的离散条目或函数调用的离散参数。

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);

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

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]

属性散布：对象文字中的 ...散布对象自己的可枚举属性，以及正在创建的对象的离散属性。

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}

可迭代的休息（解构），与数组文字中的可迭代扩展相反：数组解构模式中的 ...标记目标，该目标将接收该模式中其他目标未使用的可迭代项的“剩余”（作为数组） ）。

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]

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

const source = {a: 1, b: 2, c: 3};

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

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