The same data Object.keys, Object.values and Object.entries get different numbers.

  javascript, question

The same data Object.keys, Object.values and Object.entries get different numbers.

  • Use localStorage

Setitem (`0', `hello');
 Setitem (`1', `goodbye');
 localStorage.setItem(`2`,`byb`);
 localStorage.setItem(`name`,`nono`);
 console.log(Object.keys(localStorage));
 console.log(Object.values(localStorage));
 console.log(Object.entries(localStorage));
 console.log(`---------`);
 for(var a in localStorage){
 console.log(localStorage[a]);
 bracket

Output results:

如图所示

  • Set up custom objects

let obj = {};
 Object.defineProperties(obj, {
 "0": {
 Value: `Hello',
 enumerable:false
 },
 "1": {
 Value: `goodbye',
 enumerable:false
 },
 "2": {
 value: `byb`,
 enumerable:false
 },
 "name": {
 value: `nono`,
 enumerable:true
 },
 "length": {
 value: 4,
 enumerable:false
 bracket
 });
 console.log(Object.keys(obj));
 console.log(Object.values(obj));
 console.log(Object.entries(obj));
 console.log(`---------`);
 for (var a in obj) {
 console.log(obj[a]);
 bracket

Output results:

图片描述

I tested it in Chrome.Object.keysAndObject.values Object.entriesThe number of returns is the same, four.

Originally, I guessed that the main theme might be polyfill’s nonstandard implementation or the browser’s early nonstandard implementation. But,

  1. viaObject.getOwnPropertyDescriptorIt can be found that the enumeratability of the set item is alwaysTrueAndpropertyIsEnumerableThe test results are inconsistent (usepropertyIsEnumerableOnly if name is a number and is an integer in standard written formTrueOther citiesFalse), butfor/inBut can be enumerated;
  2. In addition, if you try to uselocalStorage.setItemTo set upLength getItem setItem __proto__These name, thenlocalStorage.getItemWhen reading, it is normal, and when directly accessing object properties, the situation is very chaotic. AllsetItemThe past will be enumerated, but the value obtained is the value in the prototype chain (if it exists in the prototype chain, whether it is native or not, and whether it is in thesetItemAdd before or after).

To sum up, it can be seen that,localStorageThe reliable reading method of islocalStorage.getItem(name), directlylocalStorage[name]Reading is only a convenient usage, and its implementation is very unreliable. It is likely that there are no specific provisions in the language standards. The host is at its own discretion. Even if such provisions are made, it is too tortuous. This is very similar to usingnew ProxyThe internal returns of self-implemented objects are very inconsistent.

In short,

  • The problem islocalStorageThe pot used in this way,getItemThis API should not be regarded as an ordinary object.
  • Enumeration is not uniform, islocalStorageThe realization of the pot, orObject.getOwnPropertyDescriptorpropertyIsEnumerablefor/inThe realization of the pot, because the results should not be different;
  • Object.keys Object.values Object.entriesThe results are inconsistent in length, which must be the pot realized by the three, because no matter what exotic flowers are treated, the three should not be different in length.