英文:
Incorrect answers with [] and set&get of javascript map
问题
我对以下 JavaScript 代码感到惊讶：
var mp1 = new Map();mp1[1] = 'apple';mp1[2] = 'bat';console.log(mp1.size);console.log(mp1.set(1, 'test'));console.log('using get', mp1.get(1));console.log('using[]', mp1[1])console.log('------------');var mp2 = new Map();mp2.set(1, 'match');mp2.set(2, 'testing');console.log(mp2.size);console.log('using []', mp2[1])console.log('using get', mp2.get(1))
上述代码的执行结果如下：
0[object Map]using get "test"using[] "apple"------------2undefined"using []" undefined"using get" "match"
在 mp1 对象中，大小显示为 0，但在 mp2 中，大小正确显示。此外，对于相同的键，[] 和 set & get 返回了不同的答案。有人能够解释这个现象吗？
英文:
I was amazed by the following code in javascript
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var mp1 = new Map();mp1[1] = 'apple';mp1[2] = 'bat';console.log(mp1.size);console.log(mp1.set(1, 'test'));console.log('using get', mp1.get(1));console.log('using[]', mp1[1])console.log('------------');var mp2 = new Map();mp2.set(1, 'match');mp2.set(2, 'testing');console.log(mp2.size);console.log('using []', mp2[1])console.log('using get', mp2.get(1))
<!-- end snippet -->
Following result obtained for the above code
0[object Map]using get "test"using[] "apple"
2undefined"using []" undefined"using get" "match"
In mp1 object the size is shown as 0 but in mp2 the size is showing correctly. Also for the same key [] and set&get gave different answers. Can someone provide an explanation for this?
答案1
得分: 2
Map不是一个通常的JS对象，你不能像map[key] = value那样向其添加键。你应该使用Map的方法。
当你使用map[key] = val时，你只是向Map的实例添加属性（在JS中，你可以对任何实例这样做，例如，你可以向函数添加属性）。但是你并没有以这种方式向Map的内容添加任何键/值对。
因此，你应该只使用Map::set()来处理Map的内容。
我猜这种误导可能也会发生在使用localStorage后，你可以实际上使用实例属性来处理内容。但是再次强调，不推荐使用localStorage::setItem()。
你可以轻松检查你没有向地图添加任何内容：
const map = new Map;map.test = true;console.log([...map.entries()]);
希望这可以帮助你理解。
英文:
The Map isn't a usual JS object where you add keys to it like map[key] = value. You should use the Map's methods.
When you map[key] = val you just add property to the Map's instance (you can do that with any instance in JS, for example you can add a property to a function). But you don't add any key/value to the Map's content that way.
So you should use Map::set() only for working with the Map's content.
I guess this misleading also could happen after working with localStorage where you can actually use instance properties to work with the content. But again that's not recommended over localStorage::setItem().
You can easily check that you don't add anything to the map:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const map = new Map;map.test = true;console.log([...map.entries()]);
<!-- end snippet -->
答案2
得分: 2
你在使用 Map 时 使用 [] 表示法时 是错误的。
var mp1 = new Map(); // 好的，我们有一个 Mapmp1[1] = 'apple'; // 向 Map 对象添加新属性值为 'apple'mp1[2] = 'bat'; // 向 Map 对象添加新属性值为 'bat' - 都不是 Map 元素console.log(mp1.size); // 是的，这个 Map 没有设置任何内容，所以大小是 0console.log(mp1.set(1, 'test')); // 现在我们正确使用 set 方法console.log('使用 get', mp1.get(1)); // 还有 get 方法console.log('使用 []', mp1[1])console.log('------------');var mp2 = new Map(); // 是的，我们有一个 Mapmp2.set(1, 'match'); // 设置 1 包含 "match"mp2.set(2, 'testing'); // 设置 2 包含 "testing"console.log(mp2.size); // 是的，我们有两个项目console.log('使用 []', mp2[1]) // 这不是正确的获取方式console.log('使用 get', mp2.get(1)) // 这更好// 如果你想使用 [] 访问元素，首先将其展开到一个数组中：const arr = [...mp2];console.log("使用数组表示法", arr[1][1])
英文:
You are using the Map incorrectly when you use the [] notation
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var mp1 = new Map(); // ok we have a mapmp1[1] = 'apple'; // adding a new property to the map object value applemp1[2] = 'bat'; // adding a new property to the map object value bat - neither are Map elementsconsole.log(mp1.size); // Yep, the map has nothing set so the size is 0console.log(mp1.set(1, 'test')); // NOW we use the set correctlyconsole.log('using get', mp1.get(1)); // and get tooconsole.log('using[]', mp1[1])console.log('------------');var mp2 = new Map(); // yep we have a Mapmp2.set(1, 'match'); // setting 1 to contain "match"mp2.set(2, 'testing'); // setting 2 to contain "testing"console.log(mp2.size); // yes we have two itemsconsole.log('using []', mp2[1]) // this is not the way to get itconsole.log('using get', mp2.get(1)) // this is better// If you want to access the elements using [] then spread to an array first:const arr = [...mp2];console.log("Using array notation",arr[1][1])
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论