Built-in objects-Array

Built-in objects-Array

Array

Sparse array

Sparse array with null values in it

empty
Sparse array

//1 When we delete the items of the array, there will be empty in the array var arr = [ 1 , 2 , 3 , 4 , 5 ] delete arr[ 1 ] console .log(arr) => [ 1 , empty, 3 , 4 , 5 ] //array we see what we call a null value appears array scrim //2 when we play more comma 'in the array, there will be' empty var ARR = [ . 1 ,, . 3 , 4 , 5 ] console .log(arr) => [ 1 , empty, 3 , 4 , 5] //We see empty values in the array //Of course when we try to call it will print undefined instead of empty console .log(arr[ 1 ]) => undefined //because when we call arr[i ] equivalent to calling him no assignment, time characteristics of the object if the value of this property is not returned undefined copy the code

Array-like

Array-like and array

  • What is an array-like
    • Class array has
      length
      Attributes, and we found the array-like
      key
      There is a corresponding order
    • Class arrays are objects, our common class arrays
      arguments ``DOMLIST'' string
    • The difference between the length of the array and the length of the string: the length of the array can be changed, the length of the string cannot be changed, the length of the string is read-only
    • Array-like is an object, he cannot call the methods on the array prototype, such as
      forEach

Traversal iteration and generator iterator

What is traversal?

  1. Traversal is to query and process each element in the array

What is iteration

  1. We hope that the traversal process is controllable (the traversal process can be stopped and continued), and the traversal can be controlled manually
  2. Traversal is the implementation of iteration again and again

Builder

  1. The generator is a function. Adding a ***** before the function name in js is the generator function
  2. The iteration of the generator is made by
    yield
    Controlling

Iterator

  1. It is an object with a next method returned after execution by the generator

Array method

There are many methods on the array. When we printed the array, we found that there were many methods on its prototype.

  1. How to convert a string

    toString ( the Join => Split) copy the code
  2. Stack method

    push pop unshift shift copy the code
  3. Sorting related methods

    reverse sort randomly ordered duplicated code
  4. Splicing method

    concatcopy code
  5. Delete method

    slice splicecopy code
  6. Find method

    indexOf lastIndexOf includes copy the code
  7. How to create an array

    Array () fill Array single value .of () filled Array .form () array to a class array duplicated code
  8. Find item method

    find findIndexcopy code
  9. Traverse method

    The Array .prototype.keys the Array .prototype.values the Array .prototype.entires corresponds Object .keys Object .values Object .entries forEach map filter some every find findIndex Copy code
  10. Inductive function

    reduce copy code
  • General method

    • toString converts the array into a string and then returns it, you can directly transfer a multi-dimensional array into a string
    var arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 ] var str = arr.toSTring() var str = Array .prototype.toString.call(arr) console .log(str) => 1 , 2 , 3 , 4 , 5 , 6 , 7 //of course, if he is multi-dimensional arrays can also be the result of the conversion is the same toSTring copy the code
  • join
    split

    • join converts the array into a string and returns it. If there is no value in the parameter, it is converted according to, and if there is a value in the parameter, it is converted according to the value of the parameter, and multi-dimensional arrays cannot be converted.
    • The method split corresponding to join converts the string into an array, if there is no parameter, it is converted directly, if there is a parameter, it is converted according to the parameter
    var arr = [ 1 , [[ 2 ], 3 , 4 , 5 , 6 , 7 ]] var str = arr.join() console .log(str) => 1 , 2 , 3 , 4 , 5 , 6 , . 7 var STR = arr.join ( '-' ) Console .log (STR) => . 1 - 2 , . 3 , . 4 , . 5 , . 6 , . 7 //We found that this join can only split a one-dimensional array, that is, it can only split one layer.//Of course, there are corresponding attributes in the string to split the string into an array var str = '123456' var arr = str.split( ' ' ) Console .log (ARR) => [ . 1 , 2 , . 3 , . 4 , . 5 , . 6 ] copy the code
  • push
    pop
    unshift
    shift

    • push pushes one item to multiple items from the end of the array, and when the return value is returned, the length of the pushed array changes to the original array. If the push is not an array but other types, there is length. Add one bit to the length, if not, it will be increased by 0.
    • pop deletes an item from the end of the array, and the return value is the deleted item to change the original array
    • unshift adds one or more items from the starting position of the array, and returns the length of the increased array to change the original array
    • shift deletes an item from the beginning of the array, the return value is which item was deleted to change the original array
    //push return value => increase the length of the array //pop return value => deleted item //unshift return value => increase the length of the array //shift return value => deleted item var arr = [ 1 , 2 , 3 , 4 ] console .log(arr.push( 10 )) => 5 => Increase the length of the array console .log(arr) => [ 1 , 2 , 3 , 4 , 10 ] console .log( arr.pop ()) => 10 => remove items Console .log (ARR) => [ . 1 , 2 , . 3 , . 4 ] console .log(arr.unshift( 10 )) => 5 => increase the length of the array console .log(arr) => [ 10 , 1 , 2 , 3 , 4 ] console .log(arr.shift()) => 10 => remove items Console .log (ARR) => [ . 1 , 2 , . 3 , . 4 ] copy the code
  • reverse
    sort

    • The reverse array reverse method changes the original array and reverses the order of the array back to the original array and changes
    • sort changes the original array, according to the callback function, the return sorting order is sorted, and the original array is returned. If the callback function is not passed, it will be sorted according to the asii code, and the comparison is bit by bit from left to right.
    • Based on the in-situ algorithm, the algorithm of each browser is different
    • If it is less than 0, it will be placed on the left, if it is greater than 0, it will be placed on the right, if it is 0, it will not move.
    //reverse return value => original array after reverse order //sort return value => original array after sort var arr = [ 1 , 2 , 3 , 4 ] console .log(arr,arr.reverse() === ARR) //to true Console .log (ARR, arr.sort () === ARR) //to true copy the code
  • concat

    • Array splicing method concat array splicing method If an array is passed in, it will be spliced to one dimension, if it is a parameter, it will be spliced directly after the array, and a new array will be returned.
    //concat return value => concatenated array var arr = [ 1 , 2 , 3 ] console .log(arr,arr.concat( 1 , 2 )) => [ 1 , 2 , 3 ] [ 1 , 2 , 3 , 1 , 2 ] console .log(arr,arr.concat([ 1 , 2 ])) => [ 1 , 2 , 3 ] [ 1 , 2 , 3 , 1 , 2 ] console .log(arr,arr.concat([[ 1 ],[ 2 ]])) => [ 1 , 2 , 3 ] [ 1 , 2 , 3 ,[ 1 ],[ 2 ]] //concat cannot be removed Multidimensional arrays //We are now often used... operator to concatenate arrays console .log(arr,[...arr, 1 , 2 ]) => [ 1 , 2 , 3 ] [ 1 , 2 , 3 , 1 , 2 ] Copy code
  • slice

    • Array cutting method slice returns the sliced array without changing the original array. If you pass a negative number, length + parameter is taken, and the first parameter must be less than the second parameter, the first parameter is start and the second parameter is end
    //[) left closed and right open start end (cannot swap positions) //slice return value sliced array var arr = [ 1 , 2 , 3 , 4 , 5 ] console .log(arr,arr.slice( 2 ) ) //[1, 2, 3, 4, 5] ,[3,4,5] console .log(arr, arr.slice( 3 , 4 )) //[1, 2, 3, 4, 5] [4, 5] console .log(arr, arr.slice( 4 , 2 )) //[1, 2, 3, 4, 5] [] console .log(arr, arr.slice(- 3 , -1 )) //[1, 2, 3, 4, 5] [3, 4] //You can convert an array-like array to an array var str = 'dshakhjdskah' console .log( Array .prototype.slice.call(str)); //["d", "s", "h", "a", "k", "h", " j", "d", "s", "k", "a", "h"] function fn () { console .log( Array .prototype.slice.call( arguments )); } Fn ( . 1 , 2 , . 3 , . 4 , . 5 , . 6 , . 7 ) copy the code
  • splice

    • Array addition, deletion and modification method splice cannot use negative numbers as parameters. The first parameter is start, the second parameter is count, and the third parameter is the number.
    • If only one parameter is passed, it is a cut array, and the cut return value is the cut array from the number of subscripts.
    • If two parameters are passed in, it will be cut from the subscript of the cutting array, how many bits are cut in total, how many bits are cut in the second parameter, and the cut array is the returned value.
    • If three or more than three are passed in, it is, start cutting from the subscript, how many bits are cut in total, and insert the third and subsequent parameters from the subscript to the cut array when the return value is returned
    //splice modifies the original array //splice can pass a negative number in the first parameter //splice passes an invalid value in the second parameter, and a negative number returns [] an empty array //splice returns the value of a parameter to delete the original array from the passed index And return the new array to delete to the end [) Left closed and right open //The return value of the two parameters of splice Delete the original array from the passed index and return the new array The second parameter is the length //The return value of more than two parameters of splice Insert the value after the second parameter in the original array at the passed index position var arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 ] //console.log(arr, arr.splice(1)) ; //console.log(arr, arr.splice(1, 2)); //console.log(arr, arr.splice(-3, -1)) console .log(arr, arr.splice( 0 , 0 , 6 , 6 ,6 , 6 )) to copy the code
  • indexOf
    lastIndexOf

    //indexOf return value. If there is this value in the array, it is the index from the left to the first. If not, it is -1 var arr = [ 1 , 2 , 3 , 4 , 5 ] console .log(arr .indexOf( 1 )) //=> 0 //The return value of lastIndexOf If there is this value in the array, it is the index from the right to the first. If not, it is -1 var arr = [ 1 , 2 , 3 , 4 , 5 , 1 ] console .log(arr.lastIndexOf( 1 )) //=> 5 //includes returns true if there is this value in the array, false if not var arr = [ 1 ,2 , 3 , 4 , 5 , 1 ] console .log(arr.includes( 1 )) //=> true ////////////// The difference between includes and indexOf includes indexOf returns a Boolean value or returns the index - 1 includes can find NaN indexOf can not query NaN copy the code
  • find
    findIndex

    //find returns undefined if the matched item in the return value array is not found var arr = [ 1 , 2 , 3 , 4 , 5 ] var item = arr.find( function ( item ) { //5 return item > 4 }) If you can't find it, return undefined //find returns -1 if the matching item in the return value array is not found var item = arr.findIndex( function ( item ) { //4 return item> 5 }) Copy code
  • Array.of
    Array.form
    Array
    fill

    • Array and new Array create the same array. If the parameter has only one digit and is a number type, how many digits are created, and the value of the array is empty
    • Array.of is different from Array to create an array. Array.of creates an array based on parameters. As long as one parameter is a number, it will only create one.
    • Array.from generates an array from an iterable object
    • Array filling method fill
      • Left closed, right open () The parameter is the filled value value The second parameter is the start position of the filling, and the third parameter is the end position of the filling. Change the original array
    //Array.of creates a new array Array .of( 5 ) => [ 5 ] //Array.from turns the pseudo array into a true array var str = 'dsadada' var arr = Array .from(str) => [ " d" , "s" , "a" , "d" , "a" , "d" , "a" ] //Array creates a new array var arr = Array ( 5 ) => [empty* 5 ] //fill Fill the array var arr = Array ( 5 ).fill( 0 ) => [ 0, 0 , 0 , 0 , 0 ] copy the code
  • Object.keys
    Object.values
    Object.entries
    Array.prototype.keys
    Array.prototype.values
    Array.prototype.entries

    • arr.keys() The return value is the iterator object value is the key value
    • arr.values() The return value is the value of the iterator object
    • arr.entries() The return value is the iterator object value is the key value value
    //Object.keys return value is an array of key values in the object var obj = { x : 1 , a : 2 , b : 3 , d : 4 } var keys = Object .keys(obj) //['x ','a','b','d'] //Object.values returns an array of value in the value object var obj = { x : 1 , a : 2 , b : 3 , d : 4 } var keys = Object .values(obj) //[1, 2, 3, 4] //Object.entries returns an array of [key,value] in the value object var obj = { x : 1 , a : 2 , b : 3 , d : 4 } var keys = Object .entries(obj) //) ["x", 1] ["a", 2] ["b", 3] ["d", 4] Copy code
  • forEach
    map
    filter
    some
    every

    • Their parameters are the same. The first parameter is the callback function, the second parameter is the this point, the callback function has three parameters, the first parameter is this item, the second parameter is the index, and the third parameter is the original array.
    • Do not traverse sparse arrays
    //forEach map filter some every These function parameters are the same. The first parameter is the callBack parameter item (current item) index (current index) array (convenience array) The second parameter is this point to meet sparse array Which item of the sparse array will not be traversed //forEach is pure traversal and has no return value even if return does not return a value var arr = [ 1 , 2 , 3 , 4 ] var obj = {} arr.forEach( function ( item,index,array ) { this [ 'value' +index] = item console .log(item,index,array) },obj) //The map mapping function is mapped to the original array to generate a new array with a return value var arr = [ 1 , 2 , ,,,, 3 , 4 ] var newArr = arr.map( function ( item ) { return item * 99 }) console .log(newArr) //The filter filter function filters out items matching its own conditions to form an array var arr = [ 1 , 2 , 3 , 4 ] var newArr = arr.filter( item => { return item> 3 }) console .log(newArr) //If an item in some array matches the condition, it is true var arr = [ 1 , 2 , 3 , 4 ] var flag = arr.some( item => { return item> 3 }) console .log(flag) //every item in the every array matches the condition is true var arr = [ 1 , 2 , 3 , 4 ] var flag = arr.every( item => { return item> 3 }) console .log(flag) Copy code
  • reduce
    reduceRight

    • Their parameters are, the first parameter is the callback function, the second parameter is the value of the first induction, and the third parameter is this point
    • reduceRight is the same, reverse reduce,
    var arr = [ 1 , 2 , 3 , 4 , 5 , 6 ] var res = arr.reduce( function ( prev,item,index,array ) { return prev + item }, 0 ) Copy code
  • flat
    flatMap

    • flat Flatten the array. If the parameter is not passed, it will be flattened by one layer. If you want to flatten it deeply, pass Infinity
    • flatMap is flat plus a map, that is to say, flat is flattened and mapped according to each parameter, but its flat depth is 1.
      • The detailed map usage method is consistent with Array.prototype.map
    //How to use var arr1 = [ 1 , 2 , [ 3 , 4 ]]; arr1.flat(); //[1, 2, 3, 4] //Using Infinity, nested arrays of any depth can be expanded var arr = [ 1 , 2 , [ 3 , 4 , [ 5 , 6 , [ 7 , 8 , [ 9 , 10 ]]]]]; arr.flat( Infinity ); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] //How to use flatMap arr1.flatMap( x => [x * 2 ]); //[2,. 4,. 6,. 8] arr1.flatMap ( X => [[X * 2 ]]); //[[2], [. 4], [. 6], [. 8]] duplicated code
  • copyWithin

    • Shallow copy a part of the array to another position in the array, this method will not change the length of the array
    • The method has three parameters
      • The first parameter is the target location that target is copied to, it is required, if the value is negative, take this.length+target, the other two parameters are the same
      • The second parameter is the starting position of the start copy element, the default value is 0
      • The third parameter is the target position of the end copy element, the default value is this.length
    • Parameter must be an integer
    //How to use [ 1 , 2 , 3 , 4 , 5 ].copyWithin(- 2 ) //[1, 2, 3, 1, 2] [ 1 , 2 , 3 , 4 , 5 ].copyWithin( 0 , 3 ) //[4, 5, 3, 4, 5] [ 1 , 2 , 3 , 4 , 5 ].copyWithin( 0 , 3 , 4 ) //[4, 2, 3, 4, 5] [ . 1 , 2 , . 3 , . 4 , . 5 ] .copyWithin (- 2 , - . 3 , - . 1 ) //[. 1, 2,. 3,. 3,. 4] copy the code
  • Array.isArray

    • Check whether the passed parameter is an array
    • This method is better than instanceof because it can detect iframes
    //When we checked, we found a fact that Array.prototype is true Array .isArray( Array .prototype); //false //When we read MDN, we found that he used Object.prototy.toString.call to Analyzing the array copy the code

Foresee the next episode, please see the next chapter, the next chapter implements each method