Extension of Arrays

Expansion operator

Array.from()

Array.of()

find(),findIndex()

fill()

entries(),keys(),values()

includes()

flat()

  • Expansion operator

    console.log(... [1, 2, 3]) // 1 2 3 console.log(1, ... [2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]
  • Array.from()

The Array.from method is used to convert two types of objects into true arrays: Array-like objects and iterable objects (including ES6’s new data structures Set and Map).

function foo() {
  var args = Array.from(arguments);
  // ...
}
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
  • Array.of()

Converts a set of values to an array

Array of (3, 11, 8) / /,11,8 [3] Array of (3) / / [3] Array) of (3). The length / / 1

The Array() method returns a different result if it has no arguments, one argument, or three arguments. Array() returns a new Array of arguments only if the number of arguments is at least two. When the argument has only one positive integer, you are actually specifying the length of the array

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
  • The find() and findIndex() methods of the array instance

The find method of an array instance, used to find the first qualified array member. Its argument is a callback function that is executed by all array members in turn until the first member that returns true is found, and then returned. If there are no qualified members, undefined is returned

[1, 4, -5, 10].find((n) => n < 0)
// -5

The findIndex method on an array instance works much like the find method, returning the position of the first qualified array member or -1 if none of the members qualify.

[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; / / 2})
  • Fill () of an array instance

The fill method fills an array with the given value

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

The fill method can also take a second and third argument that specifies where the fill starts and ends

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
  • Entries (), the keys () and values ()

They both return a traversal object, which can be used for… The of loop iterates

The only difference is that keys() traverses key names, values() traverses key values, and entries() traverses key-value pairs

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

  • Includes () for array instances

    [1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

    The second argument to this method indicates the starting position of the search, which is 0 by default. If the second argument is negative, it indicates the position of the inverse, and if it is greater than the length of the array at this point (e.g., the second argument is -4, but the length of the array is 3), it is reset to start at 0.

    [1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

    IndexOf has two disadvantages. One is that it is not semantic enough. It means to find the first occurrence position of the parameter value, so it is not intuitive to compare whether it is not equal to -1. The second is that it internally uses the strict equality operator (===), which leads to a misjudgment of NaN

    [NaN].indexOf(NaN) //-1
[NaN].includes(NaN) //true
  • Flat () for array instances

“Flat” a nested array into a one-dimensional array. This method returns a new array with no effect on the original data

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]