This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

ForEach () in front-end development, there are often situations where you can iterate through a loop to get what you want, and this situation is ubiquitous in development. So this blog post will share a common and classic knowledge point: the use of forEach().

ForEach () is a way to manipulate arrays in front end development. It iterates over arrays of numbers. It is an updated version of the for loop that takes a callback function as an argument. The parameters of the callback function are as follows: 1. Value: iterates the contents of the number group; Index: indicates the index of the array. Array: indicates the array itself.

In the Vue project, the loop inside the tag uses V-for and the loop inside the method uses forEach.

1. Principle of forEach()

The forEach() method is basically used to call each element of the array and pass the element to the callback function. Note that the forEach() method does not perform a callback on an empty array.

ForEach: Array. Prototype. ForEach, is only for Array method, the equivalent of a for loop through the Array. Usage: arr. ForEach (function (item, index, array) {… }), where the callback function has three parameters: item is the element currently iterated, index is the subscript of the element currently iterated, and array is the array itself. ForEach does not skip null and undefined elements. For example, all four elements in the array [1, undefine, NULL, 2] will be traversed. Note the difference from map.

2. ForEach () syntax

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

ForEach (function(item,index,array) {… })

3. ForEach () other related content

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

ForEach () does not return a value. ForEach () does not return a value. That is, map returns a new array, while forEach changes the array.

③ Comparison between forEach() and for loop: for loop steps are more complex, forEach loop is more simple and easy to use, not easy to error.

4. ForEach () example

Example 1:

let array = [1, 2, 3, 4, 5, 6, 7]; array.forEach(function (item, index) { console.log(item); // Print each element of the array});Copy the code

Example 2:

var array=[1, 2, 3, 4, 5]; array.forEach(function(item, index, array) { array[index]=4 * item; }); console.log(array); // Output: Modified array elements, multiplying each element by 4Copy the code

Example 3:

<el-checkbox v-for="(item) in searchContent" :label="item.id" :key="item.id" class="checkbox"> <span>{{item.value}}{{item.checked}}</span> </el-checkbox> handle(index, row) { this.selectedCheck=[]; let a = this; this.jurisdiction = true; this.roleId = row.id; This $HTTP get ("/user/resources ", {params: {userId: this.userId} }).then((response) => { a.searchContent = response.body; ForEach (function (b) {if(b[' checked']){a.selectCheck.push (b.id); }})})Copy the code

Example 4:

var userList = new Array(); var data = {}; if (response.data.userList ! = null && response.data.userList.length > 0) { response.data.userList.forEach((item, index) => { data.a = item.a; data.b = item.b; data.arr1 = new Array(); data.arr1[0] = item.c; data.arr1[1] = item.d; data.e = item.e; data.f = item.f; data.arr2 = new Array(); data.arr2[0] = item.j; data.arr2[1] = item.h; userList.push(data); }); }Copy the code

Example 5:

searchDept(keyWord, callback) { if (keyWord) { this.$service.data .searchDepts({ data: { full_name: keyWord } }) .then(r => { if (r.Success) { let arr = []; r.Data.Result.forEach(element => { arr.push({ id: element.work_id, value: element.full_name, dept: element }); }); callback(arr); }}); }},Copy the code

The last

ForEach () can be used in Vue for front-end development. This is also a necessary function in the development process, especially for the beginner developers, but also should master the use of these situations, which will not be repeated here.

The above is all the content of this chapter. Welcome to follow the wechat public account of Sanzhan “Program Ape by Sanzhan” and the Sina Weibo account of Sanzhan “sanzhan 666”. Welcome to follow!