Induction of all array methods

cjh_ code 2021-11-25 15:14:03

Catalog

1.1 join()

1.2 shift() And pop()

1.2.1 shift()

1.2.2 pop()

1.3 unshift() And push() 

1.3.1 unshift()

1.3.2 push()

1.4  sort()

1.5  reverse()

1.6 concat()

1.7 slice()

1.8  splice()

1.9 toString()

1.10 indexOf() And lastIndexOf() ------ES5 newly added

1.10.1 indexOf() 

1.10.2 lastIndexOf() 

1.11 forEach() ------ES5 newly added

1.12 some() ------ES5 newly added

1.13 map() ------ES5 newly added

1.14  filter() ------ES5 newly added

1.14  every() ------ES5 newly added

1.15 concat() ------ES5 newly added

1.16 copyWithin() ------ES6 newly added

1.17  entries() ------ES6 newly added

1.18  fill() ------ES6 newly added

1.19  find() and findIndex() ------ES6 newly added

1.19.1 find()

1.19.2 findIndex()

1.20  from() ------ES6 newly added

1.21 includes() ------ES6 newly added

1.22  keys() ------ES6 newly added

1.23  values() ------ES6 newly added

1.24 of() ------ES6 newly added

1.25 reduce() and  reduceRight() ------ES6 newly added

1.25.1 reduce()

1.25.2 reduceRight()

1.26 flat() and flatMap() ------ES10 newly added

1.26.1 flat()

1.26.2  flatMap()


1.1 join()

         Separate the array with the specified value , If no value is specified, the default is comma (,)

  • grammar : Array .join();
  • Return value : Separated string
let arr = ['hello','friend']
let str1 = arr.join();
let str2 = arr.join('-')
console.log(str1);//hello,friend
console.log(str2);//hello-friend

Be careful :  Don't change the original array

1.2 shift() And pop()

1.2.1 shift()

        Delete the first data in the array

  • grammar : Array .shift()
  • Return value : Deleted data
let arr = [1,2,3,4,5]
let str = arr.shift();
console.log(str);//1

Be careful : Changed the original array ( That is, the length is also changed )


1.2.2 pop()

         Delete the last data in the array

  • grammar : Array .pop()
  • Return value : Deleted data
let arr = [1,2,3,4,5]
let str = arr.pop();
console.log(str);//5

Be careful : Changed the original array ( That is, the length is also changed )

1.3 unshift() And push() 

1.3.1 unshift()

         Adds the specified data to the beginning of the array

  • grammar : Array .unshift(‘ value 1’,‘ value 2’)
  • Return value : The length of the new array after adding
let arr = ['l','l','o']
let str = arr.unshift('h','e');
console.log(str);//5

Be careful : Changed the original array ( That is, the length is also changed )


1.3.2 push()

         Adds the specified data to the end of the array

  • grammar : Array .push(‘ value 1’,‘ value 2’)
  • Return value : The length of the new array after adding
let arr = ['h','e','l']
let str = arr.push('l','o');
console.log(str);//5

Be careful : Changed the original array ( That is, the length is also changed )

1.4  sort()

         Sort the data of the array ( Ascending or descending )

  • grammar : Array .sort( Callback function )
  • Return value : Arranged array
let arr = ['1','2','3',4,5]
let str2 = arr.sort(function(a,b){return a-b});
console.log(str2);//['1', '2', '3', 4, 5]
let arr = ['edit','banner','canner','die']
let str1 = arr.sort();
console.log(str1);//['banner', 'canner', 'die', 'edit']
console.log(arr);
  • The default sort order is to convert elements to strings , Then compare their UTF-16 Code unit value
  • The callback function has two parameters to judge ( Ascending or descending order ) Return value Less than 0,a It will be arranged to b Before ; be equal to 0,a and b The relative position of ; Greater than 0,b It will be arranged to a Before

Be careful :

  • Changed the order of the original array
  • The callback function is added, which can only judge numbers and string types ( for example :‘7’,‘8’), image (‘abc’,‘a’,‘banner’) Cannot use callback function to sort . This can only be used without callback function sort De ascending order , And then use reverse() To reverse the array in descending order

1.5  reverse()

         Invert the data in the array

  • grammar : Array .reverse( Callback function )
  • Return value : The inverted array
let arr = ['edit','banner','canner','die']
let str = arr.reverse();
console.log(str);//['die', 'canner', 'banner', 'edit']

Be careful : Changed the original array

1.6 concat()

         Concatenate two arrays

  • grammar : Array 1.concat( Array 2)
  • Return value : New array after connection
let arr1 = ['edit','banner','canner','die']
let arr2 = [1,2,3]
let str1 = arr1.concat(arr2);
console.log(str1);//['edit', 'banner', 'canner', 'die', 1, 2, 3]

Be careful : No change to the original array ( Returns a new array )

1.7 slice()

         Intercept the data at the specified position of the array ( Shallow copy )

  • grammar : Array .slice( Start index , End index )         Not including closing index
  • Return value : Intercepted new array
let arr = ['edit','banner','canner','die',1,2,3]
let str = arr.slice(1,3);
console.log(str);//['banner', 'canner']

Be careful :

  • No change to the original array ( Returns a new array )
  • Copying the intercepted data into a new array is a shallow copy, not a deep copy
  • If you do not declare the start index and end index , Intercepts the entire array ; Giving only one index will be regarded as starting the index

1.8  splice()

         This method has more functions , Can be deleted 、 Replace the existing element or add a new element to the specified place

  • grammar : Array .splice( Indexes , Number of deletions , Added data ) 
  • Return value : Return according to the second parameter , The return type is array
// From the subscript for 1 Delete the location of 2 Data
let arr = ['edit','banner','canner','die',1,2,3]
let str = arr.splice(1,2);
console.log(str);//['banner', 'canner']
// Mark the subscript as 1 Replace the element with the specified element ‘1’
let arr = ['edit','banner','canner','die',1,2,3]
let str = arr.splice(1,1,'1');
console.log(str);//['banner']
// Add the specified element in the specified position ‘1’
let arr = ['edit','banner','canner','die',1,2,3]
let str = arr.splice(1,0,'1');
console.log(str);//[]

Be careful : Changed the original array

1.9 toString()

         Convert an array to a string

  • grammar : Array .toString()
  • Return value : Converted String
 let arr = ['h','e','l','l','o']
let str = arr.toString();
console.log(str);//h,e,l,l,o

Be careful : No change to the original array

1.10 indexOf() And lastIndexOf() ------ES5 newly added

1.10.1 indexOf() 

         Find the index of the first given element

  • grammar : Array .indexOf(‘ Elements of the query ’,‘ Where to find ’)
  • Return value : Query the index of the element , No query returned -1
 let arr = [1,2,3,1,2,4,5,6]
let str1 =arr.indexOf(2);//1
let str2 = arr.indexOf(2,2);//4
console.log(str1,str2);

Be careful :

  • No change to the original array
  • If the second parameter is greater than or equal to the length of the array, it returns -1
  • If the second parameter is negative, it is offset from the end ,-1 The last element ,-2 The second last element . After knowing the specified location, look back .

1.10.2 lastIndexOf() 

         Find the index of the first given element ( From back to front )

  • grammar : Array .indexOf(‘ Elements of the query ’,‘ Start the reverse search from this location ’)
  • Return value : Query the index of the element , No query returned -1
 let arr = [1,2,3,1,2,4,5,2,6]
let str1 =arr.lastIndexOf(2);//7
let str2 = arr.lastIndexOf(2,4);//4
console.log(str1,str2);

  Search mechanism :-1 For the last element , If the second parameter is -5, Then he will count the fifth data from the back to the front and look forward , for example

let arr = [1,2,3,1,2,4,5,2,6]
let str1 =arr.lastIndexOf(2);//7
let str2 = arr.lastIndexOf(2,-5);//4

Be careful : 

  • No change to the original array
  • This method is reverse lookup , Note the second parameter value

1.11 forEach() ------ES5 newly added

         Iterate through each element of the array , And execute the given function

  • grammar : Array .forEach( Callback function ( ' Processing elements ' , ' Subscript ' , ' The array itself '){}, The callback function uses this value )
  • Return value :undefined
 let arr = [1,2,3,4,5]
let str = arr.forEach(function(value,index,arr){console.log(value,index);});
console.log(str);//undefined

Be careful : No change to the original array

1.12 some() ------ES5 newly added

         Traverse the array to find the data that meets the requirements

  • grammar : Array .some( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
  • Return value : Boolean value
let arr = [1,2,3,4,5,6]
let str = arr.some(function(a,index,arr){console.log(index,arr);return a%2===0 ;});
console.log(str);//true
// The subscript is index Parameters , Will return from 0 Subscript to the subscript that matches the value , Is an optional parameter
// The array itself is arr, Will return the original array , Is an optional parameter
// Callback function this The value is also an optional parameter 

Be careful : No change to the original array

1.13 map() ------ES5 newly added

         Traverse the array and execute the specified callback function

  • grammar : Array .map( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
  • Return value : Each element executes a new array of the results returned by the callback function
 let arr = [1,2,3,4,5]
let str = arr.map(function(value,index,arr){console.log(value,index); return value>3});
console.log(str);//[false, false, false, true, true]

Be careful : No change to the original array

1.14  filter() ------ES5 newly added

         Filter out the data you want in the array

  • grammar : Array .filter( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
  • Return value : Returns a new array that passes the test, that is, through the callback function
 let arr = [1,2,3,4,5]
let str = arr.filter(function(value,index,arr){console.log(value,index); return value>3});
console.log(str);//[4, 5]

Be careful : No change to the original array

1.14  every() ------ES5 newly added

         Judge array All the elements Is it possible to pass the callback function rule

  • grammar : Array .every( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
  • Return value : Boolean value
 let arr = [1,2,3,4,5]
let str = arr.every(function(value,index,arr){console.log(value,index); return value>3});
console.log(str);//false

Be careful : No change to the original array

1.15 concat() ------ES5 newly added

         Used to merge the data of two arrays

  • grammar : Array .concat( value 1, value 2, value 3)
  • Return value : Array
 let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8,9]
let str = arr1.concat(arr2);
console.log(str);//[1, 2, 3, 4, 5, 6, 7, 8, 9,0]

Be careful : No change to the original array

1.16 copyWithin() ------ES6 newly added

         Copy a part of the array and put it somewhere in the same array

  • grammar : Array .copyWithin( Inserted index , Copy start index , Copy end index )
  • Return value : The changed array
 let arr = [1, 2, 3, 4, 5];
let str = arr.copyWithin(1,3,4);// This is from the index 3 Start copying to index 4( barring ), Then add to the index as 1 The location of
console.log(str); //[1, 4, 3, 4, 5]

Be careful :

  • Changed the original array
  • Parameter 1 is required , Other parameters are optional ( Only one parameter is added to the specified index , Copy is the entire array ; Two parameters , The second parameter is to start copying the index , No third parameter will be copied from the start index to the last element of the array )
  • After copying and adding, the length of the whole array remains unchanged , Therefore, the length of the element added by the copy will be greater than the specified index to the last element index of the array , This will cause the following elements to be ignored ( The code is as follows )
 let arr = [1, 2, 3, 4, 5];
let str = arr.copyWithin(2,0,4);
console.log(str); //[1, 2, 1, 2, 3] Copy the entire array , But the only thing added to the array is 1,2,3

1.17  entries() ------ES6 newly added

         Back to a new Array Iterator object

  • grammar : Array .entries()
  • Return value : new Array Iterator object
 let arr = [1, 2, 3, 4, 5];
let str = arr.entries();
let str1 = str.next().value
let str2 = str.next().value;
console.log(str);//Array Iterator {}
console.log(str1,str2); //(2) [0, 1] (2) [1, 2]

Be careful : No change to the original array

1.18  fill() ------ES6 newly added

         Fills a position in the array with the specified data

  • grammar : Array .fill( Populated data , Start index , End index )
  • Return value : The changed array
 let arr = [1, 2, 3, 4, 5];
let str = arr.fill(6,2,4);
console.log(str); //[1, 2, 6, 6, 5]
// Does not include end index
// If you do not specify a start or end index, the entire array will be filled
// If the end index is not specified, it will be filled from the start index to the last element of the array 

Be careful : Changed the original array

1.19  find() and findIndex() ------ES6 newly added

1.19.1 find()

         Find the first element in the array that satisfies the callback function

  • grammar : Array .find( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
  • Return value : Elements that satisfy the conditions ( No return undefined)
 let arr = [1, 2, 3, 4, 5];
let str = arr.find((function(value,index,arr){console.log(value,index); return value>3}));
console.log(str); //4

Be careful : No change to the original array


1.19.2 findIndex()

         Find the index of the first element in the array that satisfies the callback function

  • grammar : Array .findIndex( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
  • Return value : Elements that satisfy the conditions ( No return undefined)
 let arr = [1, 2, 3, 4, 5];
let str = arr.findIndex((function(value,index,arr){console.log(value,index); return value>3}));
console.log(str); //3

Be careful : No change to the original array

1.20  from() ------ES6 newly added

         Convert a pseudo array or iteratable object into a new array after specified processing

  • grammar :Array.from( Pseudo array ,  Callback function , The callback function uses this value )
  • Return value : New array after processing
 let str1 = Array.from('12345');//['1', '2', '3', '4', '5']
let str2 = Array.from([1,2,3],(function(value,index,arr){console.log(value,index); return value*=3}))//[3, 6, 9]

1.21 includes() ------ES6 newly added

         Determine whether the array contains the specified data

  • grammar : Array .includes( Looking for elements , Where to start looking for )
  • Return value : Boolean value
 let arr = [1, 2, 3, 4, 5];
let str = arr.includes(3)
console.log(str); //true

Be careful : No change to the original array

1.22  keys() ------ES6 newly added

         Returns a containing each index key in the array Array Iterator object

  • grammar : Array .keys()
  • Return value : new Array Iterator object
 let arr = [1, 2, 3, 4, 5];
let str = arr.keys();
for (const key of str) {
console.log(key); //0,1,2,3,4
}
console.log(str);//Array Iterator {}

Be careful : No change to the original array

1.23  values() ------ES6 newly added

          Returns an array containing each index value in the array Array Iterator object

  • grammar : Array .values()
  • Return value : new Array Iterator object
 let arr = [1, 2, 3, 4, 5];
let str = arr.values();
for (const value of str) {
console.log(value); //1,2,3,4,5
}
console.log(str);//Array Iterator {}

Be careful : No change to the original array

1.24 of() ------ES6 newly added

         Create an array containing the specified elements

  • grammar :Array.of( value 1 , value 2 ,  value 3)
  • Return value : Array
 let str = Array.of(7,6,5,4,3,2,1)
console.log(str);//[7, 6, 5, 4, 3, 2, 1]

Be careful :Array(5) Is to create a length of 5 Empty array of ,Array.of(5) Is to create an array containing an element 5

 1.25 reduce() and  reduceRight() ------ES6 newly added

1.25.1 reduce()

         Array sum

  • grammar : Array .reduce( Callback function ( accumulator , Processing elements , Subscript , The array itself ){}, The value of the first accumulator )
  • Return value : The result of accumulator processing
 let arr = [1, 2, 3, 4, 5];
let str = arr.reduce(function(sum,value,index){console.log(sum,value,index); return sum+=value},0)
console.log(str);//15

Be careful : No change to the original array


1.25.2 reduceRight()

         And reduce The usage is the same , Add up from back to front

1.26 flat() and flatMap() ------ES10 newly added

1.26.1 flat()

         Deep recursion , Flatten an array

  • grammar : Array .flat( Extract the nesting depth , The default is 1)
  • Return value : After flattening, the new array
 let arr = [1, [2, 3, 4], 5];
let str = arr.flat();
console.log(str);//[1, 2, 3, 4, 5]
let arr = [1, [[2, 3], 4], 5];
let str1 = arr.flat();
let str2 = arr.flat(2);
console.log(str1);//[1, Array(2), 4, 5]
console.log(str2);//[1, 2, 3, 4, 5]

Be careful : No change to the original array


1.26.2  flatMap()

         Each element of the array executes a callback function , Equivalent to execution map Method , Then the return value is executed flat Method

  • grammar : Array .flatMap( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
  • Return value : New array
 let arr = [1, [2, 3, 4], 5];
let str = arr.flatMap(function(value,index){console.log(value,index); return value*2});
console.log(str);//[2, NaN, 10] This NaN The subscript is 1 Multiply the array by 2 Result 

Be careful : No change to the original array

summary : 

Method grammar Change array edition
jion() Array .join() no ES5 following
shift() And pop() Array .shift()
Array .pop()
yes ES5 following
unshift() And push() Array .unshift(‘ value 1’,‘ value 2’)
Array .push(‘ value 1’,‘ value 2’)
yes ES5 following
sort() Array .sort( Callback function ) yes ES5 following
reverse() Array .reverse( Callback function ) yes ES5 following
concat() Array 1.concat( Array 2) no ES5 following
slice() Array .slice( Start index , End index )  no ES5 following
splice() Array .splice( Indexes , Number of deletions , Added data )  yes ES5 following
toString() Array .toString() no ES5 following
indexOf() And lastIndexOf() Array .indexOf(‘ Elements of the query ’,‘ Where to find ’)
Array .indexOf(‘ Elements of the query ’,‘ Start the reverse search from this location ’)
no ES5
forEach() Array .forEach( Callback function ( ' Processing elements ' , ' Subscript ' , ' The array itself '){}, The callback function uses this value ) no ES5
some() Array .some( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value ) no ES5
map() Array .map( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value ) no ES5
filter() Array .filter( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value ) no ES5
every() Array .every( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value ) no ES5
concat() Array .concat( value 1, value 2, value 3) no ES5
copyWithin() Array .copyWithin( Inserted index , Copy start index , Copy end index ) yes ES6
entried() Array .entries() no ES6
fill() Array .fill( Populated data , Start index , End index ) yes ES6
find() And findIndex() Array .find( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
Array .findIndex( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
no ES6
from() Array.from( Pseudo array ,  Callback function , The callback function uses this value ) ES6
includes() Array .includes( Looking for elements , Where to start looking for ) no ES6
keys() And value() Array .keys()
Array .values()
no ES6
of() Array.of( value 1 , value 2 ,  value 3) ES6
reduce() And reduceRight() Array .reduce( Callback function ( accumulator , Processing elements , Subscript , The array itself ){}, The value of the first accumulator )
Array .reduceRight( Callback function ( accumulator , Processing elements , Subscript , The array itself ){}, The value of the first accumulator )
no ES6
flat() And flatMap() Array .flat( Extract the nesting depth , The default is 1)
Array .flatMap( Callback function ( Processing elements , Subscript , The array itself ){}, The callback function uses this value )
no ES10

Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25