JavaScript基础知识5（对象）

- 对象
- - 创建对象
  - - 使用对象字面量
    - 使用 `new Object()`
  - 访问和修改属性
  - - 点表示法
    - 方括号表示法
  - 动态添加和删除属性
  - - 添加属性
    - 删除属性
  - 对象方法
  - 对象的遍历
  - 常用属性和方法
  - - 数学常量
    - 数学函数
    - 三角函数
  - 使用示例
  - - 生成随机整数
    - 计算圆的面积
    - 求最大值和最小值
  - 对象常用方法
  - - `Object.keys()`
    - `Object.values()`
    - `Object.entries()`
  - 对象的合并
  - - `Object.assign()`
    - 展开运算符 `...`
  - 示例代码
  - 总结
  - null
  - - 遍历对象
- 内置对象

对象

在 JavaScript 中，对象（Object）是用于存储相关数据和功能的集合。对象由键值对（属性）组成，键是字符串（或符号），值可以是任何类型，包括其他对象、函数、数组等。

创建对象

使用对象字面量

对象字面量是创建对象的最常见方法，使用花括号 {}。

let person = {
    name: "John",
    age: 30,
    isStudent: true,
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 30
person.greet(); // 输出 "Hello, my name is John"

在这里插入图片描述

使用 `new Object()`

可以使用 new Object() 语法创建对象，不过这种方法不如对象字面量常用。

let person = new Object();
person.name = "John";
person.age = 30;
person.isStudent = true;
person.greet = function() {
    console.log("Hello, my name is " + this.name);
};

console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 30
person.greet(); // 输出 "Hello, my name is John"

访问和修改属性

点表示法

let person = {
    name: "John",
    age: 30
};

console.log(person.name); // 输出 "John"
person.age = 35;
console.log(person.age); // 输出 35

方括号表示法

使用方括号表示法可以访问使用变量或包含特殊字符的属性。

let person = {
    "first name": "John",
    age: 30
};

console.log(person["first name"]); // 输出 "John"
person["age"] = 35;
console.log(person["age"]); // 输出 35

在这里插入图片描述

动态添加和删除属性

添加属性

可以在对象创建后动态添加属性。

let person = {
    name: "John"
};

person.age = 30;
console.log(person.age); // 输出 30

删除属性

使用 delete 运算符删除属性。

let person = {
    name: "John",
    age: 30
};

delete person.age;
console.log(person.age); // 输出 undefined

对象方法

对象的方法是作为对象属性的函数。方法可以通过对象字面量或动态添加。

let person = {
    name: "John",
    greet: function() {
        console.log("Hello, my name is " + this.name);
    }
};

person.greet(); // 输出 "Hello, my name is John"

对象的遍历

可以使用 for...in 循环遍历对象的属性。

let person = {
    name: "John",
    age: 30,
    isStudent: true
};

for (let key in person) {
  console.log(key)//顺序输出的是属性名：'name'、'age'、'isstudent'
  console.log(person[key])//顺序输出的是属性值：'john'、'30'、'true'
}

在 JavaScript 中，Math 对象是一个内置的对象，提供了一些基本的数学常量和函数。它不是一个构造函数，因此不能用作对象的模板。所有的属性和方法都是静态的，可以直接调用而无需创建 Math 对象的实例。

常用属性和方法

数学常量

Math.PI：圆周率（π），约为 3.14159。
Math.E：自然对数的底数（e），约为 2.718。
Math.LN2：2 的自然对数，约为 0.693。
Math.LN10：10 的自然对数，约为 2.302。
Math.LOG2E：以 2 为底的 e 的对数，约为 1.442。
Math.LOG10E：以 10 为底的 e 的对数，约为 0.434。
Math.SQRT2：2 的平方根，约为 1.414。
Math.SQRT1_2：1/2 的平方根，约为 0.707。

console.log(Math.PI); // 输出 3.141592653589793
console.log(Math.E); // 输出 2.718281828459045

数学函数

Math.abs(x)：返回 x 的绝对值。
Math.ceil(x)：向上取整，返回大于或等于 x 的最小整数。
Math.floor(x)：向下取整，返回小于或等于 x 的最大整数。
Math.round(x)：四舍五入，返回最接近 x 的整数。
Math.max(...values)：返回一组数中的最大值。
Math.min(...values)：返回一组数中的最小值。
Math.random()：返回一个介于 0（包括）和 1（不包括）之间的伪随机数。
Math.pow(base, exponent)：返回 base 的 exponent 次幂。
Math.sqrt(x)：返回 x 的平方根。
Math.cbrt(x)：返回 x 的立方根。
Math.log(x)：返回 x 的自然对数（以 e 为底）。
Math.log2(x)：返回 x 的以 2 为底的对数。
Math.log10(x)：返回 x 的以 10 为底的对数。
Math.exp(x)：返回 e 的 x 次幂。

console.log(Math.abs(-5)); // 输出 5
console.log(Math.ceil(4.2)); // 输出 5
console.log(Math.floor(4.8)); // 输出 4
console.log(Math.round(4.5)); // 输出 5
console.log(Math.max(1, 2, 3)); // 输出 3
console.log(Math.min(1, 2, 3)); // 输出 1
console.log(Math.random()); // 输出 0 到 1 之间的随机数
console.log(Math.pow(2, 3)); // 输出 8
console.log(Math.sqrt(16)); // 输出 4
console.log(Math.cbrt(27)); // 输出 3
console.log(Math.log(Math.E)); // 输出 1
console.log(Math.log2(8)); // 输出 3
console.log(Math.log10(100)); // 输出 2
console.log(Math.exp(1)); // 输出 2.718281828459045

三角函数

Math.sin(x)：返回 x 的正弦（弧度）。
Math.cos(x)：返回 x 的余弦（弧度）。
Math.tan(x)：返回 x 的正切（弧度）。
Math.asin(x)：返回 x 的反正弦（弧度）。
Math.acos(x)：返回 x 的反余弦（弧度）。
Math.atan(x)：返回 x 的反正切（弧度）。
Math.atan2(y, x)：返回从原点到点 (x, y) 的直线与 x 轴正向之间的角度（弧度）。

console.log(Math.sin(Math.PI / 2)); // 输出 1
console.log(Math.cos(Math.PI)); // 输出 -1
console.log(Math.tan(Math.PI / 4)); // 输出 1
console.log(Math.asin(1)); // 输出 1.5707963267948966 (π/2)
console.log(Math.acos(1)); // 输出 0
console.log(Math.atan(1)); // 输出 0.7853981633974483 (π/4)
console.log(Math.atan2(1, 1)); // 输出 0.7853981633974483 (π/4)

使用示例

生成随机整数

生成一个范围在 [min, max] 的随机整数：

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(1, 10)); // 输出 1 到 10 之间的随机整数

在这里插入图片描述

计算圆的面积

给定半径计算圆的面积：

function getCircleArea(radius) {
    return Math.PI * Math.pow(radius, 2);
}

console.log(getCircleArea(5)); // 输出 78.53981633974483

求最大值和最小值

从一组数中找出最大值和最小值：

let numbers = [1, 2, 3, 4, 5];
let maxNum = Math.max(...numbers);
let minNum = Math.min(...numbers);

console.log(maxNum); // 输出 5
console.log(minNum); // 输出 1

对象常用方法

`Object.keys()`

返回对象自身可枚举属性的数组。

let person = {
    name: "John",
    age: 30
};

console.log(Object.keys(person)); // 输出 ["name", "age"]

`Object.values()`

返回对象自身可枚举属性值的数组。

let person = {
    name: "John",
    age: 30
};

console.log(Object.values(person)); // 输出 ["John", 30]

`Object.entries()`

返回对象自身可枚举属性的键值对数组。

let person = {
    name: "John",
    age: 30
};

console.log(Object.entries(person)); // 输出 [["name", "John"], ["age", 30]]

对象的合并

可以使用 Object.assign() 或展开运算符 ... 合并对象。

`Object.assign()`

let person = {
    name: "John"
};

let details = {
    age: 30,
    isStudent: true
};

let merged = Object.assign({}, person, details);
console.log(merged); // 输出 { name: "John", age: 30, isStudent: true }

展开运算符 `...`

let person = {
    name: "John"
};

let details = {
    age: 30,
    isStudent: true
};

let merged = { ...person, ...details };
console.log(merged); // 输出 { name: "John", age: 30, isStudent: true }

示例代码

let car = {
    brand: "Toyota",
    model: "Corolla",
    year: 2020,
    displayInfo: function() {
        console.log(`Brand: ${this.brand}, Model: ${this.model}, Year: ${this.year}`);
    }
};

car.displayInfo(); // 输出 "Brand: Toyota, Model: Corolla, Year: 2020"

car.color = "Red";
console.log(car.color); // 输出 "Red"

delete car.year;
console.log(car.year); // 输出 undefined

for (let key in car) {
    if (car.hasOwnProperty(key)) {
        console.log(key + ": " + car[key]);
    }
}

let carKeys = Object.keys(car);
console.log(carKeys); // 输出 ["brand", "model", "color", "displayInfo"]

let carValues = Object.values(car);
console.log(carValues); // 输出 ["Toyota", "Corolla", "Red", ƒ]

let carEntries = Object.entries(car);
console.log(carEntries); // 输出 [["brand", "Toyota"], ["model", "Corolla"], ["color", "Red"], ["displayInfo", ƒ]]

总结

创建对象：使用对象字面量 {} 或 new Object()。
访问和修改属性：使用点表示法或方括号表示法。
动态添加和删除属性：直接赋值添加属性，使用 delete 删除属性。
对象方法：作为对象属性的函数。
对象的遍历：使用 for...in 循环。
对象常用方法：Object.keys()、Object.values()、Object.entries()。
对象的合并：使用 Object.assign() 或展开运算符 ...。

理解和掌握对象的各种操作，有助于编写更加灵活和高效的 JavaScript 代码。

null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。

遍历对象

let obj = {
    uname: 'pink'
}
for(let k in obj) {
    // k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'
    // obj[k]  属性值    obj['uname']   obj[k]
}