WEB专题---javaScript中Map、Set的使用&&&HTML5 Web 存储

Map

Map是一组键值对的结构,具有极快的查找速度。

Map的定义。

//空map设值key-value
var m = new Map();
m.set("XiaoMing",99);
m.set("XiaoHong",66);
//构造参数传key-value
var m = new Map([['XiaoMing', 99], ['XiaoHong', 66]]);

Map中的方法

var m = new Map(); // 空Map
m.set('XiaoMing', 99); // 添加新的key-value
m.has('XiaoMing'); // 是否存在key 'XiaoMing': true
m.get('XiaoMing'); // 99
m.delete('XiaoMing'); // 删除key 'XiaoMing'
m.get('XiaoMing'); // undefined

对一个key重复设值,后面的值会将前面的值覆盖。

var m = new Map();
m.set('XiaoMing', 99);
m.set('XiaoMing', 98);
m.get('XiaoMing'); // 98

Set

Set和Map类似,但set之存储key,且key不重复。

Set的创建。

var s1 = new Set(); // 空Set
s1.add(1);
s1.add(2);
s1.add(3);

var s2 = new Set([1, 2, 3]); // 含1, 2, 3

插入重复的值,set会将重复的值进行过滤

var s = new Set([1, 2, 3]);
s.add(3);
>>s; // Set{1,2,3}
s.delete(3);
>>s; // Set([1,2]);

Map及Set的遍历

Array可以采用下标进行循环遍历,Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了iterable类型,Array、Map、Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);
}

更好的遍历:forEach

forEach是iterable内置的方法,它接收一个函数,每次迭代就自动回调该函数。

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
});

Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

Map的回调函数参数依次为value、key和map本身:

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

==================================================
HTML5 Web 存储
很简单
直接上代码:

import React from 'react';
import DataManagerCommonUtil from "./data.manager.common.util";


export default class LocalStorageCommonUtil {
    static instanceThis: LocalStorageCommonUtil;

    static instance(): LocalStorageCommonUtil {
        if (!LocalStorageCommonUtil.instanceThis) {
            LocalStorageCommonUtil.instanceThis = new LocalStorageCommonUtil();
        }
        return LocalStorageCommonUtil.instanceThis;
    }

    isMeSupportStorage(): boolean {
        if (typeof(Storage) !== "undefined") {
            console.log('是的! 支持 localStorage  sessionStorage 对象!');
            return !!localStorage;
        } else {
            console.log('抱歉! 不支持 web 存储。');
            return false;
        }
    }

    /**
     * 保存数据
     * @param key
     * @param value
     */
    setItem(key, value): void {
        if (this.isMeSupportStorage() && key && value) {
            localStorage.setItem(key, value)
        }
    }

    /**
     * 读取数据
     * @param key
     * @returns {*}
     */
    getItem(key): any {
        if (this.isMeSupportStorage() && key) {
            return localStorage.getItem(key)
        } else {
            return null;
        }
    }

    /**
     * 删除单个数据
     * @param key
     */
    removeItem(key): void {
        if (this.isMeSupportStorage() && key) {
            localStorage.removeItem(key)
        }
    }

    /**
     * 删除所有数据
     */
    clear(): void {
        if (this.isMeSupportStorage()) {
            localStorage.clear()
        }
    }

    /**
     * 得到某个索引的key
     * @param index
     */
    key(index): any {
        if (this.isMeSupportStorage() && index >= 0) {
            return localStorage.key(index)
        } else {
            return null;
        }
    }


}
import React, {PropTypes} from 'react';
import LocalStorageCommonUtil from "./local.storage.common.util";


export default class DataManagerCommonUtil {


    dataWorkSpaces: Map = null;
    static instanceThis: DataManagerCommonUtil;

    static instance(): DataManagerCommonUtil {
        if (!DataManagerCommonUtil.instanceThis) {
            DataManagerCommonUtil.instanceThis = new DataManagerCommonUtil();
        }
        return DataManagerCommonUtil.instanceThis;
    }

    init(workspaceKey, workspaceValue): DataManagerCommonUtil {
        if (!this.dataWorkSpaces) {
            this.dataWorkSpaces = new Map();
        }
        this.dataWorkSpaces.set(workspaceKey, workspaceValue);
        return this;
    }


    check(workspaceKey): boolean {
        if (this.dataWorkSpaces) {
            return this.dataWorkSpaces.has(workspaceKey);
        }
        return false;
    }

    delete(workspaceKey): boolean {
        if (this.dataWorkSpaces && this.dataWorkSpaces.has(workspaceKey)) {
            return this.dataWorkSpaces.delete(workspaceKey);
        }
        return false;
    }

    generRealKey(workspaceKey, key): String {
        return workspaceKey + '.' + key;
    }

    //--------------------------------------------------------------------

    /**
     * 保存数据
     * @param workspaceKey
     * @param key
     * @param value
     */
    setItem(workspaceKey, key, value): void {
        if (this.check(workspaceKey)) {
            LocalStorageCommonUtil.instance().setItem(this.generRealKey(workspaceKey, key), value);
        }
    }

    /**
     * 读取数据
     * @param workspaceKey
     * @param key
     * @returns {*}
     */
    getItem(workspaceKey, key): any {
        if (this.check(workspaceKey)) {
            return LocalStorageCommonUtil.instance().getItem(this.generRealKey(workspaceKey, key));
        } else {
            return null;
        }
    }

    /**
     * 删除单个数据
     * @param workspaceKey
     * @param key
     */
    removeItem(workspaceKey, key): void {
        if (this.check(workspaceKey)) {
            LocalStorageCommonUtil.instance().removeItem(this.generRealKey(workspaceKey, key));
        }
    }

    /**
     * 删除所有数据
     * @param workspaceKey
     * @param key
     */
    clear(workspaceKey, key): void {
        if (this.check(workspaceKey)) {
            this.delete(workspaceKey);
            LocalStorageCommonUtil.instance().removeItem(this.generRealKey(workspaceKey, key));
        }
    }

    /**
     * 得到某个索引的key
     * @param workspaceKey
     * @param index
     */
    key(workspaceKey, index): void {
        if (this.check(workspaceKey)) {
            return LocalStorageCommonUtil.instance().key(index);
        } else {
            return null;
        }
    }

}
import React, {PropTypes} from 'react';
import DataManagerCommonUtil from "./data.manager.common.util";


export default class AppManagerCommonUtil {
    user = {
        workspaceKey: 'com.hack.wang.yi.tao.desgin.web.back.site.user',
        workspaceValue: 'data',
    };
    system = {
        workspaceKey: 'com.hack.wang.yi.tao.desgin.web.back.site.system',
        workspaceValue: 'data',
    };


    static instanceThis: AppManagerCommonUtil;

    static instance(): AppManagerCommonUtil {
        if (!AppManagerCommonUtil.instanceThis) {
            AppManagerCommonUtil.instanceThis = new AppManagerCommonUtil();
        }
        return AppManagerCommonUtil.instanceThis;
    }

    init(): AppManagerCommonUtil {
        DataManagerCommonUtil.instance()
            .init(this.user.workspaceKey, this.user.workspaceValue)
            .init(this.system.workspaceKey, this.system.workspaceValue);
    }

    constructor() {
        this.init();
    }

    save(workspaceKey: String, key: String, dataStr: String): void {
        DataManagerCommonUtil.instance().setItem(workspaceKey, key, dataStr);
    }

    remove(workspaceKey: String, key: String): void {
        DataManagerCommonUtil.instance().removeItem(workspaceKey, key);
    }

    load(workspaceKey: String, key: String): void {
        return DataManagerCommonUtil.instance().getItem(workspaceKey, key);
    }

    //-----------------------------------------

    saveUser(userData: JSON): void {
        if (userData) {
            this.save(this.user.workspaceKey, this.user.workspaceValue, JSON.stringify(userData));
        }
    }

    removeUser(): void {
        this.remove(this.user.workspaceKey, this.user.workspaceValue);
    }

    loadUser(): JSON {
        let result = this.load(this.user.workspaceKey, this.user.workspaceValue);
        if (result) {
            return JSON.parse(result);
        } else {
            return result;
        }
    }

    saveSystem(userData: JSON): void {
        if (userData) {
            this.save(this.system.workspaceKey, this.system.workspaceValue, JSON.stringify(userData));
        }
    }

    removeSystem(): void {
        this.remove(this.system.workspaceKey, this.system.workspaceValue);
    }

    loadSystem(): JSON {
        let result = this.load(this.system.workspaceKey, this.system.workspaceValue);
        if (result) {
            return JSON.parse(result);
        } else {
            return result;
        }
    }


    //---------------
    isLogin(): boolean {
        let result = this.loadUser();
        return !!(result && result.sessionId);
    }


}

COVER:
http://www.runoob.com/html/html5-webstorage.html
https://www.cnblogs.com/weilan/p/7002088.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容