面试题：JavaScript 数组创建兼容性与复杂场景应用

Question

在一个复杂的Web应用场景中，涉及到动态加载脚本，这些脚本可能来自不同的第三方库，并且不同的脚本在创建数组时可能存在兼容性差异。在这种情况下，如何设计一个通用的数组创建和操作模块，确保在主流浏览器（包括旧版本浏览器如IE6 - IE11以及现代浏览器）中，数组创建和后续操作（如排序、过滤）都能正确无误地执行？请详细阐述设计思路并给出关键代码示例。

Answer 1

设计思路

1. 特征检测：在脚本加载后，通过特征检测来判断当前浏览器对数组操作的支持情况，而不是直接使用 typeof 来简单判断。因为在一些旧浏览器中，typeof 对数组的判断可能不准确。
2. 垫片（Polyfill）技术：对于不支持某些数组方法的浏览器，使用垫片来模拟这些方法的功能。垫片就是一段JavaScript代码，它在运行时检测浏览器是否支持某个特性，如果不支持，则提供该特性的实现。
3. 统一接口：提供一组统一的接口来创建和操作数组，隐藏不同浏览器之间的差异，让应用的其他部分以统一的方式使用数组功能。

关键代码示例

1. 数组创建：

function createArray(...args) {
    return Array.from(args);
}

Array.from 是ES6的方法，在旧浏览器中可以通过垫片来实现：

if (!Array.from) {
    Array.from = function (obj, mapFn, thisArg) {
        let arr = Object(obj);
        let result = [];
        for (let i = 0; i < arr.length; i++) {
            let value = arr[i];
            if (mapFn) {
                value = mapFn.call(thisArg, value, i);
            }
            result.push(value);
        }
        return result;
    };
}

2. 数组排序：

function sortArray(arr, compareFn) {
    if (typeof arr.sort === 'function') {
        return arr.sort(compareFn);
    } else {
        // 模拟排序逻辑，简单的冒泡排序示例
        function bubbleSort(arr, compare) {
            let len = arr.length;
            for (let i = 0; i < len - 1; i++) {
                for (let j = 0; j < len - 1 - i; j++) {
                    if (compare(arr[j], arr[j + 1]) > 0) {
                        let temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        return bubbleSort(arr, compareFn);
    }
}

3. 数组过滤：

function filterArray(arr, callbackFn, thisArg) {
    if (typeof arr.filter === 'function') {
        return arr.filter(callbackFn, thisArg);
    } else {
        let result = [];
        for (let i = 0; i < arr.length; i++) {
            if (callbackFn.call(thisArg, arr[i], i, arr)) {
                result.push(arr[i]);
            }
        }
        return result;
    }
}

使用示例

// 创建数组
let newArray = createArray(1, 2, 3, 4, 5);
// 排序
let sortedArray = sortArray(newArray, (a, b) => a - b);
// 过滤
let filteredArray = filterArray(sortedArray, num => num > 2);
console.log(filteredArray);