JS高级——引用数据类型(Array数组、Date日期、Math数学运算、String字符串)

- 日理万妓 2024-04-01 12:49 56阅读 0赞

### 引用数据类型 ###

#### Array数组 ####

##### 目标 #####

*  掌握Array的基本使用

##### 分析 #####

1.  创建数组
2.  数组的length属性
3.  循环遍历语法
4.  数组的常用方法

##### 讲解 #####

*  创建数组

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>new Array()</code></td> 
   <td>创建长度为0的空数组</td> 
  </tr> 
  <tr> 
   <td><code>new Array(3)</code></td> 
   <td>创建长度为3的空数组，所有值都是undefined</td> 
  </tr> 
  <tr> 
   <td><code>new Array("a", "b", "c")</code></td> 
   <td>创建数组并设置好值</td> 
  </tr> 
 </tbody> 
</table>

*  常用属性

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>length</code></td> 
   <td>获取数组的长度<br>设置数组的长度<br> 如果原长度是3，设置长度为2：会截取数组，只要前2个<br> 如果原长度是3，设置长度为5：数组会扩展，没有值的位置，是undefined</td> 
  </tr> 
 </tbody> 
</table>

*  常用方法

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>concat(arr1,arr2,...)</code></td> 
   <td>把多个数组合并成一个新数组</td> 
   <td><code>let arr = arr1.concat(arr2,arr3)</code></td> 
  </tr> 
  <tr> 
   <td><code>join(string)</code></td> 
   <td>把数组所有元素拼接成字符串<br>以指定的分隔符进行分隔</td> 
   <td><code>let str = arr.join(",")</code></td> 
  </tr> 
  <tr> 
   <td><code>reverse()</code></td> 
   <td>颠倒数组里的元素的顺序<br>直接操作原数组，不会创建新数组</td> 
   <td><code>arr.reverse()</code></td> 
  </tr> 
 </tbody> 
</table>

*  循环遍历的语法【掌握】

//1. fori循环
    for(let i=0; i<arr.length; i++){
        
        console.log(arr[i]);
    }
    
    //2. for of循环
    for(let item of arr){
        
        console.log(item);
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Array数组</title>
    </head>
    <body>
    <ul>
        <li>ThinkPad</li>
        <li>Macbook</li>
        <li>外星人</li>
    </ul>
    
    <script>
        /**
         * Array：数组。更加类似Java里的List，因为js的Array长度可变，并且提供了一系列的方法
         * 1. 创建数组：因为js是弱类型+动态类型，所以数组里可以放任意不同类型的数据
         *      new Array()   创建长度为0的空数组
         *      new Array(size)  创建长度为size的空数组
         *      new Array(element0, element1, ..., elementn)  创建数组并直接赋值
         *
         *      建议使用这种语法创建：["a", "b", "c"]
         *
         * 2. 数组属性：length
         * 3. 循环遍历
         * 4. 常用方法
         */
        //1. 创建数组
        // let arr1 = new Array(3);
        // console.log(arr1);
        //
        // let arr2 = new Array("a", 1, true, new Date());
        // console.log(arr2);
        //
        // let arr3 = ["a", 1, true, new Date()];
        // console.log(arr3);
    
        //2. 数组属性：length
        let arr = ["a", "b", "c"];
        console.log("arr的长度：" + arr.length);
        // 设置数组长度：如果设置的值，小于实际长度，表示截断数组
        arr.length = 2;
        console.log(arr);
        // 设置数组长度：如果设置的值，大于实际长度，表示数组扩容
        arr.length = 5;
        console.log(arr);
    
        console.log("---------------------------------");
    
        //3. 循环遍历
        //3.1 基本for循环：fori
        for (let i = 0; i < arr.length; i++) {
          
            console.log(arr[i]);
        }
        console.log("---------------------------------");
    
        //3.2 增强for循环：for of
        for(let item of arr){
          
            console.log(item);
        }
    
        let liList = document.getElementsByTagName("li");
        for(let li of liList){
          
            console.log(li);
        }
    
        //4. 常用方法
        let array1 = [1, 2, 3];
        let array2 = ["a", "b", "c"];
        let array3 = [true, false];
    
        //4.1 concat方法：把多个数组合并成一个新数组
        let array = array1.concat(array2, array3);
        console.log(array);
        
        //4.2 join方法：把数组里所有元素拼接成字符串，以指定的分隔符进行分隔
        let str = array.join("/");
        console.log(str);
    
        //4.3 reverse方法：颠倒数组里元素的顺序
        array.reverse();
        console.log(array);
    </script>
    </body>
    </html>

##### 小结 #####

//创建数组
    let arr = new Array();
    let arr = new Array(3);
    let arr = new Array("a", "b", "c");
    let arr = ["a", "b", "c"];
    
    //数组的长度：length属性
    let length = arr.length;
    //如果设置的长度小，数组会被截取前n个；如果设置的长度大，数组会扩容
    arr.length = 3;
    
    //数组方法：concat()合并数组
    let arr = arr1.concat(arr2, arr3, ...);
    //数组方法：join()拼接成字符串
    let str = arr.join(",");

#### Date日期 ####

##### 目标 #####

*  掌握Date日期的基本使用

##### 分析 #####

1.  创建日期
2.  日期的常用方法

##### 讲解 #####

*  创建日期

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>new Date()</code></td> 
   <td>创建当前日期当前时间</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>new Date(年,月,日)</code></td> 
   <td>创建指定日期</td> 
   <td><code>new Date(2021,9,1)</code> 2021-10-01</td> 
  </tr> 
  <tr> 
   <td><code>new Date(年,月,日,时,分,秒)</code></td> 
   <td>创建指定日期指定时间</td> 
   <td><code>new Date(2021,9,1,15,22,33)</code> <br>2021-10-01 15:22:33</td> 
  </tr> 
 </tbody> 
</table>

*  常用方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>getTime()</code></td> 
   <td>获取1970年1月1号开始的毫秒值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>setTime(ms)</code></td> 
   <td>以毫秒值设置一个日期</td> 
   <td><code>new Date().setTime(1000)</code></td> 
  </tr> 
  <tr> 
   <td><code>toLocaleString()</code></td> 
   <td>转换成本地日期格式的字符串</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Date日期</title>
    </head>
    <body>
    
    <script>
        /**
         * 1. 创建日期
         * 2. 常用方法
         *  getTime()：获取1970年1月1号开始的毫秒值。可以用于计算日期差
         *  setTime(ms)：以毫秒值设置一个日期。可以用于计算日期偏移
         *  toLocaleString()：转换成本地日期格式的字符串
         */
        //1. 创建日期
        let date = new Date();
        console.log(date);
    
        // 创建日期 2021-9-7  注意：月分是从0开始，0是1月
        let date1 = new Date(2021, 8, 7);
        console.log(date1);
    
        // 创建日期 2021-9-7 15:21:43
        let date2 = new Date(2021, 8, 7, 15, 21, 43);
        console.log(date2);
    
        //2.要求：计算现在距离 五一放假还有几天（五一日期的毫秒值 - 现在的毫秒值， 换算成天）
        // let holiday = new Date(2021, 4, 1);
        // let now = new Date();
        // let ms = holiday.getTime() - now.getTime();
        // let days = ms / 1000 / 60 / 60 / 24;
        // alert("距离五一放假还有【" + days + "】天");
    
    
        //3. 要求：计算100天之后是什么日期（现在的毫秒值 + 100天的毫秒值， 设置到Date里）
        let ms100 = 100 * 24 * 60 * 60 * 1000;
        let ms = new Date().getTime() + ms100;
    
        let targetDate = new Date();
        targetDate.setTime(ms);
        // alert(targetDate);
    
        //4. toLocaleString() 转换成本地日期格式的字符串
        let str = targetDate.toLocaleString();
        alert(str);
    </script>
    </body>
    </html>

##### 小结 #####

//创建当前日期
    let now = new Date();
    //创建指定日期。月从0开始，0表示1月
    let date = new Date(年, 月, 日);
    //创建指定日期，指定时间
    let date = new Date(年, 月, 日, 时, 分, 秒);
    
    //把日期转换成本地格式的字符串
    let str = date.toLocaleString();
    //获取毫秒值（1970年1月1号开始的）
    let ms = date.getTime();
    //以毫秒值设置一个日期
    date.setTime(ms);

#### Math数学运算 ####

##### 目标 #####

*  掌握Math常用的数学运算方法

##### 分析 #####

1.  求随机数
2.  向上取整
3.  向下取整
4.  四舍五入

##### 讲解 #####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Math.abs(x)</code></td> 
   <td>求x的绝对值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Math.ceil(x)</code></td> 
   <td>向上取整</td> 
   <td><code>Math.ceil(3.01)</code>，结果是4</td> 
  </tr> 
  <tr> 
   <td><code>Math.floor(x)</code></td> 
   <td>向下取整</td> 
   <td><code>Math.floor(3.99)</code>，结果是3</td> 
  </tr> 
  <tr> 
   <td><code>Math.round(x)</code></td> 
   <td>四舍五入</td> 
   <td><code>Math.round(3.4)</code>，结果是3</td> 
  </tr> 
  <tr> 
   <td><code>Math.pow(x,y)</code></td> 
   <td>求x的y次方</td> 
   <td><code>Math.pow(2,10)</code>，结果是1024</td> 
  </tr> 
  <tr> 
   <td><code>Math.random()</code></td> 
   <td>求随机数。0~1，包含0，不包含1</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数据运算</title>
    </head>
    <body>
    
    <script>
        /**
         * Math不需要创建对象，直接使用它的常量和方法即可
         */
        console.log(Math.PI);
    
        //求绝对值 3
        console.log(Math.abs(-3));
    
        //向上取整 4
        console.log(Math.ceil(3.00000001));
    
        //向下取整 3
        console.log(Math.floor(3.9999999));
    
        //四舍五入 4
        console.log(Math.round(3.5));
    
        //幂运算 1024
        console.log(Math.pow(2, 10));
    
        //求随机数，范围是[0, 1) 包含0不包含1
        console.log(Math.random());
    
        //练习：求90到100之间的随机数   [0,1) * 10 ==> [0, 10)   + 90==>[90,100)
        console.log(10 * Math.random() + 90);
    </script>
    </body>
    </html>

#### String字符串 ####

##### 目标 #####

*  掌握字符串的使用

##### 分析 #####

1.  创建字符串
2.  字符串常用方法

##### 讲解 #####

*  字符串的属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>length</code></td> 
   <td>字符串的长度</td> 
  </tr> 
 </tbody> 
</table>

*  字符串的常用方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>split(string)</code></td> 
   <td>按照指定的分隔符切割字符串</td> 
   <td><code>"hello world".split(" ")</code></td> 
  </tr> 
  <tr> 
   <td><code>substring(start, end)</code></td> 
   <td>截取字符串里索引start到end之间的内容<br>包含start，不包含end</td> 
   <td><code>"hello".substring(3,5)</code></td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>String字符串</title>
    </head>
    <body>
    
    <script>
        /**
         * 1. 定义字符串
         * 2. 字符串的属性
         * 3. 字符串常用方法
         *
         * 拓展：模板字符串
         *   在实际开发中，字符串要拼接变量值，需要大量的+，可读性很差
         */
        //1. 定义字符串：单引号或者双引号
        let str1 = "hello";
        console.log(str1);
        let str2 = 'hello';
        console.log(str2);
    
        //2. 常用属性：length，字符串的长度
        console.log(str2.length);
    
        //3. 常用方法split  把字符串按照指定的分隔符切割成数组
        let str = "hello world";
        console.log(str.split(" "));
    
        //4. 常用方法substring：截取字符串
        let subStr = str.substring(3, 5);
        console.log(subStr);
    
        //5. 模板字符串：使用重音符（~所在的按钮）定义的字符串，叫模板字符串。模板字符串里可以使用${变量名}，来引用变量值
        //在实际开发中，字符串要拼接变量值，需要大量的+，可读性很差
        //<td>i的值 * j的值 = (i*j)</td>
        let i = 3;
        let j = 5;
        str = "<td>" + i + "*" + j + "=" + (i*j) + "</td>";
        console.log(str);
    
        str = `<td>${ i}*${ j}=${ i*j}</td>`;
        console.log(str);
    </script>
    </body>
    </html>