Preface
I think I am a relatively productive person~ but I feel like I haven't written anything without nutrition for a long time. I originally planned to talk about this article at the end of last year, but there are too many things at the end of the year. In addition, I have really become lazy and delayed until now I have to improve this title that I have been preparing for for a long time.
The reason why I suddenly want to talk about arrays in JavaScript is because I have experienced many times and found that it was very stupid. So I want to summarize. This article is equivalent to summarizing the same article. I don’t want to talk about how to use array methods. After all, no matter where it is, there are many tutorials on using array methods. Just talk about the details that we may ignore.
Throwing bricks and attracting jade
Before we start to formally talk about some array methods that we ignore, I would like to give an example to talk about the little pits I have lie in.
Now we have a small requirement, write a method with two parameters, one is an array and the other is an element that needs to be added to the array.
function arrPush(arr, target) {
return (target);
}
var arr_1 = [1, 2, 3];
(arrPush(arr_1, 4));
The above code should be very simple for you. Our requirement is to turn [1, 2, 3] into [1, 2, 3, 4], which seems to be correct. I boldly guess what the final () result is, you can try it yourself.
Okay, I won’t keep it in the end, the final result is 4, eh? You may have already understood this point, and you may not know what's going on at all. It doesn't matter. If you understand it, you should just review it once. If you don't know it, then you should really read this article that shouldn't be long.
Unexpected array method
After throwing bricks and jade, you may probably know why I want to make such a summary, especially for students who do not have such a good grasp of JavaScript, it is a particularly easy thing to ignore.
I hope that when you see the name of the method below, the usage of that method should appear immediately, and you should know that the remaining parameters you may not use frequently have its return value.
In fact, many times, the description of a method on MDN is very clear, but we still ignore it, so based on examples, it may be more helpful to your memory.
Let’s talk about this method first and explain the reasons for throwing bricks and attracting jade.
The push() method adds one or more elements to the end of the array and returns the new length of the array
This sentence actually explains the above answer, we arereturn (target)When the return is()The return value of the function, this value is the new length of the array, so the result is 4, let’s use this method correctly.
function arrPush(arr, target) {
(target)
return arr;
}
var arr_1 = [1, 2, 3];
(arrPush(arr_1, 4));
At this time, the result is the last thing we want [1, 2, 3, 4]. By the way, the push method can receive multiple parameters at the same time, like this(1, 2, 3, 4), the result returned is of course the new length of the array.
Let’s talk about the method of concat merging multiple arrays. Because I want to compare it with the push above, I choose to continue talking about this method and take a look at the small example.
function arrConcat(arr, arr2) {
(arr2);
return arr;
}
var arr_1 = [1, 2];
var arr_2 = [3, 4];
(arrConcat(arr_1, arr_2));
Due to the above push method, we still choosereturn arr, What is the result of this? I suggest you try it and you will find that what you get is [1, 2]. Wow~ Why is it inconsistent with push? Why is it returned [1, 2] again?
The concat() method is used to merge two or more arrays. This method does not change the existing array, but returns a new array
When you understand this method, you will find that the expression above MDN is really great~ I can't help but want to praise it. It's clear that the concat method will not change the original array, that is, when wereturn arrWhen , arr did not change, so [1, 2] and rewrite our method.
function arrConcat(arr, arr2) {
return (arr2);
}
var arr_1 = [1, 2];
var arr_2 = [3, 4];
(arrConcat(arr_1, arr_2));
At this time, you will get the expected results when you look at it~ There is actually another magical thing about this method, which is that it can directly connect a value, and it can also connect multiple values or multiple arrays at the same time, or a combination of multiple values and multiple arrays, like this.
var arr = [1, 2]; (3, 4, [5, 6], 7, [8, 9]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
and
Because these two methods are similar, let’s talk about their differences at the same time. Let’s take a look at their basic explanation first.
The map() method creates a new array, and the result is the result returned by each element in the array after calling a provided function.
The forEach() method executes the provided function once on each element of the array.
Judging from the explanation of these two sentences, they are all the elements of the iterative array. The difference is that the map method will return a new array, while the forEach method will not. So does it have a return value? There is a answer...
var arr = [1, 2, 3];
var newArr = (item => {
return item + 1;
}); // [2, 3, 4];
var newArr2 = (item => {
return item + 1;
}); // undefined
var newArr3 = (item => {
(item + 1);
}); // [undefined, undefined, undefined]
// 2
// 3
// 4
var newArr4 = (item => {
(item + 1);
}); // undefined
// 2
// 3
// 4
The answer I've written above, the map method must display the return value, and forEach just executes internal content on every element of the array. The parameters of these two methods are the same. The parameters in the callback function and the value used when executing the callback function are also the same, namely the current element of the array, the current element index and the array itself.
Generally speaking, we use more of the callback function and its two parameters. Many people ignore the third parameter of the callback function. In fact, it is quite useful, so I won’t mention it for now. Finally, change the parameters of this value. Because it is really rarely used and there are no actual cases, I won’t say much. As you know, there is such a thing. If there is any actual use, you can share it with me and learn it~
In the new array iteration method after es5, the parameters are almost the same as above.
- Callback function (the current value of the array, the current value index, the array itself)
- This value of the callback function is executed
The filter() method creates a new array containing all elements of the test implemented by the provided function
The method of filtering arrays itself is very simple to use. I will talk about some tips when using them, such as array deduplication, which is very useful.
var arr = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9];
var result = ((item, index, arr) => {
return (item) === index;
});
(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
and
I have said a lot above~ You probably know that one that we are prone to ignore is the return value of the method, and there are no parameters that are often used, so I will explain these two methods directly.
The pop() method deletes the last element from the array and returns the value of that element. This method changes the length of the array
The shift() method deletes the first element from the array and returns the value of that element. This method changes the length of the array
The usage of these two methods is exactly the same. The difference is that one pops up the last element of the array, and the other pops up the front element of the array. After reading the explanation of the above method, you should know that what I want to express is the return value element of the method~
var arr = [1, 2, 3]; (()); // 3 (()); // 1 (); // 1
Conclusion
I didn't take out all the array methods and said that the above examples are enough to tell you what we are prone to ignore when we use them, and it is not something that is difficult to understand, so let's talk about this~ The remaining methods are carefully used by everyone.
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.