diff --git a/09-ES6/01-ES5中的严格模式.md b/05-JavaScript之ES6语法/01-ES5中的严格模式.md similarity index 100% rename from 09-ES6/01-ES5中的严格模式.md rename to 05-JavaScript之ES6语法/01-ES5中的严格模式.md diff --git a/09-ES6/02-ES5中的一些扩展.md b/05-JavaScript之ES6语法/02-ES5中的一些扩展.md similarity index 100% rename from 09-ES6/02-ES5中的一些扩展.md rename to 05-JavaScript之ES6语法/02-ES5中的一些扩展.md diff --git a/09-ES6/03-ES6的介绍和环境配置.md b/05-JavaScript之ES6语法/03-ES6的介绍和环境配置.md similarity index 96% rename from 09-ES6/03-ES6的介绍和环境配置.md rename to 05-JavaScript之ES6语法/03-ES6的介绍和环境配置.md index f2fca11..49febc3 100644 --- a/09-ES6/03-ES6的介绍和环境配置.md +++ b/05-JavaScript之ES6语法/03-ES6的介绍和环境配置.md @@ -1,7 +1,5 @@ -> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 -> 以下是正文。 ## 前言 diff --git a/09-ES6/04-ES6：变量.md b/05-JavaScript之ES6语法/04-ES6：变量let和const.md similarity index 51% rename from 09-ES6/04-ES6：变量.md rename to 05-JavaScript之ES6语法/04-ES6：变量let和const.md index be2f896..ed05642 100644 --- a/09-ES6/04-ES6：变量.md +++ b/05-JavaScript之ES6语法/04-ES6：变量let和const.md @@ -43,20 +43,32 @@ ES6 中新增了 let 和 const 来定义变量： ### let：定义局部变量 +举例1： + +```js + { + let a = 'hello'; + } + console.log(a); // 打印结果报错：Uncaught ReferenceError: a is not defined +``` +上方代码，打印报错。 + +举例2： + ```javascript var a = 2; { let a = 3; } - console.log(a); + console.log(a); // 打印结果：2 ``` -上方代码的输出结果为 2。用 let 声明的变量，只在局部（块级作用域内）起作用。 +通过上面两个例子可以看出，用 let 声明的变量，只在局部（块级作用域内）起作用。 let是防止数据污染，我们来看下面这个 **for 循环**的例子，很经典。 -1、用 var 声明变量：（） +1、用 var 声明变量： ```javascript for (var i = 0; i < 10; i++) { @@ -95,7 +107,7 @@ console.log('循环体外:' + i); const name = 'smyhvae'; //定义常量 ``` -用 const 声明的变量，只在局部（块级作用域内）起作用。 +用 let/const 声明的变量，只在局部（块级作用域内）起作用。 ### let 和 const 的作用【重要】 @@ -209,208 +221,33 @@ let 和 const 的作用如下： 上面这个运行结果，才是我们预期的效果。我们用 let 定义变量 i，在循环的过程中，每执行一次循环体，就会诞生一个新的 i。循环体执行4次，就会有四个 i。 -## 变量的解构赋值 -ES6允许我们，通过数组或者对象的方式，对一组变量进行赋值，这被称为解构。 +## 暂时性死区 DTC -解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。 +ES6规定：使用 let/const 声明的变量，会使区块形成封闭的作用域。若在声明之前使用变量，就会报错。 -### 数组的解构赋值 +也就是说，在使用 let/const 声明变量时，**变量需要先声明，再使用**（声明语句必须放在使用之前）。这在语法上，称为 “暂时性死区”（ temporal dead zone，简称 TDZ）。 -**举例：** +DTC其实是一种保护机制，可以让我们养成良好的编程习惯。 -通常情况下，我们在为一组变量赋值时，一般是这样写： +代码举例： -```javascript - let a = 0; - let b = 1; - let c = 2; +```js +const name = 'qianguyihao'; -``` - -现在我们可以通过数组解构的方式进行赋值： - -```javascript - let [a, b, c] = [1, 2, 3]; -``` - -二者的效果是一样的。 - -**解构的默认值：** - -在解构赋值时，是允许使用默认值的。举例如下： - - -```javascript -{ - //一个变量时 - let [foo = true] = []; - console.log(foo); //输出结果：true -} - -{ - //两个变量时 - let [a, b] = ['生命壹号'] //a 赋值为：生命壹号。b没有赋值 - console.log(a + ',' + b); //输出结果：生命壹号,undefined -} - - -{ - //两个变量时 - let [a, b = 'smyhvae'] = ['生命壹号'] //a 赋值为：生命壹号。b 采用默认值 smyhvae - console.log(a + ',' + b); //输出结果：生命壹号,smyhvae +function foo() { + console.log(name); + const name = 'hello'; } +foo(); // 执行函数后，控制台报错：Uncaught ReferenceError: Cannot access 'name' before initialization ``` -`undefined`和`null`的区别： - -如果我们在赋值时，采用的是 `undefined`或者`null`，那会有什么区别呢？ +## 块级作用域 -```javascript -{ - let [a, b = 'smyhvae'] = ['生命壹号', undefined]; //b 虽然被赋值为 undefined，但是 b 会采用默认值 - console.log(a + ',' + b); //输出结果：生命壹号,smyhvae -} - -{ - let [a, b = 'smyhvae'] = ['生命壹号', null]; //b 被赋值为 null - console.log(a + ',' + b); //输出结果：生命壹号,null -} - - -``` - -上方代码分析： - -- undefined：相当于什么都没有，此时 b 采用默认值。 - -- null：相当于有值，但值为 null。 - -### 对象的解构赋值 - -通常情况下，我们从接口拿到json数据后，一般这么赋值： - -```javascript -var a = json.a; - -var b = json.b; - -bar c = json.c; -``` - -上面这样写，过于麻烦了。 - -现在，我们同样可以针对对象，进行结构赋值。 - -**举例如下：** - -``` - let { foo, bar } = { bar: '我是 bar 的值', foo: '我是 foo 的值' }; - console.log(foo + ',' + bar); //输出结果：我是键 foo 的值,我是键 bar 的值 - -``` - -上方代码可以看出，对象的解构与数组的结构，有一个重要的区别：**数组**的元素是按次序排列的，变量的取值由它的**位置**决定；而**对象的属性没有次序**，是**根据键来取值**的。 - -**圆括号的使用**： - -如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。下面是错误的代码，编译会报错： - - -```javascript - let foo = 'haha'; - { foo } = { foo: 'smyhvae' }; - console.log(foo); - -``` - -要解决报错，只要在解构的语句外边，加一个圆括号即可： - - -```javascript - let foo = 'haha'; - ({ foo } = { foo: 'smyhvae' }); - console.log(foo); //输出结果：smyhvae - -``` - -### 字符串解构 - -字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下： - -```javascript -const [a, b, c, d] = 'smyhvae'; -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); - } -``` - -输出结果： - -![](http://img.smyhvae.com/20180304_2016.png) - -for…of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。 - -注意，上面的数组中，`for ... of`获取的是数组里的值；`for ... in`获取的是index索引值。 - -### Map对象的遍历 - -`for ... of`既可以遍历数组，也可以遍历Map对象。 - -## 模板字符串 - -我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接） - -```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语法/05-ES6：变量的解构赋值.md b/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md new file mode 100644 index 0000000..98607d8 --- /dev/null +++ b/05-JavaScript之ES6语法/05-ES6：变量的解构赋值.md @@ -0,0 +1,208 @@ + + + +## 变量的解构赋值 + +ES6允许我们，通过数组或者对象的方式，对一组变量进行赋值，这被称为解构。 + +解构赋值在实际开发中可以大量减少我们的代码量，并且让程序结构更清晰。 + + + + +### 数组的解构赋值 + +**举例：** + +通常情况下，我们在为一组变量赋值时，一般是这样写： + + +```javascript + let a = 0; + let b = 1; + let c = 2; + +``` + +现在我们可以通过数组解构的方式进行赋值： + +```javascript + let [a, b, c] = [1, 2, 3]; +``` + +二者的效果是一样的。 + +**解构的默认值：** + +在解构赋值时，是允许使用默认值的。举例如下： + + +```javascript +{ + //一个变量时 + let [foo = true] = []; + console.log(foo); //输出结果：true +} + +{ + //两个变量时 + let [a, b] = ['生命壹号'] //a 赋值为：生命壹号。b没有赋值 + console.log(a + ',' + b); //输出结果：生命壹号,undefined +} + + +{ + //两个变量时 + let [a, b = 'smyhvae'] = ['生命壹号'] //a 赋值为：生命壹号。b 采用默认值 smyhvae + console.log(a + ',' + b); //输出结果：生命壹号,smyhvae +} + +``` + +`undefined`和`null`的区别： + +如果我们在赋值时，采用的是 `undefined`或者`null`，那会有什么区别呢？ + + + +```javascript +{ + let [a, b = 'smyhvae'] = ['生命壹号', undefined]; //b 虽然被赋值为 undefined，但是 b 会采用默认值 + console.log(a + ',' + b); //输出结果：生命壹号,smyhvae +} + +{ + let [a, b = 'smyhvae'] = ['生命壹号', null]; //b 被赋值为 null + console.log(a + ',' + b); //输出结果：生命壹号,null +} + + +``` + +上方代码分析： + +- undefined：相当于什么都没有，此时 b 采用默认值。 + +- null：相当于有值，但值为 null。 + +### 对象的解构赋值 + +通常情况下，我们从接口拿到json数据后，一般这么赋值： + +```javascript +var a = json.a; + +var b = json.b; + +bar c = json.c; +``` + +上面这样写，过于麻烦了。 + +现在，我们同样可以针对对象，进行结构赋值。 + +**举例如下：** + +``` + let { foo, bar } = { bar: '我是 bar 的值', foo: '我是 foo 的值' }; + console.log(foo + ',' + bar); //输出结果：我是键 foo 的值,我是键 bar 的值 + +``` + +上方代码可以看出，对象的解构与数组的结构，有一个重要的区别：**数组**的元素是按次序排列的，变量的取值由它的**位置**决定；而**对象的属性没有次序**，是**根据键来取值**的。 + +**圆括号的使用**： + +如果变量 foo 在解构之前就已经定义了，此时你再去解构，就会出现问题。下面是错误的代码，编译会报错： + + +```javascript + let foo = 'haha'; + { foo } = { foo: 'smyhvae' }; + console.log(foo); + +``` + +要解决报错，只要在解构的语句外边，加一个圆括号即可： + + +```javascript + let foo = 'haha'; + ({ foo } = { foo: 'smyhvae' }); + console.log(foo); //输出结果：smyhvae + +``` + +### 字符串解构 + +字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。举例如下： + +```javascript +const [a, b, c, d] = 'smyhvae'; +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); + } +``` + +输出结果： + +![](http://img.smyhvae.com/20180304_2016.png) + +for…of 的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。 + +注意，上面的数组中，`for ... of`获取的是数组里的值；`for ... in`获取的是index索引值。 + +### Map对象的遍历 + +`for ... of`既可以遍历数组，也可以遍历Map对象。 + +## 模板字符串 + +我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接） + +```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/09-ES6/05-ES6：函数扩展.md b/05-JavaScript之ES6语法/06-ES6：函数扩展.md similarity index 100% rename from 09-ES6/05-ES6：函数扩展.md rename to 05-JavaScript之ES6语法/06-ES6：函数扩展.md diff --git a/09-ES6/06-ES6：字符串、数组、对象的扩展.md b/05-JavaScript之ES6语法/07-ES6：字符串、数组、对象的扩展.md similarity index 100% rename from 09-ES6/06-ES6：字符串、数组、对象的扩展.md rename to 05-JavaScript之ES6语法/07-ES6：字符串、数组、对象的扩展.md diff --git a/09-ES6/07-ES6：Promise入门详解.md b/05-JavaScript之ES6语法/08-ES6：Promise入门详解.md similarity index 100% rename from 09-ES6/07-ES6：Promise入门详解.md rename to 05-JavaScript之ES6语法/08-ES6：Promise入门详解.md diff --git a/09-ES6/08-ES7：async函数详解.md b/05-JavaScript之ES6语法/09-ES7：async函数详解.md similarity index 100% rename from 09-ES6/08-ES7：async函数详解.md rename to 05-JavaScript之ES6语法/09-ES7：async函数详解.md diff --git a/09-ES6/ES6：Symbol.md b/05-JavaScript之ES6语法/ES6：Symbol.md similarity index 100% rename from 09-ES6/ES6：Symbol.md rename to 05-JavaScript之ES6语法/ES6：Symbol.md diff --git a/05-JavaScript进阶/01-var、let、const的区别.md b/06-JavaScript进阶/01-var、let、const的区别.md similarity index 72% rename from 05-JavaScript进阶/01-var、let、const的区别.md rename to 06-JavaScript进阶/01-var、let、const的区别.md index 697b6f1..4431985 100644 --- a/05-JavaScript进阶/01-var、let、const的区别.md +++ b/06-JavaScript进阶/01-var、let、const的区别.md @@ -29,7 +29,7 @@ const c = '我是c'; ### 暂时性死区 DTC -举例1：（表现正常） +**举例1**：（表现正常） ```js const name = 'qianguyihao'; @@ -56,7 +56,10 @@ function foo() { foo(); // 执行函数后，控制台报错：Uncaught ReferenceError: Cannot access 'name' before initialization ``` -代码解释：如果在当前块作用域中使用了变量 name，并且当前块作用域中通过 let/const 声明了这个变量，那么，**声明语句必须放在使用之前，也就是所谓的 DTC（暂时性死区）**。DTC其实是一种保护机制，可以让我们的代码写得更佳完善。 +代码解释：如果在当前块级作用域中使用了变量 name，并且当前块级作用域中通过 let/const 声明了这个变量，那么，**声明语句必须放在使用之前，也就是所谓的 DTC（暂时性死区）**。DTC其实是一种保护机制，可以让我们养成良好的编程习惯。 + +关于”暂时性死区“的更多介绍，详本项目的另一篇文章《ES6：变量》。 + ## 参考链接 diff --git a/05-JavaScript进阶/JavaScript开发积累.md b/06-JavaScript进阶/JavaScript开发积累.md similarity index 100% rename from 05-JavaScript进阶/JavaScript开发积累.md rename to 06-JavaScript进阶/JavaScript开发积累.md diff --git a/05-JavaScript进阶/call、apply、bind的区别.md b/06-JavaScript进阶/call、apply、bind的区别.md similarity index 100% rename from 05-JavaScript进阶/call、apply、bind的区别.md rename to 06-JavaScript进阶/call、apply、bind的区别.md diff --git a/05-JavaScript进阶/this.md b/06-JavaScript进阶/this.md similarity index 100% rename from 05-JavaScript进阶/this.md rename to 06-JavaScript进阶/this.md diff --git a/05-JavaScript进阶/作用域和闭包.md b/06-JavaScript进阶/作用域和闭包.md similarity index 99% rename from 05-JavaScript进阶/作用域和闭包.md rename to 06-JavaScript进阶/作用域和闭包.md index cd77740..35deabe 100644 --- a/05-JavaScript进阶/作用域和闭包.md +++ b/06-JavaScript进阶/作用域和闭包.md @@ -172,7 +172,7 @@ this的几种场景： - 函数作用域 -- 没有块作用域(ES6有了) +- 没有块级作用域(ES6有了) diff --git a/05-JavaScript进阶/创建对象和继承.md b/06-JavaScript进阶/创建对象和继承.md similarity index 100% rename from 05-JavaScript进阶/创建对象和继承.md rename to 06-JavaScript进阶/创建对象和继承.md diff --git a/05-JavaScript进阶/浅拷贝和深拷贝.md b/06-JavaScript进阶/浅拷贝和深拷贝.md similarity index 100% rename from 05-JavaScript进阶/浅拷贝和深拷贝.md rename to 06-JavaScript进阶/浅拷贝和深拷贝.md diff --git a/06-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md b/07-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md similarity index 100% rename from 06-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md rename to 07-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md diff --git a/06-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md b/07-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md similarity index 100% rename from 06-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md rename to 07-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md diff --git a/06-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md b/07-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md similarity index 100% rename from 06-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md rename to 07-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md diff --git a/06-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md b/07-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md similarity index 100% rename from 06-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md rename to 07-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md diff --git a/06-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md b/07-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md similarity index 100% rename from 06-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md rename to 07-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md diff --git a/06-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md b/07-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md similarity index 100% rename from 06-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md rename to 07-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md diff --git a/07-Ajax/01-服务器分类及PHP入门.md b/08-Ajax/01-服务器分类及PHP入门.md similarity index 100% rename from 07-Ajax/01-服务器分类及PHP入门.md rename to 08-Ajax/01-服务器分类及PHP入门.md diff --git a/07-Ajax/02-Ajax入门和发送http请求.md b/08-Ajax/02-Ajax入门和发送http请求.md similarity index 100% rename from 07-Ajax/02-Ajax入门和发送http请求.md rename to 08-Ajax/02-Ajax入门和发送http请求.md diff --git a/07-Ajax/03-函数封装-Ajax发送http请求（get&post）.md b/08-Ajax/03-函数封装-Ajax发送http请求（get&post）.md similarity index 100% rename from 07-Ajax/03-函数封装-Ajax发送http请求（get&post）.md rename to 08-Ajax/03-函数封装-Ajax发送http请求（get&post）.md diff --git a/07-Ajax/04-同源和跨域.md b/08-Ajax/04-同源和跨域.md similarity index 100% rename from 07-Ajax/04-同源和跨域.md rename to 08-Ajax/04-同源和跨域.md diff --git a/07-Ajax/05-模板引擎.md b/08-Ajax/05-模板引擎.md similarity index 100% rename from 07-Ajax/05-模板引擎.md rename to 08-Ajax/05-模板引擎.md diff --git a/08-移动web开发/01-Bootstrap入门.md b/09-移动Web开发/01-Bootstrap入门.md similarity index 100% rename from 08-移动web开发/01-Bootstrap入门.md rename to 09-移动Web开发/01-Bootstrap入门.md diff --git a/08-移动web开发/02-Bootstrap使用.md b/09-移动Web开发/02-Bootstrap使用.md similarity index 100% rename from 08-移动web开发/02-Bootstrap使用.md rename to 09-移动Web开发/02-Bootstrap使用.md diff --git a/08-移动web开发/03-Less详解.md b/09-移动Web开发/03-Less详解.md similarity index 100% rename from 08-移动web开发/03-Less详解.md rename to 09-移动Web开发/03-Less详解.md diff --git a/10-Node.js和数据库/02-Node.js模块化规范：CommonJS.md b/10-Node.js和数据库/02-Node.js模块化规范：CommonJS.md index bf2d7b4..c921bad 100644 --- a/10-Node.js和数据库/02-Node.js模块化规范：CommonJS.md +++ b/10-Node.js和数据库/02-Node.js模块化规范：CommonJS.md @@ -141,7 +141,7 @@ CommonJS 规范规定：每个模块内部，module 变量代表当前模块。 ### 模块的暴露和引入 -Node.js 中只有模块作用域，两个模块之间的变量、方法，默认是互不冲突，互不影响，这样就导致一个问题：模块 A 要怎样使用模块B中的变量&方法呢？这就需要通过 `exports` 关键字来实现。 +Node.js 中只有模块级作用域，两个模块之间的变量、方法，默认是互不冲突，互不影响，这样就导致一个问题：模块 A 要怎样使用模块B中的变量&方法呢？这就需要通过 `exports` 关键字来实现。 Node.js中，每个模块都有一个 exports 接口对象，我们可以把公共的变量、方法挂载到这个接口对象中，其他的模块才可以使用。