Chapter 4: Analyzing array reference types

Array reference type analysis

1. Common operations on arrays:

1. Increased:

Array.push() adds dataArray.unshift() pushes data in from the frontCopy the code

2. Delete the:

Array.pop() deletes dataArray.shift() deletes data from the frontArray.splice(1.1."houdunren")
Copy the code

3. The change:

Copy the code

4. Check:





Copy the code

5. Testing:

ArrayThe isArray () methodCopy the code

6. Operation:



// This refers to passing the current scope to the map callback function

Pre defaults to the first value of the array


Array.from(The array-like or iterable method creates a new, shallow-copy instance of an arrayCopy the code

7. Order:

    return a-b;
Copy the code

2. Multidimensional array manipulation

const ary = [1.2]
ary[1] = 99

Copy the code

And that’s successful, because the array is a reference, const as long as it doesn’t change the memory address and we’re operating on the value below the same memory address, so JS doesn’t get an error

3.Array.of and Array creation details

If no value is set, undefined

const ary = [""]
ary[3] = "hdcms"The value of the array1.2The value ofundefined
Copy the code
let ary = new Array(6) creates a value of length6To create an array containing the number six, we provideArrayOf methodslet ary = Array.of(6)               / / [6]
Copy the code

4. Type detection and conversion

Array. The isArray () method

5. Expand grammar and assign value to deconstruct

let ary = []
let hd = [6.7]
let aryhd = [...ary,...hd]
Copy the code

6. Dot syntax manipulates DOM elements

const divs = document.querySelectAll("div"); Get all div NodeList [...divs] and convert NodeList to an arrayCopy the code

7. Use deconstructed assignment for efficiency

Note: left and right structures must be the sameconst ary = ["hdcs"."tsy"."tly"]
const [ary1,ary2,ary3] = [...ary];

Copy the code

8. Various manipulation techniques for adding elements

const ary = [1.2.3]

(1)ary[ary.length] = "hdms"

(2) Majority group expansion syntax (3)ary.push()
Copy the code

9. Data loading and unloading and filling operations

10. Array manipulation:

Array.push(data) Pushes dataArray.pop(data) Displays dataArray.shift(data) Pops data from the frontArray.unshift(data) Pushes data from the frontArray(5).fill("data"Create an array of five data [].fill("data",begin,end)
Array.concat() joins after// A more flexible approach
// This method does not alter the original array, but creates a new copy of the array

// This method directly changes the original array, the third is the data to be added

// Find (same as string retrieval) :

Array.find(function(item) // Reference type lookup, if found, returns the value (no index is returned)Array.findIndex(function(item)) // Returns the index valueArray.indexOf()
Array.includes!!!!!!!!!! Note:const ary= [5,1,2,8,6, [1, 2]]console.log(ary.includes([1.2])); returnfalse, because the reference type compares memory addresses and the array is a special objectfalse(The difference between value type and reference type, memory space is not the same)const ary = []
console.table(ary) Empties the array:const ary = []
ary.length = 0;                 // Change the original array
ary = [];                       // Create new memory space
Copy the code

11. Array move function instance

const ary = [];

function move(array,from,to){
    if(from < 0 || to > array.length){
        console.error("Parameter error");
    const newArray = [...array];
    let item = newArray.splice(from.1)
    newArray.splice(to,0. item);return newArray;


Copy the code

12. Basic principle of array includes method

let ary = []
function includes(array,findItem){
    for(const value of array){
        if(value === findItem) return true;
    return false;
Copy the code

13. The use of array sort skills

const ary = []
let ary2 = ary.slice()
ary2 = ary2.sort(function(a,b){
    // A-b from small to large b-A from large to small
    return a-b;
Copy the code
Sort principlelet ary = []
function sort(array){
    for (const n in array) {
        for(const m in array){
            if(array[n] < array[m]){
                lettemp = array[m]; array[m] = array[n]; array[n] = temp; }}}return array;

Copy the code

14. Every () and some ()

For example, search for user input values that contain keywords

Every (): all are satisfiedfunctionConditional returntrue

const ary = [
    {name:"tzy".js:55}]let res = ary.every(function(item){
    return item >= 60;
console.log(res ? "All students passed." : "Some students failed.") some(): Returns true if any of them return truelet res = ary.some(function(item,index,arr){
    return false;

Copy the code

15. Filter Use of filter elements

Filter (): This element is taken if true is returned

let lessons = [
    {name:"PHP Learning Course".type:"php"},
    {name:"PHP Learning Course 2".type:"php"},
    {name:"Mysql Learning Course".type:"mysql"}]// Find the class whose type is PHP
let res = lessons.filter(function(item,index,arr){
    return item.type == "php";
console. The table (res) principle:let ary = []
function filter(array,item){
    let newAry = [];
    for (const value of array) {
        // If not, push the new array
        if(item.includes(value) == false) newAry.push(value)
    return  newAry;

Copy the code

Map array and reference types

When processed with map(), copies of value types are created and reference types modify the original data

let lessons = [
    {name:"PHP Learning Course".type:"php"},
    {name:"PHP Learning Course 2".type:"php"},
    {name:"Mysql Learning Course".type:"mysql"}]let data = [1.2."houdunren"],index,array){
    item = Dye - ` long${item}`;
}){ = 100;

Copy the code

17. Super easy to use reduce method detailed explanation


When no second argument is passed:

  • The first time pre is the first value of the array and item is the second value of the array
  • The second pre is the return value of the function, and item is the third value of the array

Pass the second argument:

  • Pre is the second argument, and the second is the return value of the function
1.Count the number of elements in an array using reduce:let ary = []

function itemCount(array,findItem){
    return array.reduce(function(total,item){
        total += findItem==item ? 1 : 0;
        return total;

2.Use reduce to get the maximum value in the array:let ary = []

function maxInt(ary){
    return ary.reduce(function(maxInt,item){
        returnmaxInt > item ? maxInt : item; })}console.log(maxInt(ary))

Copy the code

18. Get items in the shopping cart whose prices are in a certain range

let cart = [
    {name:"ipad".price:11000}]function getRange(number,array){
    return array.reduce(function(pre,item){
        item.price > number ? rangeAry.push( : rangeAry.push()
        returnrangeAry; }}, [])console.log(getRange(10000,cart));

Copy the code

19. Deduplicate the reduce array

let ary = []

function getRepeat(ary){
    return ary.reduce(function(pre,item){
        if(pre.includes(item) == false){
        returnpre; }}, [])console.log(getRepeat(ary));

Copy the code

20. Cool text LOGO effect element construction

let divs = document.getElementsByTagName("div") [0];
let div_content = [...divs.textContent];

function logo(){
        if(pre == index){
            (divs.innerHTML == ' ');
        let span = document.createElement("span");
        span.innerHTML = cur;
            this.className = "color"; })},0);


Copy the code