JS/JavaScript中Array Map Array使用方法和案例

Javascript ES6规范中新增了Map Set Array等容器对象,它们是如何使用的呢,下面我们分别从创建方式,常用方法,循环遍历输出主要说明讲解,最好我们还附上三者结合的使用案例,便于大家理解使用

1. Array 使用案例 存储多个值,自动扩容,可重复,有序

//a. 创建方式

    var myCars1 = new Array(); //无需指定容量
    var myCars2 = new Array(5); // 指定容量大小
    var myCars3 = new Array("宝马", "奔驰", "奥迪"); // 直接赋值创建
    var myCars4 = ["BMW", "Benz", "Audi"];

//b. 常用方法

 log("获取数组长度:" + myCars3.length);
 log("向数组末尾添加元素,返回新的长度:" + myCars3.push("大众"));
 log("把数组转换为字符串,并返回结果:" + myCars3.toString());
 log("可从已有的数组中返回选定的元素:" + myCars3.slice(1, 3));
 log("获取数组指定索引元素值:" + myCars3[0]);
 log("获取值的索引值:" + myCars3.indexOf("奔驰"));
 log("修改了数组元素的值:" + (myCars3[0] = "东风"));

//c. 为数组添加新方法

    Array.prototype.myUcase = function () {
        for (i = 0; i < this.length; i++) {
            this[i] = this[i].toUpperCase();
        }
        return this.toString();
    }
    log("调用数组自定义添加的方法:" + myCars4.myUcase());

//d. 遍历数组

    for (j = 0, len = myCars3.length; j < len; j++) {
        log("循环遍历效率最高的方式,因为缓存了长度,当前索引值是:" + j + ", 元素值是:" + myCars3[j]);
    }

    myCars4.forEach(function (car) {
        log("最简洁的遍历方式,元素值是:" + car);
    });

    for (let car of myCars4) {
        log("es6的遍历方式,元素值是:" + car);
    };

// 2. Map 使用案例,存储key value 键值对,key不能重复

//a. 创建方式

var m1 = new Map();
var m2 = new Map([['Michael', 15], ['Bob', 35], ['Tracy', 45]]);
log("打印对象的实际类型:" + Object.prototype.toString.call(m1));

//b. 常用方法

log("为map新增k-v值" + m1.set("Jason", 25));
log("判断map是否存在该key:" + m2.has('Bob'));
log("获取该key对应的value值:" + m2.get('Adam'));
log("删除这个key:" + m2.delete('Adam'));

//c. 遍历循环

m2.forEach(function (value, key, map) {
    console.log("------循环遍历输出map------" + key + "====" + value);
})

//3. Set 使用案例 存储不可重复的值

//a. 创建方式

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3, 4, 5, 6, 3, 2, 1]); // 含1, 2, 3 4 5 6 自动过滤重复值

//b. 常用方法

log("set 新增一个值:" + s2.add(100));
log("set 删除一个值:" + s2.delete(100));
log("set 判断是否某个值:" + s2.has(6));
log("set 的长度值:" + s2.size);
log("set 清空:" + s2.clear() + ",清空后的大小: " + s2.size);

//c. 循环遍历

var s3 = new Set(['A', 'B', 'C']);
s3.forEach(function (element, sameElement, set) {
    log("------set循环遍历输出-------" + element)
});

// 这里有一个 案例,包括了Map Set Array 三个对象的联合使用 将字符串进行分割,然后分组

 var special = "合同法:合同拟定.合同法:合同谈判.合同法:合同效力识别.合同法:合同纠纷处理.合同法:合同风险把控与防范.物权法:房屋拆迁安置补偿.物权法:项目融资.物权法:物业销售.物权法:租赁与物业管理.物权法:物业转让.物权法:物业开发.";
 special = special.substr(0, special.length - 1);
 var specials = special.split(".");
 var map = new Map();
 var set = new Set();
 for (var i = 0; i < specials.length; i++) {
     var kv = specials[i].split(":");
     var foo = kv[0];
     var bar = kv[1];
     if (set.has(foo)) {
         map.get(foo).push(bar);
     } else {
         var list = new Array();
         list.push(bar)
         map.set(foo, list);
     }
     set.add(foo);
 }
 map.forEach(function (value, key, map) {
     console.log("------------" + key + "====" + value);
 })

 // Map转Json对象 注意,直接map对象无法转换成json对象,必须构建一个空对象赋值键值对
 function strMapToObj(strMap) {
     let obj = Object.create(null);
     for (let [k, v] of strMap) {
         obj[k] = v;
     }
     return obj;
 }

  //Json对象转换为Map
 function objToStrMap(obj) {
     let strMap = new Map();
     for (let k of Object.keys(obj)) {
         strMap.set(k, obj[k]);
     }
     return strMap;
 }
 function mapToJson(map) {
     return JSON.stringify(strMapToObj(map));
 }

 console.log(JSON.parse(mapToJson(map)));

   function log(data) {
     console.log(data);
 }
 jpa查询方法案例使用技巧整理归纳
i++ ++i 使用区别和多种例子说明 
上一篇:jpa查询方法案例使用技巧整理归纳
下一篇:i++ ++i 使用区别和多种例子说明
评论

如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ