JS对象知识

一、对象的概念

对象相对于变量，函数表达信息更完整，丰富。

二、使用字面量创建对象

<script>
    // 1. 使用字面量创建对象
    var obj = {
      uname: "张三丰",
      age: 18,
      sex: "man",
      sayhi: function (){
        console.log("Hi~~~");
      }
    }
    // (1) 里面的属性或方法我们采取键值对的形式，键 属性名： 值 属性值
    // (2) 多个属性或方法之间用逗号隔开
    // (3 方法冒号后面跟的是一个匿名函数
    //  2. 使用对象
    // (1) 调用对象的属性 对象名.属性名 或 对象名['属性名']的方式
    console.log(obj.uname);
    console.log(obj["age"]);
    // (2) 调用对象的方法，对象名.方法名
    obj.sayhi();
</script>

三、使用new object 创建对象

<script>
  // 使用new object 创建对象
  var obj =  new Object(); //创建一个空对象
    obj.uname = '张恒超';
    obj.age = 18;
    obj.sex = '男';
    obj.sayhi = function (){
      console.log("hi~~~");
    }
    // (1)使用等于= 赋值的方法，添加对象的属性和方法
    // (2)每个属性和方法之间用分号结束
  console.log(obj.age);
  console.log(obj.uname);
  obj.sayhi();
</script>

四、使用构造函数创建对象

前面两种方式创建的对象，只能是一个对象。
构造函数，是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始化值，它总是与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

<script>
    // 3. 使用构造函数创建对象
    function Star(uname,age,sex){
      this.name = uname;
      this.age = age;
      this.sex = sex;
    }
    var ldh = new Star("刘德华",18,"男");
    console.log(typeof ldh);
    console.log( ldh.name);
    console.log( ldh.age);
    console.log( ldh.sex);
    // (1) 构造函数首字母大写
    // (2) 构造函数无返回值 
    // (3) 使用构造函数前需new
    var zxy= new Star("张学友",18,"男");
    console.log(typeof zxy);
    console.log( zxy.name);
    console.log( zxy.age);
    console.log( zxy.sex);
</script>

MDN文档查看
https://developer.mozilla.org/zh-CN/docs/Web

五、Math内置对象

Math内置对象
Math.floor()
Math.cell()
Math.random()
以下示例闭区间的随机数，然后调用实现随机点名。

<script>
        // 1. Math对象随机数方法 random() 返回一个随机的小数 0=< x < 1
        // 2. 无需参数
        // 3. 代码验证
        console.log(Math.random());
        // 4.我们想要得到两个数据之间的随机整数，并且包含这两个数
        // Math.floor(Math.random() * max - min + 1)) + min
        function getRandom(min,max){
          return Math.floor(Math.random() * max - min + 1) + min;
        }
        console.log(getRandom(1,10));
        // 随机点名
        var arr = ["张三丰","张三","张四","李五","何六"];
        console.log(arr[getRandom(0,arr.length -1)]);
</script>

六、Date()日期对象

是一个构造函数，必须 使用new。

<script>
        // 1. Date()，是一个构造函数，必须使用new
        var date = new Date();  // 无参数时返回当前日期
        console.log(date);

        var date1 = new Date(2019,10,1);
        console.log(date1); // 月份差一个月
</script>

日期格式化示例

<script>
        // 1. Date()，是一个构造函数，必须使用new
        var date = new Date();  // 无参数时返回当前日期
        console.log( date.getFullYear());
        console.log( date.getMonth() + 1);
        console.log( date.getDate());
        console.log( date.getDay());  //返回周几，周日为0，周一为1......
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var day = date.getDay();
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
         weekday =arr[date.getDay()]
        console.log("今天是：" + year +"年" + month + "月" + dates+ "日 " + weekday);
         var h = date.getHours();
         var m = date.getMinutes();
         var s = date.getSeconds();
        console.log((h <10 ? "0" + h : h ) + ":" + (m<10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s));
        var date2 = +new Date();  //1970到现在的毫秒数；
        console.log(date2);
        console.log(Date.now());  // 1970到现在的毫秒数
</script>

倒计时案例：

<script>
        // 1. 综合运用，制作倒计时
        function  countDown(time){
          var nowTime = +new Date();  // 当前时间到现在的毫秒数
          var inputTime = +new Date(time); //传参设定时间到现在的毫秒数
          var times = (inputTime - nowTime) / 1000; // 毫秒的时间差
          var d = parseInt(times / 60 / 60 /24); //天
          d = d < 10 ? "0" + d : d;
          var h = parseInt(times / 60 / 60 % 24); //天
          h = h < 10 ? "0" + h : h;
          var m = parseInt(times / 60 % 60);  //时
          m = m < 10 ? "0" + m : m;
          var s = parseInt(times % 60);   //当前的秒
          s = s < 10 ? "0" + s : s;
          return d + '天' + h + "时" + m + '分' + s + '秒';
        }
        console.log(countDown('2021-10-01 0:00:00'))
</script>

七、数组对象

Array.isArray,push(),unshift();pop(),shift()应用示例。

<script>
        // Array.isArray() H5以上才支持
       var arr = [];
        console.log(Array.isArray(arr));  // 判断是否为数组，返回结果为true
        
        // 一、push方法，在数组的末尾，添加一个或多个数组元素
        arr.push(4, 'pink');
        console.log(arr.push(5, 'zhanghc'));
        console.log(arr);
        // （1）push 是可以给数组追加新的元素
        // （2）push（）参数直接写数组元素就可以了
        // （3）push完毕后，返回的结果是新数组的长度
        // （4）push完毕后，原数组长度也发生改变

        // 2、unshift 在数组的开头，添加一个或多个数组元素。
        arr.unshift(1,2);
        console.log(arr.unshift(3,4));
        console.log(arr);
        // （1）unshift 是可以给数组前面添加新的元素
        // （2）unshift（）参数直接写数组元素就可以了
        // （3）unshift，返回的结果是新数组的长度
        // （4）unshift，原数组长度也发生改变

        // 3、pop（），可以删除数组的最后一个元素，一次只能删除一个。
        console.log(arr.pop());
        // (1) 删除最后一个，一次一个元素
        // (2) 无参数
        // (3) 删除后，返回是删除的哪个元素
        // (4) 删除后，原数组也会发生变化

        // 4、shift（），可以删除数组的j首个元素，一次只能删除一个。
        console.log(arr.shift());
        // (1) 删除第一个，一次一个元素
        // (2) 无参数
        // (3) 删除后，返回是删除的哪个元素
        // (4) 删除后，原数组也会发生变化
</script>

数组筛选示例

<script>
        // 数组筛选
       var arr = [1500, 2000, 1800, 3400];
       var newArr = [];
       for (var i = 0; i < arr.length;  i++){
         if (arr[i] >= 1500){
           newArr[newArr.length] = arr[i];
           newArr.push(arr[i]);
         }
       }
        console.log(newArr);
</script>

数据翻转和排序方法示例

<script>
        // 数组翻转和排序的示例
       var arr = [1500, 200, 1800, 3400];
       arr.reverse();
        console.log(arr);
       // sort排序();
        arr.sort(); // 默认按字符排序
        console.log(arr);
        arr.sort(function (a,b){
          // return a - b;  //按升序的顺序排序
          return b - a;  //按降序的顺序排序
        })
        console.log(arr);
</script>

数组索引的方法

<script>
        // indexOf 只满足返回第一个元素的索引号，找不到返回-1，说明无些元素
       var arr = [1500, 200, 3400,1800, 3400];
        console.log(arr.indexOf(3400));
        console.log(arr.indexOf(3500));
        // lastindexOf  从后向前索引查找，找不到返回-1，说明无些元素
        var arr = [1500, 200, 3400,1800, 3400];
        console.log(arr.lastIndexOf(3400));
        console.log(arr.lastIndexOf(3500));
</script>

数据去重的示例
遍历旧数据中元素是否在新数组中存在，只存在不存在的元素，这样新数组就是不重复的数组元素。

<script>
        //  综合运用indexOf(),push(),实现数组元素去重。
       var arr = [1500, 1500, 3400,1800, 3400];
        function unique(arr){
          var newArr = [];
          for (var i = 0; i < arr.length; i++){
            if (newArr.indexOf(arr[i]) === -1){
              newArr.push(arr[i]);
            }
          }
          return newArr
        }
        var demo1 = unique(arr);
        console.log(demo1);
</script>

数据转为字符串

<script>
        //  toString() 将数据转换为字符串
        var arr = [1,3,5,65];
        console.log(arr.toString());
        // join(分隔符),用指定分隔符拼接为字符串
        console.log(arr.join("&"));
        console.log(arr.join("_"));
        console.log(arr.join("*"));
        console.log(arr.join()); // 无时默认为逗号
</script>

八、字符串对象

<script>
        //  toString() 将数据转换为字符串
        var str = 'zhanghc';
        console.log(str.length);
        // 对象才有属性和方法，复杂数据类型才有属性和方法
        // 基本包装类型，就是将简单数据类型，包装成了复杂数据类型，也这基本数据类型就有了属性和方法。

        // 字符串的不可变，不要大量拼接字符串，不会修改字符串，每次对字符串的操作都会开一新的空间保存字符串。
        // 反复开辟空间，会导致空间越来越卡

        //根据字符返回位置
        var  str1 = "春开来了，春天真好。";
        console.log(str1.indexOf("春"));  // 返回0
        console.log(str1.indexOf("春",2)); // 返回5
</script>

实例，查找字符串中 所有o出现的位置以及次数

<script>
        //   实例，查找字符串中 所有o出现的位置以及次数
        var str = 'olokokllsisofheeroflilo';
        var index = str.indexOf("o");
        var num = 0;
        while (index !== -1){
          console.log(index);
          num++;
          index = str.indexOf("o",index + 1);
        }
        console.log("o出现的次数是：" + num);
</script>

实例，根据位置返回字符

<script>
        //   实例，根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = 'olokolilo';
        console.log(str.charAt(3));
        // 遍历所有字符
        for (var i = 0; i <= str.length; i++){
          console.log(str.charAt(i));
        }
        // 2. charCodeAt(index) 返回相应索引叼的字符ASCII值，目的，判断用户按下了哪个键
        console.log(str.charCodeAt(4));
        // 3. str[index]，只有H5可以用
        console.log(str[4]);
</script>

实例 统计字符串中出现次数最多的字符和次数

<script>
        //   统计出现最多的字符和次数
        var str = 'olokolilo';
        var o = {};
        for (var i = 0; i < str.length; i++){
          var chars = str.charAt(i);
          if (o[chars]){
            o[chars]++;
          } else {
            o[chars] = 1;
          }
        }
        console.log(o);
        // 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o){
          // k 得到是属性名
          // o[k]得到的是属性值
          if (o[k] > max){
            max = o[k];
            ch = k;
          }
        }
        console.log("最多的字符是：" + ch +",其数量是"+ max)
</script>

concat(str1,str2,str3) 拼接字符串；
substr(start,length) 从start开始，截取length个字符
replace(“odlchar”,“newchar”)
split(“splitchar”);

<script>
        // 字符串拼接
        var str1 = 'read'
        console.log(str1.concat("myname"));
        //   substr(截取开始位置，截取几个字符)
        var str = 'olokolilo';
        console.log(str.substr(2,3));
        //  字符串替换操作
        var str2 = 'arrayandarre';
        console.log(str2.replace("arr","abb")); //只替换第一个

        while (str2.indexOf("a") !== -1){
          str2 = str2.replace('a','_');
        }
        console.log(str2);

        // 字符串转换为数组 split("分隔符")，join可以将数组转换为字符串
        var str3 = 'red, pink, blue, green';
        console.log(str3.split(","));
        var str4 = 'red& pink& blue,&green';
        console.log(str4.split("&"));
</script>

数据类型总结：
// 简单数据类型，是存放在栈里，直接开辟一了个空间存放。
// 复杂数据类型，首先在栈里面存放十六进制，然后用这个地址指向堆里存放的东西。