Array related knowledge

array

1. Declaration definition array

1.1 constructor

 var arr1 = new Array();
    // Parameters can be passed in directly
    var arr2 = new Array(10, 20, 30);
    console.log(arr2);
    // When there is only one attribute, it represents the length of the array
    var arr3 = new Array(10);
    console.log(arr3);
    console.log(arr3.length);

Note: when a number is passed in, it represents the length of the array

result:

1.2 literal method

 // Literal method
    var arr0 = [];
    // Data can be passed in when defined
    var arr1 = [1, 2, 3];
    console.log(arr1);

result:

2. Array properties

2.1 length of array

Use arr.length to get the length of the array

var arr1 = [1, 2, 3];
console.log(arr1.length);

result:

2.2 subscript of array

Range of array subscripts: [0~ arr.length) or [0~arr.length-1]

Note: it starts from 0 and includes 0

2.3 accessing arrays

Method: arr [subscript]

 var arr1 = [1, 2, 3];
 console.log(arr1[0]);

result:

3. Array method

3.1 adding elements

push() tail

Is an element added at the end of the array, which will change the original array to get a new array

var arr = [1, 2, 3, 4, 5];
console.log("Original array:" + arr);
// push() method
arr.push(10);
console.log("New array:" + arr);

result:

unshift() header

Is an element added to the head of the array, which will change the original array to get a new array

var arr = [1, 2, 3, 4, 5];
console.log("Original array:" + arr);
// unshift() method
arr.unshift(10);
console.log("New array:" + arr);

result:

3.2 deleting elements

pop() tail

Deleting at the end of the array will change the original array and return a new array

 var arr = [1, 2, 3, 4, 5];
 console.log("Original array:" + arr);
 // pop() method
 arr.pop();
 console.log("New array:" + arr);

result:

shift() head

Deleting the header of the array will change the original array and return a new array

var arr = [1, 2, 3, 4, 5];
console.log("Original array:" + arr);
// shift() method
arr.shift();
console.log("New array:" + arr);

result:

3.3 combination of arrays

concat()

Merge the elements in the two arrays into a new array. After merging, the original array will not be modified.

var arr = [1, 2, 3, 4, 5];
var arr1 = [10, 11];
console.log("Original array:" + arr);
// concat() method
var newarr = arr.concat(arr1);
console.log("New array:" + newarr);

var newarr = arr.concat(arr1);

result:

var newarr = arr1.concat(arr);

result:

Note: newarr=arr1.concat(arr2); the result is composed of arr1 and arr2. arr1 comes first

newarr=arr2.concat(arr1); the result is that arr2, consisting of arr2 and arr1, comes first

3.3 get the area of the specified element

slice()

Get the element of the specified area in the array, and the original element will not be modified

Range: [start,end)

var arr = [1, 2, 3, 4, 5];
var new1 = arr.slice(0, 3);// Element with lower edge 0 but no subscript 3
console.log(new1);

result:

3.4 delete and add new elements

splice (key)

Deleting and adding a new element will modify the original element

arr.splice(start,length,Data 1, data 2...)
// Start: start position
// Length: the length to delete from start
//Data 1, data 2 add them to the start position.
newly added
var arr= [10,20,30];
arr.splice(1,0,40);
//Add 40 to the position with subscript 1, 0: do not delete the element.

result:

delete
var arr = [10, 20, 30];
console.log("Original array:" + arr);
var new1 = arr.splice(1, 2);//Delete 2 elements starting with subscript 1. Only two parameters indicate that no new elements are added.
console.log("Intercepted original array:" + arr);
console.log("New array after interception:" + new1);

result:

modify
var arr = [10, 20, 30];
console.log("Original array:" + arr);
arr.splice(1, 1, 40);//Starting with the subscript 1, delete an element. Then place 40 at the subscript 1.
console.log("Modified original array:" + arr);

result:

3.5 array splicing string

join()

The elements in the array are spliced into a new string with the incoming separator (string).

var arr = [10, 20, 30];
var str = arr.join("|");
console.log(str);

result:

3.6 inversion of array

reverse()

Inverting the array will affect the original array.

var arr = [10,20,30];
arr.reverse();
//The value of arr is: [30,20,10];

3.7 sorting of arrays

sort()

Sorting the array is equivalent to traversing each element in the array and comparing the current element with the following elements. The default comparison rule is who is older and who is behind.

var arr = [1,2,30,40,18,20];
arr.sort();
console.log(arr);

result:

Note 1: first compare the first place of the value, and the one who is older will be ranked later. If it is equal, compare the second place of the value, and the one who is older will be ranked later

The above example: compare the first place: because 2 is larger than the first 1 in 18, it ranks behind

Note 2: sorting is based on Unicode encoding, not on the size of numbers.

Custom rules

Pass in a function. The function defines two parameters. The first parameter represents the current element and the second parameter represents the next element. It is equivalent to having each element in the array execute the function once. During execution, the element will become the first parameter and the next element will pass in the second parameter.

If the return value of this function is greater than 0, it is considered that the first number is relatively large. If it is less than 0, it is considered that the second number is relatively large. The large number will be placed later.

var arr = [12,3,2];
arr.sort(function(a,b){
    return a-b;//Sort from small to large
});
//Results: [2,3,12]  
var arr = [12,3,2];
arr.sort(function(a,b){
    //Change a-b to b-a
    return b-a;//Sort from large to small
});
//Results: [12,3,2]

3.8 filter array

filter()

Filter the qualified elements in the array. A function needs to be passed in. The function will be executed once for each element. The function has three parameters

arr.filter(function(item,index,arr){
    return Conditional expression;
})

Parameter Description:

The first: item represents the element that executes the function.

Second: index indicates the subscript of the element in the array

Third: arr represents the array itself.

If the value of function return is false, it indicates that the condition is not met. If the value of return is true, it indicates that the condition is met, and the current element will be placed in a new array. After traversal, a new array will be returned, which contains all the elements that meet the condition.

//Filter elements greater than 35 and return them to the res array.
var arr = [10, 20, 30, 40, 50];
var res = arr.filter(function(item,index,arr){
    return item>35;
});

4. Array traversal

4.1 for loop

for(var i = 0;i<arr.length;i++){
    console.log(arr[i])
}

4.2 for in cycle

for(var i in arr){
     console.log(arr[i])
}

4.3 forEach cycle

arr.forEach(function(item,index){
    console.log(item)
    //console.log(arr[index])
})
   var arr = [1, 2, 3];
    arr.forEach(function(item, index) {
        console.log("arr:" + arr);
        console.log("index:" + index);
    });

result:

5. Two dimensional array

Nested data in array

var arr = [[1,2],[3,4]]
//Note that 1, 2, 3 and 4 are not elements of arr, and the elements of arr are [1, 2] [3, 4]

6. Bubble sorting

var arr = [8,6,4,1,5,2,9]
//Define rounds of comparison
for (var i = 0; i < arr.length - 1; i++) {
    //Each round allows all elements to be compared one by one.
    for (var j = 0; j < arr.length - 1 - i; j++) {
        //The adjacent elements are compared. If the left is large, the positions of the two values are exchanged.
        if (arr[j] > arr[j + 1]) {
            var tmp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = tmp;
        }
    }
}

Tags: Javascript Front-end ECMAScript

Posted on Sat, 06 Nov 2021 00:07:02 -0400 by jonskinny12