คุณสมบัติจาวาสคริปต์

สารบัญ

แสดงสารบัญ

คุณสมบัติเป็นส่วนที่สำคัญที่สุดของวัตถุ 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 สำหรับ...ในลูป

คำสั่ง for...in ของ JavaScript จะวนซ้ำคุณสมบัติของวัตถุ

ไวยากรณ์

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.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>

หรือลบบุคคล["อายุ"];

ตัวอย่าง

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 จะลบทั้งค่าของคุณสมบัติและตัวคุณสมบัติเอง

หลังจากลบแล้ว คุณสมบัติจะไม่สามารถใช้งานได้ก่อนที่จะเพิ่มกลับเข้าไปใหม่อีกครั้ง

ที่ ตัวดำเนินการ ลบ ได้รับการออกแบบมาเพื่อใช้กับคุณสมบัติของวัตถุ มันไม่มีผลกระทบต่อ ตัวแปรหรือฟังก์ชัน

ตัวดำเนินการ ลบ ไม่ควรใช้กับวัตถุ 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 loop สำหรับแต่ละอาร์เรย์:

ตัวอย่าง

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 จะไม่ลบคุณสมบัติที่สืบทอดมา แต่ถ้าคุณลบ คุณสมบัติต้นแบบจะส่งผลต่อวัตถุทั้งหมด สืบทอดมาจากต้นแบบ