How many common loops do you know about array traversal in JS?

Preface

As a basic data structure, arrays and objects play a vital role in various programming languages. It is hard to imagine what a programming language would look like without arrays and objects, especially JS, a weakly typed language that is very flexible. This article will show you the usage comparison and precautions of common array traversal and object traversal.

Array traversal

As JS continues to develop, there are more than ten traversal methods as of the ES7 specification. The following introduces the commonly used array traversal methods by grouping them into groups with similar functions.

for, forEach, for ...of

const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

for (let i = 0, len = list.length; i < len; i++) {
  if (list[i] === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(list[i]);
}

for (const item of list) {
  if (item === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(item);
}

list.forEach((item, index, arr) => {
  if (item === 5) return;
  console.log(index); // 0 1 2 3 5 6 7 9 10
  console.log(item); // 1 2 3 4 6 7 8 9 10
});

summary

• All three basically traverse the array from left to right.
• forEach cannot jump out of the loop, but for and for ..of can use break or continue to skip or interrupt.
• for ...of directly accesses the actual elements, for traverses the array index, and the forEach callback function has richer parameters, and elements, indexes, and original arrays can all be obtained.
• for ...of and for will also execute if there are empty elements in the array.
  

some、every

const list = [
  { name: 'Head navigation', backward: false },
  { name: 'Carousel', backward: true },
  { name: 'Footer', backward: false },
];
const someBackward = list.some(item => item.backward);
// someBackward: true
const everyNewest = list.every(item => !item.backward);
// everyNewest: false

summary

• Both are used to make array condition judgments and return a Boolean value.
• Both can be interrupted.
• some If an element meets the condition, it returns true and the loop is interrupted. If all elements do not satisfy the condition, false is returned.
• every is the opposite of some. If one element does not meet the condition, it returns false and the loop is interrupted. If all elements satisfy the condition, return true.
  

filter、map

const list = [
{ name: 'Header navigation', type: 'nav', id: 1 },,
{ name: 'Carousel', type: 'content', id: 2 },
{ name: 'Footer', type: 'nav', id: 3 },
];
const resultList = list.filter(item => {
  console.log(item);
  return item.type === 'nav';
});
// resultList: [
// { name: 'Header navigation', type: 'nav', id: 1 },
// { name: 'Footer', type: 'nav', id: 3 },
// ]

const newList = list.map(item => {
  console.log(item);
  return item.id;
});
// newList: [1, empty, 2, 3]

// list: [
// { name: 'Header navigation', type: 'nav', id: 1 },
// empty,
// { name: 'Carousel', type: 'content', id: 2 },
// { name: 'Footer', type: 'nav', id: 3 },
// ]

summary

• Both generate a new array and will not change the original array (excluding operating element objects in the callback function when traversing the object array).
• Both skip empty elements. Students who are interested can print it out themselves.
• map will form a new array with the return value of the callback function, and the length of the array is the same as the original array.
• filter will form a new array of elements that meet the callback function conditions.
• The new array elements generated by map are customizable.
• The new array elements generated by filter cannot be customized and are consistent with the corresponding original array elements.
  

find, findIndex

const list = [
{ name: 'Header Navigation', id: 1 },
{ name: 'Carousel', id: 2 },
{ name: 'Footer', id: 3 },
];
const result = list.find((item) => item.id === 3);
// result: { name: 'Footer', id: 3 }
result.name = 'Bottom navigation';
// list: [
// { name: 'Header Navigation', id: 1 },
// { name: 'Carousel', id: 2 },
// { name: 'Bottom navigation', id: 3 },
// ]

const index = list.findIndex((item) => item.id === 3);
// index: 2
list[index].name // 'Bottom navigation';

summary

• Both are used to search for array elements.
• The find method returns the value of the first element in the array that satisfies the callback function. If it does not exist, returns undefined.
• findIndex It returns the index of the element found in the array, not its value, or -1 if it does not exist.
  

reduce、reduceRight

The reduce method receives two parameters, the first parameter is the callback function (callback), and the second parameter is the initial value (initialValue).

The reduceRight method is identical to reduce except that it runs in the opposite direction (from right to left).

The callback function receives four parameters:

• accumulator: MDN explains it as an accumulator, but I think it is inappropriate. As far as I understand it, it should be the result of the accumulation of all array elements before the current element processed by the callback function.
• current: The array element currently being executed.
• currentIndex: The index of the array element currently being executed.
• sourceArray: the original array, that is, the array on which the reduce method is called.
  If no initial value is passed, the reduce method will execute the callback function starting from index 1. If an initial value is passed, it will start from index 0 and execute the callback cumulatively based on the initial value.

Calculate the sum of a property of an array of objects

const list = [
  { name: 'left', width: 20 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
];
const total = list.reduce((currentTotal, item) => {
  return currentTotal + item.width;
}, 0);
// total: 100

Remove duplicates from an array of objects and count the number of repetitions for each item

const list = [
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
  { name: 'center', width: 70 },
  { name: 'right', width: 10 },
  { name: 'left', width: 20 },
  { name: 'right', width: 10 },
];
const repeatTime = {};
const result = list.reduce((array, item) => {
  if (repeatTime[item.name]) {
    repeatTime[item.name]++;
    return array;
  }
  repeatTime[item.name] = 1;
  return [...array, item];
}, []);
// repeatTime: { left: 2, right: 3, center: 1 }
// result: [
// { name: 'left', width: 20 },
// { name: 'right', width: 10 },
// { name: 'center', width: 70 },
// ]

Get the maximum/minimum value of an object array

const list = [
  { name: 'left', width: 20 },
  { name: 'right', width: 30 },
  { name: 'center', width: 70 },
  { name: 'top', width: 40 },
  { name: 'bottom', width: 20 },
];
const max = list.reduce((curItem, item) => {
  return curItem.width >= item.width ? curItem : item;
});
const min = list.reduce((curItem, item) => {
  return curItem.width <= item.width ? curItem : item;
});
// max: { name: "center", width: 70 }
// min: { name: "left", width: 20 }

Reduce is very powerful. For more tricks, please check out this article "25 Advanced Uses of Array Reduce You Must Know"

Performance comparison

Having said so much, what are the differences in performance among these traversal methods? Let's try it in Chrome browser. I executed each loop 10 times, removed the maximum and minimum values ​​and took the average to reduce the error.

var list = Array(100000).fill(1)

console.time('for');
for (let index = 0, len = list.length; index < len; index++) {
}
console.timeEnd('for');
// for: 2.427642822265625 ms

console.time('every');
list.every(() => { return true })
console.timeEnd('every')
// some: 2.751708984375 ms

console.time('some');
list.some(() => { return false })
console.timeEnd('some')
// some: 2.786590576171875 ms

console.time('foreach');
list.forEach(() => {})
console.timeEnd('foreach');
// foreach: 3.126708984375 ms

console.time('map');
list.map(() => {})
console.timeEnd('map');
// map: 3.743743896484375 ms

console.time('forof');
for (let index of list) {
}
console.timeEnd('forof')
// forof: 6.33380126953125 ms

From the printed results, we can see that the for loop is the fastest and the for...of loop is the slowest.

Comparison of termination and performance tables of common traversals

Finally, there will be some differences between different browser kernels, and students who are interested can also try it.

Object traversal

In object traversal, it is often necessary to traverse the keys and values ​​of an object. ES5 provides for...in to traverse objects. However, it involves the "enumerable properties" and prototype chain properties of object properties. The following will explore various methods of traversing objects from the essence of the Object object and distinguish some characteristics of common methods.

for in

Object.prototype.fun = () => {};
const obj = { 2: 'a', 1: 'b' };
for (const i in obj) {
  console.log(i, ':', obj[i]);
}
// 1: b
// 2: a
// fun : () => {} The extended methods on the Object prototype chain are also traversed for (const i in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, i)) {
      console.log(i, ':', obj[i]);
    }
}
// name : a Properties that do not belong to themselves will be filtered by hasOwnProperty

summary

When using a for in loop, all enumerable properties that can be accessed through the object are returned, including both properties that exist in the instance and instances that exist in the prototype. If you only need to get the instance properties of the object, you can use hasOwnProperty to filter.

When using, use (const x in a) instead of (x in a) which will create a global variable.

For the loop order of for in, refer to [JavaScript Definitive Guide] (7th Edition) 6.6.1.

• First list the string attributes whose names are non-negative integers, in numerical order from smallest to largest. This rule means that the properties of array and array-like objects are enumerated in order.
• After listing all the properties with array-like indices, list all the remaining properties with string names (including names that look like integers or floating point numbers). The properties are listed in the order in which they were added to the object. For properties defined in an object literal, they are listed in the order they appear in the literal.
• Finally, the properties named Symbol objects are listed in the order in which they were added to the object.
  

Object.keys

Object.prototype.fun = () => {};
const str = 'ab';
console.log(Object.keys(str));
// ['0', '1']
const arr = ['a', 'b'];
console.log(Object.keys(arr));
// ['0', '1']
const obj = { 1: 'b', 0: 'a' };
console.log(Object.keys(obj));
// ['0', '1']

summary

Used to get all the enumerable property values ​​of the object itself, excluding the properties in the prototype, and then return an array of property names.

Object.values

Object.prototype.fun = () => {};
const str = 'ab';
console.log(Object.values(str));
// ['a', 'b']
const arr = ['a', 'b'];
console.log(Object.values(arr));
// ['a', 'b']
const obj = { 1: 'b', 0: 'a' };
console.log(Object.values(obj));
// ['a', 'b']

summary

Used to get all the enumerable property values ​​of the object itself, excluding the properties in the prototype, and then return an array consisting of the property values.

Object.entries

const str = 'ab';
for (const [key, value] of Object.entries(str)) {
    console.log(`${key}: ${value}`);
}
// 0: a
// 1: b
const arr = ['a', 'b'];
for (const [key, value] of Object.entries(arr)) {
    console.log(`${key}: ${value}`);
}
// 0: a
// 1: b
const obj = { 1: 'b', 0: 'a' };
for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}
// 0: a
// 1: b

summary

Used to get all the enumerable property values ​​of the object itself, excluding the properties in the prototype, and then return a two-dimensional array. Each sub-array consists of the object's attribute name and attribute value. A method that can get both the attribute name and the attribute value.

Object.getOwnPropertyNames

Object.prototype.fun = () => {};
Array.prototype.fun = () => {};
const str = 'ab';
console.log(Object.getOwnPropertyNames(str));
// ['0', '1', 'length']
const arr = ['a', 'b'];
console.log(Object.getOwnPropertyNames(arr));
// ['0', '1', 'length']
const obj = { 1: 'b', 0: 'a' };
console.log(Object.getOwnPropertyNames(obj));
// ['0', '1']

summary

Used to get all the enumerable property values ​​of the object itself, excluding the properties in the prototype, and then return an array of property names.

Summarize

We compared the differences between several commonly used traversal methods. After understanding these, we need to think carefully when using them, and we will know which method is the most appropriate. Everyone is welcome to correct or add to the comments.

This is the end of this article about the commonly used loop traversal of arrays in JS. For more relevant JS array loop traversal content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!