JS对象

最新推荐文章于 2024-12-17 13:45:18 发布

保持敬畏

最新推荐文章于 2024-12-17 13:45:18 发布

阅读量85

点赞数

分类专栏： JavaWeb后端SpringBoot 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_64939936/article/details/131503144

版权

JavaWeb后端SpringBoot 专栏收录该内容

136 篇文章

订阅专栏

Array（数组对象）
- 用于定义数组
- 定义
  - var 变量名 = new Array（元素列表）
    - var arr = new Array（1，2，3，4）；
  - var 变量名 = [元素列表]
    - var arr = [1,2,3,4]；
- 访问
  - arr[索引] = 值
    - arr[10] = "Hello"；
- 属性
  - length ：设置或者返回数组中元素的数量
- 方法
  - forEach（）：遍历数组中的每个元素，并调用一次传入的函数
  - push（）：将新元素添加到数组的末尾，并返回新的长度
  - splice（）：从数组中删除元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS-对象-Array</title>
  </head>
  <body></body>
  <script>
    // 定义数组
    var arr = new Array(1,2,3,4);
    var arr = [1,2,3,4];

    // 输出到控制台
    console.log(arr[0]);
    console.log(arr[1]);

    // 特点: 长度可变 类型可变
    var arr = [1,2,3,4];
    arr[10] = 50;

    // 没有复制默认值为undefined
    console.log(arr[10]);
    console.log(arr[9]);
    console.log(arr[8]);

    arr[9] = "A";
    arr[8] = true;

    // console.log(arr);
    var arr = [1, 2, 3, 4];
    arr[10] = 50;
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }

    console.log("==================");

    //forEach: 遍历数组中有值的元素
    arr.forEach(function(e){
        console.log(e);
    })

    //ES6 箭头函数: (...) => {...} -- 简化函数定义
    arr.forEach((e) => {
        console.log(e);
    })

    //push: 添加元素到数组末尾
    arr.push(7,8,9);
    console.log(arr);

    //splice(起始位置,删除个数): 删除元素
    arr.splice(2, 2);
    console.log(arr);
  </script>
</html>

运行结果：

String（字符串对象）
- 定义
  - var 变量名 = new String （”...“）；
    - var str = new String（”Hello String“）；
  - var 变量名 = ”...“/’....‘
    - var str = ”Hello String “；
    - var str = ’Hello String‘；
- 属性
  - length ：字符串的长度
- 方法
  - charAt（）：返回指定位置的字符
  - indexOf：检索字符串
  - trim（）：取出字符串两边的空格
  - substring（）：提取字符串中两个指定的索引号之间的字符（截取）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS-对象-String</title>
  </head>
  <body></body>
  <script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";
    // 控制台输出
    console.log(str);

    //length
    console.log(str.length);

    //charAt 获取指定位置的字符
    console.log(str.charAt(4));

    //indexOf 检索字符串的位置
    console.log(str.indexOf("lo"));

    //trim 去除字符串两侧空格
    var s = str.trim();
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0, 5));
  </script>
</html>

运行结果：

JS自定义对象
- 定义格式
  - var 对象名 = {
    
    属性名1：属性值1，
    属性名2：属性值2，
    
    函数名称：function（形参列表）{函数体}
    
    }；
  - var user {
    
    name :"张三"，
    
    age：20，
    
    eat（）{
    
    alert（“用膳~”）
    
    }
    
    } ；
- 调用格式
  - 对象名.属性名；
    - user.name
  - 对象名.函数名（）；
    - user.eat（）；

具体代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSON对象</title>
  </head>
  <body>
    <script>
      // 自定义对象
      var user = {
        name: "张三",
        age: 20,
        gender: "男",
        eat() {
          alert("张三用膳~");
        },
      };
      alert(user.name);
      user.eat();
    </script>
  </body>
</html>

运行结果：