This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Object.keys(

  • Keys () Object. Keys () Object.
  • It takes an object and returns a list of its enumerable property names, including the properties that the object inherits
  • MDN says that it outputs the property names in the same order as the normal for/in loop, but it doesn’t say in what order
  • Since this output is a list of attribute names, is there any sort of sorting involved in the list?
  • Idle nothing, their own exploration of a wave

How are property names sorted in the array returned by object.keys ()?

  • So let’s do a code run
class A {
  constructor() {
    this.a = ""; }}class B extends A {
  constructor() {
    super(a);this.b = ""; }}const obj = new B();

console.log(Object.keys(obj));
Copy the code
  • Of course, the array printed above is[ 'a', 'b' ]
  • Then why is it[ 'a', 'b' ]Rather than[ 'b', 'a' ]?
  • Let’s modify the code and print it out
class A {
  constructor() {
    this.b = ""; }}class B extends A {
  constructor() {
    super(a);this.a = ""; }}const obj = new B();

console.log(Object.keys(obj));
Copy the code

  • The output is now [‘b’, ‘a’]. The output is changed, but the order of the output attribute names is the same

  • Again, it prints the properties of class A first, and then the properties of class B

  • As we all know, class inheritance in ES6 works like this

    • The instance is created, and then the attributes and methods of the parent class are added to the instance
    • The attributes and methods of the subclass are then added to the instance

  • The output [‘b’, ‘a’] is reasonable since the object adds attribute B first and then attribute A

  • Keys () prints the list in the order in which the original Object attributes were added.

  • Another chestnut 🌰, you see what the output is

const obj = {};

obj["d"] = "";
obj["a"] = "";
obj["b"] = "";
obj["c"] = "";

console.log(Object.keys(obj));
Copy the code

  • [‘d’, ‘a’, ‘b’, ‘c’]

  • Fits the above guess, the output is reasonable

  • Another chestnut 🌰, you see what the output is

const obj = {};

obj[4] = "";
obj[1] = "";
obj[3] = "";
obj[2] = "";

console.log(Object.keys(obj));
Copy the code
  • The output up here is['1', '2', '3', '4']
  • Something amazing happened. Why not['4', '1', '3', '2']?
  • What if we combined the two examples above?
const obj = {};

obj["d"] = "";
obj["a"] = "";
obj["b"] = "";
obj["c"] = "";
obj[4] = "";
obj[1] = "";
obj[3] = "";
obj[2] = "";

console.log(Object.keys(obj));
Copy the code
  • The output up here is['1', '2', '3', '4', 'd', 'a', 'b', 'c' ]
  • There seems to be some similarity between this result and the example above, but it is hard to tell why
  • This is when my intuition tells me to start looking for information
  • Keys () is a Polyfill implementation on MDN that uses for/in. For /in outputs results in the same order as object.keys ()
  • Follow the link to the ECMAScript specification for Object.keys() provided by MDN, layer by layer, and you can see the following rules:

  • Translation:

    • In the first step, an empty list keys is created to hold the property names
    • The second step is to store the property names that are valid array index values to the list in ascending order
    • Third, store the property names as strings in the list in the order in which they were created
    • The fourth step is to store the property names of type Symbol in the list at the same time in the order they were created
    • Step 5, return the list keys

  • So the output above makes perfect sense

  • So what’s the output of our last example

const obj = {};

obj["d"] = "";
obj["a"] = "";
obj["b"] = "";
obj["c"] = "";
obj[4] = "";
obj[1] = "";
obj[3] = "";
obj[2] = "";
obj[0.9] = "";
obj[Symbol("a")] = "";
obj[Symbol("b")] = "";
obj[Symbol(2)] = "";
obj[Symbol(1)] = "";

console.log(Object.keys(obj));
Copy the code
  • The output up here is['1', '2', '3', '4', 'd', 'a', 'b', 'c', '0.9']
  • The magic happened again
    1. 0.9 is a number. Why is it at the end
    2. The Symbol property name is missing
  • 0.9 is not a positive integer, so it is treated as a character type
  • The Symbol?
  • We mentioned above that the implementation of object.keys () uses for/in
  • According to MDN, the output result of for/in does not include Symbol type, which is needed to output Symbol type attributegetOwnPropertySymbolsmethods
  • In this way, the above examples are reasonable 😄

The last

  • Keys () () () () () () () () () () () () () (

  • If you feel that the article is written well, I hope you do not begrudge praise, everyone’s encouragement is the biggest power I share 🥰