add: 模板字面量
This commit is contained in:
qianguyihao
parent
956b6850ad
commit
03a3841ab0
@ -20,7 +20,6 @@
|
||||
- `™`：商标`™`
|
||||
- `绐`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
|
||||
|
||||
要求背诵的特殊字符有：` `、`<`、`>`、`©`。
|
||||
|
||||
比如说，你想把`<p>`作为一个文本在页面上显示，直接写`<p>`是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到**转义字符**。应该这么写：
|
||||
```html
|
||||
|
||||
@ -56,9 +56,9 @@ var str = 'hello"; // 报错：Uncaught SyntaxError: Invalid or unexpected toke
|
||||
在字符串中我们可以使用`\`作为转义字符，当表示一些特殊符号时可以使用`\`进行转义。
|
||||
|
||||
|
||||
- `\"` 表示 `"`
|
||||
- `\"` 表示 `"` 双引号
|
||||
|
||||
- `\'` 表示 `'`
|
||||
- `\'` 表示 `'` 单引号
|
||||
|
||||
- `\\` 表示`\`
|
||||
|
||||
@ -164,6 +164,44 @@ console.log(str6);
|
||||
千古壹号[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
|
||||
|
||||
|
||||
@ -47,13 +47,22 @@ typeof 这个运算符的返回结果就是变量的类型。那返回结果的
|
||||
**返回结果举例**：
|
||||
|
||||
```javascript
|
||||
console.log(type []); // 空数组的打印结果：object
|
||||
console.log(typeof []); // 空数组的打印结果：object
|
||||
|
||||
console.log(type {}); // 空对象的打印结果：object
|
||||
console.log(typeof {}); // 空对象的打印结果：object
|
||||
```
|
||||
|
||||
代码解释：这里的空数组`[]`、空对象`{}` ，为啥他们在使用 typeof 时，返回值也是 `object`呢？因为这里的 返回结果`object`指的是**引用数据类型**。空数组、空对象都是**引用数据类型 Object**。
|
||||
|
||||
typeof 无法区分数组，但 instanceof 可以。比如：
|
||||
|
||||
```js
|
||||
console.log([] instanceof Array); // 打印结果：true
|
||||
|
||||
console.log({} instanceof Array); // 打印结果：false
|
||||
```
|
||||
|
||||
关于 instanceof 的详细内容，以后讲对象的时候，会详细介绍。
|
||||
|
||||
|
||||
## 变量的类型转换的分类
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
|
||||
|
||||
|
||||
## 包装类的介绍
|
||||
|
||||
我们都知道，js 中的数据类型包括以下几种。
|
||||
@ -19,20 +16,20 @@ JS为我们提供了**三个包装类**：
|
||||
|
||||
通过上面这这三个包装类，我们可以**将基本数据类型的数据转换为对象**。
|
||||
|
||||
|
||||
代码举例：
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
|
||||
**需要注意的是**：我们在实际应用中不会使用基本数据类型的对象。如果使用基本数据类型的对象，在做一些比较时可能会带来一些**不可预期**的结果。
|
||||
|
||||
比如说：
|
||||
@ -44,7 +41,6 @@ JS为我们提供了**三个包装类**：
|
||||
console.log(boo1 === boo2); // 打印结果竟然是：false
|
||||
```
|
||||
|
||||
|
||||
再比如说：
|
||||
|
||||
```javascript
|
||||
@ -55,6 +51,7 @@ if (boo3) {
|
||||
}
|
||||
```
|
||||
|
||||
显然，使用 typeof 去检查类型时，
|
||||
|
||||
## 基本数据类型不能绑定属性和方法
|
||||
|
||||
@ -65,7 +62,7 @@ if (boo3) {
|
||||
注意，基本数据类型`string`是**无法绑定属性和方法**的。比如说：
|
||||
|
||||
```javascript
|
||||
var str = "qianguyihao";
|
||||
var str = 'qianguyihao';
|
||||
|
||||
str.aaa = 12;
|
||||
console.log(typeof str); //打印结果为：string
|
||||
@ -81,7 +78,7 @@ if (boo3) {
|
||||
引用数据类型`String`是可以绑定属性和方法的。如下：
|
||||
|
||||
```javascript
|
||||
var strObj = new String("smyhvae");
|
||||
var strObj = new String('smyhvae');
|
||||
strObj.aaa = 123;
|
||||
console.log(strObj);
|
||||
console.log(typeof strObj); //打印结果：Object
|
||||
@ -109,7 +106,6 @@ if (boo3) {
|
||||
```js
|
||||
var str = 'qianguyihao';
|
||||
console.log(str.length); // 打印结果：11
|
||||
|
||||
```
|
||||
|
||||
比如，上面的代码，执行顺序是这样的：
|
||||
@ -131,19 +127,15 @@ temp = null;
|
||||
在底层，字符串是以字符数组的形式保存的。代码举例：
|
||||
|
||||
```javascript
|
||||
var str = "smyhvae";
|
||||
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`）。
|
||||
@ -151,7 +143,3 @@ temp = null;
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -150,12 +150,14 @@ if (obj.name) {
|
||||
}
|
||||
```
|
||||
|
||||
## 遍历对象：for in
|
||||
## 遍历对象的属性名：for in
|
||||
|
||||
> `for in`主要用于遍历对象，不建议用来遍历数组。
|
||||
|
||||
语法：
|
||||
|
||||
```javascript
|
||||
for (var 变量 in 对象名) {
|
||||
for (const 变量 in 对象名) {
|
||||
|
||||
}
|
||||
```
|
||||
@ -180,9 +182,9 @@ for (var key in obj) {
|
||||
<meta charset="UTF-8" />
|
||||
<title></title>
|
||||
<script type="text/javascript">
|
||||
var obj = {
|
||||
const obj = {
|
||||
name: 'smyhvae',
|
||||
age: 26,
|
||||
age: 28,
|
||||
gender: '男',
|
||||
address: 'shenzhen',
|
||||
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('属性值:' + obj[key]); // 注意，因为这里的属性名 keu 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
|
||||
console.log('属性值:' + obj[key]); // 注意，因为这里的属性名 key 是变量，所以，如果想获取属性值，不能写成 obj.key，而是要写成 obj[key]
|
||||
}
|
||||
</script>
|
||||
</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
|
||||
for (var item in fn) {
|
||||
|
||||
@ -151,7 +151,7 @@ console.log(typeof a); //输出结果：string
|
||||
|
||||
|
||||
|
||||
## for ... of 循环
|
||||
## for of 循环
|
||||
|
||||
ES6 中，如果我们要遍历一个数组，可以这样做：
|
||||
|
||||
@ -169,11 +169,11 @@ ES6 中，如果我们要遍历一个数组，可以这样做：
|
||||
|
||||
for…of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。
|
||||
|
||||
注意，上面的数组中，`for ... of`获取的是数组里的值；`for ... in`获取的是index索引值。
|
||||
注意，上面的数组中，`for of`获取的是数组里的值；`for in`获取的是index索引值。
|
||||
|
||||
### Map对象的遍历
|
||||
|
||||
`for ... of`既可以遍历数组，也可以遍历Map对象。
|
||||
`for of`既可以遍历数组，也可以遍历Map对象。
|
||||
|
||||
## 模板字符串
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
- 函数扩展：参数默认值、箭头函数、扩展运算符`...`
|
||||
|
||||
- for ... of 循环
|
||||
- for of 循环
|
||||
|
||||
- map
|
||||
|
||||
|
||||
@ -65,9 +65,9 @@ cookie用于存储时的缺点：
|
||||
|
||||
- `foreach`用于遍历数组，是数组的一个方法。不支持 return。
|
||||
|
||||
- `for ... in`获取对象里属性的键。
|
||||
- `for in`获取对象里属性的键。
|
||||
|
||||
- `for ... of`获取对象里属性的值。
|
||||
- `for of`获取对象里属性的值。
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user