From ea62903be5443a1229e19eb317f535b360a1b806 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 13 Jul 2020 21:07:43 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E8=A7=A3=E6=9E=84=E8=B5=8B=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../04-基本数据类型：String 和 Boolean.md | 34 ++++++-- 04-JavaScript基础/27-对象的基本操作.md | 37 ++++++++- .../05-ES6：变量的解构赋值.md | 77 ++++++------------- .../{06-ES6：函数扩展.md => 06-ES6：箭头函数.md} | 21 ++++- 4 files changed, 102 insertions(+), 67 deletions(-) rename 05-JavaScript之ES6语法/{06-ES6：函数扩展.md => 06-ES6：箭头函数.md} (98%) diff --git a/04-JavaScript基础/04-基本数据类型：String 和 Boolean.md b/04-JavaScript基础/04-基本数据类型：String 和 Boolean.md index ac418ab..27a236d 100644 --- a/04-JavaScript基础/04-基本数据类型：String 和 Boolean.md +++ b/04-JavaScript基础/04-基本数据类型：String 和 Boolean.md @@ -187,25 +187,43 @@ ES6中引入了**模板字面量**，让我们省去了字符串拼接的烦恼 ### 在模板字符串中插入变量 -举例： +以前，让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接） -```js -let name = 'qianguyihao'; - -// 下面这一行是模板字面量，注意语法格式 -console.log(`我是${name}`); // 打印结果：我是 qianguyihao +```javascript +var name = 'smyhvae'; +var age = '26'; +console.log('name:' + name + ',age:' + age); //传统写法 ``` +这种写法，比较繁琐，而且容易出错。 + +现在，有了 ES6 语法，字符串拼接可以这样写： + +```javascript +var name = 'qianguyihao'; +var age = '26'; + +console.log('我是' + name + ',age:' + age); //传统写法 + +console.log(`我是${name},age:${age}`); //ES6 写法。注意语法格式 +``` + +**注意**，上方代码中，倒数第二行用的符号是单引号，最后一行用的符号是反引号（在 tab 键的上方）。 + +参考链接： + +- [ES6 的 rest 参数和扩展运算符](https://segmentfault.com/a/1190000010222698) + ### 在模板字面量中插入表达式 -在字符串中插入表达式，以往的写法必须是这样的： +以前，在字符串中插入表达式的写法必须是这样的： ```js const a = 5; const b = 10; console.log('this is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); ``` -现在通过模板字面量，我们可以使用一种更优雅的方式来表示： +现在，通过模板字面量，我们可以使用一种更优雅的方式来表示： ```js const a = 5; diff --git a/04-JavaScript基础/27-对象的基本操作.md b/04-JavaScript基础/27-对象的基本操作.md index f32d912..26e0143 100644 --- a/04-JavaScript基础/27-对象的基本操作.md +++ b/04-JavaScript基础/27-对象的基本操作.md @@ -150,9 +150,42 @@ if (obj.name) { } ``` -## 遍历对象的属性名：for in +## for of：遍历数组 -> `for in`主要用于遍历对象，不建议用来遍历数组。 + +ES6 中，如果我们要遍历一个数组，可以这样做： + +```js +let arr1 = [2, 6, 8, 5]; + +for (let value of arr1) { + console.log(value); +} +``` + +打印结果： + + +``` +2 +6 +8 +5 +``` + + +for ... of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用 for…of 遍历数组。 + +注意，上面的数组中，`for ... of`获取的是数组里的值；如果采用`for ... in`遍历数组，则获取的是 index 索引值。 + +### Map 对象的遍历 + +`for ... of`既可以遍历数组，也可以遍历 Map 对象。 + + +## for in：遍历对象的属性名 + +> `for ... in`主要用于遍历对象，不建议用来遍历数组。 语法： diff --git a/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md b/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md index 87dce19..e139f73 100644 --- a/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md +++ b/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md @@ -36,13 +36,13 @@ var c = arr[2]; let [a, b, c] = [1, 2, 3]; ``` -二者的效果是一样的。 +二者的效果是一样的，但明显后者的代码更简洁优雅。 ### 未匹配到的情况 数据的结构赋值，是根据位置进行一一对应来赋值的。可如果左边的数量大于右边的数量时（也就是变量的数量大于值的数量时），多余的变量要怎么处理呢？ -- 如果变量在一一对应时，没有找到对应的值，那么，**多余的变量会被赋值为 undefined**。 +答案是：如果变量在一一对应时，没有找到对应的值，那么，**多余的变量会被赋值为 undefined**。 ### 解构时，左边允许有默认值 @@ -111,18 +111,27 @@ var sex = json.sex; 现在，有了 ES6 之后，我们可以使用对象解构的方式进行赋值。举例如下： ```js -const person = { name: 'qianguyihao', age: 28 }; -let { name, age } = person; // 对象的结构赋值 +const person = { name: 'qianguyihao', age: 28, sex: '男' }; +let { name, age, sex } = person; // 对象的结构赋值 console.log(name); // 打印结果：qianguyihao console.log(age); // 打印结果：28 +console.log(sex); // 打印结果：男 ``` 上方代码可以看出，对象的解构与数组的结构，有一个重要的区别：**数组**的元素是按次序排列的，变量的取值由它的**位置**决定；而**对象的属性没有次序**，是**根据键来取值**的。 + +### 未匹配到的情况 + +对象的结构赋值，是根据属性名进行一一对应来赋值的。可如果左边的数量大于右边的数量时（也就是变量的数量大于值的数量时），多余的变量要怎么处理呢？ + +答案是：如果变量在一一对应时，没有找到对应的值，那么，**多余的变量会被赋值为 undefined**。 + + ### 给左边的变量自定义命名 -对象的结构赋值里，左边的变量名一定要跟右边的变量名保持一致么？答案是不一定。我们可以单独给左边的变量自定义命名呢？ +对象的结构赋值里，左边的变量名一定要跟右边的属性名保持一致么？答案是不一定。我们可以单独给左边的变量自定义命名。 举例如下： @@ -171,68 +180,30 @@ console.log(foo); //输出结果：smyhvae 字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下： ```javascript -const [a, b, c, d] = 'smyhvae'; +const [a, b, c, d] = 'hello'; console.log(a); console.log(b); console.log(c); -console.log(d); console.log(typeof a); //输出结果：string ``` -输出结果： - -![](http://img.smyhvae.com/20180304_1626.png) - -## for of 循环 - -ES6 中，如果我们要遍历一个数组，可以这样做： +打印结果： ``` - let arr1 = [1, 2, 3, 4, 5]; - - for (let value of arr1) { - console.log(value); - } +h +e +l +string ``` -输出结果： -![](http://img.smyhvae.com/20180304_2016.png) -for…of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用 for…of 循环。 +## 我的公众号 -注意，上面的数组中，`for of`获取的是数组里的值；`for in`获取的是 index 索引值。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。 -### Map 对象的遍历 +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -`for of`既可以遍历数组，也可以遍历 Map 对象。 +![](http://img.smyhvae.com/20200101.png) -## 模板字符串 - -我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接） - -```javascript -var name = 'smyhvae'; -var age = '26'; -console.log('name:' + name + ',age:' + age); //传统写法 -``` - -这种写法，比较繁琐，而且容易出错。 - -现在有了 ES6 语法，字符串拼接可以这样写： - -```javascript -var name = 'smyhvae'; -var age = '26'; - -console.log('name:' + name + ',age:' + age); //传统写法 - -console.log(`name:${name},age:${age}`); //ES6 写法 -``` - -**注意**，上方代码中，倒数第二行用的符号是单引号，最后一行用的符号是反引号（在 tab 键的上方）。 - -参考链接： - -- [ES6 的 rest 参数和扩展运算符](https://segmentfault.com/a/1190000010222698) diff --git a/05-JavaScript之ES6语法/06-ES6：函数扩展.md b/05-JavaScript之ES6语法/06-ES6：箭头函数.md similarity index 98% rename from 05-JavaScript之ES6语法/06-ES6：函数扩展.md rename to 05-JavaScript之ES6语法/06-ES6：箭头函数.md index a786e76..4a4f72c 100644 --- a/05-JavaScript之ES6语法/06-ES6：函数扩展.md +++ b/05-JavaScript之ES6语法/06-ES6：箭头函数.md @@ -19,6 +19,23 @@ ES6在**函数扩展**方面，新增了很多特性。例如： ## 箭头函数 +### 定义箭头函数的语法 + +语法： + +```js +(参数1, 参数2 ...) => { 方法体 } +``` + +解释： + +- 如果有且仅有1个参数，则`()`可以省略 + +- 如果方法体内有且仅有1条语句，则`{}`可以省略，但前提是，这条语句必须是 return。 + + +### 举例 + 定义和调用函数：（传统写法） ```javascript @@ -56,10 +73,6 @@ console.log(fn1(1, 2)); //输出结果：3 上方代码中： -- 如果有且仅有1个参数，则`()`可以省略 - -- 如果方法体内有且仅有1条语句，则`{}`可以省略，但前提是，这条语句必须是 return。 - ### this的指向 > 箭头函数只是为了让函数写起来更优雅吗？当然不是，还有一个很大的作用是与this的指向有关。