When attempting to create a static array in JavaScript:
let arr = ['a':'a1','b':'b2','c':'c3'] //results in an error
When attempting to create a static array in PHP:
$arr = ['a'=>'a1','b'=>'b2','c'=>'c3'] //works fine
Why is it that objects can be created using {} but arrays with [] cannot have custom keys?
I'm not comparing JavaScript and PHP, just wondering WHY? Why are only Objects allowed custom keys and not Arrays?
Utilizing the inherent Array type in JavaScript, it seems that achieving this can be closest by using Object.assign to duplicate named properties from an object to an Array object. However, there is uncertainty if this approach will yield the expected results.
const a = Object.assign([1,2,3], {a:4, b:5, c:6});
This method works because an array functions as an object of a distinct kind, equipped with specific Array.prototype functionalities for managing its numerically indexed elements.
If the intention was to iterate over non-numeric named properties using operations like .map or .forEach, it won't succeed. These methods are tailored for working solely with numerically indexed array items. Trying them with the aforementioned array yields:
a.forEach(x=> console.log(x));
// output:
// => 1
// => 2
// => 3
The properties a/b/c aren't displayed.
A more effective solution, likely aligning with your intentions, involves creating a custom "class," such as demonstrated below:
function NamedArray(init) {
Object.assign(this, init);
}
NamedArray.prototype.forEach = function(callback) {
const keys = Object.entries(this);
keys.forEach(([key, value],array)=> callback(value, key, array));
}
const arr = new NamedArray({a:1,b:2,c:3});
arr.forEach((value,key)=> {
console.log(key, value);
})You can define all necessary class methods using this structure.
Note: There is also ES6 syntax available for generating these classes, which streamlines the creation of objects featuring numerous prototype methods and properties.
The issue you're facing stems from not utilizing {}, but rather []. In programming, [] represents arrays, which are structured lists of elements, while {} denotes objects that can encapsulate various data types ranging from numbers to functions.
Currently, I am delving into Babel in order to gain a deeper understanding of its functionality. To facilitate this process, I have developed a basic API using Node.js and TypeScript. Upon transpiling the code and initiating the server, everything operates ...
My question relates to having 2 specific components: Firstly, there is a component called SearchResultVue.vue. The structure of this component is as follows : <template> ... <span class="pull-right" v-show="totalall>8"> ...
When I'm using window.location.reload() in my onClick() function, it's taking too long to reload. I tried modifying the reload call to window.location.reload(true) to prevent caching, but it's still slow. The issue seems to be with location. ...
I am currently working on a project that involves implementing pagination using the NextJS 13 server component without relying on the use client. The goal is to ensure that when a button is clicked, new entries are added to the screen in a sequential order ...
This is my initial experience with Vue. I am attempting to assemble a slideshow using an array of images. I have successfully managed to disable the "previous" button when the user reaches the beginning of the slideshow, but I am encountering difficulties ...
I am working on dynamically opening a page using Ajax to avoid refreshing the browser. The page opens and runs scripts on the destination page, but before running the script, I need to retrieve parameters similar to request.querystring in JavaScript. Belo ...
Is there a way to properly cancel an $https request in Angular when a new request is triggered? Despite using allMarkersRequest.abort(), the pending request still shows up in Chrome's dev tool. What am I missing? In the code snippet below, allMarkers ...
Having some issues using ES6 Modules with Angular2 in an app served by Node.js and Express.js. When attempting to load the Angular2/ES6 app in browser, encountered this error message in the FireFox console: The stylesheet http://localhost:8080/boot.css w ...
Although it may seem simple to assign values to select elements, I'm puzzled as to why the code below is setting the values to null instead of the correct ones for "form-type" and "genre". All other fields are being set correctly. It's worth not ...
My current struggle involves using iScroll in my web project. The goal is to populate a list with articles and slide in a div over the list to display the selected article. While the basic functionality is in place, I face an issue where scrolling through ...
After developing a game using plain javascript and HTML along with a few JS libraries, I find myself inquiring about the process of integrating this game into my ReactJS website. Typically, the game is initiated by opening the index.html file located with ...
Is there a way to adjust the width of the bars in a Google chart column? I attempted to set 'bar: { groupWidth: "20%" }' but it had no effect on the chart. https://i.sstatic.net/jM3o0.png I really want to make the bars thinner. Below ...
Currently in my React project, I am utilizing TypeScript along with PropTypes to ensure type checking and validation of props. It feels redundant to write types for both TypeScript and PropTypes, especially when defining components like ListingsList: inte ...
I'm exploring different ways to manage application state within Angular 18 using its built-in features. Would it be effective to start with a simple service that utilizes dependency injection (DI)? As someone new to Angular 18, I'm a bit confuse ...
Below is the JavaScript code that is not functioning: $('#change-priority-modal').find('.btn-primary').unbind().on("click", function () { //my_func_body } Interestingly, the code works perfectly fine in the developer console. I would ...
Utilizing Vuex in my app is integral for executing asynchronous tasks, such as logging a user into the application. Upon successful login and execution of axios.then(), I aim to notify the component from which I invoked this.$store.dispatch('login&apo ...
I found myself puzzled while reading an article on this particular website (pitfall #5): My query is: Does this situation resemble having two variables with the same name in plain JavaScript, where one is locally defined (e.g. within a nested function ...
I am just starting to work with NGX-datatable and I need to populate my data table in my Ionic app with data from Firebase. Here is the format of the JSON returned from Firebase: If I choose not to use the User_id as a column, how can I access the User_id ...
Is there a way to use JQuery validator to validate an entire form except for a specific input? Here is an example code snippet showing how this can be done: jQuery.validator.setDefaults({ debug: true, success: "valid" }); ...
Currently, I'm working on developing an eCommerce Shopping Site using Laravel 5.0 for my final year project. Although there is still a long way to go, I have made progress by creating a product show page. Here is a snippet of my controller: pub ...