From 03a3841ab0a7c9ad98df4fc430177686f000faaa Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sat, 6 Jun 2020 23:50:36 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E6=A8=A1=E6=9D=BF=E5=AD=97=E9=9D=A2?= =?UTF-8?q?=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-HTML/05-HTML标签：字体标签和超链接.md | 1 - ...4-基本数据类型：String & Number & Boolean.md | 42 +++++++++- 04-JavaScript基础/06-typeof和数据类型转换.md | 13 ++- 04-JavaScript基础/11-包装类.md | 84 ++++++++----------- 04-JavaScript基础/24-对象的基本操作.md | 41 +++++++-- 04-JavaScript基础/原型链.md | 4 +- .../05-ES6：变量的解构赋值.md | 6 +- .../02-面试题积累/面试技巧 by 千古壹号.md | 2 +- .../02-面试题积累/面试题整理 by 千古壹号.md | 4 +- 9 files changed, 130 insertions(+), 67 deletions(-) diff --git a/01-HTML/05-HTML标签：字体标签和超链接.md b/01-HTML/05-HTML标签：字体标签和超链接.md index b70cd22..0135a04 100644 --- a/01-HTML/05-HTML标签：字体标签和超链接.md +++ b/01-HTML/05-HTML标签：字体标签和超链接.md @@ -20,7 +20,6 @@ - `™`：商标`™` - `绐`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。 -要求背诵的特殊字符有：` `、`<`、`>`、`©`。 比如说，你想把`

`作为一个文本在页面上显示，直接写`

`是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到**转义字符**。应该这么写： ```html diff --git a/04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md b/04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md index 6100b62..6b96379 100644 --- a/04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md +++ b/04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md @@ -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 diff --git a/04-JavaScript基础/06-typeof和数据类型转换.md b/04-JavaScript基础/06-typeof和数据类型转换.md index f6c7829..d3f38d8 100644 --- a/04-JavaScript基础/06-typeof和数据类型转换.md +++ b/04-JavaScript基础/06-typeof和数据类型转换.md @@ -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 的详细内容，以后讲对象的时候，会详细介绍。 ## 变量的类型转换的分类 diff --git a/04-JavaScript基础/11-包装类.md b/04-JavaScript基础/11-包装类.md index c3997ea..cbf0195 100644 --- a/04-JavaScript基础/11-包装类.md +++ b/04-JavaScript基础/11-包装类.md @@ -1,60 +1,57 @@ - - - ## 包装类的介绍 -我们都知道，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 - 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 - var boo1 = new Boolean(true); - var boo2 = new Boolean(true); +var boo1 = new Boolean(true); +var boo2 = new Boolean(true); - console.log(boo1 === boo2); // 打印结果竟然是：false +console.log(boo1 === boo2); // 打印结果竟然是：false ``` - 再比如说： ```javascript var boo3 = new Boolean(false); if (boo3) { - console.log('qianguyihao'); // 这行代码竟然执行了 + console.log('qianguyihao'); // 这行代码竟然执行了 } ``` +显然，使用 typeof 去检查类型时， ## 基本数据类型不能绑定属性和方法 @@ -65,40 +62,40 @@ if (boo3) { 注意，基本数据类型`string`是**无法绑定属性和方法**的。比如说： ```javascript - var str = "qianguyihao"; +var str = 'qianguyihao'; - str.aaa = 12; - console.log(typeof str); //打印结果为：string - console.log(str.aaa); //打印结果为：undefined +str.aaa = 12; +console.log(typeof str); //打印结果为：string +console.log(str.aaa); //打印结果为：undefined ``` 上方代码中，当我们尝试打印`str.aaa`的时候，会发现打印结果为：undefined。也就是说，不能给 `string` 绑定属性和方法。 -当然，我们可以打印str.length、str.indexOf("m")等等。因为这两个方法的底层做了数据类型转换（**临时**将 `string` 字符串转换为 `String` 对象，然后再调用内置方法），也就是我们在上一篇文章中讲到的**包装类**。 +当然，我们可以打印 str.length、str.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); +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 也有一些自带的方法，比如： -- Number.MAX_VALUE; +- Number.MAX_VALUE; -- Number.MIN_VALUE; +- Number.MIN_VALUE; -内置对象Boolean也有一些自带的方法，但是用的不多。 +内置对象 Boolean 也有一些自带的方法，但是用的不多。 ## 基本包装类型【重要】 @@ -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"; - console.log(str.length); // 获取字符串的长度 - console.log(str[2]); // 获取字符串中的第2个字符 +var str = 'smyhvae'; +console.log(str.length); // 获取字符串的长度 +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 对象，然后再调用内置方法。 - - ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 @@ -151,7 +143,3 @@ temp = null; 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： ![](http://img.smyhvae.com/20190101.png) - - - - diff --git a/04-JavaScript基础/24-对象的基本操作.md b/04-JavaScript基础/24-对象的基本操作.md index 7afa70e..f32d912 100644 --- a/04-JavaScript基础/24-对象的基本操作.md +++ b/04-JavaScript基础/24-对象的基本操作.md @@ -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) { @@ -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 +``` + + diff --git a/04-JavaScript基础/原型链.md b/04-JavaScript基础/原型链.md index f3508c3..e8337c6 100644 --- a/04-JavaScript基础/原型链.md +++ b/04-JavaScript基础/原型链.md @@ -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) { diff --git a/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md b/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md index 98607d8..232f5be 100644 --- a/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md +++ b/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md @@ -151,7 +151,7 @@ console.log(typeof a); //输出结果：string ![](http://img.smyhvae.com/20180304_1626.png) -## 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对象。 ## 模板字符串 diff --git a/13-前端面试/02-面试题积累/面试技巧 by 千古壹号.md b/13-前端面试/02-面试题积累/面试技巧 by 千古壹号.md index 53996a7..0644d7c 100644 --- a/13-前端面试/02-面试题积累/面试技巧 by 千古壹号.md +++ b/13-前端面试/02-面试题积累/面试技巧 by 千古壹号.md @@ -46,7 +46,7 @@ - 函数扩展：参数默认值、箭头函数、扩展运算符`...` -- for ... of 循环 +- for of 循环 - map diff --git a/13-前端面试/02-面试题积累/面试题整理 by 千古壹号.md b/13-前端面试/02-面试题积累/面试题整理 by 千古壹号.md index 38557b2..e4edb7a 100644 --- a/13-前端面试/02-面试题积累/面试题整理 by 千古壹号.md +++ b/13-前端面试/02-面试题积累/面试题整理 by 千古壹号.md @@ -65,9 +65,9 @@ cookie用于存储时的缺点： - `foreach`用于遍历数组，是数组的一个方法。不支持 return。 -- `for ... in`获取对象里属性的键。 +- `for in`获取对象里属性的键。 -- `for ... of`获取对象里属性的值。 +- `for of`获取对象里属性的值。