Day7 笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_68113637/article/details/142534127

补充

Date 日期

方法	说明
date.getFullYear()	从 Date 对象以四位数字返回年份。 (获得年份）
date.getMonth()	从 Date 对象返回月份 (0 ~ 11)。(获得月份)
date.getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。(获得天)
date.getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。 (周几)
date.getHours()	返回 Date 对象的小时 (0 ~ 23) (获得小时数)
date.getMinutes()	返回 Date 对象的分钟 (0 ~ 59) (获得分钟数)
date.getSeconds()	返回 Date 对象的秒数 (0 ~ 59) （获得秒数）
date.getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999) (获得毫秒数)
date.getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
date.toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。

let date= new Date();// date  实例对象

    //1.创建日期对象
     let date=new Date();//今天的时间
     console.log(date);

     //2024-10-1 12:00:00    2024/10/1 12:00:00  2024 10 1 12:00:00
     let date1=new Date("2024-10-1 12:00:00");// 指定的时间
     console.log(date1);

     // 很少用   毫秒
     let date2=new Date(1727171842176);
     console.log(date2);

     var d = new Date(2024, 9, 24, 17, 59, 58);
     console.log(d);//Thu Oct 24 2024 17:59:58 GMT+0800 (中国标准时间)
//倒计时
  let nowtime=new Date();
        let endtime=new Date("2024-11-20");
        let time=endtime.getTime()-nowtime.getTime();
        let s=Math.floor(time/1000%60);
        let m=Math.floor(time/(1000*60)%60);
        let h=Math.floor(time/(1000*60*60)%24);
        let t=Math.floor(time/(1000*60*60*24));
        console.log("还剩："+t+"天"+h+"小时"+m+"分钟"+s+"秒");

案例1 正计时

<style>  //样式
        * {
            /* 外边距 */
            margin: 0;
            /* 内填充 */
            padding: 0;
        }

        #box {
            /* 宽度 */
            width: 800px;
            /* 高度 */
            height: 200px;
            /* 背景颜色 */
            background-color: #6cf;
            /* 块居中  上下为10  左右自动 */
            margin: 10px auto;
            /* 行高   垂直居中 */
            line-height: 200px;
            /* 文本水平居中 */
            text-align: center;
            font-size: 30px;
        }
    </style>

<body>
    <div id="box">霜华</div>
    <script>
        function showtime() {
     
        let data = new Date();
        //1)
        let year = data.getFullYear();
        console.log(year); //24
        // 2)
        let month = data.getMonth() + 1; //(0~11)
        console.log(month); //9
        //3)
        let day = data.getDate(); //(1~31)
        console.log(day); //25
        //4)
        let week = data.getDay(); //(0~6)
        console.log(week); //3  可以把数字转为汉字
        switch (week) {
            case 0:
                    week = "日";
                    break;
                case 1:
                    week = "一";
                    break;

                case 2:
                    week = "二";
                    break;
                case 3:
                    week = "三";
                    break;
                case 4:
                    week = "四";
                    break;
                case 5:
                    week = "五";
                    break;
                case 6:
                    week = "六";
                    break;    
        }
        //5）
        let hour = data.getHours();
        console.log(hour);// 9
        //6)
        let min = data.getMinutes();
        console.log(min);//31
        //7)
        let sec = data.getSeconds();
        console.log(sec);   //秒
        //一位转两位数
        hour = hour < 10 ? "0" + hour : hour
            min = min < 10 ? "0" + min : min
            sec = sec < 10 ? "0" + sec : sec

        let time = `${year}年${month}月${day}日  星期${week}               ${hour}:${min}:${sec}`;
        box.innerHTML=time;
    }
        showtime();
        //定时器  1000毫秒=1秒  启动定时器 1秒之后 第一次执行回调函数 ，以后每隔一秒执行一次
        setInterval(function(){
            showtime()
        },1000);
    </script>

案例2 倒计时

<style>  //样式
        * {
            /* 外边距 */
            margin: 0;
            /* 内填充 */
            padding: 0;
        }

        #box {
            /* 宽度 */
            width: 800px;
            /* 高度 */
            height: 200px;
            /* 背景颜色 */
            background-color: #6cf;
            /* 块居中  上下为10  左右自动 */
            margin: 10px auto;
            /* 行高   垂直居中 */
            line-height: 200px;
            /* 文本水平居中 */
            text-align: center;
            font-size: 30px;
        }
    </style>


    <div id="box">倒计时</div>

    function djs() {
        let data=+new Date();
        let endData=+new Date("2024-10-1");

        let time=endData-data;
        console.log(time);  // 毫秒数

        time=parseInt(time/1000);  //转为秒

        //计算天数  parseInt(time/60/60/24)
        let d=parseInt(time/60/60/24);

        //计算小时数  parseInt((time/60/60)%24)
        let h=parseInt((time/60/60)%24);

        //计算分钟数  parseInt((time/60)%60)
        let m=parseInt((time/60)%60);

        //计算秒数  time%60
        let s=parseInt(time%60);

        h=h<10?"0"+h:h;
        m=m<10?"0"+m:m;
        s=s<10?"0"+s:s;

        let shi=`${d}天${h}时${m}分${s}秒`;

        box.innerHTML =shi;    
    }
    djs();
    setInterval(function(){
        djs();
    },1000)

Math对象

属性	说明
Math.PI	返回圆周率（约等于3.14159）。
Math.LN10	返回 10 的自然对数（约等于2.302）

方法	说明
Math.ceil()	（向上取整）对数进行上舍入
Math.floor()	（向下取整）对数进行下舍入
Math.random()	返回 0 ~ 1 之间的随机数
Math.round()	四舍五入
Math.max(x,y,z,...,n)	返回 x,y,z,...,n 中的最大值
Math.min(x,y,z,..,n)	返回 x,y,z,...,n中的最小值。
Math.sqrt()	返回数的平方根
Math.abs()	返回数的绝对值

console.log(Math.PI);
        let r = 10;
        console.log("圆的面积：" + Math.PI * r * r);
//Math.ceil()、 Math.floor()、 parsenInt()、 Math.round()
  console.log(Math.ceil(3.14), Math.ceil(-3.14));//4    -3
  console.log(Math.floor(3.94), Math.floor(-3.14));//3  -4
  console.log(parseInt(3.94), parseInt(-3.94));//3   -3
  console.log(Math.round(3.84), Math.round(3.46));//4  3
        for (let i = 0; i < 10; i++) {
             console.log(Math.random()); // 0~1内的随机数
          console.log(getRndInteger(10,30));//10~30内的随机数
        }

        function getRndInteger(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        //返回最大值
        console.log(Math.max(10,20,"50",30));
         let a=+prompt("输入一个数");
         let b=+prompt("输入一个数");
         let c=+prompt("输入一个数");
          console.log(Math.max(a,b,c));
        let max=a;
         if(max<b){
             max=b;
         }
         if(max<c){
             max=c;
         }
         console.log(max);   

   console.log(Math.min(200,80,100)); //返回最小值    
   console.log(Math.pow(2,3),2**3);  //返回 x 的 y 次幂

Chp - 8 数组

1.数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

数组是一种将一组数据存储在单个变量名下的存储方式。

// 普通变量一次只能存储一个值
let num = 10;
// 数组一次可以存储多个值
let arr = [1,2,3,4,5];

2.数组的创建

创建数组有两种方式：

利用 new 创建数组
利用数组字面量创建数组

1.利用new 创建数组

let 数组名 = new Array();
let arr = new Array();

2.利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
let 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
let 数组名 = ['霜华','年','令','清平乐'];

数组的字面量是方括号 [ ]

声明数组并赋值称为数组的初始化

这种字面量方式也是我们以后最多使用的方式

3.数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等

3.获取数组中的元素

1.数组的索引

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

let arr = ['霜华','年','令','清平乐'];
索引号 0 1 2 3

2.数组的长度

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。

// 定义数组
let arr = [1,2,3];
// 获取数组中的第2个元素
console.log(arr[1]);

   let arr=[];
         let arr=new Array();
         // 添加数据
         let[0]='星期一';
         let[1]='星期二';
         let[2]='星期三';
         let[3]='星期四';
         let[4]='星期五';
         let[5]='星期六';
         let[6]='星期日';
         console.log(arr);
         //取出星期日
         console.log(arr[6]);

3.数组的遍历

1.遍历

遍历: 就是把数组中的每个元素从头到尾都访问一次。

我们可以通过 for 循环索引遍历数组中的每一项；

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

2.数组的长度

使用“数组名.length”可以访问数组元素的数量（数组长度）。

let arr=[1,2,3];
console.log(arr.length);  // 3

注意：

① 此处数组的长度是数组元素的个数，不要和数组的索引号混淆。

数组的长度始终比索引数大1

② 当我们数组里面的元素个数发生了变化，这个length 属性跟着一起变化

案例数组最大值

  //  数组最大值
let arrNum = [2,6,1,77,52,25,7];
let maxNum = arrNum[0]; 
// 用来保存最大元素,默认最大值是数组中的第一个元素
// 从0 开始循环数组里的每个元素
for(let i = 0;i< arrNum.length; i++){
// 如果数组里当前循环的元素大于 maxNum，则保存这个元素和下标
  if(arrNum[i] > maxNum){
    maxNum = arrNum[i]; // 保存数值到变量 maxNum
  }
}

案例数组转换为字符串

let arr = ['red', 'green', 'blue', 'orange']; 
let str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i];
}
console.log(str);

4.数组中新增元素

1.通过修改length 长度新增数组元素

可以通过修改 length 长度来实现数组扩容的目的

length 属性是可读写的

let arr = ['red', 'green', 'blue', 'orange'];
   arr.length = 7; 
    console.log(arr); 
// 'red' 'green' 'bule' 'orange' empty*3
    console.log(arr[4]); //undefined
    console.log(arr[5]); //undefined
    console.log(arr[6]); //undefined

其中索引号是 4，5，6 的空间没有给值，就是声明变量未给值，默认值就是 undefined。

2. 通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素

不能直接给数组名赋值，否则会覆盖掉以前的数据

let arr=[1,2,3,4];
arr[4]='5';
console.log(arr); // 1 2 3 4 5

这种方式也是我们最常用的一种方式。

5.检测数据类型的方法

1.检测数据类型

检测基本数据类型 typeof "number" "string" "boolean" "null" "undefined" "function" "symbol"

检测引用数据类型 instanceof 返回值真假

变量 instanceof 构造函数名字

     let  array=[10,20];
        console.log(array,typeof array);//[10,20] 'object'
        let date=new Date();
        console.log(date,typeof date); //  'object'

        console.log(arr instanceof Array); //true
        console.log(date instanceof Date); // true

        console.log(date instanceof Array); //false

2深拷贝和浅拷贝：

1、浅拷贝，指的是重新分配一块内存，创建一个新的对象，但里面的元素是原对象中各个子对象的引用。

2、深拷贝，是指重新分配一块内存，创建一个新的对象，并且将原对象中的元素，以递归的方式，通过创建新的子对象拷贝到新对象中。因此，新对象和原对象没有任何关联。

3、区别：浅拷贝，修改原数组或新数组，两个数组的值会同步修改，深拷贝，修改原数组或新数组，两个数组的值不会同步修改

4、本质区别：浅拷贝修改了值，不会新建一个内存地址的对象，深拷贝如果修改了值，及时复制了一份新的内存地址，原始地址的值不会被改变

浅拷贝：把一个数组名赋值给另一个数组就是浅拷贝，特点：一个数组中的元素发生改变，另一个数组同步修改

深拷贝：原数组中的数组重新复制了一份到新数组中特点：一个数组中的元素不影响另一个元素

//浅拷贝
        let arr= [10,11,12];
        let arr1=arr;
        console.log(arr1,arr);
        // [10, 11, 12] [10, 11, 12]
        //修改
        arr[1]=100;
        console.log(arr1,arr);
        //[10, 100, 12] [10, 100, 12]
        //深拷贝
        let  arr3=[7,12,11,20];
        let arr4=[];
        for (let i = 0; i < arr3.length; i++) {
            arr4[i]=arr3[i];
            //arr4[arr4.length]=arr3[i]
        }
        console.log(arr3,arr4);
       //  [7, 12, 11, 20]  [7, 12, 11, 20]

        arr4=100;
        console.log(arr3,arr4);
       // [7, 12, 11, 20 100]