百万数据加载查找测试

分别使用Array、Object、Map存储长度为一百万的数据，然后进行取值/查找，记录耗时，推算其性能。

使用浏览器进行测试：

Chrome 已是最新版本

版本 101.0.4951.67（正式版本）（64 位）

测试代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>数组，字典，Map取值速度测试</title>

</head>

<body>
    打开控制台查看
    <script type="text/javascript">
        // 数组，字典，Map取值速度测试

        // 创建测试项
        function createItem(index) {
            return {
                id: 'id' + index,
                ['filedA' + index]: 'valueA' + index,
                ['filedB' + index]: 'valueB' + index,
                ['filedC' + index]: 'valueC' + index,
                ['filedD' + index]: 'valueD' + index
            }
        }

        const Length = 1000000

        // 数组查找
        function listQuery(id, list) {
            for (let index = 0; index < list.length; index++) {
                const element = list[index];
                if (element.id === id) {
                    return element
                }
            }
        }
        function listFind(id, list) {
            return list.find(item => { return item.id === id })
        }

        function test(iii) {
            const list = []
            const dic = {}
            const map = new Map()

            console.group('性能测试' + iii)

            console.group('赋值性能测试')

            console.time('数组赋值')
            for (let index = 0; index < Length; index++) {
                const item = createItem(index)
                list.push(item)
            }
            console.timeEnd('数组赋值')

            console.time('字典赋值')
            for (let index = 0; index < Length; index++) {
                const item = createItem(index)
                dic[item.id] = item
            }
            console.timeEnd('字典赋值')

            console.time('map赋值')
            for (let index = 0; index < Length; index++) {
                const item = createItem(index)
                map.set(item.id, item)
            }
            console.timeEnd('map赋值')

            console.groupEnd('赋值性能测试')

            console.group('查找取值性能测试')

            console.time('数组取值-索引')
            console.groupCollapsed('取值结果')
            console.log(list[0]) // 第一个
            console.log(list[Length / 2]) // 中间
            console.log(list[Length - 1]) // 最后一个
            console.log(list[Length + 1]) // 不存在的
            console.groupEnd('取值结果')
            console.timeEnd('数组取值-索引')

            console.time('数组取值-find')
            console.groupCollapsed('取值结果')
            console.log(listFind('id0', list)) // 查找第一个
            console.log(listFind(`id${Length / 2}`, list)) // 查找中间
            console.log(listFind(`id${Length - 1}`, list)) // 查找最后一个
            console.log(listFind(`id${Length + 1}`, list)) // 查找不存在的
            console.groupEnd('取值结果')
            console.timeEnd('数组取值-find')

            console.time('数组取值-for遍历')
            console.groupCollapsed('取值结果')
            console.log(listQuery('id0', list)) // 查找第一个
            console.log(listQuery(`id${Length / 2}`, list)) // 查找中间
            console.log(listQuery(`id${Length - 1}`, list)) // 查找最后一个
            console.log(listQuery(`id${Length + 1}`, list)) // 查找不存在的
            console.groupEnd('取值结果')
            console.timeEnd('数组取值-for遍历')

            console.time('字典取值')
            console.groupCollapsed('取值结果')
            console.log(dic['id0']) // 查找第一个
            console.log(dic[`id${Length / 2}`]) // 查找中间
            console.log(dic[`id${Length - 1}`]) // 查找最后一个
            console.log(dic[`id${Length + 1}`]) // 查找不存在的
            console.groupEnd('取值结果')
            console.timeEnd('字典取值')

            console.time('Map取值')
            console.groupCollapsed('取值结果')
            console.log(map.get('id0')) // 查找第一个
            console.log(map.get(`id${Length / 2}`)) // 查找中间
            console.log(map.get(`id${Length - 1}`)) // 查找最后一个
            console.log(map.get(`id${Length + 1}`)) // 查找不存在的
            console.groupEnd('取值结果')
            console.timeEnd('Map取值')

            console.groupEnd('查找取值性能测试')

            console.groupEnd('性能测试' + iii)
        }

        for (let index = 0; index < 5; index++) {
            test(index)
        }
    </script>
</body>

</html>