JS对象
数组对象
JavaScript中Array对象用于定义数组。
// 长度可变 类型可变
// 方式一
var 变量名 = new Array(元素列表);
var arr = new Array(1, 2, 3, 4);
// 方式二
var 变量名 = [元素列表];
var arr = [1, 2, 3, 4]
// 访问
arr[索引] = 值;
arr[10] = "hello";
属性 | 描述 |
---|---|
length | 设置或返回数组中元素的数量 |
方法 | 描述 |
---|---|
forEach() | 遍历数组中的每个优质的元素,并调用一次传入的函数 |
push() | 将新元素添加到数组的末尾,并返回新的长度 |
splice() | 从数组中删除元素 |
// ES6 箭头函数:
arr.forEach((e) => {
console.log(e);
})
// push:添加元素到数组末尾
arr.push(7, 8, 9);
console.log(arr);
// splice:删除元素
arr.splice(2, 2); // 从索引开始,进行n个
字符串对象
// 方式一
var 变量名 = new String("……");
var str = new String("Hello");
// 方式二
var 变量名 = "……";
var str = "Hello";
var str = 'hello';
属性 | 描述 |
---|---|
length | 字符串的长度 |
方法 | 描述 |
---|---|
charAt() | 返回在指定位置的字符 |
indexof() | 检索字符串 |
trim() | 去除 字符串两边的空格 |
substring() | 提取字符串中两个指定的索引号之间的字符,左闭右开 |
自定义对象
var 对象名 = {
属性名1:属性值1,
属性名2:属性值2,
函数名称:function(形参列表) {}
};
var user = {
name:"Tom",
age:20,
gender:"male",
eat: function(){
alert("用膳~");
}
eat(){
alert("用膳~");
}
};
// 调用格式
对象名.属性名;
对象名.函数名();
console.log(user.name);
user.eat();
JSON(JavaScript Object Notation)
通过JavaScript对象标记法书写的文本
var 变量名 = '{"key1":value1, "key2":value2}';
var userStr = '{
"name":"Tom",
"age":20,
"gender":"male"
}';
value的数字类型:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true或false)
数组(在方括号中)
对象(在花括号中)
null
// JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
// JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject);
BOM(Browser Object Model) 浏览器对象模型
浏览器对象模型,允许JavaScript与 浏览器对话,JavaScript将浏览器的各个组成部分封装为对象。
组成:
Window:浏览器窗口对象
获取:直接使用window,其中window.可以省略。
window.alert("Hello Window");
alert("Hello Window");
属性 | |
---|---|
history | 对History对象的只读引用。 |
location | 用于空窗口或框架的Location对象。/地址栏对象。 |
navigator | 对Navigator对象的只读引用 |
获取:使用window.location获取,其中window.可以省略。
属性:
href:设置或返回完整的URL。
location.href = "https://www.bilibili.com";
方法 | |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
setlnterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
// setInterval
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行" + i + "次");
}, 2000);
// setTimeout
setTimeout(function(){
alert("JS");
}, 3000);
Navigator:浏览器对象
Screen:屏幕对象
History:历史记录对象
Location:地址栏对象
DOM(Document Object Model) 文档对象模型
将标记语言的各个组成部分封装成为对应的对象:
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
JavaScript通过DOM,就能够对HTML进行操作:
改变HTML元素的内容
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
添加和删除HTML元素