add: 模板字面量
This commit is contained in:
parent
956b6850ad
commit
03a3841ab0
@ -20,7 +20,6 @@
|
|||||||
- `™`:商标`™`
|
- `™`:商标`™`
|
||||||
- `绐`:文字`绐`。其实,`#32464`是汉字`绐`的unicode编码。
|
- `绐`:文字`绐`。其实,`#32464`是汉字`绐`的unicode编码。
|
||||||
|
|
||||||
要求背诵的特殊字符有:` `、`<`、`>`、`©`。
|
|
||||||
|
|
||||||
比如说,你想把`<p>`作为一个文本在页面上显示,直接写`<p>`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到**转义字符**。应该这么写:
|
比如说,你想把`<p>`作为一个文本在页面上显示,直接写`<p>`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到**转义字符**。应该这么写:
|
||||||
```html
|
```html
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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 的详细内容,以后讲对象的时候,会详细介绍。
|
||||||
|
|
||||||
|
|
||||||
## 变量的类型转换的分类
|
## 变量的类型转换的分类
|
||||||
|
@ -1,50 +1,46 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 包装类的介绍
|
## 包装类的介绍
|
||||||
|
|
||||||
我们都知道,js中的数据类型包括以下几种。
|
我们都知道,js 中的数据类型包括以下几种。
|
||||||
|
|
||||||
- 基本数据类型:String、Number、Boolean、Null、Undefined
|
- 基本数据类型:String、Number、Boolean、Null、Undefined
|
||||||
|
|
||||||
- 引用数据类型: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
|
||||||
@ -55,6 +51,7 @@ if (boo3) {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
显然,使用 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.length、str.indexOf("m")等等。因为这两个方法的底层做了数据类型转换(**临时**将 `string` 字符串转换为 `String` 对象,然后再调用内置方法),也就是我们在上一篇文章中讲到的**包装类**。
|
当然,我们可以打印 str.length、str.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)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
@ -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) {
|
||||||
|
@ -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 中,如果我们要遍历一个数组,可以这样做:
|
|||||||
|
|
||||||
for…of 的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用for…of循环。
|
for…of 的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用for…of循环。
|
||||||
|
|
||||||
注意,上面的数组中,`for ... of`获取的是数组里的值;`for ... in`获取的是index索引值。
|
注意,上面的数组中,`for of`获取的是数组里的值;`for in`获取的是index索引值。
|
||||||
|
|
||||||
### Map对象的遍历
|
### Map对象的遍历
|
||||||
|
|
||||||
`for ... of`既可以遍历数组,也可以遍历Map对象。
|
`for of`既可以遍历数组,也可以遍历Map对象。
|
||||||
|
|
||||||
## 模板字符串
|
## 模板字符串
|
||||||
|
|
||||||
|
@ -46,7 +46,7 @@
|
|||||||
|
|
||||||
- 函数扩展:参数默认值、箭头函数、扩展运算符`...`
|
- 函数扩展:参数默认值、箭头函数、扩展运算符`...`
|
||||||
|
|
||||||
- for ... of 循环
|
- for of 循环
|
||||||
|
|
||||||
- map
|
- map
|
||||||
|
|
||||||
|
@ -65,9 +65,9 @@ cookie用于存储时的缺点:
|
|||||||
|
|
||||||
- `foreach`用于遍历数组,是数组的一个方法。不支持 return。
|
- `foreach`用于遍历数组,是数组的一个方法。不支持 return。
|
||||||
|
|
||||||
- `for ... in`获取对象里属性的键。
|
- `for in`获取对象里属性的键。
|
||||||
|
|
||||||
- `for ... of`获取对象里属性的值。
|
- `for of`获取对象里属性的值。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user