JavaScript

今日目标

• 掌握 JavaScript 的基础语法
• 掌握 JavaScript 的常用对象（Array、String）
• 能根据需求灵活运用定时器及通过 js 代码进行页面跳转
• 能通过DOM 对象对标签进行常规操作
• 掌握常用的事件
• 能独立完成表单校验案例

4，JavaScript常用对象

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

• 基本对象

  

• BOM 对象

  

• DOM对象

  DOM 中的对象就比较多了，下图只是截取部分

  

这小节我们先学习基本对象，而我们先学习 Array 数组对象和 String 字符串对象。

4.1 Array对象

JavaScript Array对象用于定义数组

4.1.1 定义格式

数组的定义格式有两种：

• 方式1

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

  例如：

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

• 方式2

  
  
  
  
  
  
  
  
  
  xxxxxxxxxx
  
  
  
  
  
  var 变量名 = [元素列表];
  
  

  例如：

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

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

4.1.2 元素访问

访问数组中的元素和 Java 语言的一样，格式如下：

xxxxxxxxxx





arr[索引] = 值;

代码演示：

xxxxxxxxxx





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

4.1.3 特点

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

例如如下代码：

xxxxxxxxxx





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

上面代码在定义数组中给了三个元素，又给索引是 10 的位置添加了数据 10，那么 索引3 到 索引9 位置的元素是什么呢？我们之前就介绍了，在 JavaScript 中没有赋值的话，默认就是 undefined。

如果给 arr3 数组添加字符串的数据，也是可以添加成功的

xxxxxxxxxx





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

4.1.4 属性

Array 对象提供了很多属性，如下图是官方文档截取的

而我们只讲解 length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了

xxxxxxxxxx





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

4.1.5 方法

Array 对象同样也提供了很多方法，如下图是官方文档截取的

而我们在课堂中只演示 push 函数和 splice 函数。

• push 函数：给数组添加元素，也就是在数组的末尾添加元素

  参数表示要添加的元素

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

• splice 函数：删除元素

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

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

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

4.2 String对象

String对象的创建方式有两种

• 方式1：

  
  
  
  
  
  
  
  
  
  xxxxxxxxxx
  
  
  
  
  
  var 变量名 = new String(s); 
  
  

• 方式2：

  
  
  
  
  
  
  
  
  
  xxxxxxxxxx
  
  
  
  
  
  var 变量名 = "数组"; 
  
  

属性：

String对象提供了很多属性，下面给大家列举了一个属性 length ，该属性是用于动态的获取字符串的长度

函数：

String对象提供了很多函数（方法），下面给大家列举了两个方法。

String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。

代码演示：

xxxxxxxxxx





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

上面代码会输出内容 1 abc 1，很明显可以看到 abc 字符串左右两边是有空格的。接下来使用 trim() 函数

xxxxxxxxxx





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

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

trim() 函数在以后开发中还是比较常用的，例如下图所示是登陆界面

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

4.3 自定义对象

在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：

xxxxxxxxxx





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

调用属性的格式：

xxxxxxxxxx





对象名.属性名

调用函数的格式：

xxxxxxxxxx





对象名.函数名()

接下来通过代码演示一下，让大家体验一下 JavaScript 中自定义对象

xxxxxxxxxx





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