Concept Highlights:
Looping is a fundamental concept in programming, allowing to execute a block of code multiple times. In JavaScript, for...of and for...in are two commonly used loops, but they serve different purposes. Understanding the differences can help you write more efficient and effective code.
The for...of loop is used to iterate over iterable objects, such as arrays, strings, maps, and sets. It provides a straightforward way to access each value in the sequence without needing to worry about the index.
e.g.)
let teams = ['Red Sox', 'Dodgers', 'Padres']; for (let team of teams) { console.log(team); } // Output: // Read Sox // Dodgers // Padres
In this example, for...of directly accesses each element (team) in the teams array and logs it to the console. This loops is ideal when you only need the values and not the indices.
The for...in loop, on the other hand, is used to iterate over the properties (keys) of an object. It's often used with objects, but it can also used with arrays to access indices.
e.g.)
let Mariners = {place: 'Seattle', league: 'American', color: 'navy blue'}; for (let key in Mariners) { console.log(`${key}: ${Mariners[key]}`); } // Output: // place: Seattle // league: American // color: navy blue
In this example, for...in iterates over the keys of the Mariners object, allowing to access both the key and the corresponding value. It's important to note that for...in should be used cautiously with arrays, as it iterates over all enumerable properties, not just numeric indices.
JavaScript provides a variety of data structures, each with its strength and weaknesses. I explored the differences between some of the most commonly used ones:
e.g.)
`
let mySet = new Set([1, 2, 3, 3, 4]);
let myArray = [1, 2, 3, 3, 4];
console.log(mySet) // Output: Set { 1, 2, 3, 4 }
console.log(myArray) // Output: [1, 2, 3, 3, 4]
`
In this example, the Set() automatically removes the duplicates 3, while the Array retains it. Set() is useful when you need a collection of unique items.
Key Types:
Order:
Size:
e.g.)
`
let myMap = new Map();
myMap.set('name', 'John');
myMap.set(42, 'The answer');
myMap.set({}, 'Empty object');
let myObject = {
name: 'John',
42: 'The answer',
{}: 'Empty object'
};
console.log(myMap.size); // Output: 3
console.log(Object.keys(myObject).length); // Output: 2 (due to key string conversion)
`
In this example, Map() allows the use of a variety of key types, while object keys are converted to strings. Additionally, Map() easily provides the size of the map, whereas for objects, you need to manually count the keys.
e.g.)
`
let mySet = new Set([1, 2 ,3]);
let myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(mySet.has(2)); // Output: true
console.log(myMap.get('key1')); // Output: 'value'1
`
In this example, Set() is used to check for the existence of value, while Map() is used to retrieve a value associated with a key.
以上是Day - avaScript Foundations Professional Certification by Mozilla的詳細內容。更多資訊請關注PHP中文網其他相關文章!