sandra-larsson
Educator Fullstack Developer Javascript at Chas Academy
JavaScript
Destructering & Spread
Objekt Destructering
Svensk översättning 🤷🏻♀️
const hero = {
name: 'Batman',
realName: 'Bruce Wayne'
};
const { name, realName } = hero;
console.log(name); // Output 'Batman',
console.log(realName); // Output 'Bruce Wayne'
const otherName = hero.name;
const otherRealName = hero.realName;UTAN DESTRUCTERING
"Packa upp" - enskilda keys från ett objekt till variabler
Ger en mer "clean" och koncis kod.
Array Desctructering
let [soccer, golf, surfing] = ['⚽', '⛳', '🏄'];
console.log(soccer, golf, surfing)
// Output ['⚽', '⛳', '🏄'];Svensk översättning 🤷🏻♀️
"Packa upp" - enskilda värden från en array till variabler
Ordningen spelar roll. Ger en mer "clean" kod.
let sports = ['⚽', '⛳', '🏄'];
let soccer = sports[0];
let golf = sports[1];
let surfing = sports[2];UTAN DESCTRUCTERING
UTAN DESCTRUCTERING
const clothing = ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];
const clothingCloned = [...clothing]; // Skapar en kopia
console.log(clothingCloned); // Outpput ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];
Spread operator (...)
"Sprida ut" element från en array
Bra användningsområde är att skapa en kopia till en array
const person = {
name: "John",
age: 30,
city: "New York",
},
};
// Kopierar värdena från personobjektet
const personCopy = { ...person };
// Praktiskt för att skapa en kopia som uppdateras med något property
const updatedPerson = {...person, city: "Boston'};Spread operator (...)
"Sprida ut" egenskaper från ett objekt
const person = {
name: "John",
age: 30,
address: {
street: "Main Street",
number: 123,
},
};
const personCopy = { ...person };
personCopy.name = "Jane";
personCopy.address.street = "Second Street";
console.log("original", person);
console.log("copy", personCopy);
Spread operator (...)
Spread operator verkar bara på en nivå!
Mer om shallow copy och deep copy senare..
const trains = ['🚋', '🚝', '🚉'];
const boat = ['🚤', '🚣', '🚢', '⛵'];
const transportation = [...trains, ...boat]
console.log(transportation) // Output ['🚋', '🚝', '🚉', '🚤', '🚣', '🚢', '⛵']
Slå ihop (merga) två arrayer
Spread operator (...)
Rest ...
const [shirt, jeans, ...rest] = ['👔', '👖', '👢', '👡', '💄', '👠', '👗'];
console.log(shirt); // '👔'
console.log(jeans); // '👖'
console.log(rest); // [👢', '👡', '💄', '👠, '👗']Svensk översättning 🤷🏻♀️
Till vänster om likamedstecknet finns motsvarande ... (rest-operator). Den mappar resterande element i arrayen till denna.
Rest ...
const person = {
name: "John",
age: 30,
address: {
street: "Main Street",
number: 123,
},
};
const { name, ...rest } = person;
console.log(name, rest);
Och för objekt!
ES6 Destructering & Spreas
By sandra-larsson
