JavaScript常用对象

大三的土狗
129 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

前言

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

  • 基本对象

    Arrary、 Boolean、 Date、Number等等、

  • BOM 对象

  Window、Location等等。

  • DOM对象

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

  Dcunment、Anchor等等。

1 Array对象

JavaScript Array对象用于定义数组

1.1 定义格式

数组的定义格式有两种：

  • 方式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 中使用的是 [] 定义

1.2 元素访问

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

arr[索引] = 值;

代码演示：

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

1.3 特点

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

例如如下代码：

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

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

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

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

1.4 属性

Array 对象提供了很多属性， length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了

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

1.5 方法

Array 对象同样也提供了很多方法，push 函数和 splice 函数。

  • 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}

2 String对象

String对象的创建方式有两种

  • 方式1：

    var 变量名 = new String(s);

  • 方式2：

    var 变量名 = "数组";

属性：

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

image.png

函数：

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

image.png

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

代码演示：

var str = '  xmp   ';
alert(1 + str + 1);

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

var str = '  xmp   ';
alert(1 + strm.trim() + 1);

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

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

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

3 自定义对象

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

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

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

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

var person = {
        name : "zhangsan",
        age : 21,
        eat: function (){
            alert("王者荣耀~");
        }
    };
​
​
alert(person.name);  //zhangsan
alert(person.age); //21
​
person.eat();  //王者荣耀~

总结

  以上就是JavaScript常用对象的分享，前端三大件中js还是非常重要的，在学习中要重视。

avatar
文章
阅读
粉丝