前端学习（十三）JavaScript基础-变量

JavaScript是什么

• JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言
• 不需要编译，运行过程中由js引擎（js解释器）逐行解释并执行
• 可以基于node.js进行后端开发

JavaScript的作用

• 表单动态校验（密码强度检测）
• 网页特效
• 服务器开发（node.js）
• 桌面程序（Electron）
• App（Cordova）
• 物联网（Ruff）
• 游戏开发（cocos2d-js）

浏览器执行js

浏览器分成两部分：渲染引擎和JS引擎

• 渲染引擎：解析HTML和CSS，俗称内核，如blink、webkit
• JS引擎：也称为JS解释器，用来读取网页中的JS代码，并对其处理

JS的组成

• ECMAscipt：js语法
• DOM：页面文档对象模型
• BOM：浏览器对象模型

ECMAscript

是由ECMA国际进行标准化的一门编程语言，这门语言在万维网上应用广泛，它往往被称为JavaScript（网景公司）或JScript（微软公司），但是实际上后两者是ECMAscript语言的实现和拓展

ECMAscript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

DOM 文档对象模型

文档对象模型（Document object model），是W3C组织推荐的处理可拓展标记语言的标准编程接口

通过DOM提供的接口，可以对页面上的各种元素进行操作（大小、位置、颜色）

BOM 浏览器对象模型

浏览器对象模型（browser object model），它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，如弹出框、控制浏览器跳转、获取分辨率等

输入输出语句

• alert(msg)：浏览器弹出警示框
• console.log(msg)：控制台打印输出信息
• prompt(info)：浏览器弹出输入框，用户可以输入

变量

变量声明和赋值

//var是js关键字，用来声明变量
var age;

//变量的赋值
age = 10;

//声明一个变量，并进行赋值的过程，称为初始化
var age = 18;

//变量更新，重新赋值
age = 81;

//同时声明多个变量
var age = 10, money = 20;

//特殊情况1：只声明，不赋值，结果是 undefined
var age;
//特殊情况2：不声明，不赋值，直接使用，结果是 报错
//特殊情况3：不声明，直接赋值，结果是，可以的，但是不推荐这样使用

命名规范

• 字母、下划线、美元符号($)组成
• 区分大小写
• 不能以数字开头
• 不能是关键字、保留字
• 见名知义
• 驼峰命名法

数据类型

• 为什么需要数据类型：不同数据占用存储空间不同，为了充分利用存储空间，定义了不同的数据类型

• 变量的数据类型：js是弱类型的语言，在程序运行过程中，自动确定变量的数据类型

• 数据类型分类：

  • 简单数据类型（Number、String、Boolean、Undefined、Null）
  • 复杂数据类型（object）

简单数据类型

数据类型	说明	默认值
Number	数字型，包括整型和浮点型	0
String	布尔型，包括true和false，等价于1和0	false
Boolean	字符串类型	空字符串“”
Undefined	只声明变量，但是没有赋值	undefined
Null	空	null

• 数字型：

  • 可以是小数或整数
  • 可以是八进制数，前面加0，如 var a = 012
  • 可以是十六进制数，前面加0x，如 var a = 0xcc
  • 最大值：Number.MAX_VALUE
  • 最小值：Number.MIN_VALUE
  • 无穷大：Infinity
  • 无穷小：-Infinity
  • 非数值：NaN

• 数字型判断：isNaN(x)

  x是数字，返回false；x不是数字，返回true

• 字符串型：

  • 双引号或者单引号
  • 嵌套时，内外用不同的引号
  • 特殊字符需要用转义符表示

转义字符	说明
\n	换行符，newline
\	反斜杠 \
\'	单引号
\"	双引号
\t	tab缩进，制表符
\b	空格，blank

• 字符串长度：使用length获取字符串长度

• 字符串拼接：用加号+进行拼接

• 布尔型Boolean：有两个值 true和false，在参与数学运算时，true为1，false为0

• Undefined：没有被初始化的变量为Undefined

  • 参与字符串拼接时，将Undefined拼接到字符串
  • 参与数学运算时，得到NaN

• Null：空值

  • 参与字符串拼接时，将Null拼接到字符串
  • 参与数学运算时，不造成任何影响，如 1 + Null，结果还是1

获取变量数据类型

检测变量的数据类型

利用typeof可以检测变量的数据类型

类型	例子	结果
String	typeof ‘123’	“string”
Number	typeof 18	“number”
Boolean	typeof true	“boolean”
Undefined	typeof undefined	“undefined”
Null	typeof null	“object”

字面量

也就是常量的意思

• 数字字面量：1，2，3
• 字符串字面量：“舒克”
• 布尔字面量：true，false

数据类型转换

使用表单、prompt获取的数据默认是字符串类型的，不能直接进行加法运算，因此需要转换数据类型

转换为字符串

方式	说明	案例
toString()	在变量的末尾加	num.toString
String()强制转换	将变量放在括号里	String(num)
加号拼接字符串	和字符串拼接的结果都是字符串，也称为隐式转换	num + “”

转换为数字型

方式	说明	案例
parseInt(string)	转换为整数	parseInt(‘123’)
parseFloat(string)	转换为浮点数	parseFloat(‘123.45’)
Number() 强制转换	转换为数值型	Number(‘123’)
js隐式转换（- * /）	利用算术运算隐式转换为数值型	‘123’ - 0

转换为布尔型

Boolean(‘123’)

• 代表空、否定的值会被转换为false，如‘’、0、NaN、null、undefined
• 其余值会被转换为true