Exploring 2D Arrays in ECMAScript 6

Question

Exploring 2D Arrays in ECMAScript 6

In my quest to avoid using traditional for loops, I am searching for a method to generate and populate 2D arrays using ES6. The goal is to have an array filled with all 0s. While I've attempted various strategies, the following code demonstrates one approach:

var [r, c] = [5, 5]; 
var m = Array(r).fill(Array(c).fill(0));

Although this code works, it results in multiple instances of the same array being created. Even attempting to use slice() doesn't resolve this issue:

Array(r).fill(Array(c).fill(0).slice());

.

Another strategy involved creating empty arrays and then iterating through them. However, I encountered a new challenge - you cannot use forEach() or map() on an empty array, and looping efficiently through a populated array proved to be problematic.

Am I overlooking something here? Are numerous for loops truly the most effective solution? This approach seems convoluted and unnecessarily lengthy. Any assistance would be greatly appreciated.

javascript arrays ecmascript-6

Answer 1

Answer №1

This method did the trick for me:

let [x, y] = [8, 8]; 
let grid = Array(x).fill().map(()=>Array(y).fill(0));

The key is to populate it with a temporary value in order to iterate through it smoothly.

Answer 2

This method did the trick for me:

let [x, y] = [8, 8]; 
let grid = Array(x).fill().map(()=>Array(y).fill(0));

The key is to populate it with a temporary value in order to iterate through it smoothly.

Answer 3

Answer №2

To generate arrays filled with zeros, you have a couple of options. One way is to use the Array.from method along with the fill method inside a callback function.

const arr = Array.from(Array(2), () => Array(5).fill(0))
console.log(arr)

Another approach is to create an array that specifies the number of elements in each sub-array, and then use the map and fill methods accordingly.

const arr = [5, 5].map(e => Array(e).fill(0))
console.log(arr)

Answer 4

To generate arrays filled with zeros, you have a couple of options. One way is to use the Array.from method along with the fill method inside a callback function.

const arr = Array.from(Array(2), () => Array(5).fill(0))
console.log(arr)

Another approach is to create an array that specifies the number of elements in each sub-array, and then use the map and fill methods accordingly.

const arr = [5, 5].map(e => Array(e).fill(0))
console.log(arr)

Answer 5

Answer №3

If you require a similar outcome with undefined for each value, this method is also effective.

const x = 100;
const y = 100;
const grid = [...new Array(x)].map(() => [...new Array(y)]);

To populate the array, simply map the inner value. This will create an array filled with 0 for each value.

const x = 100;
const y = 100;
const grid = [...new Array(10)].map(() => [...new Array(10)].map(() => 0));

Answer 6

If you require a similar outcome with undefined for each value, this method is also effective.

const x = 100;
const y = 100;
const grid = [...new Array(x)].map(() => [...new Array(y)]);

To populate the array, simply map the inner value. This will create an array filled with 0 for each value.

const x = 100;
const y = 100;
const grid = [...new Array(10)].map(() => [...new Array(10)].map(() => 0));

Answer 7

Answer №4

function createArrayOfArrays(n) {
  return Array.from(Array(n), () => Array(5).fill(0));
}

const newArray = createArrayOfArrays(3);

console.log(newArray);

Answer 8

function createArrayOfArrays(n) {
  return Array.from(Array(n), () => Array(5).fill(0));
}

const newArray = createArrayOfArrays(3);

console.log(newArray);

Exploring 2D Arrays in ECMAScript 6

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporate the operating hours of a Business

Does a single variable contain the number of characters in a stored procedure?

The world of coding comes alive with Quartz Composer JavaScript

Challenges regarding OAuth2 and the angular-auth2-oidc Library - Utilizing PKCE Code Flow

Determine the number of strings that start with the letter "x" and save them in an

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

Display a linear list organized in a tree format, showcasing instances where children have multiple parents

Steps for eliminating a button when the API no longer provides any information

The React router Link does not update the route after an if statement is executed

Locating the highest point in an extensive dataset using Python

Implementing OutlinePass from Three.js in React

Using 'require' within a nested directive that relies on the parent directive in AngularJS

Request with an HTTP header for authentication

Prevent the dropdown from closing after clicking on a href link

Tips for including images while drafting an article

Getting data from a xhttp.send() request in a Node.js Express server

Could the issue at hand possibly stem from the fact that the router isn't fully operational? It appears that router.query

How to retrieve the content/value from a textfield and checkbox using HTML

Stop auto-refreshing when a popup is active

Making Jquery data tables editable for cells