Java Web 7 JavaScript 7.4 JavaScript 常用对象

Java Web

【黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版】

7 JavaScript

7.4 JavaScript 常用对象

JavaScript 对象参考手册：

https://www.w3school.com.cn/jsref/index.asp

JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类

https://www.w3school.com.cn/r.asp#js

• 基本对象

  

• BOM对象

  

• DOM 对象

  

7.4.1 Array 对象

https://www.w3school.com.cn/jsref/jsref_obj_array.asp

JavaScript Array对象用于定义数组

数组的定义格式有两种：

• 方式1

var 变量名 = new Array(元素列表);

var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）

• 方式2

  var 变量名 = [元素列表];
  
  var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）
  

  注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义

【元素访问】

访问数组中的元素和 Java 语言的一样

arr[索引] = 值;

[举个例子]

// 方式一
var arr = new Array(1,2,3);
// alert(arr);
// 方式二
var arr2 = [1,2,3];
//alert(arr2);
// 访问
arr2[0] = 10;
alert(arr2)

【特点】

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]); //undefined

arr3[5] = "hello";
alert(arr3[5]); // hello

【属性】

Array 对象提供了很多属性

var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

【方法】

Array 对象同样也提供了很多方法

[push函数：给数组添加元素，也就是在数组的末尾添加元素，参数表示要添加的元素]

// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5); //数组的元素是 {1,2,3,10}

[splice 函数：删除元素

参数1：索引。表示从哪个索引位置删除

参数2：个数。表示删除几个元素]

// splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素
alert(arr5); // {2,3}

7.4.2 String 对象

https://www.w3school.com.cn/jsref/jsref_obj_string.asp

String对象的创建方式有两种

• 方式1

  var 变量名 = new String(s);
  

• 方式2

  var 变量名 = "数组";
  

【属性】

【函数】

String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；

它是用来去掉字符串两端的空格。

var str4 = ' abc ';
alert(1 + str4 + 1);

上面代码会输出内容 1 abc 1 ，很明显可以看到 abc 字符串左右两边是有空格的。

接下来使用 trim() 函数

var str4 = ' abc ';
alert(1 + str4.trim() + 1);

输出的内容是 1abc1 。这就是 trim() 函数的作用。

在进行登录等操作时，用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在后端程序中判断用户名和密码是否正确，结果肯定是失败。所以一般都会对用户输入的字符串数据进行去除前后空格的操作。

7.4.3 自定义对象

在 JavaScript 中自定义对象特别简单

格式：

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
        ...
};

【调用属性】

对象名.属性名

【调用函数】

对象名.函数名()

【举个栗子】

var person = {
    name : "zhangsan",
    age : 23,
    eat: function (){
        alert("干饭~");
    }
};
alert(person.name); //zhangsan
alert(person.age); //23
person.eat(); //干饭~