使用Javascript/jQuery将Map数据转为HTML列表遇Codepen异常

一、为什么在Codepen中Map转<li>列表输出了function(e,t){return new w.fn.init(e,t)}？ #

这个错误一看就是jQuery对象被直接转换成字符串导致的！当你把jQuery构造出来的DOM元素（比如$('<li>...</li>')）直接和字符串拼接时，JS会调用这个对象的toString()方法，而jQuery对象的toString默认就会输出这个函数内容。Repl.it可能因为环境差异（比如没引入jQuery、或隐式处理了转换）没触发这个问题，但Codepen里如果引入了jQuery就会踩坑。

错误示例（导致问题的写法）： #

const fruitMap = new Map([['1', '苹果'], ['2', '香蕉']]);
let listStr = '';

fruitMap.forEach((val) => {
  // 直接把jQuery对象拼进字符串，会触发toString()输出函数内容
  listStr += $('<li>').text(val); 
});

$('#myList').html(listStr);

正确的解决方法： #

方法1：用原生JS模板字符串拼接（最直接）

完全不用jQuery构造元素，直接生成HTML字符串：

const fruitMap = new Map([['1', '苹果'], ['2', '香蕉']]);
const listItems = [];

fruitMap.forEach((val) => {
  listItems.push(`<li>${val}</li>`);
});

$('#myList').html(listItems.join(''));

方法2：用jQuery获取元素的HTML字符串

如果一定要用jQuery创建元素，记得用.prop('outerHTML')获取完整的元素HTML：

const fruitMap = new Map([['1', '苹果'], ['2', '香蕉']]);
const listItems = [];

fruitMap.forEach((val) => {
  const $li = $('<li>').text(val);
  listItems.push($li.prop('outerHTML'));
});

$('#myList').html(listItems.join(''));

方法3：原生JS直接操作DOM（更推荐，避免字符串拼接）

const fruitMap = new Map([['1', '苹果'], ['2', '香蕉']]);
const list = document.getElementById('myList');

fruitMap.forEach((val) => {
  const li = document.createElement('li');
  li.textContent = val;
  list.appendChild(li);
});

二、ES6中的Map和HashMap是同一事物吗？ #

简单说：JavaScript里没有内置的HashMap对象，ES6的Map就是JS版本的HashMap。

其他编程语言（比如Java）会区分Map（有序的键值对，比如TreeMap基于红黑树）和HashMap（无序的哈希表实现），但在JS中：

• ES6引入的Map是基于哈希表实现的键值对集合，支持任意类型的键（不限于字符串/Symbol），并且保持插入顺序。
• 它具备其他语言中HashMap的核心特性：O(1)时间复杂度的增删查操作、键值对无重复键等。

所以可以理解为，ES6的Map就是JS里的HashMap，只是官方命名为Map而已。

内容的提问来源于stack exchange，提问作者hemantmetal