refactor: 目录结构调整

This commit is contained in:
qianguyihao 2020-05-14 22:17:35 +08:00
parent ebcb344cb3
commit 730dbee905
13 changed files with 178 additions and 169 deletions

View File

@ -0,0 +1,157 @@
## 包装类的介绍
我们都知道js中的数据类型包括以下几种
- 基本数据类型StringNumberBooleanNullUndefined
- 引用数据类型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'); // 这行代码竟然执行了
}
```
## 基本数据类型不能绑定属性和方法
属性和方法只能添加给对象不能添加给基本数据类型
**1基本数据类型**
注意基本数据类型`string`**无法绑定属性和方法**比如说
```javascript
var str = "qianguyihao";
str.aaa = 12;
console.log(typeof str); //打印结果为string
console.log(str.aaa); //打印结果为undefined
```
上方代码中当我们尝试打印`str.aaa`的时候会发现打印结果为undefined也就是说不能给 `string` 绑定属性和方法
当然我们可以打印str.lengthstr.indexOf("m")等等因为这两个方法的底层做了数据类型转换**临时** `string` 字符串转换为 `String` 对象然后再调用内置方法也就是我们在上一篇文章中讲到的**包装类**
**2引用数据类型**
引用数据类型`String`是可以绑定属性和方法的如下
```javascript
var strObj = new String("smyhvae");
strObj.aaa = 123;
console.log(strObj);
console.log(typeof strObj); //打印结果Object
console.log(strObj.aaa);
```
打印结果
![](http://img.smyhvae.com/20180202_1351.png)
内置对象Number也有一些自带的方法比如
- Number.MAX_VALUE;
- Number.MIN_VALUE;
内置对象Boolean也有一些自带的方法但是用的不多
## 基本包装类型重要
当我们对一些基本数据类型的值去调用属性和方法时浏览器会**临时使用包装类将基本数据类型转换为引用数据类型**这样的话基本数据类型就有了属性和方法然后再调用对象的属性和方法调用完以后再将其转换为基本数据类型
举例
```js
var str = 'qianguyihao';
console.log(str.length); // 打印结果11
```
比如上面的代码执行顺序是这样的
```js
// 步骤1把简单数据类型 string 转换为 引用数据类型 String保存到临时变量中
var temp = new String('qianguyihao);
// 步骤2把临时变量的值 赋值给 str
str = temp;
// 步骤3销毁临时变量
temp = null;
```
### 在底层字符串以字符数组的形式保存
在底层字符串是以字符数组的形式保存的代码举例
```javascript
var str = "smyhvae";
console.log(str.length); // 获取字符串的长度
console.log(str[2]); // 获取字符串中的第2个字符
```
上方代码中`smyhvae`这个字符串在底层是以`["s", "m", "y", "h", "v", "a", "e"]`的形式保存的因此我们既可以获取字符串的长度也可以获取指定索引index位置的单个字符这很像数组中的操作
再比如String 对象的很多内置方法也可以直接给字符串用此时也是临时将字符串转换为 String 对象然后再调用内置方法
## 我的公众号
想学习**代码之外的技能**不妨关注我的微信公众号**千古壹号**id`qianguyihao`
扫一扫你将发现另一个全新的世界而这将是一场美丽的意外
![](http://img.smyhvae.com/20190101.png)

View File

@ -3,61 +3,6 @@
> 在日常开发中String对象的使用频率是非常高的所以有必要详细介绍
### 基本数据类型不能绑定属性和方法
**1基本数据类型**
注意基本数据类型`string`**无法绑定属性和方法**比如说
```javascript
var str = "qianguyihao";
str.aaa = 12;
console.log(typeof str); //打印结果为string
console.log(str.aaa); //打印结果为undefined
```
上方代码中当我们尝试打印`str.aaa`的时候会发现打印结果为undefined也就是说不能给 `string` 绑定属性和方法
当然我们可以打印str.lengthstr.indexOf("m")等等因为这两个方法的底层做了数据类型转换**临时** `string` 字符串转换为 `String` 对象然后再调用内置方法也就是我们在上一篇文章中讲到的**包装类**
**2引用数据类型**
引用数据类型`String`是可以绑定属性和方法的如下
```javascript
var strObj = new String("smyhvae");
strObj.aaa = 123;
console.log(strObj);
console.log(typeof strObj); //打印结果Object
console.log(strObj.aaa);
```
打印结果
![](http://img.smyhvae.com/20180202_1351.png)
内置对象Number也有一些自带的方法比如
- Number.MAX_VALUE;
- Number.MIN_VALUE;
内置对象Boolean也有一些自带的方法但是用的不多
### 在底层字符串以字符数组的形式保存
在底层字符串是以字符数组的形式保存的代码举例
```javascript
var str = "smyhvae";
console.log(str.length); // 获取字符串的长度
console.log(str[2]); // 获取字符串中的第2个字符
```
上方代码中`smyhvae`这个字符串在底层是以`["s", "m", "y", "h", "v", "a", "e"]`的形式保存的因此我们既可以获取字符串的长度也可以获取指定索引index位置的单个字符这很像数组中的操作
## 内置对象 String 的常见方法
### charAt()

View File

@ -141,9 +141,9 @@
console.log(JSON.stringify(arr)); // 打印结果:["王二","王三"]
```
## 数组的常见方法
接下来我们讲一下数组的其他常见方法
### slice()
## slice()
`slice()`从数组中**提取**指定的一个或者多个元素返回结果为**新的数组**不会改变原来的数组
@ -200,7 +200,7 @@ ES6 看不下去这种蹩脚的转化方法,于是出了一个新的 API
array = Array.from(arrayLike)
```
### splice()
## splice()
`splice()`从数组中**删除**指定的一个或多个元素返回结果为**新的数组**会改变原来的数组
@ -290,7 +290,7 @@ arr4["a","千古壹号","vae","e","f"]
result4["b","c","d"]
```
### concat()
## concat()
`concat()`连接两个或多个数组返回结果为**新的数组**不会改变原数组
@ -333,7 +333,7 @@ result2 =["a","b","c",1,2,3,"千古壹号","vae"]
从打印结果中可以看到原数组并没有被修改
### join()
## join()
`join()`将数组转换为字符串返回结果为**转换后的字符串**不会改变原来的数组
@ -371,7 +371,7 @@ result1 =a,b,c
result2 =a-b-c
```
### reverse()
## reverse()
`reverse()`反转数组返回结果为**反转后的数组**会改变原来的数组
@ -582,7 +582,7 @@ qianguyihao 排序后的数组:[
## 数组的遍历
## 概念数组的遍历
遍历数组即获取并操作数组中的每一个元素在我们的实战开发中使用得非常频繁
@ -601,7 +601,7 @@ PS这几个方法**不会修改原数组**。
有了这几种方法就可以替代一些for循环了下面依次来介绍
### for循环 遍历
## for循环 遍历
举例
@ -618,7 +618,7 @@ PS这几个方法**不会修改原数组**。
![](http://img.smyhvae.com/20180124_2008.png)
### forEach() 遍历
## forEach() 遍历
> `forEach()` 这种遍历方法只支持IE8以上的浏览器IE8及以下的浏览器均不支持该方法所以如果需要兼容IE8则不要使用forEach改为使用for循环来遍历即可
@ -668,7 +668,7 @@ obj:王一,王二,王三
注意forEach() 的返回值是 undefined也就是说它没有返回值如果你尝试 `tempArry = arr.forEach()`这种方式来接收是达不到效果的
### map()方法
## map()方法
解释对数组中每一项运行回调函数返回该函数的结果组成的新数组返回的是**加工之后**的新数组
@ -728,7 +728,7 @@ arr3:[{"myName":"千古壹号","myAge":"28"},{"myName":"许嵩","myAge":"32"}]
map的应用场景主要就是以上两种
### filter()
## filter()
解释对数组中的**每一项**运行回调函数该函数返回结果是true的项将组成新的数组返回值就是这个新的数组
@ -783,7 +783,7 @@ map的应用场景主要就是以上两种。
[{"name":"许嵩","type":"一线"},{"name":"邓紫棋","type":"一线"}]
```
### every()方法
## every()方法
`every()`对数组中每一项运行回调函数如果都返回trueevery就返回true如果有一项返回false则停止遍历此方法返回false
@ -811,7 +811,7 @@ map的应用场景主要就是以上两种。
console.log(bool2); //输出结果true。因为每个元素的长度都是两个字符。
```
### some()方法
## some()方法
`some()`对数组中每一项运行回调函数只要有一项返回true则停止遍历此方法返回true
@ -860,9 +860,8 @@ map的应用场景主要就是以上两种。
console.log('sumValue:' + sumValue); // 打印结果18
```
## 数组的其他方法
### indexOf() lastIndexOf()获取数据的索引
## indexOf() lastIndexOf()获取数据的索引
**语法**
@ -912,7 +911,7 @@ map的应用场景主要就是以上两种。
```
### find()
## find()
**语法**
@ -936,7 +935,7 @@ map的应用场景主要就是以上两种。
console.log(result); //打印结果5
```
### findIndex()
## findIndex()
**语法**
@ -961,7 +960,7 @@ map的应用场景主要就是以上两种。
```
### Array.from()
## Array.from()
**语法**
@ -1030,9 +1029,8 @@ array = Array.from(arrayLike)
console.log(arr);
```
## 其他
### isArray()判断是否为数组
## isArray()判断是否为数组
```javascript
布尔值 = Array.isArray(被检测的值) ;
@ -1041,7 +1039,7 @@ array = Array.from(arrayLike)
以前我们会通过 `A instanceof B`来判断 A 是否属于 B 类型但是在数组里这种 instanceof 方法已经用的不多了因为有下面isArray()方法
### toString()转换数组
## toString()转换数组
```javascript
字符串 = 数组.toString();
@ -1049,7 +1047,7 @@ array = Array.from(arrayLike)
解释把数组转换成字符串每一项用`,`分割
### valueOf()返回数组本身
## valueOf()返回数组本身
```javascript
数组本身 = 数组.valueOf();

View File

@ -374,7 +374,7 @@ function sum(a, b) {
}
```
return 的作用是结束方法
return 的作用是结束方法终止函数
注意

View File

@ -1,91 +0,0 @@
## 包装类
### 包装类的介绍
我们都知道js中的数据类型包括以下几种
- 基本数据类型StringNumberBooleanNullUndefined
- 引用数据类型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)