Web/04-JavaScript基础/12-基本包装类型.md

157 lines
4.5 KiB
JavaScript
Raw Normal View History

---
title: 12-基本包装类型
publish: true
---
<ArticleTopAd></ArticleTopAd>
2020-06-11 21:20:56 +08:00
## 基本数据类型不能绑定属性和方法
属性和方法只能添加给对象不能添加给基本数据类型
**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 也有一些自带的方法但是用的不多
### 基本包装类型
### 介绍
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
我们都知道js 中的数据类型包括以下几种
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
- 基本数据类型StringNumberBooleanNullUndefined
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
- 引用数据类型Object
2020-05-14 22:17:35 +08:00
2021-03-18 19:42:10 +08:00
JS 为我们提供了三个**基本包装类**
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
- String()将基本数据类型字符串转换为 String 对象
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
- Number()将基本数据类型的数字转换为 Number 对象
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
- Boolean()将基本数据类型的布尔值转换为 Boolean 对象
2020-05-14 22:17:35 +08:00
通过上面这这三个包装类我们可以**将基本数据类型的数据转换为对象**
代码举例
```javascript
2020-06-06 23:50:36 +08:00
let str1 = 'qianguyihao';
let str2 = new String('qianguyihao');
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
let num = new Number(3);
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
let bool = new Boolean(true);
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
console.log(typeof str1); // 打印结果string
console.log(typeof str2); // 注意打印结果object
2020-05-14 22:17:35 +08:00
```
2020-06-11 21:20:56 +08:00
**需要注意的是**我们在实际应用中一般不会使用基本数据类型的对象如果使用基本数据类型的对象在做一些比较时可能会带来一些**不可预期**的结果
2020-05-14 22:17:35 +08:00
比如说
```javascript
2020-06-06 23:50:36 +08:00
var boo1 = new Boolean(true);
var boo2 = new Boolean(true);
2020-05-14 22:17:35 +08:00
2020-06-06 23:50:36 +08:00
console.log(boo1 === boo2); // 打印结果竟然是false
2020-05-14 22:17:35 +08:00
```
再比如说
```javascript
var boo3 = new Boolean(false);
if (boo3) {
2020-06-06 23:50:36 +08:00
console.log('qianguyihao'); // 这行代码竟然执行了
2020-05-14 22:17:35 +08:00
}
```
2020-06-11 21:20:56 +08:00
### 基本包装类型的作用
2020-05-14 22:17:35 +08:00
当我们对一些基本数据类型的值去调用属性和方法时浏览器会**临时使用包装类将基本数据类型转换为引用数据类型**这样的话基本数据类型就有了属性和方法然后再调用对象的属性和方法调用完以后再将其转换为基本数据类型
举例
```js
var str = 'qianguyihao';
console.log(str.length); // 打印结果11
```
比如上面的代码执行顺序是这样的
```js
// 步骤1把简单数据类型 string 转换为 引用数据类型 String保存到临时变量中
2020-06-11 21:20:56 +08:00
var temp = new String('qianguyihao');
2020-05-14 22:17:35 +08:00
// 步骤2把临时变量的值 赋值给 str
str = temp;
// 步骤3销毁临时变量
temp = null;
```
2020-06-11 21:20:56 +08:00
## 在底层字符串以字符数组的形式保存
2020-05-14 22:17:35 +08:00
在底层字符串是以字符数组的形式保存的代码举例
```javascript
2020-06-06 23:50:36 +08:00
var str = 'smyhvae';
console.log(str.length); // 获取字符串的长度
console.log(str[2]); // 获取字符串中的第2个字符
2020-05-14 22:17:35 +08:00
```
2020-06-06 23:50:36 +08:00
上方代码中`smyhvae`这个字符串在底层是以`["s", "m", "y", "h", "v", "a", "e"]`的形式保存的因此我们既可以获取字符串的长度也可以获取指定索引 index 位置的单个字符这很像数组中的操作
2020-05-14 22:17:35 +08:00
再比如String 对象的很多内置方法也可以直接给字符串用此时也是临时将字符串转换为 String 对象然后再调用内置方法
## 我的公众号
2021-05-24 12:43:12 +08:00
想学习**更多技能**不妨关注我的微信公众号**千古壹号**id`qianguyihao`
2020-05-14 22:17:35 +08:00
扫一扫你将发现另一个全新的世界而这将是一场美丽的意外
![](http://img.smyhvae.com/20190101.png)