From 0bdcc8c0729f02948775da9c7914c451f0c7d254 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sat, 15 Jun 2019 21:00:07 +0800 Subject: [PATCH] =?UTF-8?q?update:=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 --- 03-JavaScript基础/14-数组简介.md | 3 +- .../15-数组的四个基本方法&数组的遍历.md | 2 +- 03-JavaScript基础/16-数组的常见方法.md | 3 +- 03-JavaScript基础/17-数组的其他方法.md | 3 +- 03-JavaScript基础/18-内置对象：Date.md | 4 +- 03-JavaScript基础/19-内置对象：Math.md | 100 ++++++++ 03-JavaScript基础/20-包装类.md | 91 +++++++ ...象：String和Math.md => 21-内置对象：String.md} | 227 ++++++++---------- .../{21-DOM操作.md => 25-DOM操作.md} | 0 ...象Event和冒泡.md => 26-事件对象Event和冒泡.md} | 0 .../{23-事件委托.md => 27-事件委托.md} | 0 ...和内置对象.md => 28-BOM的常见内置方法和内置对象.md} | 0 .../{25-原型链.md => 29-原型链.md} | 0 .../{26-常见代码解读.md => 30-常见代码解读.md} | 0 14 files changed, 295 insertions(+), 138 deletions(-) create mode 100644 03-JavaScript基础/19-内置对象：Math.md create mode 100644 03-JavaScript基础/20-包装类.md rename 03-JavaScript基础/{20-内置对象：String和Math.md => 21-内置对象：String.md} (64%) rename 03-JavaScript基础/{21-DOM操作.md => 25-DOM操作.md} (100%) rename 03-JavaScript基础/{22-事件对象Event和冒泡.md => 26-事件对象Event和冒泡.md} (100%) rename 03-JavaScript基础/{23-事件委托.md => 27-事件委托.md} (100%) rename 03-JavaScript基础/{24-BOM的常见内置方法和内置对象.md => 28-BOM的常见内置方法和内置对象.md} (100%) rename 03-JavaScript基础/{25-原型链.md => 29-原型链.md} (100%) rename 03-JavaScript基础/{26-常见代码解读.md => 30-常见代码解读.md} (100%) diff --git a/03-JavaScript基础/14-数组简介.md b/03-JavaScript基础/14-数组简介.md index 681414e..17b2b4e 100644 --- a/03-JavaScript基础/14-数组简介.md +++ b/03-JavaScript基础/14-数组简介.md @@ -172,4 +172,5 @@ arr4 = [15,16,17] 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) + diff --git a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md index 4680c94..6cbed70 100644 --- a/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md +++ b/03-JavaScript基础/15-数组的四个基本方法&数组的遍历.md @@ -333,7 +333,7 @@ obj:王一,王二,王三 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) diff --git a/03-JavaScript基础/16-数组的常见方法.md b/03-JavaScript基础/16-数组的常见方法.md index 7c69d14..1decd05 100644 --- a/03-JavaScript基础/16-数组的常见方法.md +++ b/03-JavaScript基础/16-数组的常见方法.md @@ -414,5 +414,4 @@ result =["f","e","d","c","b","a"] 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) - +![](http://img.smyhvae.com/20190101.png) diff --git a/03-JavaScript基础/17-数组的其他方法.md b/03-JavaScript基础/17-数组的其他方法.md index 942afbe..ed4333f 100644 --- a/03-JavaScript基础/17-数组的其他方法.md +++ b/03-JavaScript基础/17-数组的其他方法.md @@ -370,4 +370,5 @@ array = Array.from(arrayLike) 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) + diff --git a/03-JavaScript基础/18-内置对象：Date.md b/03-JavaScript基础/18-内置对象：Date.md index 4804cee..8f7571a 100644 --- a/03-JavaScript基础/18-内置对象：Date.md +++ b/03-JavaScript基础/18-内置对象：Date.md @@ -269,5 +269,7 @@ Date对象 还有如下方法： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) + + diff --git a/03-JavaScript基础/19-内置对象：Math.md b/03-JavaScript基础/19-内置对象：Math.md new file mode 100644 index 0000000..7584e96 --- /dev/null +++ b/03-JavaScript基础/19-内置对象：Math.md @@ -0,0 +1,100 @@ + +## 内置对象 Math + +### 内置对象 Math 的常见方法 + +| 方法 | 描述 | 备注 | +|:-------------|:-------------|:-------------| +| Math.abs() | **返回绝对值** | | +| Math.floor() | **向下取整**（向小取） | | +| Math.ceil() | **向上取整**（向大取） | | +| Math.round() | 四舍五入取整（正数四舍五入，负数五舍六入） | | +| Math.random() | 生成0-1之间的随机数 | 不包含0和1 | +| Math.max(x, y, z) | 返回多个数中的最大值 | | +| Math.min(x, y, z) | 返回多个数中的最小值 | | +| Math.pow(x,y) | 返回 x 的 y 次幂 | | +| Math.sqrt() | 对一个数进行开方运算 | | + +Math 和其他的对象不同，它不是一个构造函数，不需要创建对象。 + +Math属于一个工具类，里面封装了数学运算相关的属性和方法。 + +**举例**： + +```javascript + var num = -0.6; + + console.log(Math.abs(num)); //取绝对值 + + console.log(Math.floor(num)); //向下取整，向小取 + + console.log(Math.ceil(num)); //向上取整，向大取 + + console.log(Math.round(num)); //四舍五入取整（正数四舍五入，负数五舍六入） + + console.log(Math.random()); //生成0-1之间的随机数 +``` + +运行结果： + +``` + 0.6 + + -1 + + -0 + + -1 + + 0.6453756205275165 +``` + +### Math.random()方法举例：生成 x-y 之间的随机数 + +生成 0-x 之间的随机数： + +```javascript + Math.round(Math.random()*x) +``` + +生成 x-y 之间的随机数： + +```javascript + Math.round(Math.random()*(y-x)+x) +``` + +## url 编码和解码 + +URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。 + +```javascript + encodeURIComponent(); //把字符串作为 URI 组件进行编码 + decodeURIComponent(); //把字符串作为 URI 组件进行解码 + +``` + +举例： + +```javascript + var url = "http://www.cnblogs.com/smyhvae/"; + + var str = encodeURIComponent(url); + console.log(str); //打印url的编码 + console.log(decodeURIComponent(str)); //对url进行编码后，再解码，还原为url +``` + +打印结果： + +![](http://img.smyhvae.com/20180202_1432.png) + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) + + + diff --git a/03-JavaScript基础/20-包装类.md b/03-JavaScript基础/20-包装类.md new file mode 100644 index 0000000..acd223b --- /dev/null +++ b/03-JavaScript基础/20-包装类.md @@ -0,0 +1,91 @@ + +## 包装类 + +### 包装类的介绍 + +我们都知道，js中的数据类型包括以下几种。 + +- 基本数据类型：String、Number、Boolean、Null、Undefined + +- 引用数据类型：Object + +JS为我们提供了**三个包装类**： + +- String()：将基本数据类型字符串，转换为String对象。 + +- Number()：将基本数据类型的数字，转换为Number对象。 + +- Boolean()：将基本数据类型的布尔值，转换为Boolean对象。 + +通过上面这这三个包装类，我们可以**将基本数据类型的数据转换为对象**。 + + +代码举例： + +```javascript + var num = new Number(3); + + var str = new String("hello"); + + var bool = new Boolean(true); + + console.log(typeof num); // 打印结果：object +``` + + +**需要注意的是**：我们在实际应用中不会使用基本数据类型的对象。如果使用基本数据类型的对象，在做一些比较时可能会带来一些**不可预期**的结果。 + +比如说： + +```javascript + var boo1 = new Boolean(true); + var boo2 = new Boolean(true); + + console.log(boo1 === boo2); // 打印结果竟然是：false +``` + + +再比如说： + +```javascript +var boo3 = new Boolean(false); + +if (boo3) { + console.log('qianguyihao'); // 这行代码竟然执行了 +} +``` + + +### 基本数据类型不能添加属性和方法 + +方法和属性只能添加给对象，不能添加给基本数据类型。 + +**注意**：当我们对一些基本数据类型的值去调用属性和方法时，浏览器会**临时使用包装类将其转换为对象**，然后在调用对象的属性和方法；调用完以后，在将其转换为基本数据类型。 + +代码举例： + +```javascript + var str = 123; + + str = str.toString(); // 将 number 类型转换为 string 类型 + str.hello = "千古壹号"; // 添加属性 + + console.log(typeof str); // 打印结果：string + console.log(str.hello); // 打印结果：undefined +``` + +再比如，String 对象的很多内置方法，也可以直接给字符串用。此时，也是临时将字符串转换为 String 对象，然后再调用内置方法。 + + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) + + + + diff --git a/03-JavaScript基础/20-内置对象：String和Math.md b/03-JavaScript基础/21-内置对象：String.md similarity index 64% rename from 03-JavaScript基础/20-内置对象：String和Math.md rename to 03-JavaScript基础/21-内置对象：String.md index 5365469..b1547b0 100644 --- a/03-JavaScript基础/20-内置对象：String和Math.md +++ b/03-JavaScript基础/21-内置对象：String.md @@ -1,34 +1,29 @@ +## 前言 +> 在日常开发中，String对象的使用频率是最高的。所以有必要详细介绍。 +### 基本数据类型不能绑定属性和方法 -## 内置对象String - -### 简单数据类型、复杂数据类型 - -**1、简单数据类型：** - -注意，之前学习的简单数据类型`string`是**无法绑定属性和方法**的。比如说： +**1、基本数据类型：** +注意，简单数据类型`string`是**无法绑定属性和方法**的。比如说： ```javascript - var str = "smyhvae"; + var str = "qianguyihao"; str.aaa = 12; console.log(typeof str); //打印结果为：string console.log(str.aaa); //打印结果为：undefined ``` -上方代码中，当我们尝试打印`str.aaa`的时候，会发现打印结果为：undefined。 +上方代码中，当我们尝试打印`str.aaa`的时候，会发现打印结果为：undefined。也就是说，不能给 `string` 绑定属性和方法。 -当然，我们可以打印str.length、srt.indexOf("m")等等。因为这两个方法的底层做了数据类型转换。 - - -**2、复杂数据类型：** - -复杂数据类型`String`是可以绑定属性和方法的。如下： +当然，我们可以打印str.length、str.indexOf("m")等等。因为这两个方法的底层做了数据类型转换（**临时**将 `string` 字符串转换为 `String` 对象，然后再调用内置方法），也就是我们在上一篇文章中讲到的**包装类**。 +**2、引用数据类型：** +引用数据类型`String`是可以绑定属性和方法的。如下： ```javascript @@ -43,11 +38,6 @@ ![](http://img.smyhvae.com/20180202_1351.png) -``` - -``` - - 同理，内置对象Number也有一些自带的方法，比如： - Number.MAX_VALUE; @@ -56,32 +46,35 @@ 内置对象Boolean也有一些自带的方法，但是用的不多。 +### 在底层，字符串以字符数组的形式保存 -下面讲一下内置对象String的常见方法。 - - -### charAt/charCodeAt：1.2.1 给索引查字符 - +在底层，字符串是以字符数组的形式保存的。代码举例： ```javascript - 字符 = Str.charAt(索引值); + var str = "smyhvae"; + console.log(str.length); // 获取字符串的长度 + console.log(str[2]); // 获取字符串中的第2个字符 ``` -解释：获取相应位置的字符。 +上方代码中，`smyhvae`这个字符串在底层是以`["s", "m", "y", "h", "v", "a", "e"]`的形式保存的。因此，我们既可以获取字符串的长度，也可以获取指定索引index位置的单个字符。这很像数组中的操作。 -字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。 +## 内置对象 String 的常见方法 +### charAt() +`charAt`：返回字符串指定位置的字符。不会修改原字符串。 +语法： ```javascript - 字符编码 = Str.charCodeAt(索引值); + 字符 = str.charAt(index); ``` -解释： 获取相应位置的Unicode字符编码。 +解释：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。 +而且，这里的 `str.charAt(index)`和`str[index]`的效果是一样的。 -举例1： +**代码举例**： ```javascript var str = new String("smyhvae"); @@ -97,7 +90,17 @@ 上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。 -举例2：打印字符串的占位长度 +### charCodeAt() + +`charCodeAt`：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。 + +语法： + +```javascript + 字符 = str.charCodeAt(index); +``` + +**代码举例**：打印字符串的占位长度 提示：一个英文占一个位置，一个中文占两个位置。 @@ -145,19 +148,61 @@ 另外，sort()方法其实底层也是用到了charCodeAt()，因为用到了Unicode编码。 +### String.fromCharCode() -### indexOf/lastIndexOf：给字符查索引 +`String.fromCharCode()`：根据字符的 Unicode 编码获取字符。 + +代码举例： ```javascript -索引值 = str.indexOf/(想要查询的字符); + var result1 = String.fromCharCode(72); + var result2 = String.fromCharCode(20013); + console.log(result1); // 打印结果：H + console.log(result2); // 打印结果：中 ``` -解释：从前向后索引字符串的位置。 +### concat() + +`concat()`：字符串的连接。 + +语法： + +```javascript + 新字符串 = str1.concat(str2)； //链接两个字符串 +``` + +这种方法基本不用，直接把两个字符串相加就好。 + +是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用的挺多的。 + +代码举例： + +```javascript + var str1 = 'qiangu'; + var str2 = 'yihao'; + + var result = str1.concat(str2); + console.log(result); // 打印结果：qianguyihao +``` + +### indexOf()/lastIndexOf() + +`indexOf()/lastIndexOf()`：获取指定字符的索引。 + +语法： + +```javascript + 索引值 = str.indexOf(想要查询的字符); +``` + +解释：`indexOf()` 是从前向后索引字符串的位置。同理，`lastIndexOf()`是从后向前寻找。 + +**作用**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。 因此可以得出一个技巧：**如果获取的索引值为0，说明字符串是以查询的参数为开头的**。 -同理，lastIndexOf()是从后向前寻找。 +**代码举例1**： ```javascript var str = "abcdea"; @@ -168,20 +213,23 @@ console.log(str.indexOf("a")); console.log(str.lastIndexOf("a")); + ``` 打印结果： ![](http://img.smyhvae.com/20180202_1420.png) -### concat：字符串的链接 - +**代码举例2**：（两个参数时，需要特别注意） ```javascript - 新字符串 = str1.concat(str2)； 链接两个字符串 + var str = 'qianguyihao'; + result = str.indexOf('a', 3); // 从第三个位置开始查找 'a'这个字符 【重要】 + + console.log(result); // 打印结果：9 ``` -这种方法基本不用，直接两个字符串相加就好。 +上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。 ### 字符串的截取（重要） @@ -192,12 +240,11 @@ 格式： ```javascript - 字符串 = str.slice(索引1，索引2); //两个参数都是索引值。 + 字符串 = str.slice(索引1, 索引2); //两个参数都是索引值。 ``` 上面的参数，包左不包右。参数举例如下： - - (2,5) 表示正常，包左不包右。 - (2) 表示**从指定的索引位置开始，剪到最后**。 @@ -255,7 +302,6 @@ 3、split()：字符串变数组。 - ```javascript //split()方法：字符串变数组 var str3 = "生命壹号|许嵩|smyhvae"; @@ -318,7 +364,7 @@ ## 字符串练习 -**练习1：**"smyhvaevaesmyh"查找字符串中所有m出现的位置。 +**练习1**："smyhvaevaesmyh"查找字符串中所有m出现的位置。 代码实现： @@ -333,7 +379,7 @@ } ``` -**练习2：**判断一个字符串中出现次数最多的字符，统计这个次数 +**练习2**：判断一个字符串中出现次数最多的字符，统计这个次数 ```html