update: 字符串的常见方法
This commit is contained in:
qianguyihao
parent
730dbee905
commit
673ac4ff04
@ -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`）。
|
||||
|
||||
@ -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"));
|
||||
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
**语法2**：
|
||||
|
||||
这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下：
|
||||
|
||||
|
||||
```javascript
|
||||
索引值 = str.indexOf(想要查询的字符, [起始位置]);
|
||||
```
|
||||
|
||||
代码举例2：（两个参数时，需要特别注意）
|
||||
|
||||
```javascript
|
||||
var str = 'qianguyihao';
|
||||
result = str.indexOf('a', 3); // 从第三个位置开始查找 'a'这个字符 【重要】
|
||||
|
||||
console.log(result); // 打印结果：9
|
||||
```
|
||||
|
||||
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
|
||||
|
||||
|
||||
## charAt()
|
||||
|
||||
`charAt`：返回字符串指定位置的字符。不会修改原字符串。
|
||||
|
||||
@ -35,7 +99,7 @@
|
||||
|
||||
上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。
|
||||
|
||||
### charCodeAt()
|
||||
## charCodeAt()
|
||||
|
||||
`charCodeAt`：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。
|
||||
|
||||
@ -93,7 +157,7 @@
|
||||
|
||||
另外，sort()方法其实底层也是用到了charCodeAt()，因为用到了Unicode编码。
|
||||
|
||||
### String.fromCharCode()
|
||||
## String.fromCharCode()
|
||||
|
||||
`String.fromCharCode()`：根据字符的 Unicode 编码获取字符。
|
||||
|
||||
@ -107,54 +171,7 @@
|
||||
console.log(result2); // 打印结果：中
|
||||
```
|
||||
|
||||
### indexOf()/lastIndexOf()
|
||||
|
||||
`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"));
|
||||
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
**代码举例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
|
||||
```
|
||||
|
||||
### slice()
|
||||
## slice()
|
||||
|
||||
`slice()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
|
||||
|
||||
@ -200,7 +217,7 @@
|
||||
|
||||
- (5, 2) 表示前面的大，后面的小，返回值为空。
|
||||
|
||||
### substring()
|
||||
## substring()
|
||||
|
||||
`substring()`：从字符串中截取指定的内容。和`slice()`类似。
|
||||
|
||||
@ -216,7 +233,7 @@
|
||||
|
||||
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`截取的是第一个字符。
|
||||
|
||||
### substr()
|
||||
## substr()
|
||||
|
||||
`substr()`：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
|
||||
|
||||
@ -238,7 +255,7 @@
|
||||
|
||||
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
|
||||
|
||||
### split() 【重要】
|
||||
## split() 【重要】
|
||||
|
||||
`split()`：将一个字符串拆分成一个数组。
|
||||
|
||||
@ -283,7 +300,7 @@
|
||||
|
||||
|
||||
|
||||
### trim()
|
||||
## trim()
|
||||
|
||||
`trim()`：去除字符串前后的空白。
|
||||
|
||||
@ -300,7 +317,7 @@
|
||||
|
||||
|
||||
|
||||
### replace()
|
||||
## replace()
|
||||
|
||||
`replace()`：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
|
||||
|
||||
@ -320,7 +337,7 @@
|
||||
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today
|
||||
```
|
||||
|
||||
### 大小写转换
|
||||
## 大小写转换
|
||||
|
||||
举例：
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
|
||||
## 字符串的不可变性
|
||||
|
||||
字符串里面的值不可被改变。虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
|
||||
|
||||
代码举例：
|
||||
|
||||
```js
|
||||
var str = 'hello';
|
||||
|
||||
str = 'qianguyihao';
|
||||
```
|
||||
|
||||
比如上面的代码，当重新给变量 str 赋值时，常量`hello`不会被修改，依然保存在内存中；str 会改为指向`qianguyihao`。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user