What is the use of foreach statement in vue

In vue, the foreach statement is mainly used to call each element of the array and pass the element to the callback function. The syntax is "array.forEach(function(currentValue, index, array), thisValue)".

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the use of foreach statement in vue

forEach() is a method of operating arrays in front-end development. Its main function is to traverse the array. It is actually an upgraded version of the for loop. The statement needs to have a callback function as a parameter. The formal parameters of the callback function are: 1. value: traverse the contents of the array; 2. index: the index of the corresponding array, 3. array: the array itself.

In the Vue project, the loop in the label uses v-for, and the loop in the method uses forEach.

1. Principle of use of forEach()

The forEach() method is mainly used to call each element of the array and pass the element to the callback function. It should be noted that the forEach() method will not execute the callback function for an empty array.

forEach: Array.prototype.forEach, a method only available for arrays, which is equivalent to a for loop traversing the array. Usage: arr.forEach(function(item,index,array){...}), the callback function has 3 parameters, item is the element currently traversed, index is the subscript of the element currently traversed, array is the array itself.

The forEach method will not skip null and undefined elements. For example, all four elements in the array [1, undefine, null,, 2] will be traversed. Pay attention to the difference from map.

2. forEach() syntax

array.forEach(function(currentValue, index, array), thisValue)

Example:

array.forEach(function(item,index,array){ ... })

forEach() Other related content

forEach() continue and break: forEach() itself does not support continue and break statements, but it can be implemented through some and every.

The difference between forEach() and map: forEach() has no return value and is essentially equivalent to a for loop, executing the function function on each item. That is, map returns a new array and the original array remains unchanged, while forEach changes the original array.

Comparison between forEach() and for loop: the for loop has many steps and is more complicated, while the forEach loop is relatively simple, easy to use, and less prone to errors.

forEach() example:

Example one:

let array = [1, 2, 3, 4, 5, 6, 7];
array.forEach(function (item, index) {
console.log(item); //输出数组的每一个元素
});

Example two:

var array=[1, 2, 3, 4, 5];
array.forEach(function(item, index, array){
array[index]=4 * item;
});
console.log(array); //输出结果：修改了原数组元素，为每个元素都乘以4

[Related recommendations: "vue.js tutorial》】

The above is the detailed content of What is the use of foreach statement in vue. For more information, please follow other related articles on the PHP Chinese website!