date time comments 8 pageviews 13,930

跟同事討論到如何在Javascript裡實做類似Hashtable或Dictionary的功能。

早期Javascript總被我當成毒蛇猛獸，遇到複雜一點的需求總習慣找別人寫好的Library(例如這個)上場頂著，只想在Javascript裡繼續用熟悉的方式應付過去就算了，甚少花時間去研究這威力強大但千變萬化到有點複雜的語言。直到玩了一陣子jQuery，對Javascript稍微有深一點點(也只有一點點)的了解，遇到類似需求，開始試著用Javascript語法實現，不再每次為了一點小事拉一個Library進來。

剛好接連幾次被人問到類似問題: 怎樣列舉Javascript物件的所有屬性? 如何用Javascript模擬Dictionary保存資料? 看來是上天在暗示我這是個.NET開發人員的Javascript FAQ，提醒我該把這個簡單實用，但常常不知如何下手的小題目整理出範例 -- 如何在Javascript裡模擬出相當於.NET Dictionary<string, string>的效果?

以下範例用對照的方式，分別以C#及Javascript實現Dictionary<string, string>進行加入元素、取得元素筆數、檢查鍵值(Key)是否存在、移除元素、列舉所有元素(其實就是列舉Javascript物件的全部屬性)等操作，希望.NET老手們在闖蕩Javascript世界時可以再少一分茫然...
(Javascript高手們如知道更好的寫法，也請不吝指正)

排版顯示純文字
<%@ Page Language="C#" %>
<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        StringBuilder sb = new StringBuilder();
        Dictionary<string, string> dct = new Dictionary<string, string>();
        //加入元素
         dct.Add("P1", "V1");
        dct.Add("P2", "V2");
        dct.Add("P3", "V3");
        //取得筆數
         sb.AppendFormat("Count={0} ", dct.Count);
        //檢查Key值是否存在
         sb.AppendFormat("Exists('P1')={0} ", dct.ContainsKey("P1"));
        sb.AppendFormat("Exists('P4')={0} ", dct.ContainsKey("P4"));
        //移除元素
        dct.Remove("P1");
        //列舉所有元素
        sb.AppendFormat(
            "Data=({0})",
            string.Join(", ",
                        dct.Select(
                            kv =>
                            string.Format("{0}=>{1}", kv.Key, kv.Value))
                        .ToArray()));
        lblDisp.Text = sb.ToString();
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" 
            type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var sb = [];
            var dct = {};
            //加入元素
            dct["P1"] = "V1";
            dct["P2"] = "V2";
            dct["P3"] = "V3";
            //取得筆數
            var c = 0;
            for (var p in dct) c++;
            sb.push("Count=" + c);
            //檢查Key值是否存在(in比d[..]!=undefined精準)
            sb.push("Exists('P1')=" + ("P1" in dct));
            sb.push("Exists('P4')=" + ("P4" in dct));
            //移除元素
              delete dct["P1"];
            //列舉所有元素
              sb.push("Data=(");
            for (var p in dct)
                sb.push(p + "=>" + dct[p]);
            sb.push(")");
            alert(sb.join("\n"));
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="lblDisp" runat="server"></asp:Label>
    </form>
</body>
</html>

執行結果:

C# 

Count=3 Exists('P1')=True Exists('P4')=False Data=(P2=>V2, P3=>V3)

Javascript

Count=3
Exists('P1')=true
Exists('P4')=false
Data=(
P2=>V2
P3=>V3
)


Comments

# by Jerry Lai

sb.push("Count=" + dct.length);

# by Jeffrey

to Jerry Lai, dct是{ }(物件)，而不是[](陣列)，若未指定dct["length"]，我想dct.length應該會是undefined才對。

# by Jeffrey

to player, 1.5.1是因為ASP.NET MVC專案模版預設的版本，我只順勢改用CDN以便大家可以複製後直接執行，版本部分就沒調(其實這個範例jQuery根本沒派上用場)。JS版StringBuilder是好東西，謝謝分享。

# by Jerry Lai

一時不察, sorry 不過如果是物件, 在 delete 之後, Count就沒有意義了

Post a comment