ما شی را در 🧑🏻💻جاوا اسکریپت⤵️ می شناسیم

## همه چیز در جاوا اسکریپت به عنوان مثال: اشیاء
محدوده
متغیر بخش اساسی در برنامه نویسی است. ما متغیر را برای ذخیره انواع داده های مختلف اعلام می کنیم. برای تعریف یک متغیر از کلمه کلیدی استفاده می کنیم بود، اجازه دهید و پایان. یک متغیر را می توان در دامنه های مختلف اعلام کرد. در این قسمت متغیرهای scope، scope of variables را وقتی از var یا let استفاده می کنیم، خواهیم دید.
دامنه متغیرها می تواند باشد:
متغیر را می توان به صورت جهانی یا محلی اعلام کرد. ما دامنه جهانی و محلی را خواهیم دید.
هر چیزی که بدون let، var یا const اعلام شود در سطح جهانی محدوده می شود.
اجازه دهید تصور کنیم که یک فایل scope.js داریم.
شیء جهانی پنجره
بدون استفاده از console.log() مرورگر خود را باز کنید و بررسی کنید، اگر a یا b را در مرورگر بنویسید، مقدار a و b را مشاهده خواهید کرد. یعنی a و b از قبل در پنجره موجود هستند.
//scope.js
a = "JavaScript"; // declaring a variable without let or const make it available in window object and this found anywhere
b = 10; // this is a global scope variable and found in the window object
function letsLearnScope() {
console.log(a, b);
if (true) {
console.log(a, b);
}
}
console.log(a, b); // accessible
گستره جهانی
یک متغیر جهانی اعلام شده را می توان در هر جایی در همان فایل مشاهده کرد. اما اصطلاح جهانی نسبی است. میتواند برای فایل جهانی باشد یا نسبت به برخی از کدها جهانی باشد.
//scope.js
let a = "JavaScript"; // is a global scope it will be found anywhere in this file
let b = 10; // is a global scope it will be found anywhere in this file
function letsLearnScope() {
console.log(a, b); // JavaScript 10, accessible
if (true) {
let a = "Python";
let b = 100;
console.log(a, b); // Python 100
}
console.log(a, b);
}
letsLearnScope();
console.log(a, b); // JavaScript 10, accessible
محدوده محلی
متغیری که به عنوان محلی اعلام شده است فقط در کد بلوک خاصی قابل دسترسی است.
- Block Scope
- محدوده عملکرد
//scope.js
let a = "JavaScript"; // is a global scope it will be found anywhere in this file
let b = 10; // is a global scope it will be found anywhere in this file
// Function scope
function letsLearnScope() {
console.log(a, b); // JavaScript 10, accessible
let value = false;
// block scope
if (true) {
// we can access from the function and outside the function but
// variables declared inside the if will not be accessed outside the if block
let a = "Python";
let b = 20;
let c = 30;
let d = 40;
value = !value;
console.log(a, b, c, value); // Python 20 30 true
}
// we can not access c because c's scope is only the if block
console.log(a, b, value); // JavaScript 10 true
}
letsLearnScope();
console.log(a, b); // JavaScript 10, accessible
اکنون، شما درکی از دامنه دارید. یک متغیر اعلام شده با بود فقط محدوده عملکرد دارد اما متغیر با اعلام شده است اجازه دهید یا پایان محدوده بلوک است (بلوک تابع، اگر بلوک، بلوک حلقه، و غیره). Block در جاوا اسکریپت کدی است که بین دو براکت فرفری ({}) قرار دارد.
//scope.js
function letsLearnScope() {
var gravity = 9.81;
console.log(gravity);
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
if (true) {
var gravity = 9.81;
console.log(gravity); // 9.81
}
console.log(gravity); // 9.81
for (var i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
console.log(i); // 3
در ES6 به بالا وجود دارد اجازه دهید و پایان، بنابراین شما از یواشکی رنج نخواهید برد بود. وقتی استفاده می کنیم اجازه دهید متغیر ما دارای محدوده بلوکی است و سایر قسمت های کد ما را آلوده نمی کند.
//scope.js
function letsLearnScope() {
// you can use let or const, but gravity is constant I prefer to use const
const gravity = 9.81;
console.log(gravity);
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
if (true) {
const gravity = 9.81;
console.log(gravity); // 9.81
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// console.log(i), Uncaught ReferenceError: i is not defined
دامنه اجازه دهید و پایان همان هستند. تفاوت فقط در تخصیص مجدد است. ما نمی توانیم مقدار the را تغییر دهیم یا دوباره تخصیص دهیم const
متغیر. اکیدا پیشنهاد میکنم استفاده کنید اجازه دهید و پایان، با استفاده از اجازه دهید و پایان شما کدهای تمیز می نویسید و از اشتباهات سخت برای رفع اشکال جلوگیری می کنید. به عنوان یک قانون سرانگشتی، می توانید استفاده کنید اجازه دهید برای هر مقداری که تغییر کند، پایان برای هر مقدار ثابت، و برای آرایه، شی، تابع فلش و عبارت تابع.
📔 شی
همه چیز می تواند یک شی باشد و اشیا دارای ویژگی ها و ویژگی ها دارای مقادیر هستند، بنابراین یک شی یک جفت ارزش کلیدی است. سفارش کلید رزرو نشده است یا سفارشی وجود ندارد.
برای ایجاد یک شی به معنای واقعی کلمه، از دو براکت فرفری استفاده می کنیم.
ایجاد یک شی خالی
یک شی خالی
const person = {};
ایجاد یک شیء با مقادیر
اکنون، شی شخص دارای مشخصات firstName، lastName، سن، مکان، مهارت ها و isMarried است. مقدار خصوصیات یا کلیدها می تواند یک رشته، عدد، بولی، یک شی، تهی، تعریف نشده یا یک تابع باشد.
اجازه دهید چند نمونه از شی را ببینیم. هر کلید یک مقدار در شی دارد.
const rectangle = {
length: 20,
width: 20,
};
console.log(rectangle); // {length: 20, width: 20}
const person = {
firstName: "MD",
lastName: "Shaikh",
age: 250,
country: "INDIA",
city: "Mum",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
isMarried: false,
};
console.log(person);
گرفتن مقادیر از یک شی
با استفاده از دو روش می توانیم به مقادیر شی دسترسی پیدا کنیم:
- استفاده كردن . اگر نام کلید یک کلمه باشد، نام کلید به دنبال آن قرار می گیرد
- با استفاده از براکت مربع و نقل قول
const person = {
firstName: "MD",
lastName: "Shaikh",
age: 250,
country: "INDIA",
city: "Mum",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
getFullName: function () {
return `${this.firstName}${this.lastName}`;
},
"phone number": "+3584545454545",
};
// accessing values using .
console.log(person.firstName);
console.log(person.lastName);
console.log(person.age);
console.log(person.location); // undefined
// value can be accessed using square bracket and key name
console.log(person["firstName"]);
console.log(person["lastName"]);
console.log(person["age"]);
console.log(person["age"]);
console.log(person["location"]); // undefined
// for instance to access the phone number we only use the square bracket method
console.log(person["phone number"]);
ایجاد روش های شی
اکنون، شی شخص دارای ویژگی های getFullName است. getFullName تابعی در داخل شی شخص است و ما آن را یک متد شی می نامیم. را این کلمه کلیدی به خود شی اشاره دارد. ما می توانیم از کلمه استفاده کنیم این برای دسترسی به مقادیر خصوصیات مختلف شی. ما نمی توانیم از یک تابع فلش به عنوان متد شی استفاده کنیم زیرا کلمه this به جای خود شی به پنجره داخل تابع فلش اشاره دارد. مثال شی:
const person = {
firstName: "MD",
lastName: "Shaikh",
age: 250,
country: "INDIA",
city: "Mum",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
getFullName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(person.getFullName());
// MD Shaikh
تنظیم کلید جدید برای یک شی
یک شی یک ساختار داده قابل تغییر است و ما می توانیم محتوای یک شی را پس از ایجاد آن تغییر دهیم.
تنظیم یک کلید جدید در یک شی
const person = {
firstName: "MD",
lastName: "Shaikh",
age: 250,
country: "INDIA",
city: "Mum",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
getFullName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
person.nationality = "Ethiopian";
person.country = "INDIA";
person.title = "teacher";
person.skills.push("Meteor");
person.skills.push("SasS");
person.isMarried = true;
person.getPersonInfo = function () {
let skillsWithoutLastSkill = this.skills
.splice(0, this.skills.length - 1)
.join(", ");
let lastSkill = this.skills.splice(this.skills.length - 1)[0];
let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`;
let fullName = this.getFullName();
let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.`;
return statement;
};
console.log(person);
console.log(person.getPersonInfo());
MD Shaikh is Learning Js.
He lives in INDIA.
He Knows HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS.
روش های شی
روش های مختلفی برای دستکاری یک شی وجود دارد. اجازه دهید برخی از روش های موجود را ببینیم.
شیء.تخصیص: برای کپی کردن یک شی بدون تغییر شی اصلی
const person = {
firstName: "MD",
age: 250,
country: "INDIA",
city: "Mum",
skills: ["HTML", "CSS", "JS"],
title: "teacher",
address: {
street: "Heitamienkatu 16",
pobox: 2002,
city: "Mum",
},
getPersonInfo: function () {
return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.`;
},
};
//Object methods: Object.assign, Object.keys, Object.values, Object.entries
//hasOwnProperty
const copyPerson = Object.assign({}, person);
console.log(copyPerson);
دریافت کلیدهای شی با استفاده از Object.keys()
Object.keys: برای دریافت کلیدها یا خصوصیات یک شی به صورت آرایه
const keys = Object.keys(copyPerson);
console.log(keys); //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo']
const address = Object.keys(copyPerson.address);
console.log(address); //['street', 'pobox', 'city']
دریافت مقادیر شی با استفاده از Object.values()
شیء. ارزش ها:برای دریافت مقادیر یک شی به صورت آرایه
const values = Object.values(copyPerson);
console.log(values);
دریافت کلیدها و مقادیر شی با استفاده از Object.entries()
Object.entries:برای دریافت کلیدها و مقادیر در یک آرایه
const entries = Object.entries(copyPerson);
console.log(entries);
بررسی خواص با استفاده از hasOwnProperty()
دارای مالکیت است: برای بررسی اینکه آیا یک کلید یا ویژگی خاص در یک شی وجود دارد یا خیر
console.log(copyPerson.hasOwnProperty("name"));
console.log(copyPerson.hasOwnProperty("score"));
🌕 شما شگفت انگیز هستید. اکنون، شما با قدرت اجسام فوق العاده شارژ شده اید. شما بهتازگی چالشهای روز هشتم را به پایان رساندهاید و 8 گام در مسیر خود به سوی عظمت پیش رفتهاید. حالا چند تمرین برای مغز و عضلاتتان انجام دهید.
💻 تمرینات
تمرینات: سطح 1
- یک شی خالی به نام سگ ایجاد کنید
- شی سگ را روی کنسول چاپ کنید
- نام، پاها، رنگ، سن و خواص پوست را برای شی سگ اضافه کنید. خاصیت bark روشی است که برمی گردد پف بافته
- نام، پاها، رنگ، سن و ارزش پوست را از شی سگ دریافت کنید
- ویژگی های جدید شی سگ را تنظیم کنید: نژاد، getDogInfo
تمرینات: سطح 2
- فردی را پیدا کنید که مهارت های زیادی در شیء کاربران دارد.
- شمارش کاربران وارد شده، شمارش کاربرانی که بیشتر از 50 امتیاز از شی زیر دارند.
const users = {
Alex: {
email: 'alex@alex.com',
skills: ['HTML', 'CSS', 'JavaScript'],
age: 20,
isLoggedIn: false,
points: 30
},
Asab: {
email: 'asab@asab.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
age: 25,
isLoggedIn: false,
points: 50
},
Brook: {
email: 'daniel@daniel.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
age: 30,
isLoggedIn: true,
points: 50
},
Daniel: {
email: 'daniel@alex.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
age: 20,
isLoggedIn: false,
points: 40
},
John: {
email: 'john@john.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
age: 20,
isLoggedIn: true,
points: 50
},
Thomas: {
email: 'thomas@thomas.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React'],
age: 20,
isLoggedIn: false,
points: 40
},
Paul: {
email: 'paul@paul.com',
skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],
age: 20,
isLoggedIn: false,
points: 40
}
}```
- افرادی را پیدا کنید که توسعه دهنده پشته MERN از شیء کاربران هستند
- نام خود را در شیء کاربران بدون تغییر شیء اصلی کاربران تنظیم کنید
- دریافت تمام کلیدها یا ویژگی های شی کاربران
- تمام مقادیر شیء کاربران را دریافت کنید
- برای چاپ نام کشور، پایتخت، جمعیتها و زبانها از کشورهای مورد اعتراض استفاده کنید.
تمرینات: سطح 3
- یک شی به نام واقعی ایجاد کنید حساب شخصی. این دارد نام، نام خانوادگی، درآمدها، هزینه ها خواص و دارد totalIncome، totalExpense، accountInfo، addIncome، addExpense و موجودی حساب مواد و روش ها. درآمدها مجموعه ای از درآمدها و شرح و هزینه های آن مجموعه ای از درآمدها و شرح آن است.
- **** سوالات: 2، 3 و 4 بر اساس دو آرایه زیر است: کاربران و محصولات ()
js
const users = [
{
_id: "ab12ex",
username: "Alex",
email: "alex@alex.com",
password: "123123",
createdAt: "08/01/2020 9:00 AM",
isLoggedIn: false,
},
{
_id: "fg12cy",
username: "Asab",
email: "asab@asab.com",
password: "123456",
createdAt: "08/01/2020 9:30 AM",
isLoggedIn: true,
},
{
_id: "zwf8md",
username: "Brook",
email: "brook@brook.com",
password: "123111",
createdAt: "08/01/2020 9:45 AM",
isLoggedIn: true,
},
{
_id: "eefamr",
username: "Martha",
email: "martha@martha.com",
password: "123222",
createdAt: "08/01/2020 9:50 AM",
isLoggedIn: false,
},
{
_id: "ghderc",
username: "Thomas",
email: "thomas@thomas.com",
password: "123333",
createdAt: "08/01/2020 10:00 AM",
isLoggedIn: false,
},
];
const products = [
{
_id: "eedfcf",
name: "mobile phone",
description: "Huawei Honor",
price: 200,
ratings: [
{ userId: "fg12cy", rate: 5 },
{ userId: "zwf8md", rate: 4.5 },
],
likes: [],
},
{
_id: "aegfal",
name: "Laptop",
description: "MacPro: System Darwin",
price: 2500,
ratings: [],
likes: ["fg12cy"],
},
{
_id: "hedfcg",
name: "TV",
description: "Smart TV:Procaster",
price: 400,
ratings: [{ userId: "fg12cy", rate: 5 }],
likes: ["fg12cy"],
},
];
تصور کنید که مجموعه کاربران فوق را از پایگاه داده MongoDB دریافت می کنید.
آ. یک تابع به نام signUp ایجاد کنید که به کاربر اجازه می دهد به مجموعه اضافه کند. اگر کاربر وجود دارد، به کاربر اطلاع دهید که قبلاً یک حساب کاربری دارد.
ب یک تابع به نام signIn ایجاد کنید که به کاربر اجازه می دهد به برنامه وارد شود
-
آرایه محصولات دارای سه عنصر است و هر کدام دارای شش ویژگی است.
آ. تابعی به نام rateProduct ایجاد کنید که محصول را رتبه بندی می کند
ب تابعی به نام averageRating ایجاد کنید که میانگین امتیاز یک محصول را محاسبه می کند -
یک تابع به نام likeProduct ایجاد کنید. این عملکرد به لایک کردن محصول در صورت عدم پسند و حذف لایک در صورت پسندیدن آن کمک می کند.
🎉 همه چیز درباره اشیاء در جاوا اسکریپت است! 🎉