#javascript advanced programming (VI) collection type reference

1, Object

1. How to explicitly create an object instance
   (1) new + constructor

   let person = new People();
   person.name = "abc";
   person.age = 27;
   

   (2) Object literal

   let person = {
   	name: 'abc',
   	age: 28
   }
   

   tips:
   a. Numeric property names are automatically converted to strings
   b. When using the object literal method, the object constructor is not called

2, Array

1. Create array
   (1) Array constructor

   let colors = new Array(5) // Create an array with a length of 5. new can be omitted
   let names = new Array('Greg') // Create an array with length 1 and element Greg
   

   (2) Array literal

   let colors = ['red', 'blue', 'yellow']
   

   Similarly, Array literals do not call the Array constructor when creating an Array.

   (3) from() and of() [provided by ES6]
   from(): convert class array structure to array

   // Splitting strings into arrays
   console.log(Array(['matt']) // ['m', 'a', 'a', 't']
   
   // Collection and map types can be converted into arrays
   const m = new Map().set[1,2]
   					.set[3,4]
   console.log(Array.from(m)) // [[1,2],[3,4]]
   
   // The Array.from() method also accepts the second parameter, which is a mapping function. Each element is mapped accordingly
   const a = [1,2,3,4];
   const b = Array.from(a, x=>x**2);
   console.log(b) // [1,4,9,16]
   

   of(): used to replace the method used before ES6 to convert arguments object into array: Array.prototype.slice.call(arguments)

2. Detection array
   When there is only one web page (i.e. only one global execution context):

   a instanceof Array
   

   When there are multiple web pages, there may be multiple frames, resulting in multiple constructors in Array:

   Array.isArray(a)
   

3. iterator
   Contains three iterators:
   keys(): index iterator
   values(): array element iterator
   entries(): Index / value iterator

   const a = ['a', 'b', 'c', 'd'];
   console.log(Array.from(a.keys())); // [1,2,3,4]
   console.log(Array.from(a.values())); // ['a', 'b', 'c', 'd']
   console.log(Array.from(a.entries())); // [ [ 0, 'a' ], [ 1, 'b' ], [ 2, 'c' ], [ 3, 'd' ] ]
   

4. Filling method

   let a = [0,0,0,0,0]
   // fill(value,start,end)
   console.log(a.fill(6, 3, 4)) // [ 0, 0, 0, 6, 0 ]
   

5. Conversion method

   let a = [0,0,0,0,0];
   console.log(a.valueOf()); // [0, 0, 0, 0, 0] (original array)
   console.log(a.toString()); // 0,0,0,0 (a comma separated string)
   // join() sets the delimiter of the toString method
   console.log(a.join('\\')); // 0\0\0\0\0
   

6. Stack, queue method
   push(),pop(),shift(),unshift()

7. Sorting method
   reverse(): reverse
   sort():

   // Ascending order: left right
   console.log(a.sort((val1, val2) => (val1-val2))) // [ 0, 1, 2, 3, 4 ]
   // Descending order: right left
   console.log(a.sort((val1, val2) => (val2-val1))) // [ 4, 3, 2, 1, 0 ]
   

8. Array flattening
   concat()

   let colors = ['red', 'blue', 'yellow']
   console.log(colors.concat(['black'], 'green')); // [ 'red', 'blue', 'yellow', 'black', 'green' ]
   // Set symbol.isconcapspreable to prevent concat from flattening the array and simply connecting.
   colors[Symbol.isConcatSpreadable] = false;
   console.log(colors.concat(['black', 'pink'], 'green'));
   // output
   [
     [
       'red',
       'blue',
       'yellow',
       [Symbol(Symbol.isConcatSpreadable)]: false
     ],
     'black',
     'pink',
     'green'
   ]
   

9. slice(start, end): create an array (array slice) containing some elements of the original array
   The two indexes are left closed and right open

   let colors = ['red', 'blue', 'yellow']
   console.log(colors.slice(1,2)); // ['blue']
   

10. splice(start, length, content1, content2,...)
    (1) Delete some continuous elements: the content is empty and the length is customized

    let colors = ['red', 'blue', 'yellow']
    colors = colors.concat(['black', 'pink'], 'green')
    // concat flattened array
    console.log(colors); // [ 'red', 'blue', 'yellow', 'black', 'pink', 'green' ]
    
    let t = colors.splice(2, 2)
    // The splice function returns the deleted element
    console.log(t); // [ 'yellow', 'black' ]
    // And modify the original array
    console.log(colors); // [ 'red', 'blue', 'pink', 'green' ]
    

    (2) Replace some continuous elements: the number of content is consistent with the length

    let t = colors.splice(1,3, 'dark', 'gray', 'purple')
    // Returns the replaced value
    console.log(t); // [ 'blue', 'yellow', 'black' ]
    // Update original array
    console.log(colors); // [ 'red', 'dark', 'gray', 'purple', 'pink', 'green' ]
    

    (3) Insert some elements: length is 0

    let t = colors.splice(2, 0, 'dark', 'gray', 'purple')
    console.log(t); // []
    console.log(colors); // ['red', 'blue', 'dark',   'gray','purple', 'yellow', 'black',  'pink',  'green']
    
    

11. lookup
    (1) Strictly equal (same value, same type)
    indexOf(element, [start]): search for element from left to right from start, and return the index value of element. If there is no element, return - 1.
    lastIndexOf(element, [start]): the same as above, and the search direction is from right to left.
    includes(element, [start]): a new method in ES6, the same as indexOf method.
    (2) By assertion function
    find(element, index, array): element can restrict the elements screened. Index is the index of the element to be searched and returns the first matching element
    findIndex(element, index, array): returns the first matching index

    const people = [
        {
            name: 'Matt',
            age: 27
        },
        {
            name: 'Jack',
            age: 30
        },
        {
            name: 'Tom',
            age: 25
        },
    ]
    console.log(people.find((el, index, array) =>el.age< 30)) // { name: 'Matt', age: 27 }
    

12. Iterative method

    every(function): if each item runs, the function returns true, and returns true

    some(function): returns true if a running function returns true

    filter(function): filter out the items that meet the operation of the function to form a new array

    For each (function): each item is processed in a functional manner, with no return value

    map(function): process each item in a functional way and return an array of processing results.

    console.log(people.every((p)=>p.age < 31)); // true
    console.log(people.some((p)=>p.name === 'Matt')); // true
    console.log(people.filter((p)=>{return p.age < 29})); // [ { name: 'Matt', age: 27 }, { name: 'Tom', age: 25 } ]
    
    people.forEach((p)=>{p.age ++}) 
    console.log(people); 
    // output
    [
      { name: 'Matt', age: 28 },
      { name: 'Jack', age: 31 },
      { name: 'Tom', age: 26 }
    ]
    
    console.log(people.map((p)=>{p.age++; return p}));
    // output
    [
      { name: 'Matt', age: 29 },
      { name: 'Jack', age: 32 },
      { name: 'Tom', age: 27 }
    ]
    
    

13. Merging method

    reduce(function(pre, cur, [index, array]),[startVal]): starting from the index value (0,1), each pair of elements needs to set the return value.

    The initial value can be set, and the initial wheel changes to function (initial value, arr[0])

const people = [
    {
        name: 'Matt',
        age: 27
    },
    {
        name: 'Jack',
        age: 30
    },
    {
        name: 'Tom',
        age: 25
    },
]
console.log(people.reduce((prev, cur, index, arr)=>
{
    console.log(prev.age, cur.age);
    return {name: 'xxx',
            age: prev.age+cur.age,
    }}
)) // { name: 'xxx', age: 82 }