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

Question

我正在使用一个函数来将十六进制代码转换为rgb值，这是我在这个站点上找到的一个函数，所有的功能都很完美。该函数接受字符串作为参数，并返回带有r,g,b属性及其相关值的obj。

然后，我取这些值，并将它们打印在一个反应性功能组件中。我只想整理一下语法，避免：

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错误。

这是语法错误。您只能在定义spread的地方使用places (这是为什么它是符号/语法的一部分，而不是操作符)。

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

1. 让它返回一个字符串，
2. 让它返回一个数组并在那个数组上调用.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或诸如此类的东西转换.

//参见文本rgbValue={'rgb=(‘+ Object.values(hexToRgb('#000')).join("，") +’‘}

• 有一个格式函数，将结果传递给

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

，我没有完全理解这句话

这是语法错误。您只能在定义spread的地方使用places (这是为什么它是符号/语法的一部分，而不是操作符)。但我会调查的。

很公平，这是一个非常简单的总结，有点复杂的事情。只是FWIW

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

1. Iterable list ：数组文字或函数参数列表中的...将可迭代的值作为新数组的离散项或函数调用的离散参数展开。

​

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

​

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

​

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]

​

1. Property being ：对象文字中的...扩展了对象自己的、可枚举的属性--创建对象的离散特性。

​

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}

​

1. Iterable rest (析构)，数组文字中可迭代扩展的逆序:数组析构模式中的...标记将接收模式中其他目标未使用的可迭代条目的"rest“的目标(作为数组)。

​

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]

​

1. Property rest (析构)，属性扩展的逆流:对象析构模式中的...标记将接收模式中其他目标(作为对象)未使用的属性的"rest“的目标。

​

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。

海事组织，你目前的代码已经足够清楚了。但是，如果您真的想使用hexToRgb运算符，可以修改您的result.map(v => parseInt(v, 16))以返回有序数组result.map(v => parseInt(v, 16))。