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的指向有关。