JS中常用内置对象

喜欢ヅ旅行 2023-10-12 19:57 11阅读 0赞

> 真正原创的东西很少，能抄明白就很不容易了

### 文章目录 ###

*  数组常用方法❗
 *   *  push 数据增加到尾部并返回
     *  unshift 数据增加到头部并返回
     *  pop 删除最后一个数据并返回
     *  shift 删除第一个数据并返回
     *  sort 数组排序
     *  reverse 数组逆序
     *  concat 合并多个数组的数据并返回
     *  join 数据连接成字符串并返回
     *  splice 删除指定数据
     *  splice(下标位置,0,要插入的数据) 插入指定数据
     *  slice 从已有的数组中返回选定的元素
     *  forEach 传入一个函数并返回
     *  filter 筛选出满足条件的数组并返回
 *  字符串常用方法
 *   *  substr 获取子串
     *  split 将指定字符串拆分成数组
     *  日期对象
 *  数学对象常用方法
 *  全局对象方法Global

--------------------

# 数组常用方法❗ #

## push 数据增加到尾部并返回 ##

**将数据增加到数组的尾部，返回数组的新长度**

<body>
        <script>
            let arr = [1,2,3]
            // push 将数据增加到数组的尾部，返回数组的新长度
            console.log( arr.push(4) );
            //将数据5,6,7增加到数组的尾部
            console.log( arr.push(5,6,7) );
            //输出结果
            console.log( arr );
        </script>
    </body>

输出：  
将数据 4 增加到数组的尾部，返回数组的新长度  
将数据 5,6,7 增加到数组的尾部，返回数组的新长度  
![在这里插入图片描述][210ce17ae55244b6adb2cea2a6d3453c.png]  
第一个：4，代表数组新长度  
第二个：\[1, 2, 3, 4, 5, 6, 7\]

## unshift 数据增加到头部并返回 ##

**将数据增加到数组头部，返回数组的新长度**

<body>
        <script>
            let arr = [1,2,3]
            // unshift 将数据增加到数组头部，返回数组的新长度
            console.log( arr.unshift(8) );
            console.log( arr );
        </script>
    </body>

将数据 8 增加到数组头部，返回数组的新长度  
![在这里插入图片描述][f89ae96313ef4a85af970a993b15038a.png]

## pop 删除最后一个数据并返回 ##

**删除数组中的最后一个数据，返回删除的数据**

<body>
        <script>
            let arr = [1,2,3]
            //pop 删除数组中的最后一个数据，返回删除的数据
            console.log( arr.pop() );
            console.log( arr );
        </script>
    </body>

输出结果：  
删除了最后一个数据，本来是1，2，3 删除后只剩1，2  
![在这里插入图片描述][4add22cbc0df498f93319e79cefe1858.png]

## shift 删除第一个数据并返回 ##

**删除数组中的第一个数据，返回删除的数据**

<body>
        <script>
            let arr = [1,2,3]
            //shift 删除数组中的第一个数据，返回删除的数据
            console.log( arr.shift() );
            console.log( arr );
        </script>
    </body>

输出结果：  
删除了第一个数据，本来是1，2，3 删除后只剩2，3  
![在这里插入图片描述][7791f07a1d2745d09c3a85721d91565a.png]

## sort 数组排序 ##

对数组进行排序

<body>
        <script>
            let arr = [5,1,8,7,6]
            //sort 数组排序
            arr.sort() 
            console.log( arr );
        </script>
    </body>

输出结果：  
![在这里插入图片描述][cdf5456b4ee440c9a793d7c31fdc5bb3.png]

## reverse 数组逆序 ##

用于反转数组的元素。  
这意味着它会将数组中第一个元素变为最后一个元素，第二个元素变为倒数第二个元素，以此类推，直到最后一个元素变为第一个元素

<body>
        <script>
            let arr = ['杰瑞','在抓','汤姆','看着','女主人']
            //reverse 数组逆序
            arr.reverse() 
            console.log( arr );
        </script>
    </body>

输出结果：  
![在这里插入图片描述][7b50a6b0fa844c19b29e26f97d7cfc98.png]

## concat 合并多个数组的数据并返回 ##

**合并多个数组中的数据，返回合并后的新数组**

<body>
        <script>
            let arr1 = ['杰瑞','汤姆']
            let arr2 = ['Jerry','Tom']
            //concat 合并多个数组中的数据，返回合并后的新数组
            let arr3 = arr1.concat(arr2)
            console.log( arr3 );
        </script>
    </body>

![在这里插入图片描述][829d401a707b45b9a334950c6767a9ab.png]

## join 数据连接成字符串并返回 ##

**将数组中的数据，以指定字符为分隔符连接成一个字符串，并返回子字符串**

这个方法与split(str)是个互逆操作

<body>
        <script>
            let arr1 = ['Tom','and','Jerry']
            //concat 合并多个数组中的数据，返回合并后的新数组
            let str = arr1.join('@')
            console.log( str );
        </script>
    </body>

输出结果：  
可以把@换成其他符号  
![在这里插入图片描述][07415fc39c574f2caaf5b20657f79a70.png]

## splice 删除指定数据 ##

**传入一个整数，代表删除数据的起始下标**  
**传入两个整数，1：代表删除数据的起始下标；2：删除数据个数**

先看传入一个整数的：  
【示例代码】

<body>
        <script>
            let arr = ['10','20','30','40']
            //splice 可以删除、插入数据
            arr.splice(1)
            console.log( arr );
        </script>
    </body>

输出结果：10  
arr.splice(1)中的1代表：删除数据的起始下标  
就是从1开始，后面全删了  
![在这里插入图片描述][16b50319e4c14c3ba00f56a46ed97b30.png]  
如果是：arr.splice(2)，输出结果：(2) \[‘10’, ‘20’\]  
如果是：arr.splice(0)，输出结果：\[ \]

再看传入两个整数的：  
**传入两个整数，1：代表删除数据的起始下标；2：删除数据个数**

【示例代码1】

<body>
        <script>
            let arr = ['10','20','30','40']
            //splice 可以删除、插入数据
            arr.splice(1,2)
            console.log( arr );
        </script>
    </body>

输出结果：10，40  
arr.splice(1,2)的意思是：从下标第一个数据（20）开始，删除两个数据（20，30）并输出  
![在这里插入图片描述][0b61abf08bfb4740b213f92baafdd5d7.png]  
【示例代码2】

<body>
        <script>
            let arr = ['10','20','30','40','50','60']
            //splice 可以删除、插入数据
            arr.splice(2,3)
            console.log( arr );
        </script>
    </body>

输出结果：10，20，60  
arr.splice(2,3)的意思是：从下标第二个数据（30）开始，删除三个数据（30，40，50）并输出  
![在这里插入图片描述][c27877d356db4db98b6a1a3fc527b9e1.png]

## splice(下标位置,0,要插入的数据) 插入指定数据 ##

**传入n个数据**  
**第一个位置是插入的下标位置，第二个位置必须是0，第三个开始代表插入的任意数据**

<body>
        <script>
            let arr = ['10','20','30','40']
            //splice 可以删除、插入数据
            arr.splice(2,0,50,'葫芦娃救爷爷',true)
            //传入n个数据  2：第一个位置是插入的下标位置，0：第二个位置必须是0，第三个开始代表插入的任意数据
            console.log( arr );
        </script>
    </body>

输出结果：  
![在这里插入图片描述][6822092ce5f04da7b3343d7396a479d1.png]  
上面代码创建了一个数组`arr`，它包含四个元素：`'10'`、`'20'`、`'30'`和`'40'`。  
然后使用`splice()`方法在索引位置为**2**的位置插入了三个新元素：`50`、`'葫芦娃救爷爷'`和`true`。  
`splice()`方法的第一个参数是要插入或删除元素的起始位置  
第二个参数是要删除的元素个数，因为我们要插入新元素，所以第二个参数设为0。  
然后在第三个参数中依次列出要插入的新元素。

最后，打印数组`arr`，即可看到结果为：`['10', '20', 50, '葫芦娃救爷爷', true, '30', '40']`。最后新元素被成功插入到了数组中。

## slice 从已有的数组中返回选定的元素 ##

**返回一个新数组，数据是原数据中的片段**  
**传入一个整数代表起始下标，传入两个整数代表下标的范围（包括起始下标不包括结束下标）**

先看传入一个整数的：  
【示例代码】

<body>
        <script>
            let arr = [1,2,3,4,5,6,7,8,9]
            //slice 返回一个新数组，数据是原数据中的片段
            //传入一个整数代表起始下标
            let arr2 = arr.slice(3)
            console.log( arr2 );
        </script>
    </body>

输出结果：  
![在这里插入图片描述][c2c46153f8f0412f8f54d412b851c287.png]  
先看传入两个整数的：  
**传入一个整数代表起始下标，传入两个整数代表下标的范围（包括起始下标，不包括结束下标）**

【示例代码】

<body>
        <script>
            let arr = [1,2,3,4,5,6,7,8,9]
            //slice 返回一个新数组，数据是原数据中的片段
            //传入两个整数代表下标的范围（包括起始下标，不包括结束下标）
            let arr2 = arr.slice(1,5)
            console.log( arr2 );
        </script>
    </body>

输出结果：  
![在这里插入图片描述][a6e7d976234342f1964d6b71c4594787.png]

## forEach 传入一个函数并返回 ##

遍历数组，对每个元素执行回调函数

forEach() 方法要传入一个函数，函数代表对每个数据处理的功能

<body>
        <script>
            // 某班学生成绩 score：成绩参数
            let array = [90,80,59,61,42,60]
            // forEach 传入一个函数
            array.forEach( (score) => {
        
                console.log(score);
            } )
        </script>
    </body>

输出结果：  
![在这里插入图片描述][29d597ee4bcf4393bea2317087f3027b.png]  
上述代码中定义了一个数组array，该数组包含了数学课程的成绩。  
然后使用forEach()方法对数组进行遍历，对于每个遍历到的元素，都将输出到控制台。

回调函数中的形参score表示数组中的每个元素，即每个学生成绩。每遍历到一个元素，都会将其输出到控制台

以前用for循环，现在用forEach更简化一些

for (let index = 0; index < array.length; index++) {
        
                console.log(array[index]);            
            }

## filter 筛选出满足条件的数组并返回 ##

**返回一个新数组，新数组数据必须是经过过滤筛选的**  
**传入一个函数，过滤规则**

【示例代码】

<body>
        <script>
            let array1 = [90,80,59,61,42,60]
            // filter 返回一个新数组，新数组数据必须是经过过滤筛选的
            // 传入一个函数 过滤规则
            let array2 = array1.filter( (score) => {
         
                return score < 60
            } )
    
            console.log(array2);
        </script>
    </body>

输出结果：  
![在这里插入图片描述][d15f8cd822de49af90ba14e70829f5cc.png]

--------------------

# 字符串常用方法 #

与[Java中字符串方法][Java]相似

以下是一些常用的 JavaScript 字符串方法：

1.  `length`：返回字符串的长度。
2.  `charAt(index)`：返回指定索引位置的字符。
3.  `concat(string1, string2, ..., stringX)`：连接两个或多个字符串，返回一个新的字符串。
4.  `indexOf(substring, startIndex)`：返回字符串中指定子字符串第一次出现的位置，如果不存在则返回 -1。
5.  `lastIndexOf(substring, startIndex)`：返回字符串中指定子字符串最后一次出现的位置，如果不存在则返回 -1。
6.  `slice(startIndex, endIndex)`：提取字符串中的一部分，并返回一个新的字符串。如果省略 endIndex，则返回从 startIndex 到字符串结尾的所有字符。
7.  `substring(startIndex, endIndex)`：提取字符串中的一部分，并返回一个新的字符串。如果省略 endIndex，则返回从 startIndex 到字符串结尾的所有字符。
8.  `substr(startIndex, length)`：提取字符串中的一部分，并返回一个新的字符串。length 参数指定要提取的字符数。
9.  `replace(oldValue, newValue)`：替换字符串中的指定值，并返回一个新的字符串。
10. `toLowerCase()`：将字符串转换为小写。
11. `toUpperCase()`：将字符串转换为大写。
12. `trim()`：去除字符串两端的空格，并返回一个新的字符串。
13. `split(separator, limit)`：将字符串分割为子字符串数组，并返回该数组。separator 参数指定分隔符，limit 参数指定要返回的子字符串的最大数量。

## substr 获取子串 ##

**第一个参数代表起始下标，第二个参数代表长度**

【示例代码】

<body>
        <script>
            let str = "123456789"
            // substr 获取子串      
            // 第一个参数代表起始下标，第二个参数代表长度
            console.log(str.substr(2,3));
        </script>
    </body>

输出结果：345  
从起始下标2开始，取三个字符  
![在这里插入图片描述][9502d732fb964994b6d1b3c66adbf942.png]

## split 将指定字符串拆分成数组 ##

**按照指定字符为分隔符，将指定字符串拆分成一个数组**

<body>
        <script>
            // split 按照指定字符为分隔符，将指定字符串拆分成一个数组
            let str = '大娃*力大无穷*二娃*千里眼顺风耳*三娃*金刚不坏之身'
            let arr = str.split('*')
            console.log(arr);
        </script>
    </body>

输出结果：  
![在这里插入图片描述][a26cbd13d5c74d0e932d68572e39294e.png]  
这个方法`split`与数组中的`join`方法是个互逆操作

## 日期对象 ##

在 JavaScript 中，我们可以使用 Date 对象来处理日期和时间。

创建一个新的 Date 对象的方法有多种：

1.  new Date()：创建当前日期和时间的对象。
2.  new Date(milliseconds)：根据指定的毫秒数创建对象。
3.  new Date(datestring)：根据指定的日期字符串创建对象。
4.  new Date(year, month, day, hours, minutes, seconds, milliseconds)：根据指定的年、月、日、小时、分钟、秒、毫秒数创建对象。

例如，要创建一个表示当前日期和时间的对象，可以使用以下语句：

var now = new Date();

Date 对象的常用方法：

1.  getDate()：获取月份中的日期（值在1~31之间）
2.  getDay()：获取星期中的每一天（值在0~6之间）
3.  getMonth()：获取月份（0~11，从 0 开始计数，0 表示一月）
4.  getFullYear()：获取年份（四位数字）
5.  getHours()：获取小时数（0-23）
6.  getMinutes()：获取分钟数（0-59）
7.  getSeconds()：获取秒数（0-59）
8.  getTime()：获取日期的时间戳。（1970年1月1日以来的毫秒数）

例如，要获取当前日期的年份和月份，可以使用以下语句：

var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1; // 注意月份要加1

我们还可以使用 Date 对象来进行日期的计算、格式化等操作。

**获取当前日期**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
        <script>  
                    // 得到当前日期
            function getCurDate(){
        
                let now = new Date()
                // 得到年
                let year = now.getFullYear()
                // 得到月  +1把差值补回来
                let month = now.getMonth()+1
                // 得到日
                let date = now.getDate()
                // 格式转换  一位的月和日变两位显示
                month = month<10?'0'+month:month
                date = date<10?'0'+date:date
                // 连接成一个字符串返回
                return `${
          year}-${
          month}-${
          date}`
            }
            console.log(getCurDate());
        </script>
    </body>
    </html>

输出结果：  
![在这里插入图片描述][1b54b406b7bf4d0094c50be1f6bc1c8e.png]  
【解释：】  
这段代码定义了一个名为 `getCurDate` 的函数，用于获取当前的日期并返回格式化后的字符串。

函数代码的具体逻辑如下：

1.  使用 `new Date()` 创建一个 `Date` 对象，表示当前日期和时间。
2.  使用 `Date` 对象的 `getFullYear()`、`getMonth()` 和 `getDate()` 方法分别获取当前年份、月份和日期，并存储在对应的变量中。
3.  对月份和日期进行处理，如果月份小于 10，则在前面添加 `0`，如果日期小于 10，则在前面添加 `0`，以保证返回的字符串格式正确。
4.  使用模板字符串将年份、月份和日期拼接成一个字符串，并返回。

最后，在页面加载的时候调用该函数，并将返回值输出到控制台中。

# 数学对象常用方法 #

JavaScript 中的 Math 对象是一个内置的数学对象，提供了很多有用的数学方法。

以下是 Math 对象中常用的一些方法：

1.  `Math.abs(x)` 返回一个数的绝对值。
2.  `Math.ceil(x)` 返回大于等于该数的最小整数。
3.  `Math.floor(x)` 返回小于等于该数的最大整数。
4.  `Math.max(x, y, z, ...)` 返回一组数中的最大值。
5.  `Math.min(x, y, z, ...)` 返回一组数中的最小值。
6.  `Math.pow(x, y)` 返回 x 的 y 次幂。
7.  `Math.random()` 返回一个 0 ~ 1 之间的随机数。
8.  `Math.round(x)` 返回一个数四舍五入最接近的整数。
9.  `Math.sqrt(x)` 返回一个数的平方根。

这些方法可以通过 `Math.` 加方法名的形式直接调用。例如：

let x = Math.abs(-3); // x 的值为 3
    let y = Math.max(2, 5, 1); // y 的值为 5
    let z = Math.random(); // z 的值为一个 0 到 1 之间的随机数

有关 Math 对象的更多信息，请参见：[Math 对象][Math]。

【示例代码】

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script>
            // Math.ceil()  可以理解为向上抹零
            console.log( Math.ceil(23.1) ) 
    
            // Math.floor()  可以理解为去掉小数点
            console.log( Math.floor(26.9) );
    
            // Math.round()  四舍五入
            console.log( Math.round(20.5) );
    
            // Math.trunc()  截取 去掉小数位 取整
            console.log( Math.trunc(3.833) );
    
            // Math.abs()  绝对值
            console.log( Math.abs(-10) );
    
            // Math.sqrt()  平方根
            console.log( Math.sqrt(3) );
    
            // Math.max()  取最大值
            console.log( Math.max(10.8) );
    
            // Math.min()  取最小值
            console.log( Math.min(3,5) );
    
            //Math.pow()  计算某个数的N次方
            console.log( Math.pow(2,3) );  
    
            // Math.trunc()  返回 0 ~ 1 之间的随机数（小数）
            console.log( Math.random() );
    
            // 返回 100 以内的随机数
            console.log( Math.trunc(Math.random()*100) );
            // 生成N以内的整数 Math.random()*n 再取整
        </script>
    </body>
    </html>

输出结果：  
![在这里插入图片描述][6f53ec854c794c64a86c04ed5bdc223d.png]

# 全局对象方法Global #

isNaN()：判断一个值是否为NaN

全局对象方法（Global）是JavaScript语言中的一组函数和属性  
可以直接在任何地方调用，无需进行额外的定义或引用。以下是一些常见的全局对象方法：

1.  parseInt()：将字符串转换为整数。
2.  parseFloat()：将字符串转换为浮点数。
3.  eval()：将传入的字符串作为JavaScript代码执行。
4.  isNaN()：检查一个值是否是“不是数字”（NaN）。
5.  setInterval()：每隔指定的时间重复执行一次函数。
6.  clearInterval()：取消之前用setInterval()设置的定时器。
7.  encodeURI()：将字符串进行URI编码。
8.  decodeURI()：将URI编码后的字符串进行解码。
9.  encodeURIComponent()：将字符串进行URI组件编码。
10. decodeURIComponent()：将URI组件编码后的字符串进行解码。
11. setTimeout()：设置一个定时器，在指定的时间后执行一次指定的函数。
12. setInterval()：设置一个定时器，在指定的时间间隔内重复执行指定函数。

这些方法都是全局对象的一部分，可以通过window对象来访问  
例如，调用setTimeout()方法可以写为：

window.setTimeout(function() {
        
      console.log('Hello World!');
    }, 1000);

全局对象方法通常用于执行一些常用的操作，如时间处理、字符串处理、编码解码等。  
但是由于这些方法是全局的，因此需要注意避免在不同的模块中使用相同名称的函数或属性，以避免命名冲突。

【示例代码】

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script>
            //网页版的计算器
            console.log( eval('1+8*8+8/8') );  
        </script>
    </body>
    </html>

输出结果：  
![在这里插入图片描述][079bc537d63a43669c2f9b6a6f96d1f4.png]

--------------------

[210ce17ae55244b6adb2cea2a6d3453c.png]: https://img-blog.csdnimg.cn/210ce17ae55244b6adb2cea2a6d3453c.png
[f89ae96313ef4a85af970a993b15038a.png]: https://img-blog.csdnimg.cn/f89ae96313ef4a85af970a993b15038a.png
[4add22cbc0df498f93319e79cefe1858.png]: https://img-blog.csdnimg.cn/4add22cbc0df498f93319e79cefe1858.png
[7791f07a1d2745d09c3a85721d91565a.png]: https://img-blog.csdnimg.cn/7791f07a1d2745d09c3a85721d91565a.png
[cdf5456b4ee440c9a793d7c31fdc5bb3.png]: https://img-blog.csdnimg.cn/cdf5456b4ee440c9a793d7c31fdc5bb3.png
[7b50a6b0fa844c19b29e26f97d7cfc98.png]: https://img-blog.csdnimg.cn/7b50a6b0fa844c19b29e26f97d7cfc98.png
[829d401a707b45b9a334950c6767a9ab.png]: https://img-blog.csdnimg.cn/829d401a707b45b9a334950c6767a9ab.png
[07415fc39c574f2caaf5b20657f79a70.png]: https://img-blog.csdnimg.cn/07415fc39c574f2caaf5b20657f79a70.png
[16b50319e4c14c3ba00f56a46ed97b30.png]: https://img-blog.csdnimg.cn/16b50319e4c14c3ba00f56a46ed97b30.png
[0b61abf08bfb4740b213f92baafdd5d7.png]: https://img-blog.csdnimg.cn/0b61abf08bfb4740b213f92baafdd5d7.png
[c27877d356db4db98b6a1a3fc527b9e1.png]: https://img-blog.csdnimg.cn/c27877d356db4db98b6a1a3fc527b9e1.png
[6822092ce5f04da7b3343d7396a479d1.png]: https://img-blog.csdnimg.cn/6822092ce5f04da7b3343d7396a479d1.png
[c2c46153f8f0412f8f54d412b851c287.png]: https://img-blog.csdnimg.cn/c2c46153f8f0412f8f54d412b851c287.png
[a6e7d976234342f1964d6b71c4594787.png]: https://img-blog.csdnimg.cn/a6e7d976234342f1964d6b71c4594787.png
[29d597ee4bcf4393bea2317087f3027b.png]: https://img-blog.csdnimg.cn/29d597ee4bcf4393bea2317087f3027b.png
[d15f8cd822de49af90ba14e70829f5cc.png]: https://img-blog.csdnimg.cn/d15f8cd822de49af90ba14e70829f5cc.png
[Java]: https://blog.csdn.net/rej177/article/details/130956331
[9502d732fb964994b6d1b3c66adbf942.png]: https://img-blog.csdnimg.cn/9502d732fb964994b6d1b3c66adbf942.png
[a26cbd13d5c74d0e932d68572e39294e.png]: https://img-blog.csdnimg.cn/a26cbd13d5c74d0e932d68572e39294e.png
[1b54b406b7bf4d0094c50be1f6bc1c8e.png]: https://img-blog.csdnimg.cn/1b54b406b7bf4d0094c50be1f6bc1c8e.png
[Math]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
[6f53ec854c794c64a86c04ed5bdc223d.png]: https://img-blog.csdnimg.cn/6f53ec854c794c64a86c04ed5bdc223d.png
[079bc537d63a43669c2f9b6a6f96d1f4.png]: https://img-blog.csdnimg.cn/079bc537d63a43669c2f9b6a6f96d1f4.png