js基础速成08-对象

作用域

变量是编程中的基本部分。我们使用关键词 var、let 和 const 来声明变量，不同的声明方式会影响变量的作用域。本节将介绍变量作用域，以及使用 var 和 let 时变量的作用域范围。

变量的作用域可以是：

• 全局作用域
• 局部作用域

变量可以在全局或局部作用域中声明。未使用 let、var 或 const 声明的变量会被默认声明为全局变量。

Window 全局对象

在浏览器中，不使用 console.log() 直接输入变量名 a 或 b，就可以查看其值，这意味着 a 和 b 已经存在于 window 对象中。

// scope.js
a = 'JavaScript'; // 没有使用 let 或 const 声明的变量会成为全局变量，并在 window 对象中可见
b = 10; // 全局作用域变量，存在于 window 对象中
function letsLearnScope() {
  console.log(a, b);
  if (true) {
    console.log(a, b);
  }
}
console.log(a, b); // 可访问

全局作用域

在全局声明的变量可以在同一个文件的任何地方访问。

// scope.js
let a = 'JavaScript'; // 全局作用域
let b = 10; // 全局作用域
function letsLearnScope() {
  console.log(a, b); // JavaScript 10，可访问
  if (true) {
    let a = 'Python';
    let b = 100;
    console.log(a, b); // Python 100
  }
  console.log(a, b); // JavaScript 10
}
letsLearnScope();
console.log(a, b); // JavaScript 10，可访问

局部作用域

局部声明的变量只能在特定的代码块内访问。

• 块作用域
• 函数作用域

// scope.js
let a = 'JavaScript'; // 全局作用域
let b = 10; // 全局作用域
// 函数作用域
function letsLearnScope() {
  console.log(a, b); // JavaScript 10，可访问
  let value = false;
  // 块作用域
  if (true) {
    let a = 'Python';
    let b = 20;
    let c = 30;
    let d = 40;
    value = !value;
    console.log(a, b, c, value); // Python 20 30 true
  }
  // 无法访问 c，因为 c 的作用域仅限于 if 块内
  console.log(a, b, value); // JavaScript 10 true
}
letsLearnScope();
console.log(a, b); // JavaScript 10，可访问

对象

JavaScript 中的对象是键值对结构，可以包含字符串、数字、布尔值、数组、对象或函数等值。

创建一个空对象

const person = {};

创建带有值的对象

对象可以包含多个属性和方法，属性的值可以是任意类型。

const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
  age: 250,
  country: 'Finland',
  city: 'Helsinki',
  skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Node', 'MongoDB', 'Python', 'D3.js'],
  isMarried: true,
};
console.log(person);

从对象中获取值

可以通过点符号或方括号来访问对象的属性值。

const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
  age: 250,
  country: 'Finland',
  city: 'Helsinki',
  skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Node', 'MongoDB', 'Python', 'D3.js'],
  'phone number': '+3584545454545',
};

console.log(person.firstName); // 访问方式一
console.log(person['phone number']); // 访问方式二

创建对象方法

对象可以包含方法，这些方法可以通过 this 关键字访问对象的其他属性。

const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },
};
console.log(person.getFullName());

为对象设置新键

对象是可变的，可以在创建后修改或添加新属性。

const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
};
person.age = 250;
person.country = 'Finland';
console.log(person);

JavaScript 对象方法

JavaScript 提供了多种内置方法用于操作对象，以下是一些重要的对象方法：

1. Object.keys()

   • 用途: 返回一个包含对象所有键的数组。
   • 示例:

     const person = { name: 'John', age: 30 };
     console.log(Object.keys(person)); // 输出: ['name', 'age']
     

2. Object.values()

   • 用途: 返回一个包含对象所有值的数组。
   • 示例:

     const person = { name: 'John', age: 30 };
     console.log(Object.values(person)); // 输出: ['John', 30]
     

3. Object.entries()

   • 用途: 返回一个包含对象所有键值对的数组，每个键值对以数组形式表示。
   • 示例:

     const person = { name: 'John', age: 30 };
     console.log(Object.entries(person)); // 输出: [['name', 'John'], ['age', 30]]
     

4. Object.assign()

   • 用途: 将所有可枚举的自身属性从一个或多个源对象复制到目标对象，并返回目标对象。
   • 示例:

     const target = { name: 'John' };
     const source = { age: 30 };
     Object.assign(target, source);
     console.log(target); // 输出: { name: 'John', age: 30 }
     

5. Object.freeze()

   • 用途: 冻结对象，使其无法被修改（不能添加、删除或修改属性）。
   • 示例:

     const obj = { name: 'John' };
     Object.freeze(obj);
     obj.name = 'Doe'; // 无法修改
     console.log(obj); // 输出: { name: 'John' }
     

6. Object.seal()

   • 用途: 密封对象，禁止添加或删除属性，但可以修改现有属性的值。
   • 示例:

     const obj = { name: 'John' };
     Object.seal(obj);
     obj.age = 30; // 无法添加新属性
     obj.name = 'Doe'; // 可以修改现有属性
     console.log(obj); // 输出: { name: 'Doe' }
     

7. Object.hasOwnProperty()

   • 用途: 检查对象是否具有指定的属性（不包括原型链上的属性）。
   • 示例:

     const person = { name: 'John' };
     console.log(person.hasOwnProperty('name')); // 输出: true
     

8. Object.getOwnPropertyNames()

   • 用途: 返回一个数组，包含对象自身所有属性的名称（包括不可枚举的属性）。
   • 示例:

     const obj = { name: 'John', age: 30 };
     console.log(Object.getOwnPropertyNames(obj)); // 输出: ['name', 'age']