markdown JavaScript基础语法

Posted 2021-05-05

## 变量
>存储具体值(常量)的容器和代名词, 指向的内容可变

### 创建方式
- var (ES3)
- function (ES3) 创建函数(函数名也是变量, 存储函数类型的值)
- let (ES6)
- const (ES6) 创建常量
- import (ES6) 基于ES6的模块规范导出需要的信息
- class (ES6) 创建类

```JavaScript
/*
 *语法:
 *  var [变量名] = 值;
 *  let [变量名] = 值;
 * const [变量名] = 值;
 * function 函数名(){
 * 
 * }
 */
```

命名规范: 
- 严格区分大小写
- 遵循驼峰命名法: 字母/下划线/数字(不能作为变量名的开头)/$ 命名基于英文单词拼接成完整的名字(第一个单词字母小写, 其余每一个有意义的单词的首字母都大写)
```var studentInfo / student_info / _studentInfo(下划线开头的都是公共变量) / $studentInfo($符开头一般存储的是jQuery元素) ```
语义化: add / del / update, info / detail
- 关键字(存在特殊含义) 保留字(未来可能会成为关键字)

## 数据类型

- 基本数据类型(值类型)
  + 数字 number => -3, -1.5, 0, 2, 4.8 NaN(not a number 代表不是一个有效数字, 但是属于number类型) 
  + 字符串 string => 'a', "b", 'abc', "abc"
  + 布尔 boolean => true(真), false(假)
  + null
  + undefined
- 引用数据类型
  + 对象 object
    + 普通对象 var o = {name: 'Tom', age: 9}; 大括号包裹, 逗号分隔, 键值对(属性名和属性值); {} 为空对象
    + 数组对象 var arr = [1, 2, 3]; 中括号包裹, 逗号分隔, 数组元素; [] 为空数组
    + 正则对象 var reg = /-?(\d|([1-9]\d+))(\.\d+)?/g; 由元字符组成
    + 日期对象 var date = new Date();
    + ...
  + 函数 function var fn = function () {}
- ES6新增: Symbol, 创建唯一的值

### 引用数据类型的创建过程
1. 开辟新的堆内存空间
2. 把`值`存储到堆内存空间中
    - 函数: 函数代码当做"字符串"作为存储的`值`
    - 对象: 键值对作为存储的`值`
3. 把开辟的堆内存地址赋值给栈内存中的函数名(变量名)

### 函数执行过程
1. 首先会形成一个私有的作用域(一个供代码执行的环境, 也是一个栈内存)
2. 其次会将之前存储在堆内存中的代码字符串复制一份过来, 变为真正的JS代码, 在新开辟的作用域中自上而下执行

```
var a = Symbol('FLAG');
var b = Symbol('FLAG');
a == b //false
```

## 运行环境
- 浏览器(浏览器内核渲染解析)
- Node(基于V8引擎渲染解析)

## 输出
- alert() alert(1+1); 结果为字符串 '2', 通过toString()方法转化为字符串后再输出; window.alert()
  + alert(true); 'true'
  + alert([1, 2]); '1,2'
  + alert({name: 'Tom'}); '[object object]'
- confirm(): 和alert用法一致, 区别是除了确定还有取消按钮 var flag = window.confirm()  //flag = true or false
- prompt(): 在confirm的基础上增加输入框 //不常用
- console.log(): 在浏览器控制台输出日志
- console.dir(): 比log输出更加详细(尤其在输出对象时)
- console.table(): 把json数据按照表格方式输出

## 数据类型详细剖析

### number 数字类型

NaN(not a number)是number类型的

isNaN : 检查当前值是否不是有效数字, true-不是有效数字, false-是有效数字
```
isNaN(123) false
isNaN('123') false
isNaN(true) false
isNaN(null) false
isNaN(undefined) true
isNaN({}) true
isNaN([]) false
isNaN([1]) false
isNaN([1, 2]) true

//运行机制
if(当前值为有效数字){
  return false;
}
else {
  转化后的值 = 浏览器尝试将值转换为数字类型
  [基本数据类型]
  Number('123') = 123
  Number('1.23') = 1.23
  Number(true) = 1
  Number(false) = 0
  Number(null) = 0
  Number(undefined) = NaN
  
  [引用数据类型]
  Number(({}).toString()) → "[object Object]" → NaN
  Number([].toString()) → "" → 0
  Number([1].toString()) → "1" → 1
  Number([1, 2].toString()) → "1, 2" → NaN
  
  if(转化后的值为有效数字){
    return false;
  }
  else {
    return true;
  }
}

//数字类型中只有NaN不是有效数字, 其余都是有效数字
```

### parseInt / parseFloat

与Number的区别在于:
>Number: 出现任意非有效数字字符, 结果就是NaN Number("12.3px") = NaN

>parseInt: 解析出字符串中的数字(整数) parseInt("12.3px") = 12

>parseFloat: 解析出字符串中的数字(整数和小数) parseFloat("12.3px") = 12.3  但是 parseFloat("width: 12.3px") = NaN

>parseInt 或 parseFloat 在查找有效数字字符时, 一旦遇到非有效数字字符, 结束查找

### NaN的比较

```
NaN == NaN : false NaN和包括自己的任意数值都不相等 Number('a') = NaN != NaN = Number('b')

if(Number(value) == NaN) 错
if(isNaN(Number(value))) 正
```

### 布尔类型

如何把其他类型的数据转换为布尔类型?

- Boolean
- !
- !!

```
Boolean(0) false
Boolean(NaN) false
Boolean('') false
Boolean(null) false
Boolean(undefined) false
//以上五个以外的值转换成布尔类型都是true

Boolean(1) true
Boolean(-1) true
Boolean('1') true
Boolean({}) true
Boolean([]) true
//显式转换
```

```
!0 true
!NaN true
!'' true
!null true
!undefined true

!1 false
!-1 false
!1 false
!{} false
![] false
//隐式转换
```

```
!!0 false
!!NaN false
!!'' false
!!null false
!!undefined false

!!1 true
!!-1 true
!!1 true
!!{} true
!![] true
```

### null & undefined

>null: 空对象指针

>undefined: 未定义

>区别
> - null 人为暂时赋值为空, 后面会再修改 var num = null
> - undefined 浏览器分配 var num //undefined

### object 对象数据类型

>普通对象
> - 由大括号包裹
> - 由零到多组属性名和属性值(键[key]值[value]对)组成

属性: 描述对象具备的特征, 属性值是对这个特征的描述

属性值可以为任意类型的值, 属性名可以为字符串或数字
```JavaScript
var obj = {
  0: 'Tom',
  1: 'Jerry'
}

var arr = ['Tom', 'Jerry']
arr
0: 'Tom'
1: 'Jerry'
length: 2

arr[1] // 'Jerry'
arr['1'] // 'Jerry'
arr.1 // Uncaught SyntaxError: Unexpected number
arr.'1' // Uncaught SyntaxError: Unexpected string
arr.length // 2
arr['length'] // 2

对于数组对象, 索引or属性名?

//数组对象支持非数字索引

arr['age'] = 24 // 正
0: 1
1: 2
age: 24
length: 2

arr = [12, 34, age: 24] // Uncaught SyntaxError: Unexpected token :
```

obj[xxx], xxx可以为任意类型的具体值
```
obj['key']
obj[1]
obj[true] //true.toString()
obj[undefined] //undefined.toString()
obj[{}] //{}.toString()
obj[[]] //[].toString()
```

```JavaScript
var obj = {
  name: 'Tom',
  age: 9
}

[查]
obj.name //'Tom'
obj["name"] //'Tom'
obj[name] //Uncaught ReferenceError: name is not defined
//name 是变量, 其存储的值才是属性名

var name = "name"
obj[name] //'Tom'
var name = "nam"
obj[name] //undefined

[增 / 改]
obj.sex = '男'
obj.name = 'Lucy'

[删]
彻底删除: 将属性从对象中移除
delete obj["age"]
obj.age //undefined

假删除: 将属性值赋值为空
obj.age = null
```

var a = 1 和 var b = {key: 'value'} 的执行过程
1. 开辟内存空间(栈内存或堆内存)
2. 将值存储到开辟的内存空间中
3. 声明变量
4. 将变量名与内存空间之间建立联系

```
var obj = {
  m: 10,
  n: obj.m * 10
};
console.log(obj.n) //Uncaught TypeError: Cannot read property 'm' of undefined
```

>在执行到第2步时报错, 堆内存空间的地址还没有赋值给obj, 此时的obj是`undefined`

```
var arr1 = [3,4]
var arr2 = arr1
arr2[0] = 1
arr2 = [4,5]
arr2[1] = 2
arr1[1] = 0

//arr1 : [1, 0]
//arr2 : [4, 2]
```

数值的`真假`
- 0/NaN/''/null/undefined 为 `false`
- 其余的值为 `true`

检测数据类型的四种方式:
- typeof
- instanceof
- constructor
- Object.prototype.toString.call()

### typeof
- 返回值可以是: "number"/"string"/"boolean"/"undefined"/"object"/"function"
- typeof null //"object" null代表空对象指针(不指向任何的内存空间)
- typeof 数组/正则/对象 的返回值都是"object", 无法细分对象
- typeof 不是方法, 而是操作符`operator `
- 括号是可选的

```JavaScript
var num = parseInt('width:35.5px');
if(num==35.5){
  alert(0);
}else if(num == 35){
  alert(1);
}else if(num == NaN){
  alert(2);
}else if(typeof num=='number'){
  alert(3);//alert输出字符串
}else{
  alert(4);
}

//'3'
```

### void
void是javascript中的一个函数，接受一个参数，返回值永远是undefined

void 0 is a correct and standard way to produce undefined
```
void 0
void (0)
void "hello"
void (new Date())
//all will return undefined

<a href="javascript:void(0)">单此处什么也不会发生</a>
```

### 三元运算符
```
var a = 1;
var b = a == 1 ? (a++, a*=10) : null; //20
```

### switch case

```
var num = '10';
if (num == 10){
  num++;
} else if (num == 5){
  num--;
}else {
  num = 0;
}

console.log(num); //11

switch (num) {
  case 10: //这里相当于 === 绝对相等(类型和值), 真实项目中为了代码的严谨性, 多用绝对相等
    num++;
    break; //有时可以不加break以达到"或 ||"的效果
  case 5:
    num--;
    break;
  default:
    num = 0;
}

console.log(num); //0

num = num + 1; //'101' 这里是字符串拼接, 而非数学运算
num++ //11
```

>三元运算符: 简单条件

>switch case: 多分支

>if else: 多级嵌套

```
for ([initialization]; [condition]; [final-expression])
   statement
```
>```continue``` 会继续执行 ```final-expression``` 而 ```break```不会