面试题：JavaScript 字符串与数组相互转换及性能优化的深度探讨

小数据量场景

字符串当作数组操作：
- 原理：在 V8 引擎中，对于小数据量，直接操作字符串的属性和方法通常是高效的，因为 V8 对常见的字符串操作有优化。
- 代码示例：

// 字符串当作数组获取字符
const str = 'hello';
const char = str[1];
console.log(char);

// 字符串分割类似数组操作
const parts = str.split('');
console.log(parts);

数组转字符串：
- 原理：V8 对数组的 join 方法有较好的优化，在小数据量时，直接调用 join 方法能快速将数组转换为字符串。
- 代码示例：

const arr = ['h', 'e', 'l', 'l', 'o'];
const newStr = arr.join('');
console.log(newStr);

大数据量场景

字符串当作数组操作：
- 原理：对于大数据量的字符串，将其转换为 Uint16Array（因为 JavaScript 字符串是 UTF - 16 编码），可以利用 V8 对 TypedArray 的优化，提高操作效率。
- 代码示例：

function stringToArray(str) {
    const uint16Array = new Uint16Array(str.length);
    for (let i = 0; i < str.length; i++) {
        uint16Array[i] = str.codePointAt(i);
    }
    return uint16Array;
}

const largeStr = 'a'.repeat(1000000);
const arrayLike = stringToArray(largeStr);
// 这里可以对 arrayLike 进行类似数组的操作，例如获取某个位置的字符
const charCode = arrayLike[100];
console.log(String.fromCodePoint(charCode));

数组转字符串：
- 原理：当数组元素很多时，分块处理再 join 可以减少内存压力和提高性能。因为一次性 join 大数据量数组可能导致内存不足或性能下降，V8 在处理大数据量时对这种分块策略有更好的适应性。
- 代码示例：

function arrayToString(arr, chunkSize = 10000) {
    let result = '';
    for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        result += chunk.join('');
    }
    return result;
}

const largeArr = new Array(1000000).fill('a');
const largeStrResult = arrayToString(largeArr);
console.log(largeStrResult);

性能测试方法

使用 console.time() 和 console.timeEnd()：
- 原理：这两个方法可以简单地测量一段代码的执行时间。
- 代码示例：

// 测试字符串当作数组操作（大数据量）
console.time('stringToArrayLarge');
const largeStr = 'a'.repeat(1000000);
const arrayLike = stringToArray(largeStr);
console.timeEnd('stringToArrayLarge');

// 测试数组转字符串（大数据量）
console.time('arrayToStringLarge');
const largeArr = new Array(1000000).fill('a');
const largeStrResult = arrayToString(largeArr);
console.timeEnd('arrayToStringLarge');

使用 benchmark 库：
- 原理：benchmark 库提供了更专业和准确的性能测试功能，能多次运行测试并给出详细的统计信息。
- 安装：npm install benchmark
- 代码示例：

const Benchmark = require('benchmark');
const suite = new Benchmark.Suite;

// 测试字符串当作数组操作（大数据量）
suite
  .add('stringToArrayLarge', function() {
        const largeStr = 'a'.repeat(1000000);
        stringToArray(largeStr);
    })
  .on('cycle', function(event) {
        console.log(String(event.target));
    })
  .on('complete', function() {
        console.log('Fastest is'+ this.filter('fastest').map('name'));
    })
  .run({ 'async': true });

// 测试数组转字符串（大数据量）
suite
  .add('arrayToStringLarge', function() {
        const largeArr = new Array(1000000).fill('a');
        arrayToString(largeArr);
    })
  .on('cycle', function(event) {
        console.log(String(event.target));
    })
  .on('complete', function() {
        console.log('Fastest is'+ this.filter('fastest').map('name'));
    })
  .run({ 'async': true });

星途面试题库

面试题：JavaScript 字符串与数组相互转换及性能优化的深度探讨

知识考点

面试题答案

小数据量场景

大数据量场景

性能测试方法