By Dmitri Pavlutin

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom. In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

Array.map () is a very useful mapping function: it takes an array and a mapping function, and returns a new mapping array.

However, there is an alternative to array.map() : array.flatmap () (available as of ES2019). This method gives us the ability to map, but also to delete or even add new items to the generated mapping array.

1. Smarter mapper

Given an array of numbers, how do we create a new array that doubles each number?

Using the array.map() function is a good way to do this.

const numbers = [0, 3, 6];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // logs [0, 6, 12]
Copy the code

Address: jsfiddle.net/dmitri_pavl…

Numbers. Map (number => 2 * number) maps an array of numbers to a new array where each number is doubled.

Array.map () works well in cases where one-to-one mapping is required, that is, the mapped array has the same number of items as the original array.

But what if we need to double the number of an array and jump to 0 at the same time?

It is not possible to use array.map() directly because this method always creates a mapped array with the same number of items as the original array. But we can use a combination of array.map() and array.filter().

const numbers = [0, 3, 6]; const doubled = numbers .filter(n => n ! == 0) .map(n => n * 2); console.log(doubled); // logs [6, 12]Copy the code

Example address: jsfiddle.net/dmitri_pavl…

Array.map () and array.filter() can solve the problem, but is there a shorter way?

Must drop. Using the array.flatmap () method, a single method is called to perform the mapping and delete the item.

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]
Copy the code

Example address: jsfiddle.net/dmitri_pavl…

By using just numbers.flatmap (), you can map one array to another, but you can also skip elements from the map.

Next, let’s look at how array.flatmap () works in more detail.

2. array.flatMap()

The array.flatmap () function takes a callback function as an argument and returns a new mapped array

const mappedArray = array.flatMap((item, index, origArray) => {
  // ...
  return [value1, value2, ..., valueN];
}[, thisArg]);
Copy the code

The callback function is called on each iteAM in the original array and takes three arguments: the current item, the index, and the original array. The array returned by the callback function is then flattened by 1 layer, and the resulting items are added to the mapped array.

In addition, the method accepts a second optional argument that represents the this value inside the callback.

The easiest way to use array.flatmap() is to flatten the array containing the items

const arrays = [[2, 4], [6]];
const flatten = arrays.flatMap(item => item);
console.log(flatten); // logs [2, 4, 6]
Copy the code

Example address: jsfiddle.net/dmitri_pavl…

But array.flatmap () can do more than just plain flatting. By controlling the number of array items returned from the callback:

  • Removes the item from the result array by returning an empty array
  • By returning an array with a new value[newValue]To modify the terms of the mapping
  • Add a new item by returning an array of multiple values:[newValue1, newValue2, ...]

For example, as you saw in the previous section, you can create a new array by doubling the items, but also removing the 0’s.

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]
Copy the code

Now, let’s see how it works.

If the current entry is 0, the callback returns an empty array []. This means that when flattened, the empty array [] provides no value.

If the current iteration item is non-zero, return [2 * number]. When the [2 * number] array is flattened, only 2 * numbers are added to the resulting array.

You can also use array.flatmap () to increase the number of items in the mapped array.

For example, the following code snippet maps an array of numbers to a new array by adding double and triple numbers:

const numbers = [1, 4];
const trippled = numbers.flatMap(number => {
  return [number, 2 * number, 3 * number];
});
console.log(trippled);
// logs [1, 2, 3, 4, 8, 12]
Copy the code

Example address: jsfiddle.net/dmitri_pavl…

3:

If you want to map an array to a new array while controlling how many items you want to add to the new array, the array.flatmap () method is a good way to do this.

The array.flatmap (callback) callback is called with three arguments: the current iteration’s item, index, and original array. The array returned from the callback function is then flattened at 1 level, and the resulting items are inserted into the resulting mapping array.

~ finish, I am brush bowl wisdom, the New Year we scrub together ！！！！！！

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dmitripavltin.com/javascrit-a…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.