Here is what I attempted:
let array = Array(2).fill([]);
array[0].push(1);
Expected result: array = [[1], []]
Actual result: array = [[1], [1]]
Can someone explain why the second element is affected by the first in this scenario?
Appreciate any help in advance.
When using the .fill() method, a single empty array is passed, resulting in that same array being populated into all the elements of the filled array.
For example, if you were to execute Array(2).fill(3);, all elements would be filled with the value 3. The concept remains consistent across different scenarios.
According to the documentation,
When an object is passed as the first parameter, each element in the array will point to that object.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
An alternative method is to utilize Array.from()
const a = Array.from({length: 2}, i => [])
a[0].push(1)
console.log(a)I'm currently working on a project where I need to toggle a Vuetify badge element for each item in an array when the containing div is hovered over. While I've been able to achieve a similar effect using CSS in a v-for loop with an array list, I ...
One of my functions involves making an ajax call and receiving data in the callback. It looks something like this: function fetchData(callback) { //perform ajax if(callback) { callback(data.data); } } If I use the function like this: fetc ...
I am currently facing a challenge in TypeScript where I need to read a CSV file column by column. Here is an example of the CSV data: Prefix,Suffix Mr,Jr Mrs,Sr After researching on various Stack Overflow questions and reading through TypeScript document ...
I have been experimenting with creating a bounce effect on my custom scroller by utilizing the translate3d method for scrolling. I managed to successfully implement it, but now I am facing an issue where if you continuously scroll out of bounds (try double ...
I am having trouble locating the option from the dropdown menu that I need to select. Despite trying various methods, I have not been successful. <md-select ng-model="card.type" name="type" aria-label="Select card type" ng-change="$ctrl.onCardSelecti ...
I developed a custom module with an interface for props, extending props from a file called /types/SharedProps.d.ts. However, when I import this module into a sample project, the extended props are not included in the component. Below is how the module&apo ...
I am currently in the process of developing an angularjs application that incorporates an autocomplete feature. One key aspect of this application is that certain fields cannot be populated until an item has been selected using the autocomplete function. ...
Recently, I've been experimenting with integrating the Pickr JS library (specifically from this link: [) into my NuxtJS project. To install it, I simply use NPM: npm install @simonwep/pickr In one of my NuxtJS pages - the create.vue page to be exac ...
I currently have a search field in the header that retrieves a list of records when you type a search term and click on one of them. The search function utilizes debounceTime to reduce API requests, but I'm encountering an issue where the search doesn ...
Hello, I am currently navigating the world of Vue for the first time. My project utilizes Vue2, Nuxt, and Vuetify to bring it all together. One thing I am looking to do is create a base .vue component, as well as multiple components that inherit from this ...
Isn't it interesting that I couldn't find anything on Google, but I believe you can assist me. I have a Table containing different accounts. Upon clicking on a specific row, I want another table related to that account to slide in. This secondary ...
I have a rather complex tracking script. I want to track when a user clicks on a link, which constitutes as a conversion. The link has a JavaScript onClick event: <a href='http://convertingpage.com' onClick='trackConversion(this)'&g ...
Difficulty Integrating AngularJS, jQuery, and Adobe Panel Creation I recently updated the versions of AngularJS and jQuery for my project. Previously, I was using jquery-1.11.0.min.js and AngularJS 1.2.10. Now, I want to utilize the latest available versi ...
While working with a library called mcdropdown from http://www.givainc.com/labs/, I encountered an issue with the $.curCSS method. The latest version of jQuery no longer supports this method and suggests using $().css instead. Following the documentation, ...
In my HTML table, there are multiple rows with radio buttons representing the sexes in the 0th position of <td>. I am trying to store the values of sex (either 1 or 0) in an array. Below is a snippet for a table with 3 rows. HTML Code: <table> ...
I need help with creating an HTML table that includes a cell with a button and a dropdown generated using ngFor. How can I disable the buttons (generated via ngFor) if no value is selected from the dropdown? Here's what I have tried so far: In my App ...
Currently, I am in the midst of exploring the world of Node.js projects, delving into different bundlers and various other components. One interesting concept that came to mind is the idea of bundling Node.js into a single binary for Linux, macOS, or Windo ...
I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...
When using window.location (.assign, .replace, .href) to redirect to a product page on click, I encountered an issue where it automatically changes some of the href links. For example: instead of "previous href= 'commercial/fonts/fonts.min.css' ...
I am currently working on a new app that needs authorization headers. Normally, I follow a similar approach to what is described in this article on scotch.io. However, I have recently learned that Angular 4 now fully supports HTTP Interceptors through the ...