第三章 Javascript的变量声明、命名规范、基本数据类型以及数据类型的转换

前言

本栏目为笔者结合自身前端学习笔记、w3cschool官网文档以及其他相关技术文档整理而成的javascript知识点合集，整理不易，如果本篇笔记对您的学习有帮助的话，请点个赞叭！

（一）变量声明

1、var声明

（1）声明并定义单个变量

var a = 100

（2）声明单个变量

var a

（3）声明多个变量

var a,b,c,d

（4）声明并定义多个变量

var a=10,b=20,c="abc"

2、let声明

let关键字是ES6提出的，基本的声明方式与var相同，都能实现以下四种声明：

（1）声明并定义单个变量

let a = 100

（2）声明单个变量

let a

（3）声明多个变量

let a,b,c

（4）声明并定义多个变量

let a=100,b=200,c="abc"

3、const声明

 const是ES6提出的关键字，其与var 、let的区别在于：const只能定义常量。

所谓的定义常量，通俗而言就是，const声明之后必须赋值，并且之后不能再改变对应的变量的值，因此该变量也可认为是“常量”。

（1）const仅声明

const a  //报错：Missing initializer in const declaration

（2）const声明定义变量，并在后续改变对应变量的值

const a = 100   //声明并定义
a = 200  //修改
//报错：Assignment to constant variable.（常量无法赋值）

（3）const声明并定义（const唯一使用方式）

const a = 100

（4）const特殊之处

对于数组、对象等复杂数据类型，由于其数据存储情况的不同（地址存在栈区，数据存在堆区） 

const定义的数组、对象的value可以改变

const obj = {
    a:100
}
obj.a = 200
console.log(obj)  //{a: 200}

const list = [1,2,3,4]
list[2] = 200
console.log(list)  //[1, 2, 200, 4]

4、var、let、const三者之间的区别

（1）变量提升

var 可以实现变量提升，而let和const需要先定义再使用。

所谓变量提升，即可以先使用再声明。因为在预解析的时候，系统先提取所有var声明的变量，然后重头再按照顺序执行代码。声明的变量先定义为undefined类型。

console.log(a)   //undefined

var a = 100

console.log(b) //报错，程序中断（由于b变量未声明、不存在）

let 和 const不存在变量提升，先使用后定义则会报错。在let / const 声明之前的区域，称为变量的“暂时性死区”，而var 不存在暂时性死区。

console.log(a2)  //Cannot access 'a2' before initialization 报错，不能在初始化之前定义
let a2 = 100

console.log(a)  //报错：Cannot access 'a' before initialization
const a = 100  

（2）作用域

const 和 let 存在块级作用域，每一个{}包裹的内容都是一个块级作用域。

var 不存在块级作用域，可以跨块访问，但是在函数中存在作用域

{
    let a = 100
}
console.log(a)  //Uncaught ReferenceError: a is not defined

{
    const a = 100
}
console.log(a)  //Uncaught ReferenceError: a is not defined

{
    var a = 100
}
console.log(a)  //100

此处要注意：在使用for循环时，最好用let声明变量，否则会容易发生i变量覆盖问题。

for(let i = 0 ;i < 10 ; i ++ )

（3）重复声明

var允许重复声明，并且后声明定义的值会覆盖先声明定义的值

var a = 100
var a = 200
console.log(a)   //200

const / let 不允许重复声明

let a = 100
let a = 200  //Identifier 'a' has already been declared

let a = 100
let a = 200  //Identifier 'a' has already been declared

但是，由于const / let存在块级作用域，在不同块级作用域中声明变量不属于重复声明（可看成是两个不同的变量）

let a = 100
{
    let a = 200
}
console.log(a)  //100

 二、变量的命名规范

1、必须规范

变量命名必须遵循以下规则，否则会报错

（1）一个变量名可以由数字、字母、下划线（_）、美元符号（$）组成；

（2）严格区分大小写；

（3）不能由数字开头；

（4）不能是关键字或保留字；

（5）不能出现空格；

2、推荐规范

变量命名遵循一般以下约定，不遵循也不会报错

（1）变量名有意义（语义化：英文单词或汉语拼音）；

（2）遵循驼峰命名规则

var personNum  //驼峰命名规范

（3）尽量不使用中文

三、基本数据类型 

1、Number

var a = 100

此时的age即是数字类型的变量，支持类型包括：100（整数）、12.5（浮点数）、2e3（科学计数法）、十六进制、八进制、二进制，NaN（也是Number类型）

2、String

var a = "abc"

3、Boolean

var a = true
var b = false

4、Undefined

变量声明了，但是未赋值的变量的值均为Undefined

var a
console.log(a)  //undefined

5、Null

若知道未来要放一个对象，可以先赋值null占空

var a = null

Undefined和null有语义上的区别：什么都不赋值的时候为undefined，而null需要专门定义

6、Symbol

（1）Symbol是ES6新出的基本数据类型，表示一个独一无二的值。Symbol类型的变量需要用Symbol()函数创建，但是不能使用new。

var a = Symbol(12)
console.log(a)  //Symbol(12)

（2）Symbol()函数即使参数一样，两个变量也不同（独一无二）

var a = Symbol(12)
var b = Symbol(12)
console.log(a == b)  //false

由于以上特性，Symbol可用于解决变量冲突问题。

四、基本数据类型方法

1、数据类型强制转换成数字类型

（1）Number()转换为Number类型

var a = "12"
console.log(typeof Number(a))  //number
console.log(Number(a))  //12

var a = "abc"
console.log(typeof Number(a))  //number
console.log(Number(a))  //NaN

但变量无法转化成纯数字（即存在字母等），将转化为NaN值。

var a = true,b = false
console.log(typeof Number(a),typeof Number(b))  //number number
console.log(Number(a),Number(b))  //1 0

 布尔类型转化为Number：

true => 1

false => 0

var a = null
console.log(typeof Number(a))  //number
console.log(Number(a))  //0

null转化为Number类型则为：0

var a
console.log(typeof Number(a))  //number
console.log(Number(a))  //NaN

Undefined转化为Number类型则为：NaN

（2）parseInt()

松散的数据类型转化，可以对以数字开头的其他数据类型的值的开头数据提取出来：

可以将“123abc”中的123提取出来；

但对于“123.23”也只能提取出123；

而对于非数字开头的“abc123”，提取结果为：NaN。

var a = "123abc"
console.log(parseInt(a))  //123

var a = "abc123"
console.log(parseInt(a))  //NaN

var a = "abc123"
console.log(parseInt(a))  //NaN

（3）parseFloat()

浮点数据类型转化，比起parseInt()，能使用更多的情况，比如提取出：123.23中的123.23

var a = "123.23"
console.log(parseFloat(a))  //123.23

var a = "123abc"
console.log(parseFloat(a))  //123

var a = "abc123"
console.log(parseFloat(a))  //NaN

（4）简易方法：使用除“+”以外运算符（-*/）对纯数字字符串进行运算，也可以实现数据类型转换

var a = "123"
console.log(typeof (a - 0))  //number

2、数据类型强制转换成字符串

（1）String()：所有类型都能转化成字符串

var a = 123
console.log(typeof String(a)) //string
console.log(String(a))  //123

var a = null
console.log(typeof String(a)) //string
console.log(String(a))  //null

var a
console.log(typeof String(a)) //string
console.log(String(a))  //undefined

（2）toString()：可以转化出null和Undefined之外的数据类型

var a = 100
console.log(typeof a.toString()) //string
console.log(a.toString())  //100

若使用toString()方法对unll、Undefined类型的变量进行转换，则会报错

var a = null
console.log(typeof a.toString()) 
//Cannot read properties of null (reading 'toString')

var a
console.log(typeof a.toString()) 
//Cannot read properties of undefined (reading 'toString')

（3）简易方法：使用“+”将任意字符串（如：“”）和其他类型的变量拼接，即可实现转化为字符串的目的

var a = 100
console.log(typeof (a + "")) //string
console.log(a + "")  //100

var a
console.log(typeof (a + "")) //string
console.log(a + "")  //unefined

var a = null
console.log(typeof (a + "")) //string
console.log(a + "")  //100

3、数据类型强制转换成布尔类型

在javascript中，除了""、null、undefined、0、NaN对应的布尔值为：0；

其余值对应的布尔类型均为1

（1）使用Boolean()函数进行转换

var a = 100
console.log(typeof Boolean(a)) //boolean
console.log(Boolean(a))  //true

var a = NaN
console.log(typeof Boolean(a)) //boolean
console.log(Boolean(a))  //false

var a = 0
console.log(typeof Boolean(a)) //boolean
console.log(Boolean(a))  //false

var a = null
console.log(typeof Boolean(a)) //boolean
console.log(Boolean(a))  //false

var a   //undefined
console.log(typeof Boolean(a)) //boolean
console.log(Boolean(a))  //false

（2）注意""（空）与"  "（空格）的区别

""（空）=> false

"  "（空格）=> true

var a = ""
console.log(typeof Boolean(a)) //boolean
console.log(Boolean(a))  //false

var a = " "
console.log(typeof Boolean(a)) //boolean
console.log(Boolean(a))  //true