将 rgb 数字数组转换为十六进制颜色字符串

Question

我已经写了一个工作方法，可以将 rgb 值数组转换为十六进制颜色字符串：

/**
 * @param {Number[]} arr Array with three entries (rgb: [0-255, 0-255, 0-255]).
 * @return {String} Hex color as a string (rgb: '#000000' - '#ffffff').
 */
function arrToHex(arr) {
  return '#' + arr
    .map(v => ('0' + v.toString(16)).slice(-2))
    .join('');
}

但我不确定这种方法是否是效率方面的最佳方法。在我的代码中经常调用此方法。

尤其是 ('0' + v.toString(16)).slice(-2) 的部分（得到双十六进制数）对我来说太复杂了。这可以做得更好吗？这种 functional 方法是最好的吗？

性能评价：

结果显示 console.time if 运行 with Google Chrome v83（64 位，Linux）计算的平均秒数。从最好到最差排序。

selbie 的迭代和查找 table 解决方案：（~1.1 秒）

const hextable = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
function arrToHex(arr) {
  let s = '#';
  for (let i = 0; i < arr.length; i++) {
    s += hextable[(arr[i] / 16) | 0];
    s += hextable[arr[i] % 16 | 0];
  }
  return s;
}

console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
  arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');

selbie 的迭代和无查找 table 解决方案：（~1.8 秒）

function arrToHex(arr) {
  let s = '#';
  for (let i = 0; i < arr.length; i++) {
    s += ((arr[i] / 16) | 0).toString(16);
    s += ((arr[i] % 16) | 0).toString(16);
  }
  return s;
}
console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
  arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');

[删除]的非迭代解决方案：（~2.6 秒）

function arrToHex(arr) {
  const rgb = arr[2] | (arr[1] << 8) | (arr[0] << 16);
  return '#' + rgb.toString(16).padStart(6, '0');
}

console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
  arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');

我的错误 functional 方法：（~6.5 秒）

function arrToHex(arr) {
  return '#' + arr
    .map(v => ('0' + v.toString(16)).slice(-2))
    .join('');
}

console.time('arrToHex');
for (var r = 0; r < 256; r++)
for (var g = 0; g < 256; g++)
for (var b = 0; b < 256; b++) {
  arrToHex([r, g, b]);
}
console.timeEnd('arrToHex');

Answer 1

您可以尝试对这段代码进行基准测试：

const hextable = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];

function arrToHex(arr) {
    let s = '#';
    for (let i = 0; i < arr.length; i++) {
        s += hextable[(arr[i] / 16) | 0];
        s += hextable[arr[i] % 16 | 0];
    }
    return s;
}

或者如评论中所述，避免 table 查找并依赖运行时进行映射：

function arrToHex(arr) {
    let s = '#';
    for (let i = 0; i < arr.length; i++) {
        s += ((arr[i] / 16) | 0).toString(16);
        s += ((arr[i] % 16) | 0).toString(16);
    }
    return s;
}

将 rgb 数字数组转换为十六进制颜色字符串

Convert rgb number array to hexadecimal color string

javascript

arrays

rgb

hex

converters

性能评价：

selbie 的迭代和查找 table 解决方案：（~1.1 秒）

selbie 的迭代和无查找 table 解决方案：（~1.8 秒）

[删除]的非迭代解决方案：（~2.6 秒）

我的错误 functional 方法：（~6.5 秒）