webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 字符串的常见方法

Browse Source
This commit is contained in:
qianguyihao 2020-05-15 20:05:56 +08:00
parent 673ac4ff04
commit d44e76bd95
6 changed files with 164 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
04-JavaScript基础/04-基本数据类型vs引用数据类型.md → 04-JavaScript基础/03-变量的数据类型：基本数据类型和引用数据类型.md
View File

@ -1,14 +1,49 @@
## 前言 ## 变量的数据类型
在上一篇文章中，我们介绍过，变量有以下数据类型： ### 为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。
我们都知道，无论这个变量是字符串类型，还是数字类型，我们都可以直接用 `var` 去定义它。比如：
```javascript
var a = 'hello word';
var b = 123;
```
为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。
**JS 的变量数据类型，是在程序运行的过程中，根据等号右边的值来确定的**。而且，变量的数据类型是可以变化的。比如说：
```javascript
var name = 'qianguyihao';
name = 123; // 强制将变量 name 修改为 数字类型
```
### JS中一共有六种数据类型
- **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。 - **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
- **引用数据类型（引用类型）**：Object 对象。 - **引用数据类型（引用类型）**：Object 对象。
本文，我们针对这两种类型，做进一步介绍。我们先来看个例子。 注意：内置对象 Function、Array、Date、RegExp、Error等都是属于 Object 类型。也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object类型。
> 面试问：引用数据类型有几种？
> 面试答：只有一种，即 Object 类型。
**数据类型之间最大的区别**：
- 基本数据类型：参数赋值的时候，传数值。
- 引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。
## 一个经典的例子
**基本数据类型举例**： **基本数据类型举例**：
@ -63,7 +98,7 @@
**引用数据类型**： **引用数据类型**：
对象是保存到**堆内存**中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而**变量保存了对象的内存地址**（对象的引用）。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响。 对象是保存到**堆内存**中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间；而**变量保存了对象的内存地址**（对象的引用），保存在栈内存当中。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响。

60
04-JavaScript基础/03-变量的数据类型.md → 04-JavaScript基础/04-基本数据类型.md
View File

@ -1,45 +1,6 @@
## 变量的数据类型
### 为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。
我们都知道，无论这个变量是字符串类型，还是数字类型，我们都可以直接用 `var` 去定义它。比如：
```javascript
var a = 'hello word';
var b = 123;
```
为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。
**JS 的变量数据类型，是在程序运行的过程中，根据等号右边的值来确定的**。而且，变量的数据类型是可以变化的。比如说：
```javascript
var name = 'qianguyihao';
name = 123; // 强制将变量 name 修改为 数字类型
```
### JS中一共有六种数据类型
- **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
- **引用数据类型（引用类型）**：Object 对象。
注意：内置对象 Function、Array、Date、RegExp、Error等都是属于 Object 类型。也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object类型。
> 面试问：引用数据类型有几种？
> 面试答：只有一种，即 Object 类型。
**数据类型之间最大的区别**：
- 基本数据类型：参数赋值的时候，传数值。
- 引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。
今天这篇文章，我们详细讲一下基本数据类型。 今天这篇文章，我们详细讲一下基本数据类型。
@ -378,6 +339,17 @@ boolean
- 使用 typeof 检查一个null值时，会返回object。 - 使用 typeof 检查一个null值时，会返回object。
如果你想定义一个变量，以后打算存储为对象，但是还没想好放什么内容，这个时候，可以给 null。
比如：
```js
var myObj = null;
cosole.log(typeof myObj); // 打印结果：object
```
### `undefined`：未定义 ### `undefined`：未定义
**声明**了一个变量，但是没有**赋值**（例如：`var a;`），此时它的值就是 `undefined`。 **声明**了一个变量，但是没有**赋值**（例如：`var a;`），此时它的值就是 `undefined`。
@ -410,7 +382,7 @@ a = b;
举例1： 举例1：
``` ```js
//a b c //a b c
var a = 1; //1 var a = 1; //1
var b = 2; //1 2 var b = 2; //1 2
@ -433,7 +405,7 @@ console.log(c);
举例2： 举例2：
``` ```js
//a b c //a b c
var a = 1; var a = 1;
var b = 2; var b = 2;
@ -456,7 +428,7 @@ console.log(c); //8
举例3： 举例3：
``` ```js
//a b //a b
var a = "1"; var a = "1";
var b = 2; //"1" 2 var b = 2; //"1" 2
@ -475,7 +447,7 @@ console.log(b); //输出212
举例4： 举例4：
``` ```js
//a b //a b
var a = "1"; var a = "1";
var b = 2; var b = 2;
@ -495,7 +467,7 @@ console.log(b) //221
举例5：（这个例子比较特殊，字符串减去数字） 举例5：（这个例子比较特殊，字符串减去数字）
``` ```js
var a = "3"; var a = "3";
var b = 2; var b = 2;
console.log(a-b); console.log(a-b);

7
04-JavaScript基础/09-对象简介.md
View File

@ -141,11 +141,12 @@ var obj3 = Object.assign({}, obj);
## 对象的分类 ## 对象的分类
1.内置对象： 1.内置对象：
- 由ES标准中定义的对象，在任何的ES的实现中都可以使用 - 由ES标准中定义的对象，在任何的ES的实现中都可以使用
- 比如：Math、String、Number、Boolean、Function、Object.... - 比如：Object、Math、Date、String、Array、Number、Boolean、Function等。
2.宿主对象： 2.宿主对象：
@ -158,6 +159,10 @@ var obj3 = Object.assign({}, obj);
- 由开发人员自己创建的对象 - 由开发人员自己创建的对象
通过 new 关键字创建出来的对象实例，都是属于对象类型，比如Object、Array、Date等。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。

153
04-JavaScript基础/13-内置对象 String：字符串的常见方法.md
View File

@ -7,11 +7,12 @@
字符串的常见方法如下。 字符串的常见方法如下。
## indexOf()/lastIndexOf() ## indexOf()/lastIndexOf()：获取指定字符的索引
> 这个方法，是使用频率最高的一个方法。 > 这个方法，是使用频率最高的一个方法。
`indexOf()/lastIndexOf()`：获取指定字符的索引。 ### 语法
**语法1**： **语法1**：
@ -69,9 +70,38 @@
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。 上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
## charAt() ### 举例
**案例**：查找字符串"qianguyihao"中，所有 `a` 出现的位置以及次数。
思路：
（1）先查找第一个 a 出现的位置。
（2）只要indexOf 返回的结果不是 -1 就继续往后查找。
（3）因为indexOf 只能查找到第一个，所以后面的查找，可以利用第二个参数，在当前索引加1，从而继续查找。
代码实现：
```js
var str = 'qianguyihao';
var index = str.indexOf('a');
var num = 0;
while (index !== -1) {
console.log(index);
num++; // 每打印一次，就计数一次
index = str.indexOf('o', index + 1);
}
console.log('a 出现的次数是: ' + num);
```
## 获取指定位置的字符
### 1、charAt(index)
`charAt`：返回字符串指定位置的字符。不会修改原字符串。
语法： 语法：
@ -79,9 +109,10 @@
字符 = str.charAt(index); 字符 = str.charAt(index);
``` ```
解释：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。 解释：返回字符串指定位置的字符。这里的 `str.charAt(index)`和`str[index]`的效果是一样的。
注意：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。
而且，这里的 `str.charAt(index)`和`str[index]`的效果是一样的。
**代码举例**： **代码举例**：
@ -99,9 +130,11 @@
上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。 上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。
## charCodeAt() ### 2、str[index]
`charCodeAt`：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。 `str.charAt(index)`和`str[index]`的效果是一样的，不再赘述。区别在于：`str[index]`是H5标准里新增的特性。
### 3、charCodeAt(index)
语法： 语法：
@ -109,7 +142,12 @@
字符 = str.charCodeAt(index); 字符 = str.charCodeAt(index);
``` ```
**代码举例**：打印字符串的占位长度 解释：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。
在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。
**代码举例**：打印字符串的**占位长度**。
提示：一个英文占一个位置，一个中文占两个位置。 提示：一个英文占一个位置，一个中文占两个位置。
@ -173,14 +211,15 @@
## concat() ## concat()
`concat()`：字符串的连接。
语法： 语法：
```javascript ```javascript
新字符串 = str1.concat(str2)； //链接两个字符串 新字符串 = str1.concat(str2)； //连接两个字符串
``` ```
解释：字符串的连接。
这种方法基本不用，直接把两个字符串相加就好。 这种方法基本不用，直接把两个字符串相加就好。
是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。 是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。
@ -197,75 +236,79 @@
## slice() ## slice()
`slice()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
语法： 语法：
```javascript ```javascript
字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
``` ```
解释：上面的参数，包左不包右。参数举例如下： 解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
- (2, 5) 截取时，包左不包右。
- (2) 表示**从指定的索引位置开始，截取到最后**。 注意：上面的参数，包左不包右。参数举例如下：
- (-3) 表示从倒数第几个开始，截取到最后。 - `(2, 5)` 截取时，包左不包右。
- (1, -1) 表示从第一个截取到倒数第一个。 - `(2)` 表示**从指定的索引位置开始，截取到最后**。
- (5, 2) 表示前面的大，后面的小，返回值为空。 - `(-3)` 表示从倒数第三个开始，截取到最后。
- `(1, -1)` 表示从第一个截取到倒数第一个。
- `(5, 2)` 表示前面的大，后面的小，返回值为空。
## substring() ## substring()
`substring()`：从字符串中截取指定的内容。和`slice()`类似。
语法： 语法：
```javascript ```javascript
字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
``` ```
解释：从字符串中截取指定的内容。和`slice()`类似。
`substring()`和`slice()`是类似的。但不同之处在于： `substring()`和`slice()`是类似的。但不同之处在于：
- `substring()`不能接受负值作为参数。如果传递了一个**负值**，则默认使用0。 - `substring()`不能接受负值作为参数。如果传递了一个**负值**，则默认使用0。
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`截取的是第一个字符。 - `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`相当于截取的是第一个字符。
## substr() ## substr()
`substr()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
语法： 语法：
```javascript ```javascript
字符串 = str.substr(开始索引, 截取的长度); 字符串 = str.substr(开始索引, 截取的长度);
``` ```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意，这个方法的第二个参数**截图的长度**，不是结束索引。
参数举例： 参数举例：
- (2,4)：从索引值为2的字符开始，截取4个字符。 - `(2,4)` 从索引值为2的字符开始，截取4个字符。
- (1)：从指定位置开始，截取到最后。 - `(1)` 从指定位置开始，截取到最后。
- (-3)：从倒数第几个开始，剪到最后. - `(-3)` 从倒数第几个开始，截取到最后.
- 不包括前大后小的情况。
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。 备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
## split() 【重要】 ## split()：字符串转换为数组 【重要】
`split()`：将一个字符串拆分成一个数组。
语法： 语法：
```javascript ```javascript
数组 = str.split(); 新的数组 = str.split(分隔符);
``` ```
解释：将一个字符串拆分成一个数组。不会改变原字符串。
备注：`split()`这个方法在实际开发中用得非常多。一般来说，从接口拿到的json数据中，经常会收到类似于`"q, i, a, n"`这样的字符串，前端需要将这个字符串拆分成`['q', 'i', 'a', 'n']`数组，这个时候`split()`方法就排上用场了。 备注：`split()`这个方法在实际开发中用得非常多。一般来说，从接口拿到的json数据中，经常会收到类似于`"q, i, a, n"`这样的字符串，前端需要将这个字符串拆分成`['q', 'i', 'a', 'n']`数组，这个时候`split()`方法就排上用场了。
@ -300,6 +343,32 @@
![](http://img.smyhvae.com/20180202_1503.png) ![](http://img.smyhvae.com/20180202_1503.png)
## replace()
语法：
```javascript
新的字符串 = str.replace(被替换的字符，新的字符);
```
解释：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
注意：这个方法，只会替换第一个字符。
代码举例：
```javascript
//replace()方法：替换
var str2 = "Today is fine day,today is fine day !!!"
console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today
```
## trim() ## trim()
`trim()`：去除字符串前后的空白。 `trim()`：去除字符串前后的空白。
@ -317,26 +386,6 @@
![](http://img.smyhvae.com/20180202_1455.png) ![](http://img.smyhvae.com/20180202_1455.png)
## replace()
`replace()`：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
语法：
```javascript
新的字符串 = str.replace(被替换的内容，新的内容);
```
代码举例：
```javascript
//replace()方法：替换
var str2 = "Today is fine day,today is fine day !!!"
console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today
```
## 大小写转换 ## 大小写转换
举例： 举例：

2
04-JavaScript基础/16-数组的常见方法&数组的遍历.md
View File

@ -1078,7 +1078,7 @@ array = Array.from(arrayLike)
//如果相等则证明出现了重复的元素，则删除j对应的元素 //如果相等则证明出现了重复的元素，则删除j对应的元素
arr.splice(j, 1); arr.splice(j, 1);
//当删除了当前j所在的元素以后，后边的元素会自动补位 //当删除了当前j所在的元素以后，后边的元素会自动补位
//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素 //此时将不会在比较这个元素，我需要再比较一次j所在位置的元素
//使j自减 //使j自减
j--; j--;
} }

2
04-JavaScript基础/23-对象的基本操作.md
View File

@ -152,7 +152,7 @@
我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in 运算符可以派上用场。 我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in 运算符可以派上用场。
## 遍历对象中的属性：for ... in ## 遍历对象：for ... in
语法： 语法：