Traverse objects and arrays

1. Traverse the object: for…in loops through the object’s own and inherited enumerable properties

   Loops through the object’s own and inherited enumerable properties (excluding Symbol properties).

   var obj = {'0':'a', '1':'b', '2':'c'};
   for(var i in obj){
   console.log(i, ":", obj[i]);
   }

   result:

   0:a
   1:b
   2:c

   
   

2. Traverse objects: Object.keys()

   Returns an array, including all enumerable properties (excluding Symbol properties) of the object itself (excluding inherited ones).

   var obj = {'0':'a', '1':'b', '2':'c'};
   Object.keys(obj).forEach(function(key){
       console.log(key, obj[key]);
   });

   result:

   0a
   1b
   2c

   
   

3. Traverse objects: Object.keys(obj), Object.values(obj)

   const obj = {id:1, name:"Derek", age:18};
   console.log(Object.keys(obj));
   console.log(Object.values(obj));

   result:

   ['id', 'name', 'age']
   ['1', 'Derek', '18']

   
   

4. Traverse objects: Object.getOwnPropertyNames(obj)

   Returns an array containing all properties of the object itself (excluding Symbol properties, but including non-enumerable properties).

   var obj = {'0':'a','1':'b','2':'c'};
      
   Object.getOwnPropertyNames(obj).forEach(function(key){
       console.log(key,obj[key]);
   });

   
   

5. Traverse objects: Reflect.ownKeys(obj)

   var obj = {'0':'a','1':'b','2':'c'};
      
   Reflect.ownKeys(obj).forEach(function(key){
   console.log(key,obj[key]);
   });

   result:

   0a
   1b
   2c

   
   

6. Traverse objects: Object.entries()

   Object.entries() is a method in JavaScript that returns an array of key-value pairs for a given object’s own enumerable properties, the order of the key-value pairs in the array and the order of using for...in loops Same (the main difference between the two is that the for-in loop also enumerates the properties in the prototype chain).

   Let’s say you have the following objects:

   const obj = {
     a: "hello",
     b: "world",
     c: "!"
   };

   If you call Object.entries(obj) you will get:

   [
     ['a', 'hello'],
     ['b', 'world'],
     ['c', '!']
   ]

   In the code you gave, Object.entries(fontSize) converts each property of the fontSize object into an array of the form [key, value], and then uses the map method to map each key value Perform some operations on. In this operation, it creates a new HeadingBasestyle component and uses headingName (key) as the key property of the component and headingSize (value) as the headingsize property. headingName is also used Used as a child element of a component.

   Overall, Object.entries() is a way to get a list of key-value pairs from an object, which is useful when you need to perform operations on each property of the object.

   
   

7. Traverse the array: forEach()

   var arr=[1, 2, 3, 4];
   arr.forEach(function(val, index){
   console.log(val, index)
   });

   result:

   1 0
   twenty one
   3 2
   4 3

   
   

8. Traverse the array: for..in..

   var arr=['Derek', 'Tom', 'Jason', 'Tim'];
   for(var i in arr){
       console.log(i, ":", arr[i]);
   }

   result:

   0:Derek
   1:Tom
   2: Jason
   3: Tim

   
   

9. Traverse array: for-of

   Not only arrays are supported, but also most array-like objects, such as DOM NodeList objects.

   String traversal is also supported, which traverses strings as a series of Unicode characters.

   var arr=['Derek', 'Tom', 'Jason', 'Tim'];
   for(var value of arr){
       console.log(value);
   }

   result:

   Derek
   Tom
   Jason
   Tim