ES6 in Action: New Array.* and Array.prototype.* Methods

This article explores several new ES6 methods enhancing array manipulation, categorized as Array.* (class methods) and Array.prototype.* (instance methods). We'll examine their usage with examples and discuss polyfills for broader compatibility. es6-shim by Paul Miller offers a comprehensive solution for polyfilling these methods.

Key Concepts:

• ES6 introduces numerous array methods, including Array.from(), Array.prototype.find(), Array.prototype.findIndex(), Array.prototype.keys(), Array.prototype.values(), and Array.prototype.fill().
• Array.from() constructs a new array from array-like or iterable objects, effectively addressing common challenges with array-like structures. It's widely supported except in Internet Explorer.
• Array.prototype.find() and Array.prototype.findIndex() locate the first array element satisfying a given test function. find() returns the element itself; findIndex() returns its index. Both have good support, excluding Internet Explorer.
• Array.prototype.keys() and Array.prototype.values() generate Array Iterators providing array keys and values respectively. Array.prototype.fill() populates an array with a specified value within a given range. These methods have broad support, excluding Internet Explorer.

Array.from()

Array.from() creates an array from array-like or iterable sources. This addresses the traditional workaround: [].slice.call(arrayLike).

Syntax:

Array.from(arrayLike[, mapFn[, thisArg]])

Parameters:

• arrayLike: Array-like or iterable object.
• mapFn: Function applied to each element.
• thisArg: Context (this) for mapFn.

Example: Doubling function arguments:

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Support: Widely supported except Internet Explorer. Polyfills are available on MDN and from Mathias Bynens.

Array.prototype.find()

Array.prototype.find() returns the first element satisfying a provided test function.

Syntax:

Array.prototype.find(callback[, thisArg])

Callback parameters:

• element: Current element.
• index: Current element's index.
• array: The array.

Example: Finding the first element greater than 2:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

Support: Widely supported except Internet Explorer. A polyfill is available on MDN.

Array.prototype.findIndex()

Similar to find(), but returns the index of the first matching element, or -1 if none is found.

Example: Finding the index of the first element greater than 2:

Array.from(arrayLike[, mapFn[, thisArg]])

Support: Widely supported except Internet Explorer. A polyfill is available on MDN.

Array.prototype.keys() and Array.prototype.values()

These methods return Array Iterators for keys and values, respectively.

Examples:

function double(...args) {
  return Array.from(args, elem => elem * 2);
}

console.log(double(1, 2, 3, 4)); // Output: [2, 4, 6, 8]

Support: keys() has good support except Internet Explorer. values() may require transpilation (e.g., Babel).

Array.prototype.fill()

Array.prototype.fill() fills an array with a specified value.

Syntax:

Array.prototype.find(callback[, thisArg])

Example:

const arr = [1, 2, 3, 4];
const result = arr.find(elem => elem > 2);
console.log(result); // Output: 3

Support: Widely supported except Internet Explorer. Polyfills are available on MDN and from Addy Osmani.

Conclusion:

ES6's array methods significantly enhance JavaScript's array manipulation capabilities. While most enjoy widespread support, consider polyfills for older browsers.

Frequently Asked Questions (reformatted for clarity and conciseness):

The provided FAQ section is already quite comprehensive. To improve it, I would suggest:

1. Consolidation: Combine similar questions (e.g., those about browser compatibility).
2. Conciseness: Shorten answers while retaining essential information.
3. Code Examples: Include more concise, illustrative code snippets for each method.

Here's an example of how to restructure a few questions and answers:

Q: What are the key new ES6 array methods and how do they work?

A: ES6 introduces several powerful array methods:

• find(): Returns the first element satisfying a provided test function. arr.find(x => x > 5)
• findIndex(): Returns the index of the first matching element. arr.findIndex(x => x > 5)
• fill(): Replaces array elements with a static value within a specified range. arr.fill(0, 2, 4)
• copyWithin(): Copies a sequence of array elements to another position within the same array. arr.copyWithin(0, 3, 4)
• keys(): Returns an iterator for array keys.
• values(): Returns an iterator for array values.
• from(): Creates a new array from an array-like or iterable object.

Q: Browser Compatibility and Polyfills?

A: Most modern browsers support these methods. However, for older browsers (especially Internet Explorer), you'll need polyfills (e.g., es6-shim). MDN provides polyfills for many of these methods.

By restructuring the FAQ in this manner, you can make it more efficient and easier to understand. Remember to apply similar principles to the remaining questions and answers.

The above is the detailed content of ES6 in Action: New Array.* and Array.prototype.* Methods. For more information, please follow other related articles on the PHP Chinese website!