首页 > 系统相关 >对象的使用 对象的方法 遍历对象 数字内置的对象 数据内存的存储

对象的使用 对象的方法 遍历对象 数字内置的对象 数据内存的存储

时间:2022-11-23 00:01:45浏览次数:46  
标签:内置 obj log 对象 遍历 console Math 属性

1.1什么是对象 

在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。

对象是由属性方法组成的。

  • 属性:事物的特征,在对象中用属性来表示(常用名词)

  • 方法:事物的行为,在对象中用方法来表示(常用动词)

创建对象的二种方式

1.2.1 利用字面量创建对象

使用对象字面量创建对象:

  • 就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法;

  • { } 里面采取键值对的形式表示

注意

键:相当于属性名

值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

对象的属性

  • 对象中存储具体数据的 "键值对"中的 "键"称为对象的属性,即对象中存储具体数据的项

  • 对象的方法

    • 对象中存储函数的 "键值对"中的 "键"称为对象的方法,即对象中存储函数的项

<body>
    <script>
      //  属性:实物的特征 =》静态属性(名词)
      // 方法:事物的行为,在对象中用方法表示(动词)
      // =======================
      // 创建对象
      //1.字面量创建对象
      let obj = {
        "user-name": 97,
        name: "李四",
        name: "李四",
        age: 17,
        sex: "女",
        addess: "河南洛阳",
        0: "hhhahhahhahhahhahahah",
      };
      console.log(obj);
      // console.log(obj);
      // // 2.new Object()创建对象
      // let obj1 = new Object();
      // (obj1.name = "张三"), console.log(obj1);
      // =======键值对==========
      // 属性名: 是键=====属性值:是值


// 查======对象名.属性名 name: "李四", console.log(obj.name); //李四 console.log(obj.names); //如果找对象中不存在的属性名 则返回undefined // console.log(obj.user - name); //NaN // console.log(obj.user - hight);//报错 //查 对象名['属性名']====中括号语法更强大 console.log(obj["user-hight"]); console.log(obj["sex"]); console.log(obj["0"]);

         属性--增

        语法:对象名.新属性 = 新值

        // 增加属性名

      obj.gz = 777777;
      obj["sg"] = "100";
      console.log(obj.gz);
      console.log(obj.sg);
      

          属性--改

          语法:对象名.属性 = 新值

      //改属性名======之前有这个属性就改(覆盖之前的属性值)
不然就新增 obj.name = "王五"; console.log(obj.name);

         属性--删 (了解)

         语法:delete 对象名.属性名

//删除属性名
      delete obj.sex;
      console.log(obj);
    </script>
  </body>

 

调用对象的方法

  • 对象里面的方法调用:对象.方法名() ,注意这个方法名字后面一定加括号

  <body>
    <script>
      // let obj = {
      //   name: "ww",
      //   age: 5,
      //   // 方法
      //   sing: function () {
      //     console.log(obj);
      //   },
      //   sum: function (a, b) {
      //     return a + b;
      //   },
      // };
      // console.log(obj.name);
      // console.log(obj["age"]);
      // obj.sing();
      // let res = obj.sum(1, 3);
      // console.log(res);

      let obj = {
        colose: "黑色",
        name: "小白兔",
        address: "深圳",
        xz: 2000,
        like: function () {
          console.log("唱喜羊羊");
          return "唱喜羊羊";
        },
        danser: function () {
          console.log("迪斯科");
        },
        // 简写
        eat() {
          console.log("简写省略和:号function"); //只有对象方法中可以这样使用
        },
      };
      console.log(obj.name);
      console.log(obj["address"]);
      obj.like();
      obj.danser();

      // 拓展 变量和属性的区别点、相同点
      // 变量单独使用 属性需要借助对象访问名//相同都是容器
      // 函数 方法 区别
      // 相同:都是处理数据 封装代码块
      // 区别:函数单独使用(fn())  方法借助对象使用(如obj.sing())

      // ==========
      let obj1 = null; //将来存一个对象
      obj1 = {
        name: "aa",
      };
    </script>
  </body>

1.2.3 变量、属性、函数、方法总结

      属性是对象的一部分,而变量不是对象的一部分,变量是单独存储数据的容器

  • 变量:单独声明赋值,单独存在

  • 属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征

    方法是对象的一部分,函数不是对象的一部分,函数是单独封装操作的容器

    • 函数:单独存在的,通过“函数名()”的方式就可以调用

    • 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。

1.3 null

      null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object

 

1.4 遍历对象

<body>
    <script>
      /* 
      for...in 语句用于对数组或者对象的属性进行循环操作。
      语法:
      for (变量 in 对象名字) {
        // 在此执行代码
        }

      语法中的变量是自定义的,它需要符合命名规范,通常我们会将这个变量写为 k 或者 key。
      */
      // 遍历对象的方法  语法 for(变量名in对象名){} 变量名/属性名习惯写为key 对象名习惯给obj
      let obj = {
        uname: "lw",
        age: 17,
        sex: "男",
      };
      let a = "";

      for (let key in obj) {
        // console.log(key); //所有的属性名uname age sex
        console.log(obj[key]); //obj[key]是属性值 lw 17 男
        if (obj[key] === "lw") {
          a = key;
        }
      }

      console.log(a);
      //a=obj[key];
    </script>
  </body>

遍历数组中的对象

 <body>
    <script>
      let students = [
        { name: "小明", age: 18, gender: "男", hometown: "河北省" },
        { name: "小红", age: 19, gender: "女", hometown: "河南省" },
        { name: "小刚", age: 17, gender: "男", hometown: "山西省" },
        { name: "小丽", age: 18, gender: "女", hometown: "山东省" },
        { name: "晓强", age: 16, gender: "女", hometown: "蓝翔技校" },
      ];
      for (i = 0; i < students.length; i++) {
        // console.log(students[i]);
        // console.log(students[i].name);//obj.语法
        console.log(students[i]["hometown"]); //obj[]语法
      }
      // 让用户输入年龄 姓名 性别 住址
      let arr = [];
    </script>

2.内置对象

回想一下我们曾经使用过的 console.logconsole其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()

除了 console 对象外,JavaScritp 还有其它的内置的对象

 

2.2 Math对象

Math 是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。

属性

  • Math.PI,获取圆周率

// 圆周率
console.log(Math.PI);

方法

  • Math.random,生成 0 到 1 间的随机数

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
  • Math.ceil,数字向上取整

// 舍弃小数部分,整数部分加1
Math.ceil(3.4)
  • Math.floor,数字向下取整

// 舍弃小数部分,整数部分不变
Math.floor(4.68)
  • Math.round,四舍五入取整

// 取整,四舍五入原则
Math.round(5.46539)
Math.round(4.849)
  • Math.max,在一组数中找出最大的

// 找出最大值
Math.max(10, 21, 7, 24, 13)
  • Math.min,在一组数中找出最小的

// 找出最小值
Math.min(24, 18, 6, 19, 21)
<body>
    <script>
      // 属性
      // Math js内置对象
      console.log(Math.ceil(7.01)); //8向上取整
      console.log(Math.floor(7.01)); //7向下取整
      console.log(Math.round(4.5)); //4.5四舍五入
      console.log(Math.round(4.35)); //4四舍五入
      console.log(Math.round(-3.5)); //-3四舍五入  .5是往大的取
      console.log(Math.max(100, 11, 33, 2 - 3.5)); //一组数中取最大值
      console.log(Math.max()); //没有参数返回无穷大Infinity
      console.log(Math.max("1", "2", "张三")); //如果任一参数不能转换为数值 则结果为NaN
      console.log(Math.min(100, 11, 33, 2 - 3.5)); //一组数中取最小值
      console.log(Math.abs(-3.5)); //取绝对值
    </script>
  </body>

 

<body>
    <script>
      // 能取到 0 但是取不到 1 中间的一个随机小数>=0>1
      console.log(Math.random()); //随机小数
      console.log(Math.floor(Math.random() * 10)); //向下取整 最大取到9
      console.log(parseInt(Math.random() * 10)); //随机取整
      let arr = ["张三", "李四", "王五", "赵六", "田七", "王八"];
      let random = parseInt(Math.random() * arr.length);
      let random1 = Math.floor(Math.random() * arr.length);
      console.log(arr[random]);
      console.log(arr[random1]);
      //
      function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min; //不含最大值,含最小值
      }
      console.log(getRandomInt(2, 17));
    </script>
  </body>
<style>
      div {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>

  <body>
    <script>
      // 1. 自定义一个随机颜色函数1. 自定义一个随机颜色函数
      // 封装函数  // true或者啥也不传  #ffffff  传false  rgb(255,255,255)
      function getRandomColor(flag = true) {
        if (flag) {
          let arr = [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "a",
            "b",
            "c",
            "d",
            "e",
            "f",
          ];
          let str = "#";
          for (i = 1; i <= 6; i++) {
            let random = parseInt(Math.random() * arr.length);
            str = str + arr[random];
            // console.log(str);
          }
          // console.log(str);
          return str;
        } else {
          let r = Math.floor(Math.random() * 256);
          let g = parseInt(Math.random() * 256);
          let b = Math.floor(Math.random() * 256);
          // console.log("rgb(24,25,26)");
          return `rgb(${r},${g},${b})`;
        }
      }
      let res = getRandomColor(false);
      let res1 = getRandomColor(true);
      // document.write(res); //rgb()
      document.write(res1); //16进制
    </script>
  </body>

 

3 - 简单数据类型和复杂数据类型

2.1 简单数据类型

简单类型基本数据类型值类型):在存储时变量中存储的是值本身,包括string ,number,boolean,undefined,null

2.2 复杂数据类型

复杂数据类型(引用类型):在存储时变量中存储的仅仅是地址(引用),如 Object、Array、Date等;

注意:

// 栈内存随用随取 是一个创建销毁的过程 比较灵活 会有垃圾回收机制 进行释放内存 可以提高性能 //复杂数据类型 不能直接赋值给另外一个=》因为赋值的是一个地址 此时修改一个另一个也会被修改(可以使用深拷贝解决这个问题)

2.3 堆栈

  • 堆栈空间分配区别:

  1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;

简单数据类型存放到栈里面

  2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。

  • 简单数据类型的存储方式

    值类型变量的数据直接存放在变量(栈空间)中

 

  •  复杂数据类型的存储方式

    引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中

 

 

 

 

标签:内置,obj,log,对象,遍历,console,Math,属性
From: https://www.cnblogs.com/JAG2671169285/p/16916927.html

相关文章