Preface
The four basic methods of array are as follows:
The way to traverse an array is as follows:
Four basic methods of array (addition and deletion of array elements)
push()
push(): insert one or more elements into the last face of the array, and the returned result is the new length of the array.
Syntax:
New length of array = array. Push (element);
Code example:
var arr = ["Wang Yi", "WangTwo", "Wang San"]; var result1 = arr.push("Wang Si"); // Insert an element at the end var result2 = arr.push("Wang Wu", "Wang Liu"); // Insert multiple elements at the end console.log(result1); // Print result: 4 console.log(result2); // Print result: 6 console.log(JSON.stringify(arr)); // Print result: ["Wang 1", "Wang 2", "Wang 3", "Wang 4", "Wang 5", "Wang 6"]
Syntax:
Deleted element = array. pop();
Code example:
var arr = ["Wang Yi", "WangTwo", "Wang San"]; var result1 = arr.pop(); console.log(result1); // Printing result: Wang San console.log(JSON.stringify(arr)); // Print result: ["Wang 1", "Wang 2"]
Syntax:
New length of array = array. Unshift (element);
Code example:
var arr = ["Wang Yi", "WangTwo", "Wang San"]; var result1 = arr.unshift("Wang Si"); // Insert an element at the front var result2 = arr.unshift("Wang Wu", "Wang Liu"); // Insert multiple elements at the front console.log(result1); // Print result: 4 console.log(result2); // Print result: 6 console.log(JSON.stringify(arr)); // Print result: ["Wang 5", "Wang 6", "Wang 4", "Wang 1", "Wang 2", "Wang 3"]
Syntax:
Deleted element = array. shift();
Code example:
var arr = ["Wang Yi", "WangTwo", "Wang San"]; var result1 = arr.shift(); console.log(result1); // Printing result: Wang Yi console.log(JSON.stringify(arr)); // Print result: ["Wang Er", "Wang San"]
Traversal of array
Traversing an array is to get and manipulate every element in the array. In our actual development, it is used very frequently.
The methods to traverse the array include: every(), filter(), forEach(), map(), some().
PS: these methods will not modify the original array.
Syntax format:
Array / boolean / none = array.every/filter/foreach/map/some(
function(element,index,arr){
Program and return value;With these methods, you can replace some for loops. Let's introduce them in turn.
for loop traversal
Give an example:
var arr = ["millet","rice","Medium rice"]; for(var i = 0;i<arr.length;i++){ console.log(arr[i]); // arr[i] represents each element I in the array } console.log(arr);
forEach() traversal
forEach() only supports browsers above IE8. This method is not supported in IE8 and below browsers. So if you need to be IE8 compatible, don't use forEach, just use for loop instead.
The forEach() method requires a function as an argument. This kind of function, which is created by us but not called by us, is called callback function.
There are several elements in the array, and the callback function will execute several times. After execution, the browser will traverse to the element.
Three parameters are passed in the callback function:
- The first parameter is the element being traversed.
- The second parameter is the index of the element being traversed.
- The third parameter is the array being traversed
Code example:
var arr = ["Wang Yi", "WangTwo", "Wang San"]; arr.forEach(function(item, index, obj) { console.log("item:" + item); console.log("index:" + index); console.log("obj:" + obj); console.log("----------"); });
Print results:
item:Wang Yi index:0 obj:Wang Yi,WangTwo,Wang San ---------- item:WangTwo index:1 obj:Wang Yi,WangTwo,Wang San ---------- item:Wang San index:2 obj:Wang Yi,WangTwo,Wang San ----------
Note that the return value of forEach() is undefined. That is, it does not return a value. If you try to receive it by tempary = arr.forEach(), it will not work.
filter()
Syntax:
Array.prototype.filter(function(item, index){})
Explanation: run the callback function for each item in the array, and the item whose return result is true will form a new array (the return value is the new array).
Example 1: find out the elements greater than 4 in array arr1, and return a new array. The code is as follows:
var arr1 = [1, 3, 6, 2, 5, 6]; var arr2 = arr1.filter(function (item, index) { return item > 4; //Return elements greater than 4 in arr1 }) console.log(arr2);
Example 2:
var arr1 = ["Chongqing", "Yuzhong", "Jiangbei", "Shapingba"]; var arr2 = arr1.filter(function (element, index, array) { if (element.length > 2) { //If the element in arr1 is longer than 2 characters, I will put it in arr2. return true; } return false; }); console.log(arr1); console.log(arr2);
map() method
Explanation: run a callback function for each item in the array, return the result of the function, and form a new array (return the new array after processing).
For example, there is a known array, arr1. I need to add 10 to each element in arr1. Here we can use the map method. Give an example:
var arr1 = [1, 3, 6, 2, 5, 6]; var arr2 = arr1.map(function (item, index) { return item + 10; //Add 10 to each element in arr1 }) console.log(arr2);
Example 2:
var arr1 = ["Chongqing", "Yuzhong", "Jiangbei", "Shapingba"]; var arr2 = arr1.map(function (element, index, array) { return element + "vae"; //Add the string "vae" to all elements in arr1 and put it in arr2. }); console.log(arr1); console.log(arr2);
every() method
Explanation: run the callback function for each item in the array. If it returns true, every returns true. If one item returns false, stop traversing. This method returns false.
Note: the return value of every() method is a boolean value, and the parameter is a callback function.
Give an example:
var arr1 = ["Chongqing", "Yuzhong", "Jiangbei", "Shapingba"]; var bool1 = arr1.every(function (element, index, array) { if (element.length > 2) { return false; } return true; }); console.log(bool1); //Output: false. Returns false whenever an element is longer than two characters var arr2 = ["Chongqing", "Yuzhong", "Jiangbei", "Sha Ping"]; var bool2 = arr2.every(function (element, index, array) { if (element.length > 2) { return false; } return true; }); console.log(bool2); //Output result: true. Because each element is two characters long.