对象 Object

简洁 Introduction

值对的集合 - collections of key-value pairs
每个 key 都是唯一的 - each key is unique
使用 {} 定义 - Define objects using curly braces
使用点语法或数组语法访问值对 - using dot notation or square brackets
更多信息，请参考 Object

[] 基本使用

key 唯一；值可以是普通数据类型，也可以是函数

let example = {
  id: 1001,
  date: '2025/1/12',
  sayHello: function () {
    console.log("Hello");
  },
};
example.sayHello(); // Outputs: 'Hello'

静态方法 Static methods

. 直接使用，无须实例化

Object.keys()：返回对象键 key 组成的数组
Object.values()：返回对象值 value 组成的数组
Object.entries()：返回对象入口|键值对组成的数组
Object.assign(obj,obj1)：赋值；将 obj1 的内容给 obj；要求各值对一一对应

对象常用运算符

解构 {}

提取对应属性名的值
依赖属性名匹配，顺序不重要
对象解构使用花括号 {}；数组解构使用 []；多个变量以逗号 , 分隔
高频使用；更多信息，请访问 Destructuring Assignment

1. 重命名变量

2. 嵌套解构

3. 设置默认值

展开 ...

对象拷贝
对象合并
对象属性更新
解构赋值中的剩余属性

[] 框架中按需结构包

import { createApp } from 'vue'
import { computed, onMounted, reactive, ref } from 'vue';
const { add, dec } = require('./module/test')

[] 示例数据

let obj = { name: 'cnplaman', age: 18, address: { city: 'gz', code: 541000 } }

普通解构赋值 - 获取obj中的属性赋值给同名变量

let { name, age } = obj

重命名赋值 - 使用冒号:指定新变量名

let { name: uname, age: uage } = obj

默认赋值 - 解构时修改属性值或增加一个新属性

let { name: uname, age: uage, gender = 'male' } = obj

嵌套解构赋值

let { name, age, address: { city } } = obj

let { name, age, address: { code: postcode } } = obj

使用 Usage

增/改

let obj = { name: 'cnplaman', age: 18 }
obj.gender = 'male';
obj.marriage = true;
obj.age = 24;
console.log(obj.name);
console.log(obj['name']);
console.log(obj);

删

delete obj.marriage;
console.log(obj);

查

. 定义查询字符串

let sql = 'age' in obj
console.log(sql);

长度

. 无法直接获取；通过对象Object的静态方法：entries()、keys()或values()间接获取；这三个方法返回入口、键和值的数组

console.log(Object.keys(obj).length);
console.log(Object.values(obj).length);
console.log(Object.entries(obj).length);

遍历对象

. for-in；枚举

// 遍历的是key，要想获取值value，则配合对象使用
for (item in obj) {
  console.log(item, obj[item]);
}

//fail
// obj.forEach(item => {
//   console.log(item);
// })

// fail: TypeError: obj is not iterable
// for (item of obj) {
//   console.log(item);
// }

//也可以先entries()、keys()或values()，再使用数组遍历方法，如for()或forEach()
Object.keys(obj).forEach(item => {
  console.log(item);
})
Object.values(obj).forEach(item => {
  console.log(item);
})
Object.entries(obj).forEach((item) => {
  console.log(item);
})
//解构再输出
Object.entries(obj).forEach(([value, key]) => {
  console.log(key, value);
})

. 函数的参数传递是传值；但是函数内部对对象的访问是引用

function setObj(obj) {
    obj.name = 'glpla';
}
let stu = new Object();
setObj(stu);
console.log(stu.name);