上篇简单的介绍了JavaScript，那么接下来简单学习JavaScript的语法吧
目录
上篇提到了JavaScript的输入输出语句我们五年来简单的复习以下
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
注意：
- alert() 主要用来显示消息给用户
- console.log() 用来给程序员自己看运行时的消息
接下来就继续了解JavaScript的新内容吧
一、变量的概念
1 什么是变量
白话：变量就是一个装东西的盒子。
通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改。
2 变量在内存中的存储
本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。
二、 变量的使用
变量的使用分为三个步骤进行：声明变量、赋值和变量的初始化。
1 声明变量
// 声明变量
var age; // 声明一个 名称为age 的变量 -
var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
-
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
2 赋值
age = 10; // 给 age 这个变量赋值为 10 -
= 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
-
变量值是程序员保存到变量空间里的值
3 变量的初始化
var age = 18; // 声明变量同时赋值为 18
// 声明一个变量并赋值， 我们称之为变量的初始化。4 变量语法扩展
-
更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var age = 18; age = 81; // 最后的结果就是81因为18 被覆盖掉了 -
同时声明多个变量
同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。
var age = 10, name = 'zs', sex = 2; -
声明变量特殊情况
情况 说明 结果 var age ; console.log (age); 只声明 不赋值 undefined console.log(age) 不声明 不赋值 直接使用 报错 age = 10; console.log (age); 不声明 只赋值 10
5 变量命名规范
规则：
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
- 严格区分大小写。var app; 和 var App; 是两个变量
- 不能 以数字开头。 18age 是错误的
- 不能 是关键字、保留字。例如：var、for、while
- 变量名必须有意义。 MMD BBD nl → age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
三、 数据类型
1 数据类型简介
-
为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。
-
变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：
var age = 10; // 这是一个数字型 var areYouOk = '是的'; // 这是一个字符串在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：
var x = 6; // x 为数字 var x = "Bill"; // x 为字符串 -
数据类型的分类
JS 把数据类型分为两类：
-
简单数据类型 （Number,String,Boolean,Undefined,Null）
-
复杂数据类型 （object)
-
2 简单数据类型
简单数据类型（基本数据类型）
JavaScript 中的简单数据类型及其说明如下：
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型，包含整型值和浮点型值 | 默认值：0 |
| Boolean | 布尔值类型，如true，false，等价于1和0 | 默认值：false |
| String | 字符串类型，带引号 | “ ” |
| Undefined | var：a；声明了变量a但是没有复制 | Undefined |
| Null | var：a=null； | 声明了变量a为空值 |
数字型 Number
-
JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。
var age = 21; // 整数 var Age = 21.3747; // 小数
1. 数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。
// 1.八进制数字序列范围：0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA; 我们需要记住，在JS中八进制前面加0，十六进制前面加 0x
2. 数字型范围
JavaScript中数值的最大和最小值
- 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
- 最小值：Number.MIN_VALUE，这个值为：5e-32
3. 数字型三个特殊值
| Infinity | 代表无穷大，大于任何数值 |
| -Infinity | 代表无穷小，小于任何数值 |
| NaN ，Not a number | 代表一个非数值 |
4. isNaN
用来判断一个变量是否为非数字的类型，返回 true 或者 false
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));// true ，"andy"是一个非数字字符串型 String
字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''
var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法-
字符串引号嵌套
JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)
var strMsg = '我是"高帅富"程序猿'; // 可以用''包含"" var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含'' // 常见错误 var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配 -
字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的，常用的转义符及其说明如下：
转义符 解释说明 \n 换行符，n 是 newline 的意思 \ \ 斜杠 \ ' ' 单引号 " ”双引号 \t tab 缩进 \b 空格 ，b 是 blank 的意思 -
字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
var strMsg = "我是帅气多金的程序猿！"; alert(strMsg.length); // 显示 11 -
字符串拼接
-
多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
-
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 数值字符串 "相加" alert('100' + '100'); // 100100 //1.3 数值字符串 + 数值 alert('11' + 12); // 1112
-
+ 号总结口诀：数值相加 ，字符相连
5. 字符串拼接加强
console.log('pink老师' + 18); // 只要有字符就会相连
var age = 18;
console.log('pink老师age岁啦'); // 这样不行哦
console.log('pink老师' + age); // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
- 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值
- 变量是不能添加引号的，因为加引号的变量会变成字符串
- 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间
布尔型Boolean
布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
console.log(true + 1); // 2
console.log(false + 1); // 1Undefined和 Null
一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN一个声明变量给 null 值，里面存的值为空
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 13 获取变量数据类型
1. 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
var num = 18;
console.log(typeof num) // 结果 number 不同类型的返回值
| 类型 | 例 | 结果 |
|---|---|---|
| String | typeof“小白” | "string" |
| Number | typeof 18 | "number" |
| Boolean | typeof true | "boolean" |
| Undefined | typeof undefined | "undefined" |
| Null | typeof null | "object" |
2. 字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
- 数字字面量： 8, 9, 10
- 字符串字面量： '你好', "前端"
- 布尔字面量： true，false
4 数据类型转换
什么是数据类型转换？
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：
（1）转换为字符串
| 方式 | 说明 | 案例 |
|---|---|---|
| .tostring（） | 转化为字符串 | var num =1;alert(num.toString()); |
| String()强制转换 | 转化为字符串 | var num =1;alert(String(num)); |
| 加号拼接字符串（常用，隐式转换） | 和字符串拼接的结果都是字符串 | var num =1;alert(num + ”我是字符串“); |
- toString() 和 String() 使用方式不一样。
- 三种转换方式，更多第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。
（2）转换为数字型（重点）
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt（string）函数 | 将string类型化为成整数数值型 | parselnt(78) |
| parseFloat（string）函数 | 将String类型转化为浮点数数值型 | parseFloat(78.21) |
| Number（）强制转换函数 | 将string类型转化为数值型 | Number("12) |
| js隐式转换（- * /） | 利用算数运算隐式转换为数值型 | '12' - 0 |
-
注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
-
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型
（3）转换为布尔型
-
代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
-
其余值都会被转换为 true
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true
四、流程控制
1 流程控制概念
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。 简单理解：流程控制就是来控制代码按照一定结构顺序来执行 流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。
2 顺序流程控制
顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。
3 分支流程控制
-
分支结构
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
JS 语言提供了两种分支结构语句：if 语句、switch 语句
if 语句
语法结构
// 条件成立执行代码，否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}
语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。
if else语句（双分支语句）
语法结构
// 条件成立 执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}
if else if 语句(多分支语句)
语法结构
// 适合于检查多重条件。
if (条件表达式1) {
语句1；
} else if (条件表达式2) {
语句2；
} else if (条件表达式3) {
语句3；
....
} else {
// 上述条件都不成立执行此处代码
}
4 三元表达式
语法结构
表达式1 ? 表达式2 : 表达式3;
执行思路
- 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
- 简单理解： 就类似于 if else （双分支） 的简写
5 switch分支流程控制
语法结构
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
- switch ：开关 转换 ， case ：小例子 选项
- 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
- 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
- switch 表达式的值会与结构中的 case 的值做比较
- 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
- 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
switch 语句和 if else if 语句的区别
- 一般情况下，它们两个语句可以相互替换
- switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
- switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
- 当分支比较少时，if… else语句的执行效率比 switch语句高。
- 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
