A Java Script fejlődik, és minden kiadásban számos funkciót adnak hozzá.
Arra gondoltam, hogy írok néhány leggyakrabban használt alapvető funkciót a Java Scriptben.
Az alábbiakban néhány JavaScript-tipp és trükk található.
- Async/await (ECMAScript 2017): Az Async/await lehetővé teszi olyan aszinkron kód írását, amely úgy néz ki és úgy viselkedik, mint a szinkron kód.
async function getData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
console.log(data);
}
2. Spread operátor (ECMAScript 2015): A spread operátor lehetővé teszi egy tömb vagy objektum külön elemekre vagy tulajdonságokra való kiterjesztését.
const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6, ...numbers]; // [4, 5, 6, 1, 2, 3]
const person = { name: 'John', age: 30 };
const copy = { ...person }; // { name: 'John', age: 30 }
3. Destrukturálás (ECMAScript 2015): A destrukció lehetővé teszi értékek tömbökből vagy objektumokból való kinyerését és változókhoz rendelését.Kód másolása
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
const person = { name: 'John', age: 30 };
const { name, age } = person;
4. Opcionális láncolás (ECMAScript 2020): Az opcionális láncolás lehetővé teszi egy objektum tulajdonságainak elérését, amelyek null vagy undefined lehetnek, hiba nélkül.
const person = { name: 'John', age: 30 };
const name = person?.name; // 'John'
const nickname = person?.nickname; // undefined
5. Nullish összevonási operátor (ECMAScript 2020): A nullish koaleszcencia operátor lehetővé teszi alapértelmezett értékek megadását a tulajdonságokhoz, amelyek lehetnek null vagy undefined.
const person = { name: 'John', age: 30 };
const name = person.name ?? 'Default name'; // 'John'
const nickname = person.nickname ?? 'Default nickname'; // 'Default nickname'
6. Sablonliterálok (ECMAScript 2015): A sablonliterálok olyan karakterlánc-literálok, amelyek helyőrzőket és kifejezéseket tartalmazhatnak.Kód másolása
const name = 'John';
console.log(`Hello, ${name}!`); // 'Hello, John!'
const x = 10;
const y = 20;
console.log(`The sum of x and y is ${x + y}.`); // 'The sum of x and y is 30.'
7. for… of loop (ECMAScript 2015): A for…of ciklus lehetővé teszi az iterálható objektumok, például egy tömb vagy egy karakterlánc értékein való iterációt.
const numbers = [1, 2, 3];
for (const number of numbers) {
console.log(number);
}
// Output: 1, 2, 3
const message = 'Hello';
for (const character of message) {
console.log(character);
}
// Output: H, e, l, l, o
8. Array.prototype.includes (ECMAScript 2016): A includes() metódus lehetővé teszi annak ellenőrzését, hogy egy tömb tartalmaz-e egy adott értéket.Kód másolása
const numbers = [1, 2, 3]; console.log(numbers.includes(2)); // true console.log(numbers.includes(4)); // false
9. Object.values/Object.entries (ECMAScript 2017): A Object.values() és Object.entries() metódus lehetővé teszi egy objektum értékeinek vagy bejegyzéseinek (kulcs-érték párjainak) lekérését.
const person = { name: 'John', age: 30 };
console.log(Object.values(person)); // ['John', 30]
console.log(Object.entries(person)); // [['name', 'John'], ['age', 30]]
10. String.prototype.padStart/padEnd (ECMAScript 2017): A padStart() és padEnd() metódusok lehetővé teszik, hogy egy karakterláncot meghatározott karakterrel vagy karakterekkel töltsön be úgy, hogy az elérjen egy bizonyos hosszúságot.
console.log('Hello'.padStart(10, '*')); // '****Hello'
console.log('Hello'.padEnd(10, '*')); // 'Hello****'
11. Array.prototype.find/findIndex (ECMAScript 2015): A find() és findIndex() metódus lehetővé teszi, hogy egy adott feltételnek megfelelő elemet keressen egy tömbben, és az első talált elemet vagy az első indexét adja vissza. hogy található, ill.
const numbers = [1, 2, 3, 4, 5]; const even = numbers.find(number => number % 2 === 0); // 2 const index = numbers.findIndex(number => number % 2 === 0); // 1
12. Array.prototype.some/every (ECMAScript 2015): A some() és a every() metódus lehetővé teszi annak ellenőrzését, hogy egy tömb legalább egy eleme vagy az összes elem megfelel-e egy bizonyos feltételnek. Logikai értéket adnak vissza.
const numbers = [1, 2, 3, 4, 5]; const hasEven = numbers.some(number => number % 2 === 0); // true const allEven = numbers.every(number => number % 2 === 0); // false
13. Array.prototype.reduce (ECMAScript 2015): A reduce() metódus lehetővé teszi, hogy egy függvényt alkalmazzon egy tömb minden elemére, és a tömb egyetlen értékre csökkenjen.
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((total, number) => total + number, 0); // 15
14. Array.prototype.sort (ECMAScript 2015): A sort() metódus lehetővé teszi az elemek rendezését egy tömbben. Alapértelmezés szerint növekvő sorrendbe rendezi az elemeket, de a rendezés testreszabásához összehasonlítási funkciót is biztosíthat.
const numbers = [5, 3, 1, 2, 4]; numbers.sort((a, b) => a - b); // [1, 2, 3, 4, 5]
15. Array.prototype.filter (ECMAScript 2015): A filter() metódus lehetővé teszi új tömb létrehozását, amely csak az adott feltételnek megfelelő elemekkel rendelkezik.
const numbers = [1, 2, 3, 4, 5]; const evens = numbers.filter(number => number % 2 === 0); // [2, 4]
16. Array.prototype.map (ECMAScript 2015): A map() metódus lehetővé teszi egy új tömb létrehozását az eredeti tömb minden elemén lévő függvényhívás eredményével.
const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(number => number * number); // [1, 4, 9, 16, 25]
17. Array.prototype.flat/flatMap (ECMAScript 2019): A flat() és flatMap() metódusok lehetővé teszik egy beágyazott tömbök tömbjének egyetlen tömbbé történő egyesítését. A flatMap() egyetlen metódusban egyesíti a map() és flat() funkcióit.
const nested = [[1, 2], [3, 4], [5, 6]]; console.log(nested.flat()); // [1, 2, 3, 4, 5, 6] const numbers = [1, 2, 3, 4, 5]; const squared = numbers.flatMap(number => [number, number * number]); // [1, 1, 2, 4, 3, 9, 4, 16, 5, 25]
18. Array.prototype.concat (ECMAScript 2015): A concat() metódus lehetővé teszi, hogy két vagy több tömböt egyesítsen egyetlen tömbbé.
const numbers1 = [1, 2, 3]; const numbers2 = [4, 5, 6]; const numbers3 = [7, 8, 9]; const numbers = numbers1.concat(numbers2, numbers3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
19. Function.prototype.bind (ECMAScript 2015): A bind() metódus lehetővé teszi egy új függvény létrehozását, amelynek this értéke egy adott objektumra van állítva.
const person = { name: 'John', greet() { console.log(`Hello, my name is ${this.name}.`); } };
const greet = person.greet.bind(person);
greet(); // 'Hello, my name is John.'
20. Array.prototype.reverse (ECMAScript 2015): A reverse() metódus lehetővé teszi a tömb elemeinek sorrendjének megfordítását.
const numbers = [1, 2, 3, 4, 5]; numbers.reverse(); // [5, 4, 3, 2, 1]
Sokat kell még megvitatni, de ez egy szuper nagy történet lesz. Kérlek jelezd, ha szeretnéd, hogy írjak valamilyen konkrét témát.
Remélem tetszik ez a blog.
Kérem, kövessen további tartalmakért. Köszönöm!!
