Свойства JavaScript

Свойства — это значения, связанные с объектом JavaScript.

Объект JavaScript — это коллекция неупорядоченных свойств.

Свойства обычно можно изменять, добавлять и удалять, но некоторые из них доступны только для чтения.

Доступ к свойствам JavaScript

Синтаксис доступа к свойству объекта:

objectName.property      // person.age

или

objectName["property"]   // person["age"]

или

objectName[expression]   // x = "age"; person[x]

Выражение должно возвращать имя свойства.

Пример 1

person.firstname + " is " + person.age + " years old.";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with .property:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Пример 2

person["firstname"] + " is " + person["age"] + " years old.";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with ["property"]:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>

</body>
</html>

JavaScript для... в цикле

Оператор JavaScript for...in циклически перебирает свойства объекта.

Синтаксис

for (let variable in object) {
      // code to be executed
 }

Блок кода внутри цикла for...in будет выполняться один раз для каждого свойства.

Перебираем свойства объекта:

Пример

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
    txt += person[x];
 }

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Looping object property values:</p>

<p id="demo"></p>

<script>
const person = {
  fname:"John",
  lname:"Doe",
  age:25
}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Добавление новых свойств

Вы можете добавить новые свойства к существующему объекту, просто присвоив ему значение.

Предположим, что объект person уже существует - затем вы можете придать ему новые свойства:

Пример

person.nationality = "English";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Add a new property to an existing object:</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

</body>
</html>

Удаление свойств

Ключевое слово delete удаляет свойство из объекта:

Пример

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person.age;

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

или удалите person["age"];

Пример

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

<p id="demo"></p>

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person["age"];

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

Ключевое слово delete удаляет как значение свойства, так и само свойство.

После удаления свойство нельзя будет использовать, пока оно не будет добавлено снова.

Оператор delete предназначен для использования со свойствами объекта. Это не влияет на переменные или функции. Оператор delete предназначен для использования со свойствами объекта. Это не влияет на переменные или функции.

Оператор delete не следует использовать для предопределенного объекта JavaScript. характеристики. Это может привести к сбою вашего приложения.

Вложенные объекты

Значения в объекте могут быть другим объектом:

Пример

myObj = {
  name:"John",
  age:30,
    
  cars: {
    car1:"Ford",
      
  car2:"BMW",
    car3:"Fiat"
    }
}

Вы можете получить доступ к вложенным объектам, используя точечную запись или скобочную запись:

Пример

myObj.cars.car2;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>

</body>
</html>

или :

Пример

myObj.cars["car2"];

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars["car2"];
</script>

</body>
</html>

или :

Пример

myObj["cars"]["car2"];

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj["cars"]["car2"];
</script>

</body>
</html>

или :

Пример

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

<p id="demo"></p>

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}

let p1 = "cars";
let p2 = "car2";
document.getElementById("demo").innerHTML = myObj[p1][p2];
</script>

</body>
</html>

Вложенные массивы и объекты

Значения в объектах могут быть массивами, а значения в массивах могут быть объектами:

Пример

const myObj =
  {
  name: "John",
  age: 30,
    
  cars: [
    {name:"Ford", 
  models:["Fiesta", "Focus", "Mustang"]},
    
  {name:"BMW", models:["320", "X3", "X5"]},
      
  {name:"Fiat", models:["500", "Panda"]}
    ]
}

Чтобы получить доступ к массивам внутри массивов, используйте цикл for-in для каждого массива:

Пример

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name 
  + "</h1>";
  for (let j in myObj.cars[i].models) {
    
  x += myObj.cars[i].models[j];
  }
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Nested JavaScript Objects and Arrays.</h2>

<p id="demo"></p>

<script>
let x = "";
const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

for (let i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j] + "<br>";
  }
}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Атрибуты свойства

Все свойства имеют имя. Кроме того, они также имеют ценность.

Значение является одним из атрибутов свойства.

Другие атрибуты: перечисляемые, настраиваемые и записываемые.

Эти атрибуты определяют, как можно получить доступ к свойству (доступно ли оно для чтения?, доступно ли оно для чтения? на нем можно писать?)

В JavaScript все атрибуты могут быть прочитаны, но только атрибут value может быть прочитан. быть изменено (и только если свойство доступно для записи).

( В ECMAScript 5 есть методы как для получения, так и для установки всех свойств. атрибуты)

Свойства прототипа

Объекты JavaScript наследуют свойства своего прототипа.

Ключевое слово delete не удаляет унаследованные свойства, но если вы удалите свойство прототипа, оно повлияет на все объекты унаследовано от прототипа.

Свойства JavaScript

Оглавление