# 数据类型分类  
- 原始数据类型  
  * String  
  * Number 
  * Boolean
  * null
  * undefined   
- 引用数据类型  
  * Object  
 





## 原始数据类型 
### 说明   
存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问  
### 分类   
- String 
- Number
- Boolean  
- Null 
- Undefined  

### 特点  
数据存在变量本地，栈   

### 示例  
![原始数据类型](https://dev.dwxzbz.com/blogphoto/JS-Basis/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/%E5%8E%9F%E5%A7%8B%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.jpg)   

## 引用数据类型  
### 说明  
存放在堆内存中的对象，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址），这个指针指向堆内存  
### 分类  
在Javascript中，任何不是数值、字符串、布尔值、符号、null和undefined的值都是对象  

### 特点  
数据不存在变量本地，堆


### 示例  
![引用数据类型](https://dev.dwxzbz.com/blogphoto/JS-Basis/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/%E5%BC%95%E7%94%A8%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.jpg)

JS-数据类型的分类

## const关键字  
## 说明  
用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改  



## <font style="color:red">注意</font> 
- const声明的常量必须一开始初始化，不能留到后续赋值  
- 不存在‘变量’声明提升  
- 只在声明所在的块级作用域内有效     
- 不能和它所在作用域内的其他变量或函数拥有相同的名称  
- const 定义常量的值不能通过再赋值修改，也不能再次声明   

## const的本质
const定义并非指变量的值不发生改动，而是变量指向的内存地址不会发生改动。对于简单的数据类型(数值、字符串、布尔值),值就是存在内存地址中；对于复合类型（对象、数组）变量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的，不能控制指针指向的数据结构是否可变     



## let关键字  
## 说明  
ES6新增了let命令，用于声明变量。其用法类似于 var ，但是所声明的变量只在 let命令所在的代码块内有效 
### Eg  
如下图，在块级作用域中使用let声明变量后，无法在外部访问  
![let](https://dev.dwxzbz.com/blogphoto/JS-Basis/%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E/let.jpg)  

## 特点  
- <font style="color:red">不存在变量提升[必须声明后使用，否则报错]</font>  
- 块级作用域 
- 不能和它所在作用域内的其他变量或函数拥有相同的名称  
- let声明的变量不用初始化  
- let声明的变量可以重新赋值  
- 在 HTML 中, 全局作用域是针对 window 对象。使用let关键字声明的全局作用域变量不属于 window 对象  
- let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的  
- let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问 
- let 关键字声明的变量需要先声明再使用  



## 暂时性死区  
## 说明  
ES6明确规定，如果区块中明确存在 let和const命令，则这个区块对这些命令声明的变量从一开始就形成封闭作用域，只要在声明之前使用这些变量，就会报错  
## Eg  
![TDZ](https://dev.dwxzbz.com/blogphoto/JS-Basis/%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E/TDZ.jpg)  




## var关键字  
- 使用 var关键字声明的变量不具备块级作用域的特性，它在{}外依然能被访问到  
- 在 HTML 中, 全局作用域是针对 window 对象。使用var关键字声明的全局作用域变量属于 window 对象  



## 补充  
在函数中，var和let声明的变量都是局部变量，函数外都是全局变量  



# var、let、const区别  
- var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
- let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
- const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
- 同一个变量只能使用一种方式声明，不然会报错

JS-变量或常量的定义方式

##  常量与变量  
### 常量  
指在程序运行过程中不会发生改变的量，如： 数值型常量、字符串型常量、布尔型常量等  



### 变量  
指程序中一个已经命名的储存单元  

### 说明  
开发中，一般使用变量，将常量赋值给某个变量  

### 声明变量   
```js
var a = 123;
console.log(a);
```
var声明的变量，变量声明语句会提升到当前作用域顶部  

### 声明变量后修改   
```js
var a = 123;
//申明变量后修改变量不需要申明  
a = 4
console.log(a);
```

### 交换两个变量的值  
- 使用第三方变量  
- 使用求和  


## 输出语句
### 向警告框输出 
```html
<script type="text/javascript">
  alert=("内容");
</script>  
```

### 直接在页面中输出内容  
```html
<script type="text/javascript">
  document.write("输出的内容");
</script>  
```
#### 说明  
document:   页面文档  
write: 写入、输出   

### 向控制台输出内容  
```html
<script type="text/javascript">
  console.log("内容");
</script>  
```
#### 作用  
常用于判断前面文件是否执行正确  

## JS代码编写位置 
### 不推荐方式  
结构与行为耦合，未分离  

#### 点击事件的属性中  
```html
<button onclick="alert('弹出内容')">点我</button>
```

#### 超链接的属性中  
```html
<a href="javascript:alert('弹出内容')">点我</a>
```

### 推荐方式  
链接外部标签  

```
<script type="text/script" src="js路径">
</script>
```

#### 注意点
1. 引入外部js文件后，不能再在script中编写内容。但可以重新创建script标签

JS-常量变量与输出语句

## JavaScript基础概念
是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的动态、弱类型的脚本语言 

### 起源  
netscape(网景)布瑞登-艾克于1995年与sun公司合作开发的脚本语言 



### 相关组织规定  
TC39委员会制定ECMA-262标准，然后不同浏览器对此标准实现

### 常见浏览器内核  

| 浏览器 | 内核 | 备注 |
| ----|----|----|
| chrome | webkit(前)、blink（后） | Blink 其实是 WebKit 的分支，Webkit 的鼻祖其实是 Safari。|
IE |	Trident |	猎豹浏览器（双内核IE+chrome）、360极速浏览器（双内核IE+chrome）、百度浏览器 |
| Safari	| webkit | Webkit 的鼻祖其实是 Safari |
| firefox	| gecko | 高版本兼容webkit |
| Opera |	blink | 以前用的presto |


### 特点  
1. 解释性  
不需要进行编译，可直接在浏览器中运行时被解释执行 

2. 基于对象  
javascript是一种基于对象的语言，意味着可以运用自己已经创建的对象  

3. 事件驱动   
javascript可直接对用户或客户输入做出响应，无需经过web服务程序。当用户触发如鼠标点击等事件后，会引起相应的事件响应  



## 词法结构
### 字符集  
JavaScript采用Unicode字符集编写  


### 注释  
* 单行注释 
```js
// 单行注释内容
```

* 多行注释 
```js
/* 
  多行
  注释内容
*/  
```


### 程序特点  
- JavaScript区分大小写，所以关键字、变量、标识符、函数名必须始终保持一致的大小写形式  
- 程序记号之间的空格，很大程度上JS也会忽略换行符，JS也将制表符、各种ASCII控制符和Unicode间隔识别为空格 
- JS将换行符、回车符、换行序列识别为行终止符  



### 字面量
#### 说明  
指的是直接出现在程序中的数据值  


### 标识符与保留字  
#### 标识符  
##### 说明  
在JavaScript中，标识符用于在JavaScript代码中命名常量、变量、属性、函数和类，以及为某些循环提供标记   

##### 命名规范   
1. 标识符由字母、数字、下划线和$符号组成且标识符不能以数字开头    
3. 不能为ES中的关键字  
4. 标识符一般都采用驼峰命名法。首字母小写，每个单词的开头字母大写，其余字母小写  

#### 保留字  
##### 说明  
JavaScript为语言自身使用而保留了某些标识符，这些特殊的标识符不能作为常规标识符使用   

##### 常见保留字  
![保留字](https://dev.dwxzbz.com/blogphoto/JS-Basis/%E7%9B%B8%E5%85%B3%E6%A6%82%E5%BF%B5%E4%B8%8E%E8%AF%8D%E6%B3%95%E7%BB%93%E6%9E%84/%E4%BF%9D%E7%95%99%E5%AD%97.jpg)  


### 可选的分号  
#### 说明  
JS使用分号分割语句  

JS并非任何时候都会把换行符当作分号，而只是在不隐式添加分号就无法解析代码的情况下才会将换行符作为分号

#### 特殊情况   
- 涉及return、throw、yield、break和continue语句，当这些语句后跟一个标识符或表达式，则表达式前的换行会被解释为分号  
<font style="color:red">一定不能在return、break或continue等关键字和它们后面的表达式之间加入换行符</font>   
```
return 
true;
//被解释为:
return;
true;
```

- 对于++和--操作符，不论是前加加(前减减)或者后加加(后减减)都必须与自己操作的表达式位于同一行  
- 使用简洁的"箭头"语法定义的函数箭头=>必须跟参数列表在同一行

JS-相关概念与词法结构

## 概念  
常发生在父子级关系中，若父级宽高限定，子级宽度或高度超出父元素则会发生溢出现象 



# 溢出的处理  
## overflow  
```css
overflow: hidden;
```
### 参数 
visible: 默认值，可见  
hidden: "裁剪"直接将溢出的内容裁剪不显示  
auto: 自动产生滑动条，此时显示的可见区域还是设定的；但是实际内容的宽度会发生变化产生滚动条  
scroll：自动添加滚动条  
### 注意
<font style="color:red">对于有定位的元素，谨慎使用overflow</font>  


## visiblity  
### 说明  
让一个元素在页面中显示或隐藏  

### 可见性  
visiblity:visible  元素可见  
visiblity:hidden  元素隐藏  

### 特点  
<font style="color:red">visiblity隐藏元素后还是会占用位置</font>