Объекттер

Объекттер

 

Берилиштердин түрлөрү бөлүмүнөн белгилүү болгондой , JavaScriptде 8 маалымат түрү бар. Алардын жетөө "примитивдүү" деп аталат, анткени алар бир гана маанини камтыйт (ал сап, сан же башка нерсе).

Объекттер ар кандай баалуулуктардын коллекцияларын жана татаалыраак объекттерди сактоо үчүн колдонулат. Объекттер JavaScriptте көп колдонулат, алар тилдин негиздеринин бири болуп саналат. Ошондуктан, биз андан ары барардан мурун аларды түшүнүшүбүз керек.

Объект {…}кошумча касиет тизмеси менен тармал кашаалардын жардамы менен түзүлүшү мүмкүн . Кыймыл - бул ачкыч: баалуу жуп, бул жерде ключсап ("мүлк аты" деп да аталат) жана значениебардык нерсе болушу мүмкүн.

Биз объектти кол коюлган папкалар менен кутуча катары көрсөтө алабыз. Ар бир маалымат элементи ачкыч жазылган өз папкасында сакталат. Ачкыч менен папканы оңой табуу, жок кылуу же ага бир нерсе кошуу.

Бош объект ("бош куту") эки синтаксистин бирин колдонуу менен түзүлүшү мүмкүн:

@A@let user = new Object(); // синтаксис "конструктор объекта"

let user = {}; // синтаксис "литерал объекта"@A@

Көбүнчө тармал кашаа варианты колдонулат {...}. Мындай билдирүү объекттин түз же түз белгиси деп аталат .

Литералдар жана касиеттер

Литералдык синтаксисти колдонууда {...}объектке дароо эле бир нече касиеттерди ачкыч түрүндө кое алабыз: маани жуптары:

@A@let user = { // объект

name: "John",

// под ключом "name" хранится значение "John"

age: 30 // под ключом "age" хранится значение 30

};@A@

Ар бир менчиктин ачкычы бар (ошондой эле "аты" же "идентификатор" деп аталат). Мүлктүн аталышынан кийин эки чекит коюлуп ":", андан кийин мүлктүн баасы көрсөтүлөт. Эгерде объект бир нече касиетке ээ болсо, алар үтүр менен бөлүнгөн.

Объекттин userазыр эки касиети бар:

  1. Аты "name"жана мааниси менен биринчи касиет "John".
  2. "age"Аты жана наркы менен экинчи мүлк 30.

userБиздин объект "аты" жана "жаш" деген жазуусу бар эки папкадан турган кутуча деп айта алабыз .

Биз ага каалаган убакта жаңы папкаларды кошуп, папкаларды өчүрүп же каалаган папканын мазмунун окуй алабыз.

касиеттерге жетүү үчүн, "чекит" белгисин колдонуңуз:

@A@// получаем свойства объекта:

alert( user.name );// John

alert( user.age );// 30@A@

Маани ар кандай түрдө болушу мүмкүн. Логикалык мааниси бар касиетти кошолу:

@A@user.isAdmin = true;@A@

Менчиктин аталышы бирден ашык сөз болушу мүмкүн, бирок андан кийин ал тырмакчага алынышы керек:

@A@let user = { name: "John", age: 30, }@A@

Бул "илинген үтүр" деп аталат. Бул ыкма касиеттерди кошуу, алып салуу жана жылдырууну жөнөкөйлөтөт, анткени бардык объект саптары бирдей болуп калат.

Туруктуу деп жарыяланган объект өзгөртүлүшү мүмкүн

менен жарыяланган объект өзгөртүлүшүconst мүмкүн .

Мисалы:

@A@const user = { name: "John" };

user.name = "Pete"; // (*)

alert(user.name); // Pete@A@

Бул сызык ката алып келиши керек окшойт (*), бирок жок, бул жерде баары өз тартибинде. Чындыгында, декларация constөзгөрүлмөнүн өзүн гана өзгөртүүдөн коргойт user, анын мазмунун эмес.

constЭгерде биз өзгөрмөгө башка маани берсек, аныктама ката берет: user=....

Объекттин касиеттерин туруктуу кылуунун дагы бир жолу бар, биз аны Желек жана касиеттин дескрипторлору бөлүмүндө карайбыз .

 

Чарчы кашаалар

Аты бир нече сөздөн турган касиеттер үчүн "чекит аркылуу" мааниге жетүү иштебейт

@A@// это вызовет синтаксическую ошибку

user.likes birds = true@A@

JavaScript касиетке кирип жатканыбызды көрүп user.likes, андан кийин түшүнүксүз сөз келет birds. Натыйжада синтаксистик ката болуп саналат.

Чекит ачкычтын өзгөрмөлөрдү атоо эрежелерине ылайык аталышын талап кылат. Башкача айтканда, анда боштуктар болгон эмес, сан менен башталбаган жана $жана -дан башка атайын белгилер болгон эмес _.

Мындай учурларда төрт бурчтуу кашаа аркылуу касиеттерге кирүүнүн альтернативалуу жолу бар. Бул каалаган менчик аталышы менен иштейт:

@A@let user = {}; // присваивание значения свойству

user["likes birds"] = true; // получение значения свойства alert(user["likes birds"]); // true

// удаление свойства delete

user["likes birds"];@A@

Азыр баары жайында. Чарчы кашаадагы сап тырмакчага алынганына көңүл буруңуз (тырмакчанын кайсы түрү болбосун).

Чарчы кашаалар ошондой эле аты туюнтма натыйжасы болушу мүмкүн болгон касиетке кайрылууга мүмкүнчүлүк берет. Мисалы, касиеттин аталышы өзгөрмөдө сакталышы мүмкүн:

@A@let key = "likes birds";

// то же самое, что и user["likes birds"] = true;

user[key] = true;@A@

Бул жерде өзгөрмө keyаткаруу убагында бааланышы мүмкүн же колдонуучунун киргизүүсүнө жараша болот. Андан кийин биз аны мүлккө жетүү үчүн колдонобуз. Бул бизге көп ийкемдүүлүктү берет.

Мисал:

@A@let user = {
  name: "John",
  age: 30
};

let key = prompt("Что вы хотите узнать о пользователе?", "name");

// доступ к свойству через переменную
alert( user[key] ); // John (если ввели "name")@A@

"Чокат аркылуу" деген белги буга жол бербейт:

@A@let user = {
  name: "John",
  age: 30
};

let key = "name";
alert( user.key ); // undefined@A@

Эсептелген касиеттер

Эсептелген касиетти түзүү үчүн квадрат кашааларды сөзмө-сөз жазууда колдоно алабыз .

Мисал:

@A@let fruit = prompt("Какой фрукт купить?", "apple");

let bag = {
  [fruit]: 5, // имя свойства будет взято из переменной fruit
};

alert( bag.apple ); // 5, если fruit="apple"@A@

Эсептелген касиеттин мааниси жөнөкөй: белгилөө [fruit]касиеттин аталышы өзгөрмөдөн алынышы керек дегенди билдирет fruit.

Ал эми зыяратчы сөздү киргизсе "apple", анда объект bagазыр касиетти камтыйт {apple: 5}.

Негизинен, жогорудагы мисал төмөнкү мисалга окшош иштейт:

@A@let fruit = prompt("Какой фрукт купить?", "apple");
let bag = {};

// имя свойства будет взято из переменной fruit
bag[fruit] = 5;@A@

...Бирок биринчи мисал кыскараак көрүнөт.

Чарчы кашаанын ичинде татаалыраак туюнтмаларды да колдоно алабыз:

@A@let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};@A@

Чарчы кашаалар чекит белгисине караганда көбүрөөк мүмкүнчүлүктөрдү берет. Алар сизге ар кандай мулк аталыштарын жана өзгөрмөлөрдү колдонууга мүмкүндүк берет, бирок алар татаал код конструкцияларын талап кылат.

Кыскача айтканда, көпчүлүк учурда менчик аттары белгилүү жана жөнөкөй болгон учурларда чекит белгиси колдонулат. Бизге татаалыраак нерсе керек болсо, анда биз чарчы кашааларды колдонобуз.

Өзгөрмөнүн касиети

Чыныгы коддо биз көп учурда бар өзгөрмөлөрдү бирдей аталыштагы касиеттер үчүн маанилер катары колдонушубуз керек.

Мисалы:

@A@function makeUser(name, age) {
  return {
    name: name,
    age: age
    // ...другие свойства
  };
}

let user = makeUser("John", 30);
alert(user.name); // John@A@

Жогорудагы мисалда касиеттердин аттары nameжана ageбиз бул касиеттердин маанилери катары алмаштырган өзгөрмөлөрдүн аттары дал келет. Бул ыкма ушунчалык кеңири таралгандыктан, бул белгини жөнөкөйлөтүү үчүн атайын стенографиялык касиеттер бар .

Анын ордуна, name:nameбиз жөн гана жаза алабыз name:

@A@function makeUser(name, age) {
  return {
    name, // то же самое, что и name: name
    age   // то же самое, что и age: age
    // ...
  };
}@A@ 
Биз бир эле объектте нормалдуу жана кыска касиеттерди колдоно алабыз:
let user = {
  name,  // тоже самое, что и name:name
  age: 30
};

Менчиктин аталышына чектөөлөр

Белгилүү болгондой, өзгөрмө аты "үчүн", "келсин", "кайтаруу" ж.б. сыяктуу сакталган сөздөр менен бирдей боло албайт.

Бирок объектинин касиеттери үчүн мындай чектөө жок:

@A@// эти имена свойств допустимы
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6@A@

Башкача айтканда, мүлктүн аталыштарына эч кандай чектөөлөр жок. Алар саптар же символдор түрүндө болушу мүмкүн (идентификаторлор үчүн атайын тип, алар кийинчерээк талкууланат).

Бардык башка маалымат түрлөрү автоматтык түрдө сапка айландырылат.

Мисалы, сиз санды 0ачкыч катары колдонсоңуз, анда ал сапка айланат "0":

@A@let obj = {
  0: "Тест" // то же самое что и "0": "Тест"
};

// обе функции alert выведут одно и то же свойство (число 0 преобразуется в строку "0")
alert( obj["0"] ); // Тест
alert( obj[0] ); // Тест (то же свойство)@A@

Атайын мүлк менен байланышкан кичинекей тузак бар __proto__. Биз аны объект эмес мааниге коё албайбыз:

@A@let obj = {};
obj.__proto__ = 5; // присвоим число
alert(obj.__proto__); // [object Object], значение - это объект, т.е. не то, что мы ожидалиA@A

Көрүнүп тургандай, примитивдик маани 5берилбейт.

Прототиптик мурастоо__proto__ бөлүмдөрүндө биз мүлктүн өзгөчөлүктөрүн кененирээк изилдейбиз жана бул жүрүм-турумду оңдоонун жолдорун сунуштайбыз.

Мүлктүн бар экендигин текшерүү, "in" Оператор

Көптөгөн башка тилдерден айырмаланып, JavaScript объекттеринин өзгөчөлүгү сиз каалаган мүлккө кире аласыз. Мүлк жок болсо да, ката болбойт!

жок касиетке жеткенде, кайтарат undefined. Бул жөн гана мүлктүн бар-жоктугун текшерүүгө мүмкүндүк берет

@A@let user = {};

alert( user.noSuchProperty === undefined ); 
// true означает "свойства нет"@A@

"in"Ошондой эле объектте мүлктүн бар экендигин текшерүү үчүн атайын оператор бар .

Оператордун синтаксиси:

"key" in object

Мисал:

@A@let user = { name: "John", age: 30 };

alert( "age" in user ); // true, user.age существует
alert( "blabla" in user ); // false, user.blabla не существует@A@

Оператордун сол жагында касиеттин аталышыin болушу керек экенин эске алыңыз . Бул, адатта, цитаталанган сап.

Эгерде биз тырмакчаларды калтырсак, анда биз касиеттин атын камтыган өзгөрмөнү көрсөтүп жатабыз дегенди билдирет. Мисалы:

@A@let user = { age: 30 };

let key = "age";
alert( key in user ); // true, имя свойства было взято из переменной key@A@

Оператор эмне үчүн керек in? менен салыштыруу жетиштүү эмеспи undefined?

Көпчүлүк учурларда, менен салыштыруу undefined. Бирок ал туура келбеген өзгөчө жагдай бар жана сиз колдонушуңуз керек "in".

Бул касиет бар, бирок маанини камтыган учурда болот undefined:

 
 
@A@let obj = {
  test: undefined
};

alert( obj.test ); //  выведет undefined, значит свойство не существует?
alert( "test" in obj ); // true, свойство существует!@A@

Жогорудагы мисалда, мүлк obj.testтехникалык жактан объектте бар. Оператор inтуура иштеген.

Мындай жагдайлар өтө сейрек кездешет, анткени алар, undefinedадатта, ачык-айкын дайындалбайт. "Белгисиз" же "бош" касиеттери үчүн биз маанини колдонобуз null. Ошентип, оператор inкоддо экзотикалык конок болуп саналат.

"for..in" цикли

Цикл объекттин бардык касиеттерин кайталоо үчүн колдонулат for..in. Бул цикл мурда изилденген циклден айырмаланат for(;;).

Синтаксис:

@A@for (key in object) {
  // тело цикла выполняется для каждого свойства объекта
}@A@

Мисалы, объекттин бардык касиеттерин көрсөтөлү user:

@A@let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // ключи
  alert( key );  // name, age, isAdmin
  // значения ключей
  alert( user[key] ); // John, 30, true
}@A@

Баардык "for" конструкциялары бул жердегидей цикл ичинде өзгөрмө жарыялоого мүмкүнчүлүк берерин эске алыңыз let key.

Ошондой эле, биз башка өзгөрмө атын колдоно алабыз. Мисалы, вариант көп колдонулат "for (let prop in obj)".

Объекттин касиеттерин заказ кылуу

Объекттин касиеттери иреттелгенби? Башкача айтканда, биз объекттин бардык касиеттерин айлантсак, аларды биз кошкон тартипте алабызбы? Биз ага ишенсек болобу?

Кыска жооп: касиеттер өзгөчө тартипте иреттелген: бүтүн сан баскычтары бар касиеттер өсүү тартибинде, калгандары түзүү тартибинде. Келгиле, кененирээк карап көрөлү.

Мисал катары, телефон коддору бар объектти карап көрөлү:

@A@let codes = {
  "49": "Германия",
  "41": "Швейцария",
  "44": "Великобритания",
  // ..,
  "1": "США"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}@A@

Эгерде биз немис аудиториясы үчүн сайт жасап жаткан болсок, анда биз коддун 49биринчи болушун каалайбыз.

Бирок биз кодду иштетсек, биз такыр башка сүрөттү көрөбүз:

  • АКШ (1) биринчи орунда
  • андан кийин Швейцария (41) жана башкалар.

Терүү коддору өсүү тартибинде, анткени алар бүтүн сандар: 1, 41, 44, 49.

бүтүн касиеттери? Бул эмне?

"Бүтүн сан касиети" термини бүтүн санга өзгөртүүсүз жана өзгөртүлүүчү сапты билдирет.

Башкача айтканда, "49"бүтүн сан касиетинин аталышы, анткени ал бүтүн санга, анан кайра сапка айландырылса, ал өзгөрбөйт. Бирок касиеттери "+49"же "1.2"жок:

@A@// Math.trunc - встроенная функция, которая удаляет десятичную часть
alert( String(Math.trunc(Number("49"))) ); // "49", то же самое ⇒ свойство целочисленное
alert( String(Math.trunc(Number("+49"))) ); // "49", не то же самое, что "+49" ⇒ свойство не целочисленное
alert( String(Math.trunc(Number("1.2"))) ); // "1", не то же самое, что "1.2" ⇒ свойство не целочисленное@A@

…Башка жагынан алганда, эгерде баскычтар бүтүн сандар болбосо, анда алар жаралуу иретинде кайталанат, мисалы:

@A@let user = {
  name: "John",
  surname: "Smith"
};
user.age = 25; // добавим ещё одно свойство

// не целочисленные свойства перечислены в порядке создания
for (let prop in user) {
  alert( prop ); // name, surname, age
}@A@

Ошентип, телефон коддору менен көйгөйүбүздү чечүү үчүн, коддорду бүтүн эмес касиеттерге ээ кылуу менен алдап алабыз. "+"Ар бир коддун алдына белги кошуу жетиштүү болот.

Мисал:

@A@let codes = {
  "+49": "Германия",
  "+41": "Швейцария",
  "+44": "Великобритания",
  // ..,
  "+1": "США"
};

for (let code in codes) {
  alert( +code ); // 49, 41, 44, 1
}@A@

Эми код биз ойлогондой иштейт.

Бардыгы

Объекттер бир катар кошумча өзгөчөлүктөргө ээ ассоциативдик массивдер.

Алар касиеттерди сактайт (ачкыч-маани жуптары), мында:

  • Менчик ачкычтары саптар же символдор болушу керек (көбүнчө саптар).
  • Баалуулуктар ар кандай болушу мүмкүн.

Менчикке кирүү үчүн биз колдоно алабыз:

  • Чекиттик белги: obj.property.
  • Чарчы кашаалар obj["property"]. Чарчы кашаалар өзгөрмөнүн ачкычын алууга мүмкүндүк берет, мисалы, obj[varWithKey].

Кошумча операторлор:

  • Мүлктү жок кылуу: delete obj.prop.
  • Мүлктүн бар экендигин текшерүү: "key" in obj.
  • Объекттин касиеттери боюнча кайталоо: a for цикли for (let key in obj).

Бул бөлүмдө биз изилдеген нерсе "жөнөкөй нерсе" же жөн эле Object.

JavaScript'те объекттердин башка көптөгөн түрлөрү бар:

  • Arrayмаалыматтардын буйрук жыйнактарын сактоо үчүн,
  • Dateдата жана убакыт маалыматты сактоо үчүн,
  • Errorката маалымат сактоо үчүн.
  • … жана башка.

Алардын өз өзгөчөлүктөрү бар, аларды кийинчерээк изилдейбиз. Кээде адамдар "Массив берилиш түрү" же "Күнкү маалымат түрү" сыяктуу нерселерди айтышат, бирок техникалык жактан алар өзүнчө типтер эмес, тескерисинче, маалымат түрү Object. Алар аны ар кандай жолдор менен гана кеңейтет.

JavaScriptдеги объекттер абдан күчтүү. Бул жерде биз чындап эле чоң темага бир аз тереңирээк кириштик. Биз объекттер менен тыгыз иштешип, алар тууралуу окуу куралынын кийинки бөлүктөрүндө көбүрөөк билебиз.

Tasks

салам объект

маанилүүлүгү: 5

Ар бир пункттан тапшырманы өзүнчө сапта аткаруу менен кодду жазыңыз:

  1. бош түзүү user.
  2. nameМаанилүү касиетти кошуңуз John.
  3. surnameМаанилүү касиетти кошуңуз Smith.
  4. Менчиктин маанисин nameөзгөртүңүз Pete.
  5. nameОбъекттен мүлктү алып салыңыз .
чечим

Боштугун текшериңиз

маанилүүлүгү: 5

Объекттин касиеттери жок болсо isEmpty(obj)кайтаруучу функцияны жазыңыз , болбосо .truefalse

Бул сыяктуу иштеши керек:

let schedule = {};

alert( isEmpty(schedule) ); // true

schedule["8:30"] = "get up";

alert( isEmpty(schedule) ); // false

Тапшырма үчүн тесттер менен кумкоргонду ачыңыз.

чечим

Туруктуу объектилер?

маанилүүлүгү: 5

менен жарыяланган объектти өзгөртүүгө болобу const? Сиз кандай ойлойсуз?

const user = {
  name: "John"
};

// это будет работать?
user.name = "Pete";
чечим

Объекттин касиеттеринин суммасы

маанилүүлүгү: 5

Биздин команданын эмгек акысын сактаган объектибиз бар:

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}

Бардык эмгек акыларды жыйынтыктоо үчүн кодду жазыңыз жана натыйжаны өзгөрмөдө сактаңыз sum. Бул иштеши керек 390.

Эгерде объект salariesбош болсо, анда натыйжа болушу керек 0.

чечим

Бардык сандык касиеттерди 2ге көбөйтүңүз

маанилүүлүгү: 3

Объекттин multiplyNumeric(obj)бардык сандык касиеттерин көбөйтүүчү функция түзүңүз .obj2

Мисалы:

// до вызова функции
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// после вызова функции
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

multiplyNumericЭч нерсени кайтаруунун кереги жок экенин эске алыңыз . Сиз объектти түздөн-түз өзгөртүү керек.

PS typeofМенчиктин мааниси сандык экенин текшерүү үчүн колдонуңуз