add: var、let、const 的区别

This commit is contained in:
qianguyihao 2020-06-06 17:15:17 +08:00
parent 8852a41b01
commit cecd6d7f67
23 changed files with 227 additions and 62 deletions

View File

@ -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结果为1010 + undefined结果为NaN
- 任何数据类型和undefined运算都是NaN;
- 任何值和null运算null可看做0运算
## 变量值的传递赋值
语句
@ -484,7 +447,7 @@ console.log(a-b);
## 我的公众号
想学习**代码之外的技能**不妨关注我的微信公众号**千古壹号**id`qianguyihao`
想学习**代码之外的技能**不妨关注我的微信公众号**千古壹号**
扫一扫你将发现另一个全新的世界而这将是一场美丽的意外

View 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)

View File

@ -1,35 +1,95 @@
## varletconst 的区别
### 1var 声明的变量会挂载在 window 对象上 let const 声明的变量不会
举例
## varletconst的区别
```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 属性
```
### 2var 声明的变量存在变量提升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';
```
### 3var 声明不存在块级作用域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 已经被声明了
```
### 5let 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 常量能不能被修改
### 6const一旦声明必须赋值声明后不能再修改
一旦声明必须赋值
```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中varletconst区别](https://juejin.im/post/5e49249be51d4526e651b654)
- [JS varletconst 区别](https://juejin.im/post/5e49249be51d4526e651b654)