add: var、let、const 的区别
This commit is contained in:
parent
8852a41b01
commit
cecd6d7f67
@ -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`)。
|
||||
想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**。
|
||||
|
||||
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||||
|
121
04-JavaScript基础/05-基本数据类型:Null 和 Undefined.md
Normal file
121
04-JavaScript基础/05-基本数据类型:Null 和 Undefined.md
Normal file
@ -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)
|
||||
|
@ -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)
|
||||
- [JS 中 var、let、const 区别](https://juejin.im/post/5e49249be51d4526e651b654)
|
||||
|
Loading…
Reference in New Issue
Block a user