Я не знаю, является ли это ошибкой logi c или ошибкой синтаксиса.
Это синтаксическая ошибка. Вы можете использовать распространение только в тех местах, где определено распространение (это часть того, почему это нотация / синтаксис, а не оператор).
Если вы хотите использовать результат 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);
Параметр 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]
Распределение свойств :
... в литерале объекта распространяет собственные перечисляемые свойства объекта на отдельные свойства для создаваемого объекта.
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}
Вне этих значений значение ... не определено и поэтому вызывает синтаксическую ошибку.