JS array and object cycle through several ways to achieve

Array traversal

1. Plain for loops

let arr = [1.2.3.4.5]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
// Output the result
/ / 1
/ / 2
/ / 3
/ / 4
/ / 5
Copy the code

2. Optimize the normal for loop

let arr = [1.2.3.4.5]
for(var j = 0,len = arr.length; j < len; j++){
    console.log(arr[j]);
}
Copy the code

3. ForEach loop (arrow function changes this to point to handwriting forEach)

The forEach() method is used to call each element of the array and pass the element to the callback function.

Note that forEach() does not perform callbacks on empty arrays.

let arr = [1.2.3.4.5]
let obj = {a:1.b:2}
arr.forEach((currentValue, index, arr) = > {
    console.log(currentValue,index,arr,this)
}, obj)
arr.forEach(function(currentValue, index, arr){
    console.log(currentValue,index,arr,this)
}, obj)
Copy the code

ForEach () continues and breaks

ForEach () itself does not support continue and break statements, which can be implemented using some and every.

Use the return statement to implement the continue keyword:

4. Map traverse

The map() method returns a new array whose elements are the values processed by the call to the original array element.

The map() method processes the elements in their original array order.

Note: Map () does not detect empty arrays.

Note: Map () does not change the original array.

Grammar array. The map (function(currentValue,index,arr), thisValue)
Copy the code

let arr = [1.2.3.4.5]
let mapResult = arr.map((currentValue, index, arr) = >{
	console.log(currentValue,index,arr)
    return currentValue * index
})
console.log(mapResult)

1 0 (5) [1.2.3.4.5]
2 1 (5) [1.2.3.4.5]
3 2 (5) [1.2.3.4.5]
4 3 (5) [1.2.3.4.5]
5 4 (5) [1.2.3.4.5]
(5) [0.2.6.12.20]
Copy the code

The difference between forEach and map

ForEach is good for when you don’t want to change the data, but just want to do something with it — like store it in a database or print it out.

Map () is used when you want to change data values. Not only is it faster, but it returns a new array. The advantage of this is that you can use composition (map(), filter(), reduce(), etc.) to play with more variety.

What you can do with forEach(), you can do with map(). The reverse is also true.

Map () allocates memory to store the new array and returns it; forEach() does not return data.

ForEach () allows callback to change the elements of the original array. Map () returns a new array.

5. for… of

Create an iteration loop on iterable objects (including Array, Map, Set, String, TypedArray, Arguments, and so on), call custom iteration hooks, and execute statements for the values of each different property

let arr = [1.2.3.4.5]
for (let num of arr){
	console.log(num)
}
Copy the code

Object traversal

1. for... in(Not suitable for arrays)

The for in loop iterates through the properties on the prototype chain

You can add the hasOwnProperty() method during a for-in loop to filter out non-own properties

// Create an object and specify its prototype, bar as the property on the prototype
const obj = Object.create({
 bar: 'bar'
})
 
// foo is an attribute of the object itself
obj.foo = 'foo'
 
for (let key in obj) {
 console.log(obj[key]) // foo, bar
}

for (let key in obj) {
 if (obj.hasOwnProperty(key)) {
  console.log(obj[key]) // foo}}Copy the code

for… The IN statement iterates over the enumerable properties of an object in any order.

2. Object.keys()

Keys () returns an array containing all the enumerable properties (excluding Symbol properties) of the Object itself (excluding inheritance).

Neither the for in loop nor the object.keys () method returns an Object’s non-enumerable properties.

Object.values() and object.entries () are also arrays of key-value pairs that return a given Object’s own enumerable properties.

Object.keys(obj).forEach((key) = > {
 console.log(obj[key]) // foo
})
Copy the code

3. Object.getOwnPropertyNames()

Object. GetOwnPropertyNames () is also ES5 new methods of an Object, this method returns the Object itself an array of property names, including an enumerated attribute.

// Create an object and specify its prototype, bar as the property on the prototype
// Baz is an attribute of the object itself and is not enumerable
const obj = Object.create({
 bar: 'bar'
}, {
 baz: {
  value: 'baz'.enumerable: false
 }
})
 
obj.foo = 'foo'
 
// Does not include non-enumerable baz attributes
Object.keys(obj).forEach((key) = > {
 console.log(obj[key]) // foo
})
 
// includes non-enumerable baz attributes
Object.getOwnPropertyNames(obj).forEach((key) = > {
 console.log(obj[key]) // baz, foo
})
Copy the code

4. Object.getOwnPropertySymbols()

Object. GetOwnPropertySymbols () method returns an array of Symbol attribute of the Object itself, not including string attribute

// Add an unenumerable Symbol attribute to the object
Object.defineProperties(obj, {
 [Symbol('baz'] : {value: 'Symbol baz'.enumerable: false}})// Add an enumerable Symbol attribute to the object
obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((key) = > {
 console.log(obj[key]) // Symbol baz, Symbol foo
})
Copy the code

5. Reflect.ownKeys()

The reflect.ownKeys () method is a new static method in ES2015 that returns an array of all the property names of the object itself, including the non-enumerable property and Symbol property.

Reflect.ownKeys(obj).forEach((key) = > {
 console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})
Copy the code

Five ways to compare

way	Basic attributes	Symbol	Prototype chain	An enumeration
for... in	is	no	is	no
Object.keys()	is	no	no	no
Object.getOwnPropertyNames()	is	no	no	is
Object.getOwnPropertySymbols()	no	is	no	is
Reflect.ownKeys()	is	is	no	is