1. Push of common method of array
pushis used to append an element at the end of the array
Return value: the length of the appended array
Note: will change the original array
var arr = [1, 2, 3]
// 使用 push 方法追加一个元素在末尾
arr.push(4)
console.log(arr) // [1, 2, 3, 4]2. Pop of common method of array
pop` is used to delete an element at the end of the array
Return value: the deleted data
Note: will change the original array
var arr = [1, 2, 3]
// 使用 pop 方法删除末尾的一个元素
arr.pop()
console.log(arr) // [1, 2]3. Unshift of common method of array
unshiftis to add an element to the front of the array
Return value: After adding data, the length of the array
Note: will change the original array
var arr = [1, 2, 3] // Use the unshift method to add an element to the front of the array arr.unshift(4) console.log(arr) // [4, 1, 2, 3]
4. The shift of common method of array
shiftis to delete the first element of the array
Return value: deleted data
Note: will change the original array
var arr = [1, 2, 3] // Use the shift method to delete the first element of the array arr.shift() console.log(arr) // [2, 3]
5. Splice of common method of array
spliceIt is to intercept some content in the array, and intercept according to the index of the array
Note: will change the original array
Syntax: splice(从哪一个索引位置开始，截取多少个，替换的新元素)(the third parameter can be omitted)
var arr = [1, 2, 3, 4, 5] // Use the splice method to intercept the array arr.splice(1, 2) console.log(arr) // [1, 4, 5] console.log(arr) // [1, 0, 5] 0 in the middle is not replaced
arr.splice(1, 2)Indicates to intercept 2 contents starting from index 1
The third parameter is not written, that is, there is no new content to replace the interception position
var arr = [1, 2, 3, 4, 5] // Use the splice method to intercept the array arr.splice(1, 2, 'I am new content') console.log(arr) // [1, 'I'm new', 4, 5]
arr.splice(1, 2, 'I am new content')` means to intercept 2 content starting from index 1
Then use the third parameter to fill the empty position after interception
6. Array common method slice() intercepts array
Syntax: array.slie(start index, end index)
Feature 1: The front of the bag is not the back
Feature 2: You can write negative integers, which is the number from the bottom, which is equivalent to length+negative integers
If the starting index is not written, it defaults to 0
The end index is not written, the default is length
Return value: a new array; the array inside is the intercepted data content
Note: the original array will not be changed
// slice() // var arr = ['a','b','c','d','e']; // var res = arr.slice(1); // var res = arr.slice(1,3); // var res = arr.slice(0,-1); // console.log(arr); // console.log(res);
7. Reverse of common methods of arrays
reverse` is used to reverse the use of the array
Return value: reversed array
Note: will change the original array
var arr = [1, 2, 3] // Use the reverse method to reverse the array arr.reverse() console.log(arr) // [3, 2, 1]
8. Array common method sort
sort` is used to sort the array
Note: will change the original array
Array.sort() ASCII bit by bit comparison
Array.sort(function(a,b){return ab}) ascending order
Array.sort(function(a,b){return ba}) descending order
Return value: sorted array
var arr = [2, 3, 1] // use the sort method to sort the array arr.sort() console.log(arr) // [1, 2, 3]
This is just a basic simple usage
9. concat of common method of array
concat` is to splice multiple arrays
There are some differences from the previous method, that is, concatthe original array will not be changed, but a new array will be returned
var arr = [1, 2, 3] // use the concat method to concatenate the array var newArr = arr.concat([4, 5, 6]) console.log(arr) // [1, 2, 3] console.log(newArr) // [1, 2, 3, 4, 5, 6]
Note: the concat method does not alter the original array
10. Array common method filter
Syntax: Array.filter(function(item,index,arr){})
Return value: a new array
- The data that satisfies the condition in the original array
- Write the filter condition in the new form of return in the callback function
// filter()
// var arr = [1, 2, 3, 4, 5];
// // Get data greater than 3 in arr to form a new array
// var res = arr.filter(function (item) {
// return item > 2;
// })
// console.log(res);
/*
Encapsulation method
+ Requirements: Filter the original array according to my conditions, and take out the data that meets the conditions in the original array
form a new array
+ Lychee:
- Original array: [10,20,30,40]
- condition > 20
- [30,40]
*/
// 1. Prepare method
Array.prototype.myFilter = function(cb){
// prepare a new array
var ary = [];
// According to the conditions of the callback function, add members to the new array
for(var i = 0;i<this.length;i++){
// call cb
var r = cb(this[i],i,this);
// ary.push (data that meets the conditions in this)
r&&ary.push(this[i]);
}
// return the new array
return ary;
}
// future and private use
var arr = [10,20,30,40];
var res = arr.myFilter(function(item,index,arr){
// filter condition
return item>20;
})
console.log(res);
11. The common methods of arrays join to connect arrays
Syntax: array.join (connection assignment symbol)
If the connection symbol is not written, ',' is used by default
Function: Splice each item of data in the array into a string using connection symbols
Return value: a concatenated string
Note: the original array will not be changed
var arr = [1, 2, 3]
// Use join to link arrays
var str = arr.join('-')
console.log(arr) // [1, 2, 3]
console.log(str) // 1-2-3
12. Array common method froEach()
specifically for iterating over arrays
grammar:
Array.forEach(function(item,index,arr) { //This callback function will be executed as many times as there is data in the array
item represents each item of the array
index represents the index of each item in the array
arr represents the original array
})
Return value: None, undefined
Meaning: used to traverse the array
Array calls arr.myForEach() // error arr.myForEach is not a function
-
Can it be like forEach, the array.myForEach call
We need to allow the method we encapsulate to be directly transferred by the array
Need to assign this method to a 'space'
Put our own myForEach into the 'array method space'
'array method space' is an object data type
'Array method space' is what we call Array.prototype
Add the myForEach function we wrote to the 'array method space' object
Array.prototype.myForEach = myForEach;
At this point, the array can directly call the myForEach method: arr.myForEach()
// Also traverse the array in myForEach
Array.prototype.myForEach = myForEach;
// At this point the array can directly call the myForEach method
// arr.myForEach(function b(item,index,arr){
// console.log(item,index,arr);
// })
// Find the sum of the data in the arr array
var sum = 0;
arr.myForEach(function(item){
sum += item;
})
console.log(sum);
13. Common method of array---map
Syntax: array.map(function(item,index,arr){})
Function: map the original array
Return value: a new array with the same length as the original array,
And the data in the new array is the content that has been mapped
Note: do not change the original array
// map()
// var arr = [10,20,30,40];
// // Add 30% to the data in arr
// var res = arr.map(function(item){
// return item*1.3
// })
// console.log('original array', arr);
// console.log('Array after mapping operation', res);
/*
Encapsulate a method that has the same function as the map of the array---myMap
+ Requirements:
- Return a new array according to the length of the original array
- In the callback function, each data in the original array can be operated (the operation I need)
- The data obtained in the new array is the data after operation
*/
// 1. Prepare a method that can be called directly by the array
Array.prototype.myMap = myMap
function myMap(cb){
// In this function, we need to find the array that calls this method
// because the array that calls this method needs to be traversed
// The keyword this in the array method function points to the array calling this method
// console.log(this);
// prepare a new array
var ary = [];
// Traverse the array according to the length of the original array (this) and the operation of cb
// add data to ary
for (var i = 0; i < this.length; i++) {
// People who use the myMap method will write the method he wants to manipulate data in the b callback function
// Need to call cb, and give each item of data to the b function
// res accepts the return value in the b function
// Because the b function returns the result of each item +1
// res gets the result of each data +1
var res = cb(this[i],i,this);
ary.push(res);
}
// Return the array of operation numbers
return ary;
}
// 2. When used in the future
var arr1 = [1,2,3,4];
var arr2 = [10,20,30,40];
var arr3 = [100,200,300,400];
// The array directly calls the myMap method we wrote ourselves
var resArr = arr3.myMap(function b(item,index,arr){
// Some operations, assuming the operation data +1
// Give the result as a return value
return item+1;
})
console.log(resArr);
14. Array common method every
Determine whether all items in the array meet the condition
Returns true if all items satisfy the condition
As long as any of the conditions are not met, return false
The condition is written after the return of the callback function
// // every
// // Determine whether the data in the array is greater than 1
// var r1 = arr.every(function(item){
// return item > 0;
// })
// console.log(r1);
// Encapsulate our own every method---myEvery
// 1. Prepare method
Array.prototype.myEvery = function (cb) {
// Hypothetical variables, assuming all items satisfy the condition
var flag = true;
// test the hypothesis by looping through the array
for (var i = 0; i < this.length; i++) {
var r = cb(this[i], i, this)
//If r is false in the loop, it means that the current item does not meet the condition
// overthrow the assumption
if (!r) {
flag = false;
break;
}
}
// return flag
return flag;
}
15. Array common method some
Determine whether each item in the array satisfies the condition
As long as any item in the array satisfies the condition, return true
Returns false only if none of the items meet the condition
The condition is written after the return of the callback function
// some
// Determine whether the data in the array is greater than 4
// var r2 = arr.some(function(item){
// return item > 4;
// })
// console.log(r2);
// Encapsulate our own some method---mySome
// Prepare a mySome method
Array.prototype.mySome = function (cb) {
// Hypothetical variable, assuming no data satisfies the condition
var flag = false;
for (var i = 0; i < this.length; i++) {
var r = cb(this[i], i, this);
if (r) {
flag = true;
break;
}
}
return flag;
}
// when used in the future
var scar = [10, 20, 30, 40, 50];
// // Determine whether all are greater than 20
// var r1 = arr.myEvery(function (item) {
// return item > 5;
// })
// console.log(r1);
// Check if there is a number greater than 60
var r1 = arr.mySome(function (item) {
return item > 60;
})
console.log(r1);
16. Array common method flat()
Syntax: array.flat(number)
If no parameters are passed, the layer will be flattened by default
How many parameters are passed, and how many layers are flattened
No matter how many dimensions can be flattened directly, transfer Infinity
Function: Flatten an array (convert multi-dimensional array to one-dimensional) common method of array
// flat() // var arr = [1,[2,[3,[4,[5]]]]]; // console.log(arr); // // var resArr = arr.flat() // // var resArr = arr.flat(3) // var resArr = arr.flat(Infinity) // console.log(resArr);
17. Array common method find()
- Syntax: Array.find(function(item,index,arr){})
+ Return value: the first data in the array that satisfies the condition
- Write in the form of return in the callback function
// find()
// var scar = [1, 2, 3, 4];
// var res = arr.find(function (item) {
// return item > 1;
// })
// console.log(res);
18. Array common method findIndex()
- Syntax: Array.findIndex(function(item,index,arr){})
+ Return value: the index of the first data in the array that satisfies the condition
- Write in the form of return
// findIndex()
// var arr = ['a', 'b', 'c', 'd'];
// var scar = [1, 2, 3, 4];
// var res = arr.findIndex(function (item) {
// // return item === 'c';
// return item > 2;
// })
// console.log(res);
19. Array common method includes()
- Syntax: array.includes(data)
+ return value: Boolean
- true if the data is in the array
- If the data is not in the array, then it is false
//includes()
// var arr = ['a', 'b', 'c', 'd'];
// // var res = arr.includes('a');
// var res = arr.includes('z');
// console.log(res);
20. Array common method fill()
- Syntax: array.fill(data to fill, start index, end index)
+ If the start index is not written, the default is 0
+ The end index is not written, the default is the last index of the array data
+ Features: before the index package but not after the package (including the start index, not including the end index)
- Function: replace, replace the data at the specified index in the array according to the index position
- Note: directly change the original array
- Note: only existing data can be replaced, no new ones can be added
// fill()
// var arr = [10,20,30,40,50];
// arr.fill('data 1');
// arr.fill('data 1',1);
// arr.fill('data 1',1,3);
// arr.fill('data 1',1,6);
// console.log(arr);
21. Array common method reduce()
- Syntax: array.reduce(function(prev,item,index,arr){},init)
- init If not written, the first data of the array will be used by default
- Function: Overlay
— Return value: the result after superimposition
// reduce()
// var arr = [10, 20, 30, 40, 50];
// var res = arr.reduce(function (prev, item) {
// console.log(prev, item)
// return prev+item;
// },0)
// console.log(res);
/*
You set the parameters of init where
For the first time in the loop, prev is the data at the init position, and item is the first item of the array
After the second cycle and after, prev is the content of the previous return, and item is the current number of the array
You didn't set the parameters in the init position
For the first time in the loop, prev is the first item [0] data of the array, and item is the second item of the array
After the second cycle and after, prev is the content of the previous return, and item is the next item of the current array
*/
22. Array common method concat() splicing array
Syntax: array.concat(array2, data, array3...)
Function: Append the array or data in all parameters to the back of the original array, if the parameter is an array, then disassemble and append
Return value: new spliced array
Note: the original array will not be changed
//concat()
// var arr = [1,2,3];
// var res = arr.concat('a','b','c',['d','e']);
// console.log(arr);
// console.log(res);
23. Array common method indexOf()
Syntax: array.indexOf(data to find)
Array.indexOf(data to find, start index)
return value:
Search the data in the array from front to back, and find the first data that meets the requirements
Returns the index of the first data that satisfies the requirement
If there is this data, return the index of the data; if there is no such data, -1
//indexOf()
// var arr = ['a', 'b', 'c', 'b', 'e'];
// var res = arr.indexOf('b');
// var res = arr.indexOf('b',2);
// var res = arr.indexOf('z');
// console.log(res);
24. Array common method lastIndexOf()
Syntax: array.lastIndexOf(data to find)
Array.lastIndexOf (data to be found, start index)
return value:
- Find the data in the array from the back to the front, and find the first data that meets the requirements
- Returns the index of the first data that meets the requirements
- If there is this data, return the index of the data
- -1 if there is no such data
//lastIndexOf()
// var arr = ['a', 'b', 'c', 'b', 'e'];
// var res = arr.lastIndexOf('b');
// var res = arr.lastIndexOf('b', 2);
// var res = arr.lastIndexOf('z');
// console.log(res);