Poniżej kilka przykładów jak dobrać się do obiektów 🙂
var codes = {
reset: [0, 0],
bold: [1, 22]
};
Object.keys(codes).forEach(function (key) {
console.log(key); // "reset", "bold"
});
Object.values(codes).forEach(function (key) {
console.log(key); // [0,0] [1,22]
});
Object.entries(codes).forEach(function (key) {
console.log(key); // ["reset", [0, 0]] ["bold", [1, 22]]
});W ES6 pojawiła się nowa funkcjonalność nazywana "Spread syntax" operacje na tablicach czy obiektach. Poniżej kilka przykładów użycia. W ES5 jest to concat.
W ES6
const boys = ["Jaś", "Grześ", "Adaś"];
const girls = ["Małgosia", "Ania", "Czesia"];
let people = [...boys, ...girls];
console.log(people); // ["Jaś", "Grześ", "Adaś", "Małgosia", "Ania", "Czesia"]Ukrywanie buttona scroll-top jeżeli wysokość przekroczy 200 oraz dodanie obsługi zdarzenia na onClick i wywołanie funkcji scrollToTop i metody scrollIntoView.
export default BackToTop extends Component {
state = {
scrolling: false,
scrollPosHeight: 200
}
componentDidMount() {
console.log('componentDidMount()');
window.addEventListener('scroll', this.hideShowButtonTop);
};
componentWillUnmount() {
console.log('componentWillUnmount()');
window.removeEventListener('scroll', this.hideShowButtonTop);
};
hideShowButtonTop = () => {
const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
const myDiv = document.querySelector('.back-to-top');
(scrollPos > this.state.scrollPosHeight && scrollPos !== 0) ? myDiv.style.display = 'block' : myDiv.style.display = 'none';
}
scrollToTop() {
const logoView = document.getElementById('logo');
logoView.scrollIntoView({
behavior: 'smooth'
})
}
render() {
return (
<div onClick={this.scrollToTop} className="back-to-top"></div>
)
};
};Trochę operacji na tablicach 🙂
const employments = [
{ name: 'Andrzej', category: 'Finanse', start: 1982, end: 2017 },
{ name: 'Agnieszka', category: 'Sprzedaż', start: 1992, end: 2008 },
{ name: 'Mariola', category: 'Samochody', start: 1991, end: 2007 }
];
const digits = [23, 22, 10, 1, 5, 54, 25, 24, 21];Chcemy pobrać imię pracownika.
Najpierw w starym stylu.
for (let i = 0; i < employments.length; i++) {
console.log(employments[i].name); // Andrzej, Agnieszka, Mariola
}forEach - teraz pobierzemy przez forEach
employments.forEach(function(employment) {
console.log(employment.name);
});Możemy to zrobić jeszcze szybciej prze ES6
employments.forEach(employment => {
console.log(employment.name);
});<select name="banner_url" onchange="var idx=this.selectedIndex;
var value=this.options[idx].getAttribute('banner_url');
var element = document.getElementById('img_banner_url');
element.setAttribute('src', value); element.style.display='block'">
!{section name=ii loop=$data}!
!{capture assign=banner_url}!http://kody.wig.pl/!{/capture}!
<option value="!{$banner_url}!" banner_url="!{$banner_url}!">
!{$data[ii].name}! ---> !{$banner_url}!</option>
!{/section}!
</select>
<br><br>
<img src="" id="img_banner_url" style="display:none">