webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 字符串的常见方法

Browse Source
This commit is contained in:
qianguyihao 2020-05-15 10:12:45 +08:00
parent 730dbee905
commit 673ac4ff04
3 changed files with 93 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -158,277 +158,6 @@ var obj3 = Object.assign({}, obj);
- 由开发人员自己创建的对象 - 由开发人员自己创建的对象
## 对象的基本操作
### 创建对象
使用new关键字调用的函数，是构造函数constructor。**构造函数是专门用来创建对象的函数**。
例如：
```javascript
var obj = new Object();
```
记住，使用`typeof`检查一个对象时，会返回`object`。
### 向对象中添加属性
在对象中保存的值称为属性。
向对象添加属性的语法：
```javascript
对象.属性名 = 属性值;
```
举例：
```javascript
var obj = new Object();
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = 18;
console.log(JSON.stringify(obj)); // 将 obj 以字符串的形式打印出来
```
打印结果：
```
{
"name":"孙悟空",
"gender":"男",
"age":18
}
```
### 获取对象中的属性
**方式1**：
语法：
```javascript
对象.属性名
```
如果获取对象中没有的属性，不会报错而是返回`undefined`。
举例：
```javascript
var obj = new Object();
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gender属性
obj.gender = "男";
//向obj中添加一个age属性
obj.age = 18;
// 获取对象中的属性，并打印出来
console.log(obj.gender); // 打印结果：男
console.log(obj.color); // 打印结果：undefined
```
**方式2**：可以使用`[]`这种形式去操作属性
对象的属性名不强制要求遵守标识符的规范，不过我们尽量要按照标识符的规范去做。
但如果确实要使用特殊的属性名，就不能采用`.`的方式来操作对象的属性。比如说，`123`这种属性名，如果我们直接写成`obj.123 = 789`来操作属性，是会报错的。那怎么办呢？办法如下：
语法格式如下：（读取时，也是采用这种方式）
```javascript
// 注意，括号里的属性名，必须要加引号
对象['属性名'] = 属性值
```
上面这种语法格式，举例如下：
```javascript
obj['123'] = 789;
```
**重要**：使用`[]`这种形式去操作属性，更加的灵活，因为，我们可以在`[]`中直接传递一个**变量**。
### 修改对象的属性值
语法：
```javascript
对象.属性名 = 新值
```
```javascript
obj.name = "tom";
```
### 删除对象的属性
语法：
```javascript
delete obj.name;
```
### in 运算符
通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true，没有则返回false。
语法：
```javascript
"属性名" in 对象
```
举例：
```javascript
//检查obj中是否含有name属性
console.log("name" in obj);
```
我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in 运算符可以派上用场。
## 对象字面量
如果要创建一个对象，我们可以使用下面这种方式：
```javascript
var obj = new Object();
```
但是上面的这种方式，比较麻烦，我们还有更简洁的方式来创建一个对象。如下。
使用对象字面量来创建一个对象：
```javascript
var obj = {};
```
使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值....}
例如：
```javascript
var obj2 = {
name: "猪八戒",
age: 13,
gender: "男",
test: {
name: "沙僧"
}
//我们还可以在对象中增加一个方法。以后可以通过obj2.sayName()的方式调用这个方法
sayName: function(){
console.log('smyhvae');
}
};
```
对象字面量的属性名可以加引号也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。
属性名和属性值是一组一组的键值对结构，键和值之间使用`:`连接，多个值对之间使用`,`隔开。如果一个属性之后没有其他的属性了，就不要写`,`，因为它是对象的最后一个属性。
## 遍历对象中的属性：for ... in
语法：
```javascript
for (var 变量 in 对象名) {
}
```
解释：对象中有几个属性，循环体就会执行几次。每次执行时，会将对象中的**每个属性的 属性名 赋值给变量**。
语法举例：
```javascript
for (var key in obj) {
console.log(key); // 这里的 key 是：对象属性的键
console.log(obj[key]); // 这里的 obj[key] 是：对象属性的值
}
```
举例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = {
name: "smyhvae",
age: 26,
gender: "男",
address: "shenzhen",
sayHi: function() {
console.log(this.name);
}
};
// 遍历对象中的属性
for (var key in obj) {
console.log("属性名:" + key);
console.log("属性值:" + obj[key]); // 注意，因为这里的属性名 keu 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
}
</script>
</head>
<body>
</body>
</html>
```
打印结果：
```
属性名:name
属性值:smyhvae
属性名:age
属性值:26
属性名:gender
属性值:男
属性名:address
属性值:shenzhen
属性名:sayHi
属性值:function() {
console.log(this.name);
}
```
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。

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

@ -1,11 +1,75 @@
## 前言 ## 前言
> 在日常开发中，String对象的使用频率是非常高的。所以有必要详细介绍。 > 在日常开发中，String 对象（字符串对象）的使用频率是非常高的。所以有必要详细介绍。
## 内置对象 String 的常见方法 需要注意的是：**字符串的所有方法，都不会改变原字符串**（字符串的不可变性），操作完成后会返回一个新的值。
### charAt() 字符串的常见方法如下。
## indexOf()/lastIndexOf()
> 这个方法，是使用频率最高的一个方法。
`indexOf()/lastIndexOf()`：获取指定字符的索引。
**语法1**：
```javascript
索引值 = str.indexOf(想要查询的字符);
```
解释：`indexOf()` 是从前向后索引字符串的位置。同理，`lastIndexOf()`是从后向前寻找。
**作用**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。
因此可以得出一个技巧：
- **如果获取的索引值为0，说明字符串是以查询的参数为开头的**。
- 如果获取的索引值为-1，说明这个字符串中没有指定的内容。
代码举例1：
```javascript
var str = 'abcdea';
//给字符查索引(索引值为0,说明字符串以查询的参数为开头)
console.log(str.indexOf("c"));
console.log(str.lastIndexOf("c"));
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
```
打印结果：
![](http://img.smyhvae.com/20180202_1420.png)
**语法2**：
这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下：
```javascript
索引值 = str.indexOf(想要查询的字符, [起始位置]);
```
代码举例2：（两个参数时，需要特别注意）
```javascript
var str = 'qianguyihao';
result = str.indexOf('a', 3); // 从第三个位置开始查找 'a'这个字符 【重要】
console.log(result); // 打印结果：9
```
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
## charAt()
`charAt`：返回字符串指定位置的字符。不会修改原字符串。 `charAt`：返回字符串指定位置的字符。不会修改原字符串。
@ -35,7 +99,7 @@
上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。 上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。
### charCodeAt() ## charCodeAt()
`charCodeAt`：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。 `charCodeAt`：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。
@ -93,7 +157,7 @@
另外，sort()方法其实底层也是用到了charCodeAt()，因为用到了Unicode编码。 另外，sort()方法其实底层也是用到了charCodeAt()，因为用到了Unicode编码。
### String.fromCharCode() ## String.fromCharCode()
`String.fromCharCode()`：根据字符的 Unicode 编码获取字符。 `String.fromCharCode()`：根据字符的 Unicode 编码获取字符。
@ -107,54 +171,7 @@
console.log(result2); // 打印结果：中 console.log(result2); // 打印结果：中
``` ```
### indexOf()/lastIndexOf() ## concat()
`indexOf()/lastIndexOf()`：获取指定字符的索引。
语法：
```javascript
索引值 = str.indexOf(想要查询的字符);
```
解释：`indexOf()` 是从前向后索引字符串的位置。同理，`lastIndexOf()`是从后向前寻找。
**作用**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。
因此可以得出一个技巧：**如果获取的索引值为0，说明字符串是以查询的参数为开头的**。
这个方法还可以指定第二个参数，用来 指定开始查找的位置。
**代码举例1**：
```javascript
var str = "abcdea";
//给字符查索引(索引值为0,说明字符串以查询的参数为开头)
console.log(str.indexOf("c"));
console.log(str.lastIndexOf("c"));
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
```
打印结果：
![](http://img.smyhvae.com/20180202_1420.png)
**代码举例2**：（两个参数时，需要特别注意）
```javascript
var str = 'qianguyihao';
result = str.indexOf('a', 3); // 从第三个位置开始查找 'a'这个字符 【重要】
console.log(result); // 打印结果：9
```
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
### concat()
`concat()`：字符串的连接。 `concat()`：字符串的连接。
@ -178,7 +195,7 @@
console.log(result); // 打印结果：qianguyihao console.log(result); // 打印结果：qianguyihao
``` ```
### slice() ## slice()
`slice()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。 `slice()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
@ -200,7 +217,7 @@
- (5, 2) 表示前面的大，后面的小，返回值为空。 - (5, 2) 表示前面的大，后面的小，返回值为空。
### substring() ## substring()
`substring()`：从字符串中截取指定的内容。和`slice()`类似。 `substring()`：从字符串中截取指定的内容。和`slice()`类似。
@ -216,7 +233,7 @@
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`截取的是第一个字符。 - `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`截取的是第一个字符。
### substr() ## substr()
`substr()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。 `substr()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
@ -238,7 +255,7 @@
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。 备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
### split() 【重要】 ## split() 【重要】
`split()`：将一个字符串拆分成一个数组。 `split()`：将一个字符串拆分成一个数组。
@ -283,7 +300,7 @@
![](http://img.smyhvae.com/20180202_1503.png) ![](http://img.smyhvae.com/20180202_1503.png)
### trim() ## trim()
`trim()`：去除字符串前后的空白。 `trim()`：去除字符串前后的空白。
@ -300,7 +317,7 @@
![](http://img.smyhvae.com/20180202_1455.png) ![](http://img.smyhvae.com/20180202_1455.png)
### replace() ## replace()
`replace()`：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。 `replace()`：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
@ -320,7 +337,7 @@
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today
``` ```
### 大小写转换 ## 大小写转换
举例： 举例：

16
04-JavaScript基础/14-字符串的深入学习.md
View File

@ -0,0 +1,16 @@
## 字符串的不可变性
字符串里面的值不可被改变。虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
代码举例：
```js
var str = 'hello';
str = 'qianguyihao';
```
比如上面的代码，当重新给变量 str 赋值时，常量`hello`不会被修改，依然保存在内存中；str 会改为指向`qianguyihao`。