Are keys and values the same in ES6 set? - javascript

I was just going through the MDN documentation for set , and how it works , coming to the part of how to iterate over a set , i saw the following examples:
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}
for (let item of mySet) console.log(item);
And
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}
for (let item of mySet.values()) console.log(item);
And
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}
//(key and value are the same here)
for (let [key, value] of mySet.entries()) console.log(key);
Just to confirm , does this mean that when using set the keys and values are the same ?

The entries() method returns a new Iterator object that contains an array of [value, value] for each element in the Set object, in insertion order [...].
MDN docs
So no, Sets don't have keys at all, however .entries() lets you believe so for having consistency between Maps and Sets.

Related

Key inside map() of an object not working [duplicate]

This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 4 months ago.
I've an object showing genres with their counts. It looks like this.
const totalGenresWatchedCount = {
"Comedy": 3,
"Romance": 2,
"Adventure": 1,
"Science Fiction": 1,
"Action": 2,
"Drama": 1,
"Family": 1,
"Crime": 1,
"Thriller": 1
}
I also have another array containing all the genres listed.
const totalUniqueGenresWatched = ["Comedy", "Romance", "Adventure", "Science Fiction", "Action"].
What I want to achieve is get all the genre and the count printed together. Ive tried with the this code.
totalUniqueGenresWatched.map((genre) => {
return (
<p>
{genre} - {totalGenresWatchedCount.genre}
</p>
);
})
I cant seem to print the object value from the genre key, if I remove the first genre VS Code IntelliSense predicts that the key is not even getting used. Am i missing anything?
One way to iterate over objects, like your totalGenresWatchedCount, is to convert the object key and value to an array with Object.entries and thereafter put the resulting array into a map, like your own example and return the HTML your would like.
Note that Object.entries gives you back an array with [key, value], that I renamed in my example to [genre, count] to have precise variable names
const totalGenresWatchedCount = {
Comedy: 3,
Romance: 2,
Adventure: 1,
"Science Fiction": 1,
Action: 2,
Drama: 1,
Family: 1,
Crime: 1,
Thriller: 1,
};
const myHtmlElements = Object.entries(totalGenresWatchedCount).map(
([genre, count]) => {
return (
<p>
{genre} - {count}
</p>
);
}
);
totalGenresWatchedCount.genre refers to "genre" key in totalGenresWatchedCount
but you don't have "genre" key in totalGenresWatchedCount instead you have "Comedy", "Romance", etc...
change totalGenresWatchedCount.genre to totalGenresWatchedCount[genre]
and by the way you should not blank space in the key... like "Science Fiction"
modify it to "Science_Fiction"
Various ways to achieve this more cleanly. Object.entries() comes to mind:
const totalGenresWatchedCount = {
Comedy: 3,
Romance: 2,
Adventure: 1,
'Science Fiction': 1,
Action: 2,
Drama: 1,
Family: 1,
Crime: 1,
Thriller: 1,
};
const html = [];
for (const [key, value] of Object.entries(totalGenresWatchedCount)) {
html.push(
<li>
{key}: {value}
</li>
);
}
Of course, this is assuming you're project includes a compiler for JSX.
You can read about the Object.entries() method here:
MDN Object.entries()

Print objects and arrays in console log dynamically

I'm building a logger service. First argument is "msg" string and the second one in array of parameters (can be array or objects)
How can i iterate this parameters array and print in the console so the object/array can be seen\expand\collapse in the console?
For example if it's not dynamic i would do something like this:
console.log('str', obj1, obj2, obj3)
You mean something like this?
let arrayOfObjects = [
{ a: 1, b: 2 },
{ a: 3, b: 4, c: 5 }
];
let testMessage = "This is just a message";
console.log(testMessage, Object.values(arrayOfObjects));

javascript equivalent to [x for x in array]

Is there any operation in Javascript just like [x for x in array] in python?
For example, I'm using javascript to reading a json file where there're dozens of (key, value) pairs needed to be handled(or transformed into other format). And I thought working in this way is stupid:
let transformed = []
for (let key in json){
transformed = [ /* doing some transform*/ ]
}
Is there anything like:
let transformed = [
lambda function1(key), lambda function2(value) for key, value in json
]
Thanks in advance.
The rough equivalent of Python's list comprehension is Array.map:
const myArray = [1, 2, 3]
const transformed = myArray.map((item) => item + 1)
// [2, 3, 4]
But your example is not about an array, but about an Object with keys and values. In Python, this would be a dict, and you'd use a dict comprehension along the lines of {function1(key): function2(value) for key, value in my_dict.items()}.
In JavaScript, you can turn such an object into an array with Object.entries, then perform the map, and finally transform it back into an object using Object.fromEntries:
const myObject = { a: 1, b: 2 }
const transformed = Object.fromEntries(Object.entries(myObject)
.map(([key, value]) => [key + 'x', value + 1]))
// { ax: 2, bx: 3 }
Note that fromEntries is fairly new and you might need to add a polyfill for it.
You can use a code likes this. You must use a function that handle operation on current single item.
const words = ['hello', 'bird', 'table', 'football', 'pipe', 'code'];
const capWords = words.forEach(capitalize);
function capitalize(word, index, arr) {
arr[index] = word[0].toUpperCase() + word.substring(1);
}
console.log(words);
// Expected output:
// ["Hello", "Bird", "Table", "Football", "Pipe", "Code"]
First of all, javascript does NOT support Associative Arrays. If you are used to them in Python, PHP, and other languages you need to do a little workaround in JS to achieve the same functionality.
The most common way to simulate an associative array is using an object.
let testObject = {name: "Color", value: "Red"};
And then you push every object into an array so you end up with something like this:
let testArray = [{name: "Color", value: "Red"}, {name: "Color", value: "Blue"}];
Once you have this array consisting of objects, you can use map function to go through every object in the array and do whatever you want with it.
testArray.map((item, index) => {
console.log("The value of "+index+". item is: "item.value);
})
You can use Array.map() function. It work pretty like Array.forEach() function
const numbers = [1, 2, 3, 4, 5]
let newArray = numbers.map((element) => {
return element * 2
})
console.log(newArray) // excepted : [ 2, 4, 6, 8, 10 ]
It can be reduce using
const numbers = [1, 2, 3, 4, 5]
let newArray = numbers.map(element => element * 2)
console.log(newArray) // excepted : [ 2, 4, 6, 8, 10 ]
For more informations, you can this documentation https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map

How to get array of all keys which contain certain substring from dictionary array in JS?

How can I get an array of all keys which contain certain substring from dictionary array in JS? I tried to use reduce and map and filter, but don't know how to use those for this particular problem...
Input
[{id: 0, hello: 1}, {id: 1, world: 2}, {id: 2, bye: 3}]
Expected output (Get all keys with substring 'l')
['hello', 'world']
The .reduce method is great for this.
Here, we get the keys for each object in the array, and if a key contains the desired substring, we push it to the array that is being returned from each iteration of reduce.
const input =[
{id: 0, hello: 1}, {id: 1, world: 2}, {id: 2, bye: 3}
];
console.log(getKeysWithSubstring(input, "l"));
function getKeysWithSubstring(arrayOfObjs, needle){
return arrayOfObjs.reduce( (previousLoopOutput, currentObj) => {
// Renaming the output array for clarity
const thisLoopOutput = previousLoopOutput;
Object.keys(currentObj).forEach(haystack => {
// It's possible that many keys in the same object will be pushed
if(haystack.includes(needle)){
thisLoopOutput.push(haystack);
}
});
return thisLoopOutput;
}, []); // First time through loop, `previousLoopOutput` argument will be `[]`
}

Javascript array includes

I'm trying to figure out if a array contains a specific index or not using the following codelines:
var array1 = [{ "abc": 123, "def": [{"a": 1, "b": 2, "c": 3}, {"a": 3, "b": 2, "c": 1}]}]
console.log(array1.includes('def'));
The array contains "def" so the console should actually return true if I define the array in the following way:
var array1 = [{ "abc": 123, "def": [{"a": 1, "b": 2, "c": 3}, {"a": 3, "b": 2, "c": 1}]}]
Defining it the other way, like:
var array1 = [{ "abc": 123 }]
should return false.
The code above therefore does not work correctly, does anyone have a idea whats causing it to respond a wrong boolean?
I appreciate any kind of suggestions!
The proper method would be array1.some(n => n.hasOwnProperty('def')). See that there is no def in array, but rather object that contains def property
Array.includes returns a boolean based on whether (x) is a value in the given Array, not keys. If you want array1.includes('def') to return the other parts then you must do Object.keys(array1[0]).includes('def')
That is because you do not indicate array you think of.
If you console.log
Object.getOwnPropertyNames(array1), array1 is an array of one object. To get proper result you have to check if the object inside have the def property, so:
array1[0].hasOwnProperty('def') // returns true
The problem here is you try to access an element that is in an object and this object is in a list. To acces the list element, you need to specify its index (here 0). Then you can access the object keys with Object.keys.
var array1 = [{ "abc": 123, "def": [{"a": 1, "b": 2, "c": 3}, {"a": 3, "b": 2, "c": 1}]}]
Object.keys(array1[0]).forEach((element) => {
if(element === "def") console.log(true);
})

Categories