JavaScript - 内置对象 (Math, Array, String)

谁践踏了优雅 2022-09-04 06:46 326阅读 0赞

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

## theme: channing-cyan ##

**基础知识回顾:**

JavaScript 包含：ECMAscript DOM BOM

ECMAscript 包含：变量、数据、运算符、条件分支语句、循环语句、函数、数组、对象……

JavaScript 的对象包含三种：自定义对象 内置对象 浏览器对象

ECMAscript 的对象：自定义对象 内置对象

# 内置对象 #

*  Math 对象
 *  Array 对象
 *  String 对象

可以借助MDN网站来学习, 它是Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括 HTML、CSS和万维网及 HTML5 应用的 API。

> MDN：https://developer.mozilla.org/zh-CN/

## Math 对象 ##

*  Math 对象它具有数学常数和函数的属性和方法，我们可以直接进行使用
 *  根据数学相关的运算来找 Math 中的成员（求绝对值，取整）

> Math.PI 圆周率
> 
> Math.random() 生成随机数
> 
> Math.floor()/Math.ceil() 向下取整/向上取整
> 
> Math.round() 取整，四舍五入
> 
> Math.abs() 绝对值
> 
> Math.max()/Math.min() 求最大和最小值
> 
> Math.sin()/Math.cos() 正弦/余弦
> 
> Math.power()/Math.sqrt() 求指数次幂/求平方根

## Array 对象 ##

**创建数组对象的两种方式:**

*  字面量方式
 *  new Array() 构造函数方法

**检测数组类型:**

• instanceof 检测某个实例是否是某个对象类型

![image.png][]

### toString ###

toString() 把数组转换成字符串，逗号分隔每一项

var arr = [1,2,3,4];
    
            //toString方法
            console.log(arr.toString());

![image.png][image.png 1]

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

### 首尾数据操作： ###

> push() 在数组末尾添加一个或多个元素，并返回数组操作后的长度
> 
> pop() 删除数组最后一项，返回删除项
> 
> shift() 删除数组第一项，返回删除项
> 
> unshift() 在数组开头添加一个或多个元素，并返回数组的新长度

**push()**

推入普通数据:

var arr = [1,2,3,4];
             
            //push
            console.log(arr.push(5,6,7));  //返回数组长度
            console.log(arr);

![image.png][image.png 2]

推入数组:

var arr = [1,2,3,4];
             
            //push
            console.log(arr.push([5,6,7]));
            console.log(arr);

![image.png][image.png 3]

**pop()**

var arr = [1,2,3,4];
    
            //pop 不需要参数
            console.log(arr.pop());
            console.log(arr);

![image.png][image.png 4]

**shift()**

var arr = [1,2,3,4];
    
            //首删, 删除第一项数据, 返回删除项
            console.log(arr.shift());
            console.log(arr);

![image.png][image.png 5]

**unshift()**

var arr = [1,2,3,4];
    
            //首删, 删除第一项数据, 返回删除项
            console.log(arr.unshift(-1,0));
            console.log(arr);

![image.png][image.png 6]

#### 小案例 ####

把数组中的第一个元素移动到最后.

![image.png][image.png 7]

### 数组常用方法 ###

#### 合并 concat() ####

**concat()**

*  将两个数组合并成一个新的数组，原数组不受影响。参数位置可以是一个数组字面量、数组变量、零散的值。

![image.png][image.png 8]

#### 拆分 slice(start,end) ####

**slice(start,end)**

*  从当前数组中截取一个新的数组，不影响原来的数组，返回一个新的数组，包含从 start 下标到 end （不包括该元素）的元素。 **包含开始, 不包含结束**
 *  参数区分正负，**正值表示下标位置，负值表示从后面往前数第几个位置**，参数可以只传递一个，表示从开始位置**截取到字符串结尾**。

![image.png][image.png 9]

#### 删除、插入、替换 splice ####

删除、插入、替换：

> splice(index,howmany,element1,element2,……) 用于插入、删除或替换数组的元素
> 
>  *  index：删除元素的开始位置
>  *  howmany：删除元素的个数，可以是0
>  *  element1,element2：要替换的新的数据。

**删除:**

返回的是被删掉的元素, 从第几个开始, 删掉它后面的几个元素 (不包括它本身).

![image.png][image.png 10]

**替换:**

将要替换的值写在第三个参数及以后的位置上, 替换的值与删除的值之间并没有直接关系, 因为本质上是先在这个位置执行了删除操作, 然后又执行了添加操作.

![image.png][image.png 11]

![image.png][image.png 12]

#### 位置方法 ####

> indexOf() 查找数据在数组中最先出现的下标
> 
> lastIndexOf() 查找数据在数组中最后一次出现的下标

注意：如果没找到返回-1

![image.png][image.png 13]

#### 倒序 reverse() ####

> reverse() 将数组完全颠倒，第一项变成最后一项，最后一项变成第一项。

![image.png][image.png 14]

reverse() 的返回值是倒序之后的数组, 也就是说`console.log(arr.reverse());`的结果与上面的输出是一样的.

### 排序 sort(); ###

**默认根据字符编码顺序，从小到大排序**, 注意只是编码大小, 并不是数值大小.

var arr = [1,2,3,4,5,6,7,8,9,10,20,30];
    
            // 默认按照字符编码顺序从小到大排列, 即比较每个字符每个位数的大小
            console.log(arr.sort());

![image.png][image.png 15]

如果想要根据数值大小进行排序，必须**添加sort的比较函数参数**。

该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，根据a和b的关系作为判断条件，返回值根据条件分为三个分支，正数、负数、0：

*  返回值是负数-1：a排在b前面。
 *  返回值是正数1：a排在b后面。
 *  返回值是0：a和b的顺序保持不变。

**人为能控制的是判断条件**。

举个例子, 下面代码中我们能人为改变的只是if后面括号中的条件. 当降序排列时, `return -1 (表示a排在b前面)`的条件是`a > b`

![image.png][image.png 16]

升序排列:

![image.png][image.png 17]

#### 转字符串方法 join() ####

将数组的所有元素连接到一个字符串中。

> join() 通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串

toString()方法也可以转, 但是它内部只能用逗号分隔.

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

**例1**直接使用join()时, 结果仍然是用逗号分隔

var arr = [1,2,3,4,5,6,7,8,9,10,20,30];
    
            var str = arr.join();
            console.log(str);

1,2,3,4,5,6,7,8,9,10,20,30

**例2**一对引号

var str = arr.join("");

123456789102030

**例3**星号或其他符号

var str = arr.join("*")

1*2*3*4*5*6*7*8*9*10*20*30

#### 清空数组 ####

**方式1** 推荐

arr = [];

**方式2**

arr.length = 0;

**方式3**

arr.splice(0, arr.length);

## String 对象 ##

一般来说基本类型的数据是没有属性和方法的, 只有对象数据类型才有属性和方法。

但在这个例子中, slice对string生效了, 这是为什么呢?

![image.png][image.png 18]

这是因为:

**基本包装类型**: 基本类型的数据在进行一些操作时, 会被暂时包装成一个对象, 结束后再被销毁.

为了方便操作简单数据类型，JavaScript 还提供了特殊的简单类型对象：String

*  当调用 str.slice() 等方法的时候，先把 str 包装成 String 类型的临时对象，再调用slice

方法，最后销毁临时对象。

*  可以使用 new String() 构造函数方法创建字符串对象。

也就是说 , 在上面的代码中, 计算机实际上执行了以下的操作:

![image.png][image.png 19]

### 字符串的特点 ###

**字符串是不可变的。**  
为什么说字符串是不可变的呢?

比如说我们有如下代码:

var a = "abc";
    a = "cde";

那么在内存中, 会首先为`"abc"`开辟一个存储空间, 然后再为`"cde"`开辟一个存储空间, 将`a`由`"abc"`指向`"cde"`, 并不是直接将`"abc"`修改成`"cde"`, `"abc"`本身是不可变的. 只有最后解析器清除或释放内存的时候`"abc"`才会销毁.

![image.png][image.png 20]

由于字符串的不可变，在大量拼接字符串的时候会有效率问题。因为会不断的开辟新的内存空间存储新的字符串, 导致存储了很多无用的信息, 会影响运行速度.

### 字符串对象的常用方法 ###

字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。

#### 字符串属性 ####

长度属性：str.length

字符串长度指的是一个字符串中所有的字符总数。

![image.png][image.png 21]

#### charAt() 方法可返回指定位置的字符。 ####

参数是 index 字符串的下标。也是从 0 开始。  
返回指定的下标位置的字符。

![image.png][image.png 22]

#### indexOf() ####

返回某个指定的字符串值在字符串中**首次出现**的位置。**可以用来判断某个子字符串是否在另一个字符串中出现过**

• 找到指定的子字符串在原字符串中**第一次出现的位置的下标**。如果子字符串在原字符串中没有，返回值是 -1

![image.png][image.png 23]

#### concat() 方法用于连接两个或多个字符串 ####

• 参数比较灵活，可以是字符串、或者字符串变量、多个字符串。

• 生成的是一个新的字符串，原字符串不发生变化。

![image.png][image.png 24]

#### split() 方法用于把一个字符串分割成字符串数组 ####

• 参数部分是分割符，利用分割符将字符串分割成多个部分，多个部分作为数组的每一项组成数组。

• 如果分割符是空字符串，相当于将每个字符拆分成数组中的每一项。

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mFmadKxi-1628687625465)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/327df025990343b29c9dc775875bf4d7~tplv-k3u1fbpfcp-watermark.image)\]

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

将字符串倒置实例:

![image.png][image.png 25]

简写一下就是:

str = str.split("").reverse().join("");
            console.log(str);

#### 大小写转换 ####

> toLowerCase() 把字符串转换为小写。
> 
> toUpperCase() 把字符串转换为大写。

• 将所有的英文字符转为大写或者小写。

• 生成的是新的字符串，原字符串不发生变化。

![image.png][image.png 26]

#### slice() ####

提取字符串的某个部分，并以新的字符串返回被提取的部分。

• 语法：slice(start，end)

• 从开始位置截取到结束位置（不包括结束位置）的字符串。

• 参数区分正负，正值表示下标位置，负值表示从后面往前数第几个位置，参数可以只传递一个，表示从开始位置截取到字符串结尾。

![image.png][image.png 27]

#### substr() ####

可在字符串中**抽取从 start 下标开始的指定数目的字符**

语法：substr(start,howmany)

从开始位置截取到指定长度的字符串。

*  start 参数区分正负。正值表示下标位置，负值表示从后往前数第几个位置。
 *  howmany 参数必须为正数，也可以不写，不写表示从 start 截取到最后。

![image.png][image.png 28]

#### substring() ####

方法用于提取字符串中介于两个指定下标之间的字符。

语法：substring(start,end)

**参数只能为正数**

• 两个参数都是指代下标，两个数字大小不限制，执行方法之前会比较一下两个参数的大小，会用小当做开始位置，大的当做结束位置，从开始位置截取到结束位置但是不包含结束位置。

• 如果不写第二个参数，从开始截取到字符串结尾

![image.png][image.png 29]

[image.png]: /images/20220829/b2a2dee2ee4d4d64bf434091b9a2718a.png
[image.png 1]: /images/20220829/0910d61489454a05ac50b8608b6cea45.png
[image.png 2]: /images/20220829/6e8c3a7afa49450eb932055b421bab06.png
[image.png 3]: /images/20220829/bea3950ab50a4be083c22950882a39b8.png
[image.png 4]: /images/20220829/839d0bd595a54114a863445c667cc555.png
[image.png 5]: /images/20220829/58fb34749ef44659996ab95a6026fa48.png
[image.png 6]: /images/20220829/7f267058f0cd493aa2dcf2e20c7cb01a.png
[image.png 7]: /images/20220829/c16187feee6248ccb5db0d3e858fa7e7.png
[image.png 8]: /images/20220829/d699bb3866d246a4bb691f85bdb14bec.png
[image.png 9]: /images/20220829/a1e1a3f4f2c1442b858fdadec9e382ac.png
[image.png 10]: /images/20220829/75ff8999ac2146e9b52bd4518b7d4088.png
[image.png 11]: /images/20220829/205a284a928e4711a0fa753385d55088.png
[image.png 12]: /images/20220829/a2a3435fda644e44bbc179d54bc73ea8.png
[image.png 13]: /images/20220829/d922a3d68cdb400d800254c64564436b.png
[image.png 14]: /images/20220829/e1383b3af48d47f6b2c7e5213b901cc5.png
[image.png 15]: /images/20220829/eaf91494a0844993be0d6c2a295b21d5.png
[image.png 16]: /images/20220829/b4b4e2b5c0a24f0a8203e709ef6c1459.png
[image.png 17]: /images/20220829/1db689a34ddc4103922387795559735a.png
[image.png 18]: /images/20220829/1d4e7020b5f244eea3dc5ff22ed10e1e.png
[image.png 19]: /images/20220829/1e1a833d526f4ef591d3d62bbd393948.png
[image.png 20]: /images/20220829/2bb94c892f0344a9bd85ef0a493b64bc.png
[image.png 21]: /images/20220829/19682ff7712840dfbb50c738ee72e500.png
[image.png 22]: /images/20220829/31de3ae29c7e45248bc6a2d7e1038b36.png
[image.png 23]: /images/20220829/2c8bc8267b2c480c81c897ece8747692.png
[image.png 24]: /images/20220829/778d115f5d5344d2a76ec6e26fca8bf0.png
[image.png 25]: /images/20220829/ac9e36ccbc124f21bf2aef8cda1f34fc.png
[image.png 26]: /images/20220829/b75966a8e9304bc99a56ecdfdb7e0ebc.png
[image.png 27]: /images/20220829/56f69f21e9754679bfc23e00f3e023d6.png
[image.png 28]: /images/20220829/5a72a5da8bba47c88c8a9458462db485.png
[image.png 29]: /images/20220829/2006002c1249485e9a39292159542fe1.png