JavaScript Display Objects

JavaScript பொருள்களைக் காட்சிப்படுத்துவதைக் கற்றுக்கொள்ளுங்கள்

JavaScript பொருள்களை எவ்வாறு காட்சிப்படுத்துவது?

ஒரு JavaScript பொருளைக் காட்சிப்படுத்துவது [object Object] வெளியீட்டைக் கொடுக்கும்.

எடுத்துக்காட்டு

// ஒரு பொருளை உருவாக்கவும்
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

let text = person;
// 'text' என்பது "[object Object]" ஐக் கொண்டிருக்கும்

🔍 தீர்வுகள்:

JavaScript பொருள்களைக் காட்சிப்படுத்த சில தீர்வுகள்:

  • பெயரால் பொருள் பண்புகளைக் காட்சிப்படுத்துதல்
  • ஒரு லூப்பில் பொருள் பண்புகளைக் காட்சிப்படுத்துதல்
  • Object.values() பயன்படுத்தி பொருளைக் காட்சிப்படுத்துதல்
  • JSON.stringify() பயன்படுத்தி பொருளைக் காட்சிப்படுத்துதல்

பொருள் பண்புகளைக் காட்சிப்படுத்துதல்

ஒரு பொருளின் பண்புகளை ஒரு சரத்தில் சேர்க்கலாம்:

person பொருள்

name "John"
age 30
city "New York"

எடுத்துக்காட்டு

// ஒரு பொருளை உருவாக்கவும்
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// பண்புகளைச் சேர்க்கவும்
let text = person.name + "," + person.age + "," + person.city;
// 'text' என்பது "John,30,New York" ஐக் கொண்டிருக்கும்

For .. In லூப் பயன்படுத்துதல்

ஒரு பொருளின் பண்புகளை ஒரு லூப்பில் சேகரிக்கலாம்:

எடுத்துக்காட்டு

// ஒரு பொருளை உருவாக்கவும்
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// ஒரு உரையை உருவாக்கவும்
let text = "";
for (let x in person) {
  text += person[x] + " ";
}
// 'text' என்பது "John 30 New York " ஐக் கொண்டிருக்கும்

⚠️ குறிப்பு:

நீங்கள் லூப்பில் person[x] பயன்படுத்த வேண்டும். person.x வேலை செய்யாது (ஏனெனில் x என்பது லூப் மாறி).

For..in லூப் படிப்படியாக:

let text = "";
// முதல் மறு செய்கை: x = "name", person[x] = "John"
// இரண்டாவது மறு செய்கை: x = "age", person[x] = 30  
// மூன்றாவது மறு செய்கை: x = "city", person[x] = "New York"
// இறுதி உரை: "John 30 New York "

Object.values() பயன்படுத்துதல்

Object.values() பண்பு மதிப்புகளிலிருந்து ஒரு வரிசையை உருவாக்குகிறது:

எடுத்துக்காட்டு

// ஒரு பொருளை உருவாக்கவும்
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// ஒரு வரிசையை உருவாக்கவும்
const myArray = Object.values(person);
// myArray = ["John", 30, "New York"]

// வரிசையை சரமாக மாற்றவும்
let text = myArray.toString();
// 'text' என்பது "John,30,New York" ஐக் கொண்டிருக்கும்

உள்ளீட்டு பொருள்

name "John"
age 30
city "New York"

Object.values()

பொருளிலிருந்து மதிப்புகளை எடுக்கிறது

வெளியீட்டு வரிசை

["John", 30, "New York"]

Object.entries() பயன்படுத்துதல்

Object.entries() லூப்களில் பொருள்களைப் பயன்படுத்த எளிதாக்குகிறது:

எடுத்துக்காட்டு

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
  text += fruit + ": " + value + "
"; } /* வெளியீடு: Bananas: 300
Oranges: 200
Apples: 500
*/

🎯 Object.entries() வேலை:

Object.entries() பொருளை [key, value] ஜோடிகளின் வரிசையாக மாற்றுகிறது:

Object.entries({Bananas:300, Oranges:200, Apples:500})
// விளைவு: [["Bananas", 300], ["Oranges", 200], ["Apples", 500]]

JSON.stringify() பயன்படுத்துதல்

JavaScript பொருள்களை JSON முறை JSON.stringify() உடன் ஒரு சரமாக மாற்றலாம்.

JSON.stringify() JavaScript இல் சேர்க்கப்பட்டுள்ளது மற்றும் அனைத்து உலாவிகளிலும் ஆதரிக்கப்படுகிறது.

📝 குறிப்பு:

முடிவு JSON குறியீட்டில் எழுதப்பட்ட ஒரு சரமாக இருக்கும்: {"name":"John","age":50,"city":"New York"}

எடுத்துக்காட்டு

// ஒரு பொருளை உருவாக்கவும்
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

// பொருளை சரமாக மாற்றவும்
let text = JSON.stringify(person);
// 'text' என்பது '{"name":"John","age":30,"city":"New York"}' ஐக் கொண்டிருக்கும்

JSON.stringify() விருப்பங்கள்:

const person = {name: "John", age: 30, city: "New York"};

// அழகான அச்சிடல்:
let prettyText = JSON.stringify(person, null, 2);
/*
வெளியீடு:
{
  "name": "John",
  "age": 30,
  "city": "New York"
}
*/

முறை ஒப்பீடு

முறை விளக்கம் பயன்பாடு வெளியீடு எடுத்துக்காட்டு
பண்பு அணுகல் பெயரால் நேரடி பண்பு அணுகல் தனிப்பட்ட பண்புகள் தேவைப்படும் போது "John,30,New York"
for..in லூப் அனைத்து பண்புகளையும் லூப் செய்தல் அனைத்து பண்புகளையும் செயலாக்க வேண்டும் "John 30 New York "
Object.values() மதிப்புகளின் வரிசையை உருவாக்குதல் மதிப்புகள் மட்டும் தேவைப்படும் போது "John,30,New York"
Object.entries() முக்கிய-மதிப்பு ஜோடிகளின் வரிசை முக்கியங்கள் மற்றும் மதிப்புகள் தேவைப்படும் போது "John: 30, city: New York"
JSON.stringify() JSON சரமாக மாற்றுதல் JSON வடிவத்தில் சேமிக்க/அனுப்ப வேண்டும் '{"name":"John","age":30,"city":"New York"}'

மேலும் அறிக

JavaScript Object Definitions

பொருள் வரையறைகளைக் கற்றுக்கொள்ளுங்கள்

JavaScript Object Constructors

பொருள் கட்டுநர்களைக் கற்றுக்கொள்ளுங்கள்

JavaScript Object this

this முக்கியச் சொல்லைப் புரிந்துகொள்ளுங்கள்

JavaScript Object Destructuring

பொருள் பிரித்தலையும் பயன்படுத்தவும்

JavaScript Object Prototypes

புரோட்டோடைப் பயன்படுத்தவும்

JavaScript Object Iterations

பொருள் மறு செய்கைகளைக் கற்றுக்கொள்ளுங்கள்

பயிற்சி

பின்வரும் முறைகளில் ஒன்று மட்டுமே உள்ளமைக்கப்பட்ட JavaScript Object முறையாகும், எது?

return()
✗ தவறு! return() என்பது JavaScript இல் உள்ளமைக்கப்பட்ட Object முறை அல்ல. return என்பது ஒரு முக்கியச் சொல், இது ஒரு செயல்பாட்டிலிருந்து ஒரு மதிப்பைத் திரும்பப் பெற பயன்படுகிறது, ஆனால் இது ஒரு முறை அல்ல
all()
✗ தவறு! all() என்பது JavaScript இல் உள்ளமைக்கப்பட்ட Object முறை அல்ல. Promise.all() உள்ளது, ஆனால் Object.all() இல்லை
entries()
✓ சரி! Object.entries() என்பது ஒரு உள்ளமைக்கப்பட்ட JavaScript Object முறையாகும், இது ஒரு பொருளின் [key, value] ஜோடிகளின் வரிசையை வழங்குகிறது. இது ES2017 இல் அறிமுகப்படுத்தப்பட்டது மற்றும் பொருள் பண்புகளை மறு செய்கை செய்வதற்கு பயனுள்ளதாக இருக்கிறது
methods()
✗ தவறு! methods() என்பது JavaScript இல் உள்ளமைக்கப்பட்ட Object முறை அல்ல. JavaScript இல் பொருளின் முறைகளைப் பெற ஒரு நிலையான முறை இல்லை