【JavaScript】Array 对象（二）[并列数组、多维数组、数组字符串相互转换]

客官°小女子只卖身不卖艺 2022-05-30 07:20 237阅读 0赞

使用数组存储数据，常常允许用一个脚本查询数组中是否有某一个值（可能验证用户输入到文本框中的数据是否是可接受的）。另外，在查找匹配的项时，脚本可以在另一个数组中查找一些相关的信息。完成这个任务的

*  一种方式是使用两个或多个并行数组
 *  另一种方式是模拟多维数组（并行数组的替代方法）

#### 并列数组 ####

考虑下面的三个数组：

var regionalOffices = ["New York", "Chicago", "Houston", "Portland"];
    var regionalManagers = ["Shirley Smith", "Todd Gaston", "Leslie Jones", "Harold Zoot"];
    var reOfficeQuotes = [300000, 250000, 350000, 225000];

这些语句假定，Shirley Smith 是纽约办公室的区域经理，她的办公室经费是300000。这些数据放在一个文档中，可以通过一个服务器端程序得到，此程序从 SQL 数据库中获得最新的数据，并通过数组构造函数嵌入这些数据。把这些数据显示在一个简单的页面上，并通过 select 元素查找经理姓名和办公经费值。select 元素列表中数据项的顺序不是随机的：为了方便查找脚本，该顺序与数组的顺序相同。

例子：一个简单的并行数组查找

// html
    <form id="officeData" action="" method="post">
        <p>
            <label for="offices">Select a regional office: </label>
            <select id="offices" name="offices"></select>
        </p>
        <p>
            <label for="manager">The manager is: </label>
            <input type="text" id="manager" name="manager" size="35" />
        </p>
        <p>
            <label for="quota">The office quota is: </label>
            <input type="text" id="quota" name="quota" size="8" />
        </p>
    </form>
    
    // js
    addEvent(window, 'load', initialize);
    
    function initialize() { 
        if(document.getElementById) {
            aRegionalOffices = ["New York", "Chicago", "Houston", "Portland"];
            aRegionalManagers = ["Shirley Smith", "Todd Gaston", "Leslie Jones", "Harold Zoot"];
            aRegOfficeQuotas = [300000, 250000, 350000, 225000];
    
            oSelect = document.getElementById('offices');
            oManager = document.getElementById('manager');
            oQuota = document.getElementById('quota');
    
            if(oSelect && oManager && oQuota) {
                for(var i=0; i<aRegionalOffices.length; i++) {
                    oSelect.options[i] = new Option(aRegionalOffices[i]);
                }
                addEvent(oSelect, 'change', getData);
            }
            getData();
        }
    }
    
    function getData(evt) { 
        var index = oSelect.selectedIndex;
    
        oManager.value = aRegionalManagers[index];
        oQuota.value = aRegionalQuotas[index];
    }

#### 多维数组 ####

上面的例子原理简单，就是依靠相同的索引值将多个数组有关联的串联起来使用，但一个合理的方法是创建自定义对象的数组，因为对象属性的命名很容易理解，所以多维数组中的数据引用更易于读取。

将上面并行数组的例子重写为多维数组：

function officeRecord(city, manager, quota) { 
        this.city = city;
        this.manager = manager;
        this.quota = quota;
    }
    
    var regionalOffices = new Array();
    
    // 传统的多维数组方式
    regionalOffices[0] = new officeRecord("New York", "Shirley Smith", 300000);
    regionalOffices[1] = new officeRecord("Chicago", "Todd Gaston", 250000);
    regionalOffices[2] = new officeRecord("Houston", "Leslie Jones", 350000);
    regionalOffices[3] = new officeRecord("Portland", "Harold Zoot", 255000);
    
    // 也可以使用非常简洁的字面量记号
    var regionalOffices = [
        ["New York", "Shirley Smith", 300000],
        ["Chicago", "Todd Gaston", 250000],
        ["Houston", "Leslie Jones", 350000],
        ["Portland", "Harold Zoot", 255000]
    ]

访问数组中数组的单个值需要两个数组引用。例如，获得 Houston 办公室经理的姓名要使用以下语法：

var HoustonMgr = regionalOffices[2][1];

--------------------

#### 模拟 Hash 表 ####

> 在 ES6 之前，JavaScript 是没有 hashmap 的。  
> ES6 以 Map 和 Set 形式引入原生的 hashmap。

利用字符串索引查找对象属性有时非常有用。上面例子中只有5项，所以工作量不大。但如果列表有 100 项，这个处理就相当耗时。更快捷的方法是直接跳到 city 属性是所选值的数组项。此时可使用模拟 Hash 表。

下面是通过构造函数得到一个哈希表，在使用时只需实例化即可，且下面的功能较为丰富，在实际问题中，我们可以选择性的使用 。

// 创建构造函数HashTable
    function HashTable() { 
        // 初始化哈希表的记录条数size
        var size = 0;
    
        // 创建对象用于接受键值对
        var res = {};
    
        // 添加关键字，无返回值
        this.add = function (key, value) { 
    
            //判断哈希表中是否存在key，若不存在，则size加1，且赋值 
            if (!this.containKey(key)) {
                size++;
            }
    
            // 如果之前不存在，赋值； 如果之前存在，覆盖。
            res[key] = value;
        };
    
        // 删除关键字, 如果哈希表中包含key，并且delete返回true则删除，并使得size减1
        this.remove = function (key) { 
            if (this.containKey(key) && (delete res[key])) {
                size--;
            }
        };
    
        // 哈希表中是否包含key，返回一个布尔值
        this.containKey = function (key) { 
            return (key in res);
        };
    
        // 哈希表中是否包含value，返回一个布尔值
        this.containValue = function (value) { 
    
            // 遍历对象中的属性值，判断是否和给定value相等
            for (var prop in res) {
                if (res[prop] === value) {
                    return true;
                }
            }
            return false;
        };
    
        // 根据键获取value,如果不存在就返回null
        this.getValue = function (key) { 
            return this.containKey(key) ? res[key] : null;
        };
    
        // 获取哈希表中的所有value, 返回一个数组
        this.getAllValues = function () { 
            var values = [];
            for (var prop in res) {
                values.push(res[prop]);
            }
            return values;
        };
    
        // 根据值获取哈希表中的key，如果不存在就返回null
        this.getKey = function (value) { 
            for (var prop in res) {
                if (res[prop] === value) {
                    return prop;
                }
            }
    
            // 遍历结束没有return，就返回null
            return null;
        };
    
        // 获取哈希表中所有的key,返回一个数组
        this.getAllKeys = function () { 
            var keys = [];
            for (var prop in res) {
                keys.push(prop);
            }
            return keys;
        };
    
        // 获取哈希表中记录的条数，返回一个数值
        this.getSize = function () { 
            return size;
        };
    
        // 清空哈希表，无返回值
        this.clear = function () { 
            size = 0;
            res = {};
        };
    }

Hash 表 **应用实例**

问题：给定一个整型的数组（无序），找出其中的两个数使得其和为某个指定的值，并返回这两个数的下标（数组下标从0开始），假设数组元素的值各不相同。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>哈希表的使用</title>
    </head>
    <body>
        <script> function queryIndex(arr, result) { var hashTable = new HashTable(); var arrLength = arr.length; var sub = []; for (var i = 0; i < arrLength; i++) { // 扫描一遍，存储下标和值 hashTable.add(i, arr[i]); } for (var j = 0; j < arrLength; j++) { if (hashTable.containValue(result - arr[j]) && result !== 2*arr[j]) { // 获取两个下标，跳出循环 sub.push(j); var antherIndex = Number(hashTable.getKey(result - arr[j])); sub.push(antherIndex); break; } } if (sub.length !== 0) { return sub; } else { return -1; } } console.log(queryIndex([1,5,7,3,8], 15)); // 2, 4 console.log(queryIndex([8,18,28,12,29,17], 46)); // 2, 4 console.log(queryIndex([8,18,28,12,29,17], 2)); // -1 // 创建构造函数HashTable function HashTable() { // 初始化哈希表的记录条数size var size = 0; // 创建对象用于接受键值对 var res = {}; // 添加关键字，无返回值 this.add = function (key, value) { //判断哈希表中是否存在key，若不存在，则size加1，且赋值 if (!this.containKey(key)) { size++; } // 如果之前不存在，赋值； 如果之前存在，覆盖。 res[key] = value; }; // 删除关键字, 如果哈希表中包含key，并且delete返回true则删除，并使得size减1 this.remove = function (key) { if (this.containKey(key) && (delete res[key])) { size--; } }; // 哈希表中是否包含key，返回一个布尔值 this.containKey = function (key) { return (key in res); }; // 哈希表中是否包含value，返回一个布尔值 this.containValue = function (value) { // 遍历对象中的属性值，判断是否和给定value相等 for (var prop in res) { if (res[prop] === value) { return true; } } return false; }; // 根据键获取value,如果不存在就返回null this.getValue = function (key) { return this.containKey(key) ? res[key] : null; }; // 获取哈希表中的所有value, 返回一个数组 this.getAllValues = function () { var values = []; for (var prop in res) { values.push(res[prop]); } return values; }; // 根据值获取哈希表中的key，如果不存在就返回null this.getKey = function (value) { for (var prop in res) { if (res[prop] === value) { return prop; } } // 遍历结束没有return，就返回null return null; }; // 获取哈希表中所有的key,返回一个数组 this.getAllKeys = function () { var keys = []; for (var prop in res) { keys.push(prop); } return keys; }; // 获取哈希表中记录的条数，返回一个数值 this.getSize = function () { return size; }; // 清空哈希表，无返回值 this.clear = function () { size = 0; res = {}; }; } </script>
    </body>
    </html>

--------------------

#### 数组、字符串互相转换 ####

**数组 转 字符串**

var arr = [1,2,3,4,'巴德','merge'];
    var str = arr.toString(arr);
    console.log(str);       // 1,2,3,4,巴德,merge

**字符串 转 数组**

var str = '1,2,3,4,巴德,merge';
    var arr = str.split(',');
    console.log(arr);       // ["1","2","3","4","巴德","merge"];
    console.log(arr[4]);    // 巴德