原生js怎么交互对象

原生JavaScript交互对象的方法主要有：对象属性访问、对象方法调用、事件处理。 其中，对象属性访问是最为基础和常见的方式。通过属性访问，我们可以获取和设置对象的属性值，从而实现与对象的交互。

一、对象属性访问

对象属性访问是与JavaScript对象交互的最基础方式。它主要包括两种形式：点语法（dot notation）和方括号语法（bracket notation）。

点语法访问属性

点语法是最常见的属性访问方式，用句点（.）来访问对象的属性。例如：

let person = {
    name: "John",
    age: 30
};
console.log(person.name); // 输出：John
person.age = 31;
console.log(person.age); // 输出：31

方括号语法访问属性

方括号语法使用方括号（[]）来访问对象的属性，通常用于动态属性名或属性名中包含特殊字符的情况。

let person = {
    name: "John",
    "last name": "Doe"
};
console.log(person["last name"]); // 输出：Doe
let propName = "name";
console.log(person[propName]); // 输出：John

二、对象方法调用

对象方法是定义在对象内的函数，通过调用对象的方法，可以实现对对象的操作和交互。

定义和调用对象方法

定义对象方法通常使用函数表达式或简写方法定义：

let calculator = {
    add: function(a, b) {
        return a + b;
    },
    multiply(a, b) {
        return a * b;
    }
};
console.log(calculator.add(5, 3)); // 输出：8
console.log(calculator.multiply(4, 7)); // 输出：28

三、事件处理

事件处理是JavaScript与用户交互的核心部分，通过事件处理，可以捕获用户的操作并作出响应。例如，点击按钮、输入文本等操作都可以通过事件处理来实现与对象的交互。

添加事件监听器

使用addEventListener方法可以为DOM元素添加事件监听器：

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

事件处理函数

事件处理函数是响应特定事件的函数，可以通过定义和绑定事件处理函数来实现交互：

function handleClick(event) {
    console.log("Button clicked!", event);
}
button.addEventListener("click", handleClick);

四、对象与DOM交互

通过JavaScript对象与DOM（文档对象模型）的交互，可以动态地操控网页内容和结构，从而实现丰富的用户体验。

操作DOM元素

使用JavaScript对象可以访问和修改DOM元素的属性和内容：

let heading = document.getElementById("heading");
heading.textContent = "Hello, World!";
heading.style.color = "blue";

创建和插入DOM元素

通过JavaScript对象可以创建新的DOM元素并插入到文档中：

let newElement = document.createElement("div");
newElement.textContent = "This is a new element.";
document.body.appendChild(newElement);

五、对象遍历与操作

遍历和操作对象是JavaScript编程中的常见任务，可以通过多种方法来实现对象的遍历和操作。

使用`for...in`循环遍历对象

for...in循环可以遍历对象的所有可枚举属性：

let person = {
    name: "John",
    age: 30,
    city: "New York"
};
for (let key in person) {
    console.log(key + ": " + person[key]);
}

使用`Object.keys`和`Object.values`方法

Object.keys和Object.values方法可以分别获取对象的键数组和值数组：

let keys = Object.keys(person);
let values = Object.values(person);
console.log(keys); // 输出：["name", "age", "city"]
console.log(values); // 输出：["John", 30, "New York"]

六、对象的深拷贝与浅拷贝

在与对象交互时，理解深拷贝和浅拷贝的区别是非常重要的。浅拷贝仅复制对象的引用，而深拷贝则完全复制对象。

浅拷贝

浅拷贝可以使用Object.assign或展开运算符（…）实现：

let original = { a: 1, b: 2 };
let copy = Object.assign({}, original);
copy.a = 10;
console.log(original.a); // 输出：1
console.log(copy.a); // 输出：10
let anotherCopy = { ...original };
anotherCopy.b = 20;
console.log(original.b); // 输出：2
console.log(anotherCopy.b); // 输出：20

深拷贝

深拷贝可以使用递归方法或JSON.parse和JSON.stringify方法实现：

let nestedObject = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(nestedObject));
deepCopy.b.c = 20;
console.log(nestedObject.b.c); // 输出：2
console.log(deepCopy.b.c); // 输出：20

七、对象的扩展与合并

在实际开发中，经常需要扩展或合并多个对象，JavaScript提供了多种方法来实现这一功能。

使用`Object.assign`合并对象

Object.assign方法可以将多个源对象的属性复制到目标对象中：

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj); // 输出：{ a: 1, b: 3, c: 4 }

使用展开运算符合并对象

展开运算符（…）可以更简洁地合并对象：

let mergedObj2 = { ...obj1, ...obj2 };
console.log(mergedObj2); // 输出：{ a: 1, b: 3, c: 4 }

八、对象的属性描述符

JavaScript对象的属性具有属性描述符，可以通过Object.defineProperty方法来定义或修改属性描述符。

定义属性描述符

属性描述符包括configurable、enumerable、writable和value等，可以通过Object.defineProperty方法来设置：

let obj = {};
Object.defineProperty(obj, "newProp", {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
});
console.log(obj.newProp); // 输出：42

修改属性描述符

可以使用Object.defineProperty方法来修改现有属性的描述符：

Object.defineProperty(obj, "newProp", {
    writable: false
});
obj.newProp = 100;
console.log(obj.newProp); // 输出：42，修改失败

九、对象的原型链

JavaScript对象具有原型链，通过原型链可以实现继承和属性共享。

访问和设置原型

可以使用Object.getPrototypeOf和Object.setPrototypeOf方法来访问和设置对象的原型：

let proto = { greet() { console.log("Hello!"); } };
let obj = Object.create(proto);
obj.greet(); // 输出：Hello!
Object.setPrototypeOf(obj, {});
console.log(obj.greet); // 输出：undefined

原型继承

通过构造函数和prototype属性可以实现原型继承：

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};
let john = new Person("John");
john.greet(); // 输出：Hello, John

十、对象的序列化与反序列化

对象的序列化与反序列化是将对象转换为字符串和从字符串还原对象的过程，通常用于数据传输和存储。

序列化对象

可以使用JSON.stringify方法将对象序列化为JSON字符串：

let person = { name: "John", age: 30 };
let jsonString = JSON.stringify(person);
console.log(jsonString); // 输出：{"name":"John","age":30}

反序列化对象

可以使用JSON.parse方法将JSON字符串反序列化为对象：

let parsedObj = JSON.parse(jsonString);
console.log(parsedObj.name); // 输出：John
console.log(parsedObj.age); // 输出：30

十一、对象的动态属性

JavaScript对象的属性是动态的，可以在运行时动态添加、修改或删除属性。

动态添加属性

可以直接为对象添加新属性：

let obj = {};
obj.newProp = "value";
console.log(obj.newProp); // 输出：value

动态删除属性

可以使用delete运算符删除对象的属性：

delete obj.newProp;
console.log(obj.newProp); // 输出：undefined

十二、对象的键值对转换

在实际开发中，有时需要在对象和键值对数组之间进行转换。

对象转换为键值对数组

可以使用Object.entries方法将对象转换为键值对数组：

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // 输出：[["a", 1], ["b", 2], ["c", 3]]

键值对数组转换为对象

可以使用Object.fromEntries方法将键值对数组转换为对象：

let newObj = Object.fromEntries(entries);
console.log(newObj); // 输出：{ a: 1, b: 2, c: 3 }

十三、对象的冻结与密封

JavaScript提供了冻结（freeze）和密封（seal）对象的方法，可以控制对象的可变性。

冻结对象

可以使用Object.freeze方法冻结对象，使其属性不可修改：

let obj = { a: 1 };
Object.freeze(obj);
obj.a = 2;
console.log(obj.a); // 输出：1

密封对象

可以使用Object.seal方法密封对象，使其无法添加或删除属性，但可以修改现有属性：

let sealedObj = { a: 1 };
Object.seal(sealedObj);
sealedObj.a = 2;
sealedObj.b = 3; // 添加属性失败
delete sealedObj.a; // 删除属性失败
console.log(sealedObj.a); // 输出：2
console.log(sealedObj.b); // 输出：undefined

十四、对象的属性遍历顺序

JavaScript对象的属性遍历顺序并非严格定义，但通常遵循一定规则：首先遍历数字键，按升序排列；然后遍历字符串键，按插入顺序排列。

十五、对象的原型链与性能

原型链的深度会影响属性访问的性能，尽量避免过深的原型链层级，以提高代码执行效率。

通过以上内容，我们详细介绍了原生JavaScript如何交互对象的多种方法和技巧，这些知识不仅涵盖了基础的属性访问和方法调用，还深入探讨了事件处理、DOM交互、深浅拷贝、属性描述符等高级主题。希望这些内容能帮助你在实际开发中更好地理解和使用JavaScript对象。