JavaScript 对象

Array对象

使用

  • JavaScript 中的 Array对象用于创建数组
  • 定义

    var 变量名 = new Array(元素列表); // 方式一
    var 变量名 = [元素列表]; // 方式二

  • 访问

    变量名[索引]=值;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 定义数组
var arr = new Array(1, 2, 3, 4);
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 特点：长度可变，类型可变
var b = [1, 2, 3];
b[10] = 50;

// [1, 2, 3, 空 ×7, 50]
console.log(b);

b[8] = 'A';
b[9] = true;
// [1, 2, 3, 空 ×5, 'A', true, 50]
console.log(b);

属性、方法

length :设置或返回数组中元素的数量。

forEach() :遍历数组中的每个有值元素，并调用一个传入的函数。
push() :向数组的末尾添加一个或多个元素，并返回新的长度。
splice() :从数组中删除元素。

遍历数组、lambda表达式

1
2
3
4
5
6
7
8
9
// forEach()
arr.forEach(function (e) {
    console.log(e);
})

// lambda,和java只有箭头不同，其余相同
b.forEach((r) => {
    console.log(r);
})

JSON对象

概念：JavaScript Object Notation,JavaScript对象标记法。

JSON是通过JavaScript对象标记法书写的文本。

自定义对象

定义格式

1
2
3
4
5
6
var 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名: function(形参列表){}
}

调用格式

对象名.属性名;
对象名.函数名(实参列表);

例子：

1
2
3
4
5
6
7
8
9
10
11
var user = {
    name: "TOM",
    age: 18,
    gender: "male",
    eat: function () {
      console.log("吃东西");
    }
  };

  console.log(user.age);
  user.eat();

JSON

1
2
3
4
5
{
    "name": "TOM",
    "age": 18,
    "gender": "male"
}

JSON属性名必须加双引号

JSON格式与JavaScript对象格式相同，但是JSON格式不能调用函数。

定义

使用单引号括起来

var 变量名 = ‘{“key1”:value1,”key2”:value2}’;

示例，这是一个JSON字符串，不是JSON对象

var jsonstr = ‘{“name”:”Jerry”,”age”:18,”add”:[“北京”,”上海”,”广西”]}’

转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var user = {
    name: "TOM",
    age: 18,
    gender: "male",
    eat: function () {
      console.log("吃东西");
    }
  };

  console.log(user.age);
  user.eat();

  // 定义JSON
  var jsonstr = '{"name":"Jerry","age":18,"add":["北京","上海","广西"]}';
  // 内置JSON的parse方法把 字符串-->JS对象
  var jsObject = JSON.parse(jsonstr);
  console.log(jsObject.name);

  // 内置JSON的stringify方法把 JS对象-->JSON字符串
  var jsonstr = JSON.stringify(jsObject);
  console.log(jsonstr);

BOM对象

BOM对象是浏览器对象模型，它提供了关于浏览器窗口的信息，以及控制浏览器窗口javascript对象。

概念：Browser Object Model,浏览器对象模型。

BOM对象有：

  • window对象 浏览器窗口对象
  • location对象 地址栏对象
  • history对象 历史记录对象
  • navigator对象 浏览器对象
  • screen对象 屏幕对象

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// alert
window.alert("hello");

// confirm 返回boolean
var res = confirm("是否删除？");
alert(res);

// setInterval 定时器
setInterval(function () {
  console.log("这是定时器，每隔3秒")
}, 3000);

// setTimeout 这是延时器
setTimeout(function () {
  console.log("在第5秒出现延时器")
}, 5000);

DOM对象

DOM对象是文档对象模型，它提供了对HTML文档的编程访问，它定义了如何获取、修改、添加或删除HTML元素。

概念：Document Object Model,文档对象模型。

DOM对象有：

  • Document对象 整个文档对象
  • Element对象 元素对象
  • Attribute对象 属性对象
  • Text对象 文本对象
  • Comment对象 注释对象

Document对象

  1. 根据id属性值获取，返回单个Element对象

    document.getElementById(“id”);

  2. 根据标签名称获取，返回Element对象数组

    document.getElementsByTagName(“标签名”);

  3. 根据name属性值获取，返回Element对象数组

    document.getElementsByName(“name”);

  4. 根据class.属性值获取，返回Elementi对象数组

    document.getElementsByClassName(“class”);