前端js——对象

标签：<script></script>

构架图：

• 常用对象

  • 数组

    • 1. 创建数组:

      • let arr = [1,2,3];
      • let arr = new Array(1,2,3);
      • 注意：JS数组不区分数据类型，而且其长度可以随意改变，因此JS数组类似于Java中的集合

    • 2. 数组常用方法:

      • length:这是一个属性，用于获取数组长度
      • forEach()：遍历数组中的有值元素
      • push()：从尾部向数组添加元素
      • splice(开始索引,删除个数)：删除指定元素

  • 字符串

    • 1. 构造方式：

      • let str = "xxx"; 双引号，单引号都行
      • let str = new String("哈哈");

    • 2. 常见方法：

      • length: 属性，获取字符串长度
      • chatAt(): 返回在指定位置的字符串
      • indexOf(): 检索字符串位置
      • trim(): 移除字符串首尾空白
      • substring(开始,结束) 字符串截取

  • 数学对象——Math

    • 1. Math对象的方法:

      • round() 四舍五入
      • floor() 向下取整
      • ceil() 向上取整
      • random() 产生随机数 ：返回 [0,1) 之间的随机数。

        

  • JSON

    • 1. 概念

      

      • JSON（JavaScript Object Notation）JavaScript对象标记法，本质是通过JavaScript对象标记法书写的文本
      • JSON主要用做数据载体，在网络中进行数据传输，JSON数据的value部分，主要支持三种类型的数据：
        • 1. 简单类型：数字、字符串、布尔、时间、null
        • 2. 数组：使用 [] 表示，let studentName = ["张三","李四","王五"];
        • 3. 对象：使用 {} 表示，let user = {"name":"Jerry","age":18};

    • 2. 转换

      • JSON字符串转为JS对象:var jsObject = JSON.parse(userStr);
      • JS对象转为JSON字符串:var jsonStr = JSON.stringify(jsObject);

    • 3.js书写格式

      • 基本格式

        

      • 数组格式

        

      • 成员对象包含：数组+成员对象

        

• BOM对象

  • BOM（Browser Object Model ）浏览器对象模型，其作用是把浏览器抽象成为一个对象模型，然后可以使用js模拟浏览器的一些功能。

    

    • Window

      • Window对象可以实现两种定时器：setInterval（周期性任务）、setTimeout（一次性任务）

        

      • 清除定时器: clearInterva1 clearTimeaut

        

    • Location

      • Location对象指的是浏览器的地址栏，它的主要作用是：使用href属性完成地址的获取和跳转

        

        

• DOM对象

  • DOM（Document Object Model）文档对象模型，其作用是把HTML页面内容抽象成为一个Document对象，然后可以使用js动态修改页面内容。

  • 获取对象方法

    • 1. 获取元素对象

      • document.getElementById(id属性值)

        

      • document.getElementsByTagName(标签名)

        

      • document.getElementsByClassName(class属性值)

        

      • document.getElementsByName(name属性值)

    • 2. 读取和设置dom对象属性

      

      • 对象.属性名
      • 对象.属性名=""

    • 3. 读取和设置dom对象中的文本

      • 对象.innerHTML

        

      • 对象.innerHTML=""