## JavaScript中的所有内容,即:对象
- Scope
-
📔 Object
- Creating an empty object
- Creating an objecting with values
- Getting values from an object
- Creating object methods
- Setting new key for an object
- Object Methods
- Getting object keys using Object.keys()
- Getting object values using Object.values()
- Getting object keys and values using Object.entries()
- Checking properties using hasOwnProperty()
- 💻 Exercises
范围
变量是编程中的基本部分。我们声明变量存储不同的数据类型。要声明一个变量,我们使用关键词 var , let 和 const 。可以在不同范围内声明变量。在本节中,我们将看到范围变量,当使用VAR或LET时的变量范围。
变量范围可以是:
- 全球
- Local
可以在全球或本地范围内声明变量。我们将看到全球和本地范围。
没有让,var或const范围内声明的任何声明。
让我们想象我们有一个范围。
窗口全局对象
不使用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
本地范围
仅在某些块代码中访问为本地的变量。
- 块范围
- 功能范围
//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
现在,您对范围有了解。用 var 声明的变量仅范围范围范围,但用 lem> let 或 const 声明的变量为块范围(功能块,如果块,loop block,loop块, ETC)。 JavaScript中的块是两个卷发支架({})之间的代码。
//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及以上有 LET 和 const ,因此您不会遭受 var 的偷偷摸摸。当我们使用 LET 时,我们的变量是块范围的,它不会感染代码的其他部分。
//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
范围令和 const 是相同的。差异只是重新分配。我们无法更改或重新分配const
变量的值。我强烈建议您使用 let 和 const ,使用 let 和 const 您将编写干净的代码和避免难以调试错误。根据经验,您可以将 let 用于任何更改的值, const 用于任何常数值,以及数组,对象,箭头函数和函数表达式。<<<<<<<<<<< /p>
ð对象
一切都可以是一个对象,并且对象确实具有属性,并且属性具有值,因此对象是键值对。密钥的顺序不是保留,或者没有顺序。
为了创建一个字面的对象,我们使用两个卷曲括号。
创建一个空对象
一个空的对象
const person = {};
用价值创建一个反对
现在,人对象具有名称,姓氏,年龄,位置,技能和属性的属性。属性或密钥的值可能是字符串,数字,布尔值,对象,空,未定义或功能。
让我们看看对象的一些示例。每个键在对象中都有一个值。
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"]);
创建对象方法
现在,人对象具有fullname属性。 getfullname是人对象内部的函数,我们称其为对象方法。 this 关键词是指对象本身。我们可以使用这个 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.
对象方法
有不同的方法来操纵对象。让我们看看一些可用的方法。
object.assign :在不修改原始对象的情况下复制对象
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()获取对象值
object.values :将对象的值作为数组
获取
const values = Object.values(copyPerson);
console.log(values);
使用object.entries()获取对象键和值
object.entries :在数组中获取键和值
const entries = Object.entries(copyPerson);
console.log(entries);
使用HasownProperty()检查属性
HasownProperty :检查对象中是否存在特定的键或属性
console.log(copyPerson.hasOwnProperty("name"));
console.log(copyPerson.hasOwnProperty("score"));
ð你很惊讶。现在,您将获得对象的力量。您刚刚完成了第8天的挑战,并且您要达到8个步骤,进入伟大之路。现在为您的大脑和肌肉做一些运动。
ð»练习
练习:1级
- 创建一个称为狗的空对象
- 在控制台上打印狗对象
- 添加狗对象的名称,腿,颜色,年龄和树皮特性。树皮属性是返回 woof woof 的方法
- 从狗对象获取名称,腿,颜色,年龄和树皮价值
- 设置新属性狗对象:品种,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 Stack开发人员的人
- 在用户对象中设置您的名称而不修改原始用户对象
- 获取用户对象的所有密钥或属性
- 获取用户对象的所有值
- 使用国家对象打印国家名称,资本,人口和语言。
练习:3级
- 创建一个称为 personAccount的对象。它具有名称,姓氏,收入,费用属性属性,并具有 TotalIncome,totalexpense,AccountInfo,AddeDincome,Addexpense 和 Accountalance Accountalance 方法。收入是一组收入,其描述和费用是一组收入及其描述。
- ****问题: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数据库中获取上述用户收集。
A。创建一个称为注册的函数,该功能允许用户添加到集合中。如果存在用户,请告知用户他已经有一个帐户。
b。创建一个称为signin的函数,该功能允许用户登录到应用程序
-
产品阵列具有三个元素,每个元素都有六个属性。
A。创建一个称为Rateproduct的函数,该功能对产品进行评分
b。创建一个称为平均的函数,该函数计算产品的平均额定值 -
创建一个称为类似产品的函数。如果不喜欢并将其删除,此功能将有助于对产品的使用。
ð它与javaScript中的对象有关! ð