Array usage summary of javascript advanced programming

A reference type is a data structure used to associate data with functionality.

How to create an object:

1.new operator

var array=new Array();

2. Literal notation creation

var array=[];

Array

  1. Detecting Arrays: Detecting whether an array is a primitive type or a reference type

  2. Conversion method: Convert the array to a string or array object

  3. Stack method: last-in, first-out method of manipulating arrays

  4. Queue method: a first-in, first-out method of manipulating an array

  5. Operation method: array splicing, interception, insertion, deletion, replacement

  6. Position method: find array item, return index value

  7. Iteration methods: methods that operate on each array item

  8. Narrowing method: operate on each item of the array and construct the final return value

1 Detection array

The method of detecting arrays; the problem of the instanceof operator is that when the development environment introduces multiple frameworks and there are multiple global environments, different Array constructors will appear, and then different results will appear.
The Array.isArray() method solves this problem very well.

  • arrName instanceof Array

    var array=[1,2,3];
    console.log(array instanceof Array) //true
    
  • Array.isArray(arrName)

    console.log(Array.isArray(array)) //true
    

2 Conversion methods

  • toString(): Returns a string separated by commas

  • valueOf(): return object

  • toLocaleString(): The difference is very small. If this method is called by an array, then each item of the array will call this method

  • alert(value)==alert(value.toString())

    var array=[1,2,3];
    
    var arrayToString=array.toString();
    var arrayValueOf=array.valueOf();
    var arrayToLocalString=array.toLocaleString();
    
        console.log(arrayToString);//    1,2,3
    console.log(arrayValueOf);//[1, 2, 3]
    console.log(arrayToLocalString);//1,2,3
    

3 stack method (LIFO:last in first out)

ES array-like approach to data structure
A stack is a data structure that restricts insertion and deletion of items

  • push(): Receive any number of parameters and add them to the end of the array, and return the length of the array
  • pop(): Remove the last item from the end of the array, reduce the length of the array, and return the last item removed from the array

4 Queue method (FIFO:first in first out)

Combine push() and shift() methods to use arrays like queues
Use unshift() and pop() to simulate a queue from the opposite direction

  • shift() removes and returns the first item of the array;
  • unshift() adds any number of arguments from the front of the array and returns the length of the new array

5 How to operate

  • concat() copies the original array and connects the new array to form a new copy;

    var arr1=['q','w','e'];
    var arr2=['h','u','o'];
    document.write(arr1.concat(arr2)); //q,w,e,h,u,o
    
  • When slice() has one parameter, the copy parameter is the copy from the starting position to the end; when there are two parameters, the array item in the middle part of the two numbers is copied; if the parameter is negative, the length of the array plus the negative value is used for copying. the array item between the two parameters of ;

    var arr3=['h','e','l','l','o'];
    console.log(arr3.slice(1));//e,l,l,o
    console.log(arr3.slice(-4));//e,l,l,o
    arr3.slice(-4)===arr3.slice(1);//true
    
  • splice() has three parameters: corresponding to the starting position, the number of deleted items, and the replacement items; through the rational use of these three parameters, operations such as deletion, insertion, and replacement can be realized.

    //delete two items starting with the first item
    var splice_arr1=['h','e','l','l','o'];
       console.log(splice_arr1.splice(1,2))//Returns an array of deleted items ["e", "l"]
       //Insert three items old after the second item
       var splice_arr2=['h','e','l','l','o'];
       var removed=splice_arr2.splice(2,0,"K","K");
       console.log(splice_arr2);//["h", "e", "K", "K", "l", "l", "o"]              
       console.log(removed)//returns an empty array
       //replace
       var removed=splice_arr3.splice(2,2,"P","P");
    console.log(splice_arr3);//["h", "e", "P", "P", "o"]
    console.log(removed)//Returns the replaced value ["l", "l"]
    

6 Position Method

return index value

  • indexOf() finds from front to back

  • lastIndexOf() search from back to front

Reference video explanation: into learning

// indexOf() finds from front to back
// lastIndexOf() search from back to front
var index_arr=['h','e','l','l','o'];
var indexOf_arr=index_arr.indexOf('l');
console.log('original array:',index_arr)//original array unchanged
console.log('return value:',indexOf_arr)//The return value is the index value 2 of the first found position

var index_arr2=['h','e','l','l','o'];
var indexOf_arr2=index_arr2.lastIndexOf('l');
console.log('original array:',index_arr2)//original array unchanged
console.log('return value:',indexOf_arr2)//The return value is the index value of the first found position 3

7 Iterative methods

Takes two arguments, one is the function and the other is the scope object on which to run the function.
The first parameter function receives three parameters the value of the array item item,the location of the value idnex ,the array itself array
  • every() // returns true if it returns true

    var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
    var everyArr=numbers.every(function(it, index ,arr){
        if(it>9){
            return true;
        }
    })
    console.log(everyArr);///false
    
  • some()//If there is one that returns true, it returns true

    var someArr=numbers.some(function(it, index ,arr){
            return (it > 9) ;
    })
    console.log(someArr);///true
    
  • forEach()//No return value

    var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
    var forEachArr=numbers.forEach(function(it, index ,arr){
        var it=it*100;
        console.log(it)
    })
    //no return value
    
  • filter()//Returns an array of items that this function will return true for filtering

    var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
    var filterArr=numbers.filter(function(it, index ,arr){
        if(it>10){
            return it;
        }
    })
    console.log(filterArr);//[65, 33, 21, 23]
    //Returns a new array of return values
    
  • map()//Return the return value of each function

    var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
    var mapArray=numbers.map(function(it, index ,arr){
        var it=it*100;
        return it;
    })
    console.log(mapArray)
    //[100, 200, 300, 400, 500, 600, 700, 800, 900, 0, 900, 800, 700, 6500, 500, 400, 3300, 2100, 100, 100, 2300, 300, 400]
    //Returns a new array of return values
    

8 Shrinking methods

  • reduce()

    var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
    var allArray=numbers.reduce(function(prev,cur,index,arr){
        return (prev+cur);
    })
    console.log(allArray);//229
    
  • reduceRight()

    var numbers=[1,2,3,4,5,6,7,8,9,0,9,8,7,65,5,4,33,21,1,1,23,3,4];
    var allArrayRight=numbers.reduceRight(function(prev,cur,index,arr){
        return (prev+cur);
    })
    console.log(allArrayRight);//229
    

Summary: After this summary and practice, I feel that I should not be afraid when I encounter the operation array again in the future;
The most used method in my own work is the split() operation method of string interception. Although this method is a string method, it is very useful.
This way of summarizing, the effect is very good, but the efficiency is slightly lower, how to solve this problem, it is a problem. . .

Tags: Javascript

Posted by sureshmaharana on Mon, 14 Nov 2022 16:02:09 +1030