What are the new array methods in es6?

es6 array methods include: 1. Array.from(), used to convert array-like objects or traversable objects into real arrays; 2. Array.of(), used to convert a set of values, Convert to an array; 3. copyWithin(), used to copy members at the specified position to other positions within the current array; 4. fill(); 5. find(); 6. findIndex(); 7. includes() ; 8. entries(); 9. keys(); 10. values().

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Traditional Array object methods

• toSource() Returns the source code of the object.
• toString() Converts an array to a string and returns the result.
• toLocaleString() Converts the array to a local array and returns the result.
• valueOf() returns the original value of the array object

Array method

is used to combine two types of objects Convert to a real array: array-like object and iterable object (including ES6's new data structures Set and Map).

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from can also accept a second parameter, which is similar to the map method of an array. It is used to process each element and put the processed value into the returned array.

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

is used to convert a set of values ​​into an array.

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

Instance method

copyWithin ()
Within the current array, copies the members at the specified position to other positions (the original members will be overwritten), and then returns the current array.

array. copyWithin(target, start = 0, end = this.length);

• start (optional): Start reading data from this position, the default is 0. If it is a negative value, it represents the reciprocal value.
• end (optional): Stop reading data before reaching this position. The default is equal to the array length. If it is a negative value, it represents the reciprocal value.

• // 将3号位复制到0号位
  [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
  // [4, 2, 3, 4, 5]
  
  // -2相当于3号位，-1相当于4号位
  [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
  // [4, 2, 3, 4, 5]

  Copy after login

fill()
Fills an array with the given value.

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

let arr = new Array(3).fill([]);
arr[0].push(5);       // [[5], [5], [5]]

find()
is used to find out the A qualified array member. Its parameter is a callback function, and all array members execute the callback function in sequence until the first member whose return value is true is found, and then returns that member. If there are no matching members, undefined is returned.

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex()
The usage of the findIndex method is very similar to the find method, returning the position of the first array member that meets the conditions, If none of the members meet the criteria, -1 is returned.

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

includes()
Returns a Boolean value indicating whether an array contains the given value.

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

entries(), keys() and values()
ES6 provides three new methods: entries(), keys( ) and values(), used to traverse the array. They both return a traverser object, which can be traversed using a for...of loop. The only difference is that keys() traverses the key names of the array, values() traverses the key values ​​​​of the array, and the entries() method It is a traversal of key-value pairs of values.

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"

If you do not use a for...of loop, you can manually call the next method of the traverser object to traverse.

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

[Recommended learning:

]

The above is the detailed content of What are the new array methods in es6?. For more information, please follow other related articles on the PHP Chinese website!