diff --git a/04-JavaScript基础/04-基本数据类型.md b/04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md similarity index 86% rename from 04-JavaScript基础/04-基本数据类型.md rename to 04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md index 3de433f..6100b62 100644 --- a/04-JavaScript基础/04-基本数据类型.md +++ b/04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md @@ -253,7 +253,7 @@ console.log(1+2+3); //输出6 6 ``` -**总结**：如果加号两边**都是**数值，此时是加。否则，就是连字符（用来连接字符串）。 +**总结**：如果加号两边**都是** Number 类型，此时是数字相加。否则，就是连字符（用来连接字符串）。 举例1： @@ -329,43 +329,6 @@ boolean 布尔型和数字型相加时， true 按 1 来算 ，false 按 0 来算。 -## Null 和 Undefined - -### `null`：空值 - -专门用来表示一个为空的**对象**（例如：`var a = null`）。注意，专门用来表示**空对象**。 - -- Null类型的值只有一个，就是null。比如 `var a = null`。 - -- 使用 typeof 检查一个null值时，会返回object。 - - -如果你想定义一个变量，以后打算存储为对象，但是还没想好放什么内容，这个时候，可以给 null。 - -比如： - -```js -var myObj = null; -cosole.log(typeof myObj); // 打印结果：object -``` - - -### `undefined`：未定义 - -**声明**了一个变量，但是没有**赋值**（例如：`var a;`），此时它的值就是 `undefined`。 - -- Undefined类型的值只有一个，就是undefind。比如 - -- 使用 type of 检查一个undefined时，会返回undefined。 - -null和undefined有很大的相似性。看看null == undefined的结果(true)也就更加能说明这点。 - -但是null === undefined的结果(false)。它们虽然相似，但还是有区别的，其中一个区别是：和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。 - -- 任何数据类型和undefined运算都是NaN; - -- 任何值和null运算，null可看做0运算。 - ## 变量值的传递（赋值） 语句： @@ -484,7 +447,7 @@ console.log(a-b); ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： diff --git a/04-JavaScript基础/05-基本数据类型：Null 和 Undefined.md b/04-JavaScript基础/05-基本数据类型：Null 和 Undefined.md new file mode 100644 index 0000000..1db42c0 --- /dev/null +++ b/04-JavaScript基础/05-基本数据类型：Null 和 Undefined.md @@ -0,0 +1,121 @@ + +很多其他的语言中，只有 null；但 JS 语言中，既有 null，又有 undefined。很多人会弄混，由此觉得 JS 语言很麻烦。其实不然，学习完这篇文章后，你会发现 null 和 undefined 的区别很容易理解。 + +## Null：空对象 + +null 专门用来定义一个**空对象**（例如：`var a = null`）。。 + +如果你想定义一个变量用来保存引用类型，但是还没想好放什么内容，这个时候，可以在初始化时将其设置为 null。 + +比如： + +```js +var myObj = null; +cosole.log(typeof myObj); // 打印结果：object +``` + +补充： + +- Null 类型的值只有一个，就是 null。比如 `let a = null`。 + +- 使用 typeof 检查一个 null 值时，会返回 object。 + +## undefined + +### case1：变量已声明，未赋值时 + +**声明**了一个变量，但没有**赋值**，此时它的值就是 `undefined`。举例： + +```js +let name; +console.log(name); // 打印结果：undefined +console.log(typeof name); // 打印结果：undefined +``` + +补充： + +- Undefined 类型的值只有一个，就是 undefind。比如 `let a = undefined`。 + +- 使用 typeof 检查一个 undefined 值时，会返回 undefined。 + +### case2：变量未声明（未定义）时 + +如果你从未声明一个变量，就去使用它，则会报错（这个大家都知道）；此时，如果用 `typeof` 检查这个变量时，会返回 `undefined`。举例： + +```js +console.log(typeof a); // undefined +console.log(a); // 打印结果：Uncaught ReferenceError: a is not defined +``` + +### case3：函数无返回值时 + +如果一个函数没有返回值，那么，这个函数的返回值就是 undefined。 + +或者，也可以这样理解：在定义一个函数时，如果没有 return 语句，那么，其实就是 `return undefined`。 + +举例： + +```js +function foo() {} + +console.log(foo()); // 打印结果：undefined +``` + +### case4：调用函数时，未传参 + +调用函数时，如果没有传参，那么，这个参数的值就是 undefined。 + +举例： + +```js +function foo(name) { + console.log(name); +} + +foo(); // 调用函数时，未传参。执行函数后的打印结果：undefined +``` + +实际开发中，如果调用函数时没有传参，我们可以给形参设置一个默认值： + +```js +function foo(name) { + name = name || 'qianguyihao'; +} + +foo(); +``` + +等学习了 ES6 之后，上方代码也可以这样写： + +```js +function foo(name = 'qianguyihao') {} + +foo(); +``` + +## 其他区别 + +null 和 undefined 有很大的相似性。看看 `null == undefined` 的结果为 `true` 也更加能说明这点。 + +但是 `null === undefined` 的结果是 false。它们虽然相似，但还是有区别的，其中一个区别是，和数字运算时： + +- 10 + null 结果为 10。 + +- 10 + undefined 结果为 NaN。 + +规律总结： + +- 任何数据类型和 undefined 运算都是 NaN; + +- 任何值和 null 运算，null 可看做 0 运算。 + + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20200101.png) + diff --git a/04-JavaScript基础/05-typeof和数据类型转换.md b/04-JavaScript基础/06-typeof和数据类型转换.md similarity index 100% rename from 04-JavaScript基础/05-typeof和数据类型转换.md rename to 04-JavaScript基础/06-typeof和数据类型转换.md diff --git a/04-JavaScript基础/06-运算符.md b/04-JavaScript基础/07-运算符.md similarity index 100% rename from 04-JavaScript基础/06-运算符.md rename to 04-JavaScript基础/07-运算符.md diff --git a/04-JavaScript基础/07-流程控制语句：选择结构（if和switch）.md b/04-JavaScript基础/08-流程控制语句：选择结构（if和switch）.md similarity index 100% rename from 04-JavaScript基础/07-流程控制语句：选择结构（if和switch）.md rename to 04-JavaScript基础/08-流程控制语句：选择结构（if和switch）.md diff --git a/04-JavaScript基础/08-流程控制语句：循环结构（for和while）.md b/04-JavaScript基础/09-流程控制语句：循环结构（for和while）.md similarity index 100% rename from 04-JavaScript基础/08-流程控制语句：循环结构（for和while）.md rename to 04-JavaScript基础/09-流程控制语句：循环结构（for和while）.md diff --git a/04-JavaScript基础/09-对象简介.md b/04-JavaScript基础/10-对象简介.md similarity index 100% rename from 04-JavaScript基础/09-对象简介.md rename to 04-JavaScript基础/10-对象简介.md diff --git a/04-JavaScript基础/10-包装类.md b/04-JavaScript基础/11-包装类.md similarity index 100% rename from 04-JavaScript基础/10-包装类.md rename to 04-JavaScript基础/11-包装类.md diff --git a/04-JavaScript基础/11-内置对象：Math.md b/04-JavaScript基础/12-内置对象：Math.md similarity index 100% rename from 04-JavaScript基础/11-内置对象：Math.md rename to 04-JavaScript基础/12-内置对象：Math.md diff --git a/04-JavaScript基础/12-内置对象：Date.md b/04-JavaScript基础/13-内置对象：Date.md similarity index 100% rename from 04-JavaScript基础/12-内置对象：Date.md rename to 04-JavaScript基础/13-内置对象：Date.md diff --git a/04-JavaScript基础/13-内置对象 String：字符串的常见方法.md b/04-JavaScript基础/14-内置对象 String：字符串的常见方法.md similarity index 100% rename from 04-JavaScript基础/13-内置对象 String：字符串的常见方法.md rename to 04-JavaScript基础/14-内置对象 String：字符串的常见方法.md diff --git a/04-JavaScript基础/14-字符串的深入学习.md b/04-JavaScript基础/15-字符串的深入学习.md similarity index 100% rename from 04-JavaScript基础/14-字符串的深入学习.md rename to 04-JavaScript基础/15-字符串的深入学习.md diff --git a/04-JavaScript基础/15-数组简介.md b/04-JavaScript基础/17-数组简介.md similarity index 100% rename from 04-JavaScript基础/15-数组简介.md rename to 04-JavaScript基础/17-数组简介.md diff --git a/04-JavaScript基础/16-数组的常见方法&数组的遍历.md b/04-JavaScript基础/18-数组的常见方法&数组的遍历.md similarity index 100% rename from 04-JavaScript基础/16-数组的常见方法&数组的遍历.md rename to 04-JavaScript基础/18-数组的常见方法&数组的遍历.md diff --git a/04-JavaScript基础/17-函数.md b/04-JavaScript基础/19-函数.md similarity index 100% rename from 04-JavaScript基础/17-函数.md rename to 04-JavaScript基础/19-函数.md diff --git a/04-JavaScript基础/18-作用域和变量提升.md b/04-JavaScript基础/20-作用域和变量提升.md similarity index 100% rename from 04-JavaScript基础/18-作用域和变量提升.md rename to 04-JavaScript基础/20-作用域和变量提升.md diff --git a/04-JavaScript基础/19-预编译.md b/04-JavaScript基础/21-预编译.md similarity index 100% rename from 04-JavaScript基础/19-预编译.md rename to 04-JavaScript基础/21-预编译.md diff --git a/04-JavaScript基础/21-this.md b/04-JavaScript基础/22-this.md similarity index 100% rename from 04-JavaScript基础/21-this.md rename to 04-JavaScript基础/22-this.md diff --git a/04-JavaScript基础/20-执行期上下文.md b/04-JavaScript基础/22-执行期上下文.md similarity index 100% rename from 04-JavaScript基础/20-执行期上下文.md rename to 04-JavaScript基础/22-执行期上下文.md diff --git a/04-JavaScript基础/22-对象的创建&构造函数.md b/04-JavaScript基础/23-对象的创建&构造函数.md similarity index 100% rename from 04-JavaScript基础/22-对象的创建&构造函数.md rename to 04-JavaScript基础/23-对象的创建&构造函数.md diff --git a/04-JavaScript基础/23-对象的基本操作.md b/04-JavaScript基础/24-对象的基本操作.md similarity index 100% rename from 04-JavaScript基础/23-对象的基本操作.md rename to 04-JavaScript基础/24-对象的基本操作.md diff --git a/04-JavaScript基础/24-对象的高级操作：Object.assign().md b/04-JavaScript基础/25-对象的高级操作：Object.assign().md similarity index 100% rename from 04-JavaScript基础/24-对象的高级操作：Object.assign().md rename to 04-JavaScript基础/25-对象的高级操作：Object.assign().md diff --git a/06-JavaScript进阶/01-var、let、const的区别.md b/06-JavaScript进阶/01-var、let、const的区别.md index 15e69cc..7c7cf26 100644 --- a/06-JavaScript进阶/01-var、let、const的区别.md +++ b/06-JavaScript进阶/01-var、let、const的区别.md @@ -1,35 +1,95 @@ +## var、let、const 的区别 +### 1、var 声明的变量会挂载在 window 对象上，而 let 和 const 声明的变量不会 +举例： -## var、let、const的区别 +```js +var a = '我是a'; +console.log(a); // 打印结果：我是a +console.log(window.a); // 打印结果：我是a +``` -### var声明的变量存在变量提升，let和const声明的变量不存在变量提升 +```js +let b = '我是b'; +console.log(b); // 打印结果：我是b +console.log(window.b); // 打印结果：undefined +``` -var 声明的变量： +```js +let c = '我是c'; +console.log(c); // 打印结果：我是c +console.log(window.b); // 打印结果：undefined +``` + +var 的这一特性，会造成 window 全局变量的污染。举例如下： + +```js +var innerHeight = 100; +console.log(window.innerHeight); // 打印结果：永远都是100 ==> 会覆盖 window 自带的 innerHeight 属性 +``` + +### 2、var 声明的变量存在变量提升，let 和 const 声明的变量不存在变量提升 + +举例：(先使用，再声明) ```js console.log(a); // 打印结果：undefined ==> a已经声明但没有赋值 var a = '我是a'; ``` -let 声明的变量： - ```js -console.log(b); // 打印结果报错：Uncaught ReferenceError: Cannot access 'b' before initialization ==> 找不到b这个变量 +console.log(b); // 报错：Uncaught ReferenceError: Cannot access 'b' before initialization ==> 找不到b这个变量 let b = '我是b'; ``` -const 声明的变量： - ```js -console.log(c); // 打印结果报错：Uncaught ReferenceError: Cannot access 'c' before initialization ==> 找不到c这个变量 +console.log(c); // 报错：Uncaught ReferenceError: Cannot access 'c' before initialization ==> 找不到c这个变量 const c = '我是c'; ``` +### 3、var 声明不存在块级作用域，let 和 const 声明存在块级作用域 -### 暂时性死区 DTC +举例： -**举例1**：（表现正常） +```js +{ + var a = '我是a'; + let b = '我是b'; + const c = '我是c'; +} + +console.log(a); // 我是a +console.log(b); // 报错：Uncaught ReferenceError: b is not defined ==> 找不到b这个变量 +console.log(c); // 报错：Uncaught ReferenceError: c is not defined ==> 找不到c这个变量 +``` + +报错是因为找不到 b 和 c 这两个变量。 + +### 4、同一作用域下，var 可以声明同名变量，let 和 const 不能声明同名变量 + +```js +var a = '我是a'; +var a = 'qianguyihao'; +console.log(a); // 打印结果：qianguyihao +``` + +```js +let b = '我是b'; +let b = 'qianguyihao'; +console.log(b); //报错：Uncaught SyntaxError: Identifier 'b' has already been declared ==> 变量 b 已经被声明了 +``` + +```js +const c = '我是c'; +const c = 'qianguyihao'; +console.log(c); //报错：Uncaught SyntaxError: Identifier 'c' has already been declared ==> 变量 c 已经被声明了 +``` + + +### 5、let 和 const 的暂时性死区（DTC） + +**举例 1**：（表现正常） ```js const name = 'qianguyihao'; @@ -43,7 +103,7 @@ foo(); // 执行函数后，打印结果：smyhvae 上方例子中， 变量 name 被声明在函数外部，此时函数内部可以直接使用。 -**举例2**：（报错） +**举例 2**：（报错） ```js const name = 'qianguyihao'; @@ -56,28 +116,44 @@ function foo() { foo(); // 执行函数后，控制台报错：Uncaught ReferenceError: Cannot access 'name' before initialization ``` -代码解释：如果在当前块级作用域中使用了变量 name，并且当前块级作用域中通过 let/const 声明了这个变量，那么，**声明语句必须放在使用之前，也就是所谓的 DTC（暂时性死区）**。DTC其实是一种保护机制，可以让我们养成良好的编程习惯。 +代码解释：如果在当前块级作用域中使用了变量 name，并且当前块级作用域中通过 let/const 声明了这个变量，那么，**声明语句必须放在使用之前，也就是所谓的 DTC（暂时性死区）**。DTC 其实是一种保护机制，可以让我们养成良好的编程习惯。 关于”暂时性死区“的更多介绍，详本项目的另一篇文章《ES6：变量》。 -## const 常量能不能被修改 +### 6、const：一旦声明必须赋值；声明后不能再修改 + +一旦声明必须赋值： + +```js +const a; +console.log(a); // 报错：Uncaught SyntaxError: Missing initializer in const declaration +``` + +### 总结 + +基于上面的种种区别，我们可以知道：var 声明的变量，很容易造成全局污染。以后我们尽量使用 let 和 const 声明变量吧。 + + + + + +## const 常量到底能不能被修改 我们知道：用 const 声明的变量无法被修改。但还有一点，我们一定要记住： -- 如果用 const 声明基本数据类型，则无法被修改； +- 如果用 const 声明基本数据类型，则无法被修改； -- 如果用 const 声明引用数据类型（即“对象”），这里的“无法被修改”指的是**不能改变内存地址的引用**；但对象里的内容是可以被修改的。 +- 如果用 const 声明引用数据类型（即“对象”），这里的“无法被修改”指的是**不能改变内存地址的引用**；但对象里的内容是可以被修改的。 -举例1：（不能修改） +举例 1：（不能修改） ```js const name = 'qianguyihao'; name = 'vae'; // 因为无法被修改，所以报错：Uncaught TypeError: Assignment to constant variable ``` - -举例2：（不能修改） +举例 2：（不能修改） ```js const obj = { @@ -88,8 +164,7 @@ const obj = { obj = { name: 'vae' }; // 因为无法被修改，所以报错：Uncaught TypeError: Assignment to constant variable ``` - -举例3：（可以修改） +举例 3：（可以修改） ```js const obj = { @@ -97,9 +172,15 @@ const obj = { age: 28, }; obj.name = 'vae'; // 对象里的 name 属性可以被修改 - ``` +## 传值和传址的区别 + +详见《JavaScript基础/对象简介.md》。 + + + + ## 参考链接 -- [JS中var、let、const区别](https://juejin.im/post/5e49249be51d4526e651b654) \ No newline at end of file +- [JS 中 var、let、const 区别](https://juejin.im/post/5e49249be51d4526e651b654)