components
|
@ -1,5 +1,5 @@
|
|||
```js run no-beautify
|
||||
function sortByName(arr) {
|
||||
function sortByAge(arr) {
|
||||
arr.sort((a, b) => a.age > b.age ? 1 : -1);
|
||||
}
|
||||
|
||||
|
@ -7,11 +7,12 @@ let john = { name: "John", age: 25 };
|
|||
let pete = { name: "Pete", age: 30 };
|
||||
let mary = { name: "Mary", age: 28 };
|
||||
|
||||
let arr = [ john, pete, mary ];
|
||||
let arr = [ pete, john, mary ];
|
||||
|
||||
sortByName(arr);
|
||||
sortByAge(arr);
|
||||
|
||||
// now sorted is: [john, mary, pete]
|
||||
alert(arr[0].name); // John
|
||||
alert(arr[1].name); // Mary
|
||||
alert(arr[2].name); // Pete
|
||||
```
|
||||
|
|
|
@ -2,9 +2,9 @@ importance: 5
|
|||
|
||||
---
|
||||
|
||||
# Sort objects
|
||||
# Sort users by age
|
||||
|
||||
Write the function `sortByName(users)` that gets an array of objects with the `age` property and sorts them by `age`.
|
||||
Write the function `sortByAge(users)` that gets an array of objects with the `age` property and sorts them by `age`.
|
||||
|
||||
For instance:
|
||||
|
||||
|
@ -13,11 +13,12 @@ let john = { name: "John", age: 25 };
|
|||
let pete = { name: "Pete", age: 30 };
|
||||
let mary = { name: "Mary", age: 28 };
|
||||
|
||||
let arr = [ john, pete, mary ];
|
||||
let arr = [ pete, john, mary ];
|
||||
|
||||
sortByName(arr);
|
||||
sortByAge(arr);
|
||||
|
||||
// now: [john, mary, pete]
|
||||
alert(arr[0].name); // John
|
||||
alert(arr[1].name); // Mary
|
||||
alert(arr[2].name); // Pete
|
||||
```
|
||||
|
|
|
@ -136,7 +136,7 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl
|
|||
</script>
|
||||
```
|
||||
To insert `newLi` as the first element, we can do it like this:
|
||||
|
||||
|
||||
```js
|
||||
list.insertBefore(newLi, list.firstChild);
|
||||
```
|
||||
|
@ -335,6 +335,74 @@ An example of copying the message:
|
|||
</script>
|
||||
```
|
||||
|
||||
|
||||
## DocumentFragment [#document-fragment]
|
||||
|
||||
`DocumentFragment` is a special DOM node that serves as a wrapper to pass around groups of nodes.
|
||||
|
||||
We can append other nodes to it, but when we insert it somewhere, then it "disappears", leaving its content inserted instead.
|
||||
|
||||
For example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
|
||||
|
||||
```html run
|
||||
<ul id="ul"></ul>
|
||||
|
||||
<script>
|
||||
function getListContent() {
|
||||
let fragment = new DocumentFragment();
|
||||
|
||||
for(let i=1; i<=3; i++) {
|
||||
let li = document.createElement('li');
|
||||
li.append(i);
|
||||
fragment.append(li);
|
||||
}
|
||||
|
||||
return fragment;
|
||||
}
|
||||
|
||||
*!*
|
||||
ul.append(getListContent()); // (*)
|
||||
*/!*
|
||||
</script>
|
||||
```
|
||||
|
||||
Please note, at the last line `(*)` we append `DocumentFragment`, but it "blends in", so the resulting structure will be:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
`DocumentFragment` is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:
|
||||
|
||||
```html run
|
||||
<ul id="ul"></ul>
|
||||
|
||||
<script>
|
||||
function getListContent() {
|
||||
let result = [];
|
||||
|
||||
for(let i=1; i<=3; i++) {
|
||||
let li = document.createElement('li');
|
||||
li.append(i);
|
||||
result.push(li);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
*!*
|
||||
ul.append(...getListContent()); // append + "..." operator = friends!
|
||||
*/!*
|
||||
</script>
|
||||
```
|
||||
|
||||
We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
|
||||
|
||||
|
||||
## Removal methods
|
||||
|
||||
To remove nodes, there are the following methods:
|
||||
|
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 290 B |
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 290 B |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
Before Width: | Height: | Size: 136 KiB After Width: | Height: | Size: 136 KiB |
Before Width: | Height: | Size: 290 B After Width: | Height: | Size: 290 B |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |