From 673ac4ff0401d3605ba2107bbe826b3fb1101b0e Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Fri, 15 May 2020 10:12:45 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E5=AD=97=E7=AC=A6=E4=B8=B2=E7=9A=84?= =?UTF-8?q?=E5=B8=B8=E8=A7=81=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 04-JavaScript基础/09-对象简介.md | 271 ------------------ ...ng.md => 13-内置对象 String：字符串的常见方法.md} | 137 +++++---- 04-JavaScript基础/14-字符串的深入学习.md | 16 ++ 3 files changed, 93 insertions(+), 331 deletions(-) rename 04-JavaScript基础/{13-内置对象：String.md => 13-内置对象 String：字符串的常见方法.md} (90%) diff --git a/04-JavaScript基础/09-对象简介.md b/04-JavaScript基础/09-对象简介.md index 00593ca..deb1283 100644 --- a/04-JavaScript基础/09-对象简介.md +++ b/04-JavaScript基础/09-对象简介.md @@ -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 - - - - - - - - - - - - - - -``` - -打印结果： - -``` -属性名:name -属性值:smyhvae - -属性名:age -属性值:26 - -属性名:gender -属性值:男 - -属性名:address -属性值:shenzhen - -属性名:sayHi -属性值:function() { - console.log(this.name); - } -``` - ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 diff --git a/04-JavaScript基础/13-内置对象：String.md b/04-JavaScript基础/13-内置对象 String：字符串的常见方法.md similarity index 90% rename from 04-JavaScript基础/13-内置对象：String.md rename to 04-JavaScript基础/13-内置对象 String：字符串的常见方法.md index 3ca59ad..8a0ce10 100644 --- a/04-JavaScript基础/13-内置对象：String.md +++ b/04-JavaScript基础/13-内置对象 String：字符串的常见方法.md @@ -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`：返回字符串指定位置的字符。不会修改原字符串。 @@ -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")); - -``` - -打印结果： - -![](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 ``` -### 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 @@ ![](http://img.smyhvae.com/20180202_1503.png) -### trim() +## trim() `trim()`：去除字符串前后的空白。 @@ -300,7 +317,7 @@ ![](http://img.smyhvae.com/20180202_1455.png) -### replace() +## replace() `replace()`：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。 @@ -320,7 +337,7 @@ console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today ``` -### 大小写转换 +## 大小写转换 举例： diff --git a/04-JavaScript基础/14-字符串的深入学习.md b/04-JavaScript基础/14-字符串的深入学习.md index e69de29..37e5e09 100644 --- a/04-JavaScript基础/14-字符串的深入学习.md +++ b/04-JavaScript基础/14-字符串的深入学习.md @@ -0,0 +1,16 @@ + +## 字符串的不可变性 + +字符串里面的值不可被改变。虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。 + +代码举例： + +```js +var str = 'hello'; + +str = 'qianguyihao'; +``` + +比如上面的代码，当重新给变量 str 赋值时，常量`hello`不会被修改，依然保存在内存中；str 会改为指向`qianguyihao`。 + +