Common methods in js array

Methods of manipulating arrays in js

Two ways to create arrays

  1. var arr=[ ];
  2. var arr=new Array();

1 . Adding elements to an array

Both methods of adding elements will return the array length after the method is executed
>Will change the original array<

(1) unshift adds an element to the front of the array

	let arr = [1, 2, 3, 4];
    arr.unshift('Diao Mao');
    console.log(arr);  // ===>["hair", 1, 2, 3, 4]

(2) push adds an element to the end of the array

	let arr = [1, 2, 3, 4];
    arr.push('Diao Mao');
    console.log(arr);  // ==>[1, 2, 3, 4, "hair"]

2. Delete the elements in the array

The return values of both methods are deleted elements
>Will change the original array<

(3) shift deletes the first element in the array

    let arr = [1, 2, 3, 4];
    arr.unshift();
    console.log(arr);  //===>[2, 3, 4]

(4) pop deletes the last element in the array

    let arr = [1, 2, 3, 4];
    arr.pop();
    console.log(arr);  //===>[1,2, 3]

3. Splicing, connecting and reversing

(5) concat splices multiple arrays

The return value is the array after splicing
>The original array will not be changed<

    let arr1 = [1, 2, 3, 4];
    let arr2 = [5, 6, 7];
    let arr3 = [8, 9];
    // console.log(arr.shift());  //===>[1, 2, 3, 4]
    console.log(arr1.concat(arr2, arr3));
     // ==>[1, 2, 3, 4, 5, 6, 7, 8, 9]
    
    console.log(arr2.concat(arr1, arr3));
     // ==>[5, 6, 7, 1, 2, 3, 4, 8, 9]

(6) join joins the elements inside the array

The return value is an array of completed connections
>The original array will not be changed<

	let arr = [1, 2, 3, 4];
    let newArr = arr.join('=Diao Mao=>');  
    console.log(newArr);   //===>1 = hair picking = > 2 = hair picking = > 3 = hair picking = > 4

(7) reverse invert array

The return value is the inverted array
>Will change the original array<

    let arr = [1, 2, 3, 4];
    arr.reverse();
    console.log(arr);  //==>[4, 3, 2, 1]

Higher order function method map mapping and filter filter

(8) map mapping

The return value is the processed array
>The original array will not be changed<
Syntax:
var received array = target array map ( function (item,index,array){
It can be used to call the item index index in the array. Array is the array itself
It can operate all elements of the array uniformly
})

	 //Original object array:
	 let arr = [{
        name: 'Diao Mao 1',
        age: 23,
        sex: 'unknown'
    }, {
        name: 'Diao Mao 2',
        age: 25,
        sex: 'male'
    }, {
        name: 'Diao Mao 3',
        age: 32,
        sex: 'female'
    }];

	//Use map mapping to get some attributes in the original array object
    let newArr = arr.map(function (item) {
        return {
            name: item.name,
            age: item.age
        }
    })

    console.log(newArr);   //Get the attribute and value of name and age in arr

(9) Filter filter

The return value is the processed array
>The original array will not be changed<
Syntax: let received array = target array filter ( function (item,index,array){
It can be used to call the item index index in the array. Array is the array itself
It can uniformly determine the conditions of all elements of the array
})

	let arr = [1, 2, 3, 4];
    let newArr=arr.filter(function (item) {
        return item > 2;
    });
    console.log(newArr);  //====>  [3, 4]

indexOf and splice

(10) indexOf determines whether there is an item to find

Return value: if the corresponding element is found, the return value is the element position specified in the array [return the first in multiple times]. If it is not found, the return value is - 1
>The original array will not be changed<

	//Use indexOf for array de duplication
    let arr = [1, 2, 1, 2, 3, 4, 5, 6, 6, 0];
    let newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);  //===>[1, 2, 3, 4, 5, 6, 0]

(11) The splice method adds / removes items to / from the array

Return value: returns the deleted item
>Will change the original array<
Syntax: array splice(index(1),howmany(2),item1,…,itemX(3))
(1) Required: specify the location of the item to be added / deleted. Use a negative number to specify the location from the end of the array
(2) Required. Number of items to delete. If set to 0, the item is not deleted.
(3) Optional. Adds a new item to the array.

//Add the item hair to the second position of the element
    let arr=[1,2,3,4,5,6];
    arr.splice(2,0,'Diao Mao');
    //  console. Log (arr.splice (2,0, 'hair'); Return value []
    console.log(arr);   //===>[1, 2, "hair", 3, 4, 5, 6]
    
//Delete 3 backward from the second position of the element
   let arr=[1,2,3,4,5,6];
    arr.splice(2,3);
    // console.log(arr.splice(2,3)) return value [6]
    console.log(arr);   //===> [1, 2, 6]
    
//Starting from the second position of the array, delete two backward and replace with hair
    let arr=[1,2,3,4,5,6];
    arr.splice(2,2,'Diao Mao');
    //console.log(arr.splice(2,2, 'hair picking')) return value ["hair picking", 5]
    console.log(arr);   //===>[1, 2, "hair", 5, 6]

Keywords: Javascript

Added by renojim on Sun, 30 Jan 2022 00:00:28 +0200