renovations
This commit is contained in:
Ilya Kantor
parent
4b8b168fd2
commit
c7d4c7e3ff
172 changed files with 869 additions and 244 deletions
10
1-js/4-data-structures/4-object/1-hello-object/solution.md
Normal file
10
1-js/4-data-structures/4-object/1-hello-object/solution.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
|
||||
```js
|
||||
var user = {};
|
||||
user.name = "Вася";
|
||||
user.surname = "Петров";
|
||||
user.name = "Сергей";
|
||||
delete user.name;
|
||||
```
|
||||
|
||||
13
1-js/4-data-structures/4-object/1-hello-object/task.md
Normal file
13
1-js/4-data-structures/4-object/1-hello-object/task.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# Первый объект
|
||||
|
||||
[importance 3]
|
||||
|
||||
Мини-задача на синтаксис объектов. Напишите код, по строке на каждое действие.
|
||||
<ol>
|
||||
<li>Создайте пустой объект `user`.</li>
|
||||
<li>Добавьте свойство `name` со значением `Вася`.</li>
|
||||
<li>Добавьте свойство `surname` со значением `Петров`.</li>
|
||||
<li>Поменяйте значение `name` на `Сергей`.</li>
|
||||
<li>Удалите свойство `name` из объекта.</li>
|
||||
</ol>
|
||||
|
||||
331
1-js/4-data-structures/4-object/article.md
Normal file
331
1-js/4-data-structures/4-object/article.md
Normal file
|
|
@ -0,0 +1,331 @@
|
|||
# Объекты как ассоциативные массивы
|
||||
|
||||
Объекты в JavaScript сочетают в себе два важных функционала.
|
||||
|
||||
Первый -- это ассоциативный массив: структура, пригодная для хранения любых данных. В этой главе мы рассмотрим использование объектов именно как массивов.
|
||||
|
||||
Второй -- языковые возможности для объектно-ориентированного программирования. Эти возможности мы изучим в последующих разделах учебника.
|
||||
|
||||
[cut]
|
||||
## Ассоциативные массивы
|
||||
|
||||
[Ассоциативный массив](http://ru.wikipedia.org/wiki/%D0%90%D1%81%D1%81%D0%BE%D1%86%D0%B8%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2) -- структура данных, в которой можно хранить любые данные в формате ключ-значение.
|
||||
|
||||
Её можно легко представить как шкаф с подписанными ящиками. Все данные хранятся в ящичках. По имени можно легко найти ящик и взять то значение, которое в нём лежит.
|
||||
|
||||
<img src="object.svg">
|
||||
|
||||
В отличие от реальных шкафов, в ассоциативный массив можно в любой момент добавить новые именованные "ящики" или удалить существующие. Далее мы увидим примеры, как это делается.
|
||||
|
||||
Кстати, в других языках программирования такую структуру данных также называют *"словарь"* и *"хэш"*.
|
||||
|
||||
## Создание объектов
|
||||
|
||||
Пустой объект ("пустой шкаф") может быть создан одним из двух синтаксисов:
|
||||
|
||||
```js
|
||||
1. o = new Object();
|
||||
2. o = {}; // пустые фигурные скобки
|
||||
```
|
||||
|
||||
Обычно все пользуются синтаксисом `(2)`, т.к. он короче.
|
||||
|
||||
## Операции с объектом
|
||||
|
||||
Объект может содержать в себе любые значения, которые называются *свойствами объекта*. Доступ к свойствам осуществляется по *имени свойства* (иногда говорят *"по ключу"*).
|
||||
|
||||
Например, создадим объект `person` для хранения информации о человеке:
|
||||
|
||||
```js
|
||||
var person = {}; // пока пустой
|
||||
```
|
||||
|
||||
<img src="object-person-empty.svg">
|
||||
|
||||
|
||||
Основные операции с объектами -- это создание, получение и удаление свойств.
|
||||
|
||||
Для обращения к свойствам используется запись "через точку", вида `объект.свойство`, например:
|
||||
|
||||
```js
|
||||
// при присвоении свойства в объекте автоматически создаётся "ящик"
|
||||
// с именем "name" и в него записывается содержимое 'Вася'
|
||||
person.name = 'Вася';
|
||||
|
||||
person.age = 25; // запишем ещё одно свойство: с именем 'age' и значением 25
|
||||
```
|
||||
|
||||
<img src="object-person-1.svg">
|
||||
|
||||
Значения хранятся "внутри" ящиков. Обратим внимание -- любые значения, любых типов: число, строка -- не важно.
|
||||
|
||||
Чтобы прочитать их -- также обратимся через точку:
|
||||
```js
|
||||
alert(person.name + ': ' + person.age); // "Вася: 25"
|
||||
```
|
||||
|
||||
Удаление осуществляется оператором `delete`:
|
||||
|
||||
```js
|
||||
delete person.age;
|
||||
```
|
||||
|
||||
Осталось только свойство `name`:
|
||||
|
||||
<img src="object-person-2.svg">
|
||||
|
||||
Следующая операция:
|
||||
<ol start="4">
|
||||
<li>**Проверка существования свойства с определенным ключом.**</li>
|
||||
</ol>
|
||||
|
||||
Для проверки существования свойства в объекте есть оператор `in`.
|
||||
|
||||
Его синтаксис: `"prop" in obj`, причем имя свойства -- в виде строки, например:
|
||||
|
||||
```js
|
||||
if ("name" in person) {
|
||||
alert("Свойство name существует!");
|
||||
}
|
||||
```
|
||||
|
||||
Впрочем, чаще используется другой способ -- сравнение значения с `undefined`.
|
||||
|
||||
Дело в том, что **в JavaScript можно обратиться к любому свойству объекта, даже если его нет**. Ошибки не будет.
|
||||
|
||||
Но если свойство не существует, то вернется специальное значение `undefined`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var person = {};
|
||||
|
||||
alert(person.lalala); // undefined, нет свойства с ключом lalala
|
||||
```
|
||||
|
||||
Таким образом **мы можем легко проверить существование свойства -- получив его и сравнив с `undefined`**:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var person = { name: "Василий" };
|
||||
|
||||
alert(person.lalala === undefined); // true, свойства нет
|
||||
alert(person.name === undefined); // false, свойство есть.
|
||||
```
|
||||
|
||||
[smart header="Разница между проверками `in` и `=== undefined`"]
|
||||
|
||||
Есть два средства для проверки наличия свойства в объекте: первое -- оператор `in`, второе -- получить его и сравнить его с `undefined`.
|
||||
|
||||
Они почти идентичны, но есть одна небольшая разница.
|
||||
|
||||
Дело в том, что технически возможно, что *свойство есть и равно `undefined`*:
|
||||
|
||||
```js
|
||||
//+ untrusted refresh run
|
||||
var obj = {};
|
||||
obj.test = undefined; // добавили свойство со значением undefined
|
||||
|
||||
*!*
|
||||
// проверим наличие свойств test и заведомо отсутствующего blabla
|
||||
alert(obj.test === undefined); // true
|
||||
alert(obj.blabla === undefined); // true
|
||||
*/!*
|
||||
```
|
||||
|
||||
...При этом, как видно из кода, при простом сравнении наличие такого свойства будет неотличимо от его отсутствия.
|
||||
|
||||
Но оператор `in` гарантирует правильный результат:
|
||||
|
||||
```js
|
||||
//+ untrusted refresh run
|
||||
var obj = {};
|
||||
obj.test = undefined;
|
||||
|
||||
*!*
|
||||
alert( "test" in obj ); // true
|
||||
alert( "blabla" in obj ); // false
|
||||
*/!*
|
||||
```
|
||||
|
||||
Как правило, в коде мы не будем присваивать `undefined`, чтобы корректно работали обе проверки. А в качестве значения, обозначающего неизвестность и неопределенность, будем использовать `null`.
|
||||
[/smart]
|
||||
|
||||
### Доступ через квадратные скобки
|
||||
|
||||
Существует альтернативный синтаксис работы со свойствами, использующий квадратные скобки `объект['свойство']`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var person = {};
|
||||
|
||||
person['name'] = 'Вася'; // то же что и person.name = 'Вася'
|
||||
```
|
||||
|
||||
Записи `person['name']` и `person.name` идентичны, но квадратные скобки позволяют использовать в качестве имени свойства любую строку:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var person = {};
|
||||
|
||||
person['любимый стиль музыки'] = 'Джаз'; // то же что и person.name = 'Вася'
|
||||
```
|
||||
|
||||
Такое присвоение было бы невозможно "через точку", так интерпретатор после первого пробела подумает, что свойство закончилось, и далее выдаст ошибку:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
person.любимый стиль музыки = 'Джаз'; // ??? ошибка
|
||||
```
|
||||
|
||||
В обоих случаях, **имя свойства обязано быть строкой**. Если использовано значение другого типа -- JavaScript приведет его к строке автоматически.
|
||||
|
||||
### Доступ к свойству через переменную
|
||||
|
||||
Квадратные скобки также позволяют обратиться к свойству, имя которого хранится в переменной:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var person = { age: 25 };
|
||||
var key = 'age';
|
||||
|
||||
alert( person[key] ); // выведет person['age']
|
||||
```
|
||||
|
||||
Вообще, если имя свойства хранится в переменной (`var key = "age"`), то единственный способ к нему обратиться -- это квадратные скобки `person[key]`.
|
||||
|
||||
Доступ через точку используется, если мы на этапе написания программы уже знаем название свойства. А если оно будет определено по ходу выполнения, например, введено посетителем и записано в переменную, то единственный выбор -- квадратные скобки.
|
||||
|
||||
### Объявление со свойствами
|
||||
|
||||
Объект можно заполнить значениями при создании, указав их в фигурных скобках: `{ ключ1: значение1, ключ2: значение2, ... }`.
|
||||
|
||||
Такой синтаксис называется *литеральным* (оригинал - *literal*), cледующие два фрагмента кода создают одинаковый объект:
|
||||
|
||||
```js
|
||||
var menuSetup = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
title: "Menu"
|
||||
};
|
||||
|
||||
// то же самое, что:
|
||||
|
||||
var menuSetup = {};
|
||||
menuSetup.width = 300;
|
||||
menuSetup.height = 200;
|
||||
menuSetup.title = 'Menu';
|
||||
```
|
||||
|
||||
Названия свойств можно перечислять как в кавычках, так и без, если они удовлетворяют ограничениям для имён переменных.
|
||||
|
||||
Например:
|
||||
|
||||
```js
|
||||
var menuSetup = {
|
||||
width: 300,
|
||||
'height': 200,
|
||||
"мама мыла раму": true
|
||||
};
|
||||
```
|
||||
|
||||
В качестве значения можно тут же указать и другой объект:
|
||||
|
||||
```js
|
||||
var user = {
|
||||
name: "Таня",
|
||||
age: 25,
|
||||
*!*
|
||||
size: {
|
||||
top: 90,
|
||||
middle: 60,
|
||||
bottom: 90
|
||||
}
|
||||
*/!*
|
||||
}
|
||||
|
||||
alert( user.name ) // "Таня"
|
||||
|
||||
alert( user.size.top ) // 90
|
||||
```
|
||||
|
||||
Здесь значением свойства `size` является объект `{top: 90, middle: 60, bottom: 90 }`.
|
||||
## Компактное представление объектов
|
||||
|
||||
[warn header="Hardcore coders only"]
|
||||
Эта секция относится ко внутреннему устройству структуры данных. Она не обязательна к прочтению.
|
||||
[/warn]
|
||||
|
||||
Браузер использует специальное "компактное" представление объектов, чтобы сэкономить память в том случае, когда однотипных объектов много.
|
||||
|
||||
Например, посмотрим на такой объект:
|
||||
|
||||
```js
|
||||
var user = {
|
||||
name: "Vasya",
|
||||
age: 25
|
||||
};
|
||||
```
|
||||
|
||||
Здесь содержится информация о свойстве `name` и его строковом значении, а также о свойстве `age` и его численном значении. Представим, что таких объектов много.
|
||||
|
||||
Получится, что информация об именах свойств `name` и `age` дублируется в каждом объекте. Чтобы этого избежать, браузер применяет оптимизацию.
|
||||
|
||||
**При создании множества объектов одного и того же вида (с одинаковыми полями) интерпретатор выносит описание полей в отдельную структуру. А сам объект остаётся в виде непрерывной области памяти с данными.**
|
||||
|
||||
Например, есть много объектов с полями `name` и `age`:
|
||||
|
||||
```js
|
||||
{name: "Вася", age: 25}
|
||||
{name: "Петя", age: 22}
|
||||
{name: "Маша", age: 19}
|
||||
...
|
||||
```
|
||||
|
||||
Для их эффективного хранения будет создана структура, которая описывает данный вид объектов. Выглядеть она будет примерно так: `<string name, number age>`. А сами объекты будут представлены в памяти только данными:
|
||||
|
||||
```js
|
||||
<структура: string name, number age>
|
||||
Вася 25
|
||||
Петя 22
|
||||
Маша 19
|
||||
```
|
||||
|
||||
При добавлении нового объекта такой структуры достаточно хранить значения полей, но не их имена. Экономия памяти -- налицо.
|
||||
|
||||
А что происходит, если к объекту добавляется новое свойство? Например, к одному из них добавили свойство `isAdmin`:
|
||||
|
||||
```js
|
||||
user.isAdmin = true;
|
||||
```
|
||||
|
||||
В этом случае браузер смотрит, есть ли уже структура, под которую подходит такой объект. Если нет -- она создаётся и объект привязывается к ней.
|
||||
|
||||
**Эта оптимизация является примером того, что далеко не всё то, что мы пишем, один-в-один переносится в память.**
|
||||
|
||||
Современные интерпретаторы очень стараются оптимизировать как код, так и структуры данных. Детали применения и реализации этого способа хранения варьируются от браузера к браузеру. О том, как это сделано в Chrome можно узнать, например, из презентации [Know Your Engines](http://www.slideshare.net/newmovie/know-yourengines-velocity2011). Она была некоторое время назад, но с тех пор мало что изменилось.
|
||||
|
||||
|
||||
## Итого
|
||||
|
||||
Объекты -- это ассоциативные массивы с дополнительными возможностями:
|
||||
|
||||
<ul>
|
||||
<li>Доступ к элементам осуществляется:
|
||||
<ul>
|
||||
<li>Напрямую по ключу `obj.prop = 5`</li>
|
||||
<li>Через переменную, в которой хранится ключ:
|
||||
|
||||
```js
|
||||
var key = "prop";
|
||||
obj[key] = 5
|
||||
```
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<li>Удаление ключей: `delete obj.name`.</li>
|
||||
<li>Существование свойства может проверять оператор `in`: `if ("prop" in obj)`, как правило, работает и просто сравнение `if (obj.prop !== undefined)`.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
28
1-js/4-data-structures/4-object/object-person-1.svg
Normal file
28
1-js/4-data-structures/4-object/object-person-1.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="112px" height="146px" viewBox="0 0 112 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="object-person-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(-68.000000, 0.000000)" fill="#000000">
|
||||
<g id="Three_Stack_1_" sketch:type="MSShapeGroup">
|
||||
<g id="Cabinet" transform="translate(68.200000, 0.033058)">
|
||||
<path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,1.40182215 0.36952,2.73508215 L0.36952,143.198802 C0.36952,144.532062 2.02368,145.612602 4.06472,145.612602 L107.53776,145.612602 C109.5788,145.612602 111.23296,144.532062 111.23296,143.198802 L111.23296,2.73508215 C111.23296,1.40182215 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,139.321282 L10.0688,139.321282 L10.0688,77.7692421 L101.5312,77.7692421 L101.5312,139.321282 L101.5312,139.321282 Z M101.5312,68.3996021 L10.0688,68.3996021 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,68.3996021 L101.5312,68.3996021 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Middle_Handle" transform="translate(0.000000, 18.000000)">
|
||||
<path d="M137.34488,64.3626 L133.58024,64.3626 L133.58024,69.8868 C133.58024,70.32258 133.03712,70.67574 132.36752,70.67574 L115.39192,70.67574 C114.72232,70.67574 114.1792,70.32258 114.1792,69.8868 L114.1792,64.3626 L110.6576,64.3626 C109.99048,64.3626 109.44984,64.71252 109.44984,65.14506 L109.44984,73.04904 C109.44984,73.48158 109.99048,73.8315 110.6576,73.8315 L137.34488,73.8315 C138.012,73.8315 138.55264,73.48158 138.55264,73.04904 L138.55264,65.14506 C138.55264,64.71414 138.00952,64.3626 137.34488,64.3626 L137.34488,64.3626 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Top_Handle" transform="translate(108.500000, 9.404959)">
|
||||
<path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
|
||||
<tspan x="35" y="46">name</tspan>
|
||||
</text>
|
||||
<text id="age" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
|
||||
<tspan x="42" y="119">age</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
22
1-js/4-data-structures/4-object/object-person-2.svg
Normal file
22
1-js/4-data-structures/4-object/object-person-2.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="112px" height="146px" viewBox="0 0 112 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="object-person-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="noun_3865-(1)" sketch:type="MSLayerGroup" fill="#000000">
|
||||
<g id="Three_Stack_1_" sketch:type="MSShapeGroup">
|
||||
<g id="Cabinet" transform="translate(0.200000, 0.033058)">
|
||||
<path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,1.40182215 0.36952,2.73508215 L0.36952,143.198802 C0.36952,144.532062 2.02368,145.612602 4.06472,145.612602 L107.53776,145.612602 C109.5788,145.612602 111.23296,144.532062 111.23296,143.198802 L111.23296,2.73508215 C111.23296,1.40182215 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,137.321282 L10.0688,137.321282 L10.0688,6.84756215 L101.5312,6.84756215 L101.5312,137.321282 L101.5312,137.321282 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Top_Handle" transform="translate(40.500000, 9.404959)">
|
||||
<path d="M28.84488,0.0375813223 L25.08024,0.0375813223 L25.08024,5.56178132 C25.08024,5.99756132 24.53712,6.35072132 23.86752,6.35072132 L6.89192,6.35072132 C6.22232,6.35072132 5.6792,5.99756132 5.6792,5.56178132 L5.6792,0.0375813223 L2.1576,0.0375813223 C1.49048,0.0375813223 0.94984,0.387501322 0.94984,0.820041322 L0.94984,8.72402132 C0.94984,9.15656132 1.49048,9.50648132 2.1576,9.50648132 L28.84488,9.50648132 C29.512,9.50648132 30.05264,9.15656132 30.05264,8.72402132 L30.05264,0.820041322 C30.05264,0.387501322 29.50952,0.0375813223 28.84488,0.0375813223 L28.84488,0.0375813223 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text id="name" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
|
||||
<tspan x="35" y="74">name</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
27
1-js/4-data-structures/4-object/object-person-empty.svg
Normal file
27
1-js/4-data-structures/4-object/object-person-empty.svg
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="112px" height="179px" viewBox="0 0 112 179" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="object-person-empty" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<path d="M48.5,29.5 L52.5,25.5" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M44.5,29.5 L48.5,25.5" id="Line-2" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup" transform="translate(46.500000, 27.500000) scale(-1, 1) translate(-46.500000, -27.500000) "></path>
|
||||
<path d="M48.5,14.5714286 L48.5,29.4285714" id="Line" stroke="#979797" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
|
||||
<g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(-68.000000, 25.000000)">
|
||||
<g id="Background_xA0_Image_1_"></g>
|
||||
<g id="Three_Stack_1_" transform="translate(68.200000, 8.033058)" fill="#000000" sketch:type="MSShapeGroup">
|
||||
<g id="Cabinet">
|
||||
<path d="M107.53776,0.321282149 L4.06472,0.321282149 C2.02368,0.321282149 0.36952,1.40182215 0.36952,2.73508215 L0.36952,143.198802 C0.36952,144.532062 2.02368,145.612602 4.06472,145.612602 L107.53776,145.612602 C109.5788,145.612602 111.23296,144.532062 111.23296,143.198802 L111.23296,2.73508215 C111.23296,1.40182215 109.5788,0.321282149 107.53776,0.321282149 L107.53776,0.321282149 Z M101.5312,141.087942 L10.0688,141.087942 L10.0688,4.84756215 L101.5312,4.84756215 L101.5312,141.087942 L101.5312,141.087942 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text id="Объект" sketch:type="MSTextLayer" font-family="Open Sans" font-size="16" font-weight="bold" sketch:alignment="middle">
|
||||
<tspan x="52.5" y="89" fill="#DFDFDF"></tspan>
|
||||
<tspan x="29.3203125" y="111" fill="#D8D8D8">пусто</tspan>
|
||||
</text>
|
||||
<text id="person" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#000000">
|
||||
<tspan x="27" y="8">person</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
35
1-js/4-data-structures/4-object/object.svg
Normal file
35
1-js/4-data-structures/4-object/object.svg
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="99px" height="128px" viewBox="0 0 99 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Slice 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="object" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="noun_3865-(1)" sketch:type="MSLayerGroup" transform="translate(-61.000000, -7.000000)">
|
||||
<g id="Background_xA0_Image_1_"></g>
|
||||
<g id="Three_Stack_1_" fill="#000000" sketch:type="MSShapeGroup">
|
||||
<g id="Cabinet" transform="translate(60.775000, 7.041322)">
|
||||
<path d="M95.83002,0.281617686 L3.62219,0.281617686 C1.80336,0.281617686 0.32929,1.22875769 0.32929,2.39741769 L0.32929,125.519938 C0.32929,126.688598 1.80336,127.635738 3.62219,127.635738 L95.83002,127.635738 C97.64885,127.635738 99.12292,126.688598 99.12292,125.519938 L99.12292,2.39741769 C99.12292,1.22875769 97.64885,0.281617686 95.83002,0.281617686 L95.83002,0.281617686 Z M90.4774,123.669678 L8.9726,123.669678 L8.9726,86.5082777 L90.4774,86.5082777 L90.4774,123.669678 L90.4774,123.669678 Z M90.4774,82.5393777 L8.9726,82.5393777 L8.9726,45.3779777 L90.4774,45.3779777 L90.4774,82.5393777 L90.4774,82.5393777 Z M90.4774,41.4104977 L8.9726,41.4104977 L8.9726,4.24909769 L90.4774,4.24909769 L90.4774,41.4104977 L90.4774,41.4104977 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Bottom_Handle">
|
||||
<path d="M122.18648,97.54548 L118.8317,97.54548 L118.8317,102.3891 C118.8317,102.77108 118.34771,103.08064 117.75101,103.08064 L102.62135,103.08064 C102.02465,103.08064 101.54066,102.77108 101.54066,102.3891 L101.54066,97.54548 L98.40246,97.54548 C97.80797,97.54548 97.32619,97.85362 97.32619,98.23276 L97.32619,105.16094 C97.32619,105.54008 97.80797,105.8468 98.40246,105.8468 L122.18427,105.8468 C122.77876,105.8468 123.26054,105.54008 123.26054,105.16094 L123.26054,98.23276 C123.26054,97.85362 122.78097,97.54548 122.18648,97.54548 L122.18648,97.54548 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Middle_Handle">
|
||||
<path d="M122.39201,56.4166 L119.03723,56.4166 L119.03723,61.2588 C119.03723,61.64078 118.55324,61.95034 117.95654,61.95034 L102.82909,61.95034 C102.23239,61.95034 101.7484,61.64078 101.7484,61.2588 L101.7484,56.4166 L98.6102,56.4166 C98.01571,56.4166 97.53393,56.72332 97.53393,57.10246 L97.53393,64.03064 C97.53393,64.40978 98.01571,64.7165 98.6102,64.7165 L122.39201,64.7165 C122.9865,64.7165 123.46828,64.40978 123.46828,64.03064 L123.46828,57.10246 C123.46828,56.72474 122.98429,56.4166 122.39201,56.4166 L122.39201,56.4166 Z" id="Shape"></path>
|
||||
</g>
|
||||
<g id="Top_Handle" transform="translate(96.687500, 15.256198)">
|
||||
<path d="M25.70451,0.0329416529 L22.34973,0.0329416529 L22.34973,4.87514165 C22.34973,5.25712165 21.86574,5.56668165 21.26904,5.56668165 L6.14159,5.56668165 C5.54489,5.56668165 5.0609,5.25712165 5.0609,4.87514165 L5.0609,0.0329416529 L1.9227,0.0329416529 C1.32821,0.0329416529 0.84643,0.339661653 0.84643,0.718801653 L0.84643,7.64698165 C0.84643,8.02612165 1.32821,8.33284165 1.9227,8.33284165 L25.70451,8.33284165 C26.299,8.33284165 26.78078,8.02612165 26.78078,7.64698165 L26.78078,0.718801653 C26.78078,0.339661653 26.29679,0.0329416529 25.70451,0.0329416529 L25.70451,0.0329416529 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<text id="ключ1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
|
||||
<tspan x="26" y="35">ключ1</tspan>
|
||||
</text>
|
||||
<text id="ключ2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
|
||||
<tspan x="26" y="74">ключ2</tspan>
|
||||
</text>
|
||||
<text id="ключ3" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="bold" fill="#4990E2">
|
||||
<tspan x="26" y="118">ключ3</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue