一文了解JavaScript对象

1. JavaScript对象分类

JavaScript中的对象主要可以分为三大类：

1. 基本对象：如Array、String、JSON等
2. BOM对象：浏览器对象模型，如Window、Location等
3. DOM对象：文档对象模型，如Document、Element等

2. 基本对象

2.1 Array对象

创建数组

// 方式1
var arr1 = new Array(1,2,3,4);// 方式2（推荐）
var arr2 = [1,2,3,4];

数组特点

• 长度可变（类似于Java中的集合）
• 类型可变（1,a,true）
• 未赋值的元素为undefined

常用属性和方法

属性/方法	描述	示例
length	数组长度	arr.length
forEach()	遍历数组	arr.forEach(e => console.log(e))
push()	添加元素到末尾	arr.push(5)
splice()	删除元素	arr.splice(1,2)

2.2 String对象

创建字符串

// 方式1
var str1 = new String("Hello");// 方式2（推荐）
var str2 = "Hello";

常用属性和方法

属性/方法	描述	示例
length	字符串长度（算空格）	str.length
charAt()	获取指定位置的字符	str.charAt(0)
indexOf()	查找子串位置	str.indexOf("el")
trim()	去除两端空格	str.trim()
substring()	截取子串	str.substring(1,3)

2.3 JSON对象

自定义对象

var person = {name: "张三",age: 20,sayHello: function() {console.log("你好！");}
};

JSON格式

{"name": "李四","age": 25,"hobbies": ["读书", "运动"]
}

JSON转换

// JSON字符串转对象
var obj = JSON.parse('{"name":"王五"}');// 对象转JSON字符串
var jsonStr = JSON.stringify(obj);

3. BOM对象

3.1 Window对象

常用方法

方法	描述	示例
alert()	警告框	alert("提示")
confirm()	确认框	confirm("确定吗？")
setInterval()	定时器（循环）	setInterval(fn, 1000)
setTimeout()	定时器（单次）	setTimeout(fn, 1000)

<script>//window对象是全局对象，window对象的属性和方法在调用时可以省略window.window.alert("Hello BOM");alert("Hello BOM Window");
</script>

3.2 Location对象

常用属性

// 获取当前URL
console.log(location.href);// 跳转到新页面
location.href = "https://www.baidu.com";

4. DOM对象

4.1 获取DOM元素

方法	描述	示例
getElementById()	通过id获取	document.getElementById("myId")
getElementsByTagName()	通过标签名获取	document.getElementsByTagName("div")
getElementsByName()	通过name属性获取	document.getElementsByName("username")
getElementsByClassName()	通过class获取	document.getElementsByClassName("myClass")

4.2 操作元素属性

// 修改元素内容
var div = document.getElementById("myDiv");
div.innerHTML = "新内容";// 修改元素样式
div.style.color = "red";

操作案例

JavaScript 事件处理案例代码解析与示例