add: 模板字面量

This commit is contained in:
qianguyihao 2020-06-06 23:50:36 +08:00
parent 956b6850ad
commit 03a3841ab0
9 changed files with 130 additions and 67 deletions

View File

@ -20,7 +20,6 @@
- `™`商标`` - `™`商标``
- `绐`文字``其实`#32464`是汉字``的unicode编码 - `绐`文字``其实`#32464`是汉字``的unicode编码
要求背诵的特殊字符有` ``<``>``©`
比如说你想把`<p>`作为一个文本在页面上显示直接写`<p>`是肯定不行的因为这代表的是一个段落标签所以这里需要用到**转义字符**应该这么写 比如说你想把`<p>`作为一个文本在页面上显示直接写`<p>`是肯定不行的因为这代表的是一个段落标签所以这里需要用到**转义字符**应该这么写
```html ```html

View File

@ -56,9 +56,9 @@ var str = 'hello"; // 报错Uncaught SyntaxError: Invalid or unexpected toke
在字符串中我们可以使用`\`作为转义字符,当表示一些特殊符号时可以使用`\`进行转义。 在字符串中我们可以使用`\`作为转义字符,当表示一些特殊符号时可以使用`\`进行转义。
- `\"` 表示 `"` - `\"` 表示 `"` 双引号
- `\'` 表示 `'` - `\'` 表示 `'` 单引号
- `\\` 表示`\` - `\\` 表示`\`
@ -164,6 +164,44 @@ console.log(str6);
千古壹号[object Object] 千古壹号[object Object]
``` ```
## 模板字面量模板字符串
ES6中引入了**模板字面量**让我们省去了字符串拼接的烦恼
### 在模板字符串中插入变量
举例
```js
let name = 'qianguyihao';
// 下面这一行是模板字面量,注意语法格式
console.log(`我是${name}`); // 打印结果:我是 qianguyihao
```
### 在模板字面量中插入表达式
在字符串中插入表达式以往的写法必须是这样的
```js
const a = 5;
const b = 10;
console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
```
现在通过模板字面量我们可以使用一种更优雅的方式来表示
```js
const a = 5;
const b = 10;
console.log(`this is ${a + b} and
not ${2 * a + b}.`);
```
## 数值型Number ## 数值型Number

View File

@ -47,13 +47,22 @@ typeof 这个运算符的返回结果就是变量的类型。那返回结果的
**返回结果举例** **返回结果举例**
```javascript ```javascript
console.log(type []); // 空数组的打印结果object console.log(typeof []); // 空数组的打印结果object
console.log(type {}); // 空对象的打印结果object console.log(typeof {}); // 空对象的打印结果object
``` ```
代码解释这里的空数组`[]`空对象`{}` 为啥他们在使用 typeof 返回值也是 `object`因为这里的 返回结果`object`指的是**引用数据类型**空数组空对象都是**引用数据类型 Object** 代码解释这里的空数组`[]`空对象`{}` 为啥他们在使用 typeof 返回值也是 `object`因为这里的 返回结果`object`指的是**引用数据类型**空数组空对象都是**引用数据类型 Object**
typeof 无法区分数组 instanceof 可以比如
```js
console.log([] instanceof Array); // 打印结果true
console.log({} instanceof Array); // 打印结果false
```
关于 instanceof 的详细内容以后讲对象的时候会详细介绍
## 变量的类型转换的分类 ## 变量的类型转换的分类

View File

@ -1,60 +1,57 @@
## 包装类的介绍 ## 包装类的介绍
我们都知道js中的数据类型包括以下几种 我们都知道js 中的数据类型包括以下几种
- 基本数据类型StringNumberBooleanNullUndefined - 基本数据类型StringNumberBooleanNullUndefined
- 引用数据类型Object - 引用数据类型Object
JS为我们提供了**三个包装类** JS 为我们提供了**三个包装类**
- String()将基本数据类型字符串转换为String对象 - String()将基本数据类型字符串转换为 String 对象
- Number()将基本数据类型的数字转换为Number对象 - Number()将基本数据类型的数字转换为 Number 对象
- Boolean()将基本数据类型的布尔值转换为Boolean对象 - Boolean()将基本数据类型的布尔值转换为 Boolean 对象
通过上面这这三个包装类我们可以**将基本数据类型的数据转换为对象** 通过上面这这三个包装类我们可以**将基本数据类型的数据转换为对象**
代码举例 代码举例
```javascript ```javascript
var num = new Number(3); let str1 = 'qianguyihao';
let str2 = new String('qianguyihao');
var str = new String("hello"); let num = new Number(3);
var bool = new Boolean(true); let bool = new Boolean(true);
console.log(typeof num); // 打印结果object console.log(typeof str1); // 打印结果string
console.log(typeof str2); // 注意打印结果object
``` ```
**需要注意的是**我们在实际应用中不会使用基本数据类型的对象如果使用基本数据类型的对象在做一些比较时可能会带来一些**不可预期**的结果 **需要注意的是**我们在实际应用中不会使用基本数据类型的对象如果使用基本数据类型的对象在做一些比较时可能会带来一些**不可预期**的结果
比如说 比如说
```javascript ```javascript
var boo1 = new Boolean(true); var boo1 = new Boolean(true);
var boo2 = new Boolean(true); var boo2 = new Boolean(true);
console.log(boo1 === boo2); // 打印结果竟然是false console.log(boo1 === boo2); // 打印结果竟然是false
``` ```
再比如说 再比如说
```javascript ```javascript
var boo3 = new Boolean(false); var boo3 = new Boolean(false);
if (boo3) { if (boo3) {
console.log('qianguyihao'); // 这行代码竟然执行了 console.log('qianguyihao'); // 这行代码竟然执行了
} }
``` ```
显然使用 typeof 去检查类型时
## 基本数据类型不能绑定属性和方法 ## 基本数据类型不能绑定属性和方法
@ -65,40 +62,40 @@ if (boo3) {
注意基本数据类型`string`**无法绑定属性和方法**比如说 注意基本数据类型`string`**无法绑定属性和方法**比如说
```javascript ```javascript
var str = "qianguyihao"; var str = 'qianguyihao';
str.aaa = 12; str.aaa = 12;
console.log(typeof str); //打印结果为string console.log(typeof str); //打印结果为string
console.log(str.aaa); //打印结果为undefined console.log(str.aaa); //打印结果为undefined
``` ```
上方代码中当我们尝试打印`str.aaa`的时候会发现打印结果为undefined也就是说不能给 `string` 绑定属性和方法 上方代码中当我们尝试打印`str.aaa`的时候会发现打印结果为undefined也就是说不能给 `string` 绑定属性和方法
当然我们可以打印str.lengthstr.indexOf("m")等等因为这两个方法的底层做了数据类型转换**临时** `string` 字符串转换为 `String` 对象然后再调用内置方法也就是我们在上一篇文章中讲到的**包装类** 当然我们可以打印 str.lengthstr.indexOf("m")等等因为这两个方法的底层做了数据类型转换**临时** `string` 字符串转换为 `String` 对象然后再调用内置方法也就是我们在上一篇文章中讲到的**包装类**
**2引用数据类型** **2引用数据类型**
引用数据类型`String`是可以绑定属性和方法的如下 引用数据类型`String`是可以绑定属性和方法的如下
```javascript ```javascript
var strObj = new String("smyhvae"); var strObj = new String('smyhvae');
strObj.aaa = 123; strObj.aaa = 123;
console.log(strObj); console.log(strObj);
console.log(typeof strObj); //打印结果Object console.log(typeof strObj); //打印结果Object
console.log(strObj.aaa); console.log(strObj.aaa);
``` ```
打印结果 打印结果
![](http://img.smyhvae.com/20180202_1351.png) ![](http://img.smyhvae.com/20180202_1351.png)
内置对象Number也有一些自带的方法比如 内置对象 Number 也有一些自带的方法比如
- Number.MAX_VALUE; - Number.MAX_VALUE;
- Number.MIN_VALUE; - Number.MIN_VALUE;
内置对象Boolean也有一些自带的方法但是用的不多 内置对象 Boolean 也有一些自带的方法但是用的不多
## 基本包装类型重要 ## 基本包装类型重要
@ -109,7 +106,6 @@ if (boo3) {
```js ```js
var str = 'qianguyihao'; var str = 'qianguyihao';
console.log(str.length); // 打印结果11 console.log(str.length); // 打印结果11
``` ```
比如上面的代码执行顺序是这样的 比如上面的代码执行顺序是这样的
@ -131,19 +127,15 @@ temp = null;
在底层字符串是以字符数组的形式保存的代码举例 在底层字符串是以字符数组的形式保存的代码举例
```javascript ```javascript
var str = "smyhvae"; var str = 'smyhvae';
console.log(str.length); // 获取字符串的长度 console.log(str.length); // 获取字符串的长度
console.log(str[2]); // 获取字符串中的第2个字符 console.log(str[2]); // 获取字符串中的第2个字符
``` ```
上方代码中`smyhvae`这个字符串在底层是以`["s", "m", "y", "h", "v", "a", "e"]`的形式保存的因此我们既可以获取字符串的长度也可以获取指定索引index位置的单个字符这很像数组中的操作 上方代码中`smyhvae`这个字符串在底层是以`["s", "m", "y", "h", "v", "a", "e"]`的形式保存的因此我们既可以获取字符串的长度也可以获取指定索引 index 位置的单个字符这很像数组中的操作
再比如String 对象的很多内置方法也可以直接给字符串用此时也是临时将字符串转换为 String 对象然后再调用内置方法 再比如String 对象的很多内置方法也可以直接给字符串用此时也是临时将字符串转换为 String 对象然后再调用内置方法
## 我的公众号 ## 我的公众号
想学习**代码之外的技能**不妨关注我的微信公众号**千古壹号**id`qianguyihao` 想学习**代码之外的技能**不妨关注我的微信公众号**千古壹号**id`qianguyihao`
@ -151,7 +143,3 @@ temp = null;
扫一扫你将发现另一个全新的世界而这将是一场美丽的意外 扫一扫你将发现另一个全新的世界而这将是一场美丽的意外
![](http://img.smyhvae.com/20190101.png) ![](http://img.smyhvae.com/20190101.png)

View File

@ -150,12 +150,14 @@ if (obj.name) {
} }
``` ```
## 遍历对象for in ## 遍历对象的属性名for in
> `for in`主要用于遍历对象不建议用来遍历数组
语法 语法
```javascript ```javascript
for (var 变量 in 对象名) { for (const 变量 in 对象名) {
} }
``` ```
@ -180,9 +182,9 @@ for (var key in obj) {
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title></title> <title></title>
<script type="text/javascript"> <script type="text/javascript">
var obj = { const obj = {
name: 'smyhvae', name: 'smyhvae',
age: 26, age: 28,
gender: '男', gender: '男',
address: 'shenzhen', address: 'shenzhen',
sayHi: function () { sayHi: function () {
@ -191,9 +193,9 @@ for (var key in obj) {
}; };
// 遍历对象中的属性 // 遍历对象中的属性
for (var key in obj) { for (const key in obj) {
console.log('属性名:' + key); console.log('属性名:' + key);
console.log('属性值:' + obj[key]); // 注意,因为这里的属性名 keu 是变量,所以,如果想获取属性值,不能写成 obj.key而是要写成 obj[key] console.log('属性值:' + obj[key]); // 注意,因为这里的属性名 key 是变量,所以,如果想获取属性值,不能写成 obj.key而是要写成 obj[key]
} }
</script> </script>
</head> </head>
@ -223,3 +225,30 @@ for (var key in obj) {
} }
``` ```
### for in 遍历数组不建议
另外for in 当然也可以用来遍历数组只是不建议此时的 key 是数组的索引举例如下
```js
const arr = ['hello1', 'hello2', 'hello3'];
for (const key in arr) {
console.log('属性名:' + key);
console.log('属性值:' + arr[key]);
}
```
打印结果
```
属性名0
属性值hello1
属性名1
属性值hello2
属性名2
属性值hello3
```

View File

@ -117,9 +117,9 @@
**扩展**遍历循环对象自身的属性 **扩展**遍历循环对象自身的属性
我们知道`for ... in`循环可以遍历对象针对上面的那个fn对象它自身有两个属性`name``printName`另外从原型中找到了第三个属性`alertName`现在如果我们对fn进行遍历能遍历到两个属性还是三个属性呢 我们知道`for in`循环可以遍历对象针对上面的那个fn对象它自身有两个属性`name``printName`另外从原型中找到了第三个属性`alertName`现在如果我们对fn进行遍历能遍历到两个属性还是三个属性呢
答案两个因为**高级浏览器中已经在 `for ... in`循环中屏蔽了来自原型的属性但是为了保证代码的健壮性我们最好自己加上判断**手动将第三个属性屏蔽掉 答案两个因为**高级浏览器中已经在 `for in`循环中屏蔽了来自原型的属性但是为了保证代码的健壮性我们最好自己加上判断**手动将第三个属性屏蔽掉
```javascript ```javascript
for (var item in fn) { for (var item in fn) {

View File

@ -151,7 +151,7 @@ console.log(typeof a); //输出结果string
![](http://img.smyhvae.com/20180304_1626.png) ![](http://img.smyhvae.com/20180304_1626.png)
## for ... of 循环 ## for of 循环
ES6 如果我们要遍历一个数组可以这样做 ES6 如果我们要遍历一个数组可以这样做
@ -169,11 +169,11 @@ ES6 中,如果我们要遍历一个数组,可以这样做:
forof 的循环可以避免我们开拓内存空间增加代码运行效率所以建议大家在以后的工作中使用forof循环 forof 的循环可以避免我们开拓内存空间增加代码运行效率所以建议大家在以后的工作中使用forof循环
注意上面的数组中`for ... of`获取的是数组里的值`for ... in`获取的是index索引值 注意上面的数组中`for of`获取的是数组里的值`for in`获取的是index索引值
### Map对象的遍历 ### Map对象的遍历
`for ... of`既可以遍历数组也可以遍历Map对象 `for of`既可以遍历数组也可以遍历Map对象
## 模板字符串 ## 模板字符串

View File

@ -46,7 +46,7 @@
- 函数扩展参数默认值箭头函数扩展运算符`...` - 函数扩展参数默认值箭头函数扩展运算符`...`
- for ... of 循环 - for of 循环
- map - map

View File

@ -65,9 +65,9 @@ cookie用于存储时的缺点
- `foreach`用于遍历数组是数组的一个方法不支持 return - `foreach`用于遍历数组是数组的一个方法不支持 return
- `for ... in`获取对象里属性的键 - `for in`获取对象里属性的键
- `for ... of`获取对象里属性的值 - `for of`获取对象里属性的值