将 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)的部分(获得双十六进制(对我来说似乎太复杂了。这能做得更好吗？这种功能方法甚至是最好的吗？

---

绩效评估：

结果显示，如果使用Google Chrome v83(64位，Linux(运行，则由console.time计算的平均秒数。 从最好到最差排序。

Selbie 的迭代和查找表解决方案：(~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 的迭代和无查找表解决方案：(~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');

我糟糕的功能方法：(~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;
}

或者如注释中所述，要避免表查找并依赖运行时来执行映射，请执行以下操作：

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