前端自学笔记8：JavaScript基础语法

JavaScript基础语法

1、JavaScript介绍

JavaScript是一种运行在客户端的脚本语言（不需要编译，运行过程中由js解释器逐行解释并运行，也可以基于Node.js进行服务区端编程）。

2、浏览器执行JS简介

浏览器分为两部分：渲染引擎和JS引擎
渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版的webkit；
JS引擎：读取网页中JavaScript代码，对其进行后运行，比如chrome浏览器的V8；

3、JS组成

• ECMAScript：JavaScript语法，规定了JS编程语法和基础核心知识，是所有浏览器厂商共同遵守的标准。
• DOM：页面文档对象模型，通过DOM提供的借口可以对页面上的各种元素进行操作。
• BOM：浏览器对象模型，可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

4、JS书写位置：行内式、内嵌式、外部式、

5、JavaScript输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

6、JavaScript变量

变量的使用：

var 变量名;  //第一步，声明变量
变量名 = 变量值;   //第二步，给变量赋值

//或将两部合二为一：
var 变量名 = 变量值;

7、JavaScript变量命名规范

• 由字母、下划线、数字、美元符号组成
• 区分大小写
• 不能以数字开头
• 不能是关键字，比如var for while
• 变量名具有意义
• 遵守驼峰命名法，首字母小写，后边单词首字母大写

8、JavaScript变量基本数据类型与属性

简单数据类型	说明	默认值
Number	var a=123;数字型，包含整数值和浮点型值，如21，0.21	0
Boolean	var a=false;布尔型，取值为true或false，等价于1和0	false
String	var a = “string”;字符串类型	“”
Undefined	var a; 声明了变量a但是没有给值	undefined
Null	var a = null;声明了变量a为空值	null

• 数字型范围：
  最大值：Number.MAX_VALUE
  最小值：Number.MIN_VALUE
• 特殊值：
  无穷大值：Infinity（大于任何数值）
  无穷小值：-Infinity（小于任何值）
  非数值：NaN（not a number）
• 字符串转义符：

转义符	说明
\n	换行符
\	斜杠
’	单引号
"	双引号
\t	tab缩进
\b	空格，b是blank的意思

• 字符串长度
  用length属性获取

var str = 'abcdefg';
console.log(str.length) //结果为7

• 获取变量的类型：
  使用typeof

var num = 10;
console.log(typeof num);  //输出为number  

PS：prompt获取到的变量类型自动转为字符型。

9、数据类型转换

转为字符型：

方式	说明	案例
toString()	转成字符串	var num =1;alert(num.toString());
String()强制转字符串	转成字符串	var num =1;alert(String(num))
+拼接字符串	和字符串拼接的结果都是字符串	var num=1;alert(num+“字符串”)；

转为数字型：

方式	说明	案例
parseInt(string)	将string类型转为整数数值型	parseInt(‘78’);
parseFloat(string)	将string类型转为浮点数数值型	paresFloat(‘78.21’);
Number()强制转换函数	将string类型转换为数值型	Number(‘12’);
js隐式转化(- * /)	利用算数运算隐式转化为数值型	‘12’-0

转为布尔型：

方式	说明	案例
Boolean()	除0、NaN、null、undefined，其余都转化为true	Boolean(‘true’);

10、关键字

break case catch continue default delete do else finally for function if in instance new 
return switch this throw try typeof var void while with

• 保留字(预留的关键字)

boolean byte char class const debugger double enum export extends fimal float goto implements
import int interface long mative package private protected public short static super synchronized throws transient volatile

11、运算符（operator）

运算符是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中，常见的运算符有：算数运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符。

• 算数运算符：加（+），减（-），乘（*），除（/），取余数（%）；
• 递增（++）/递减（–）运算符：
  作用：将变量反复地添加或减去1

//++num  表示先将num+1，再返回值
//num++  表示先返回值，后将num+1

var num = 10;
alert(num)   //返回10
alert(num++)   //返回10
alert(num)   //返回11

var num1 = 20
alert(num1)  //返回20
alert(++num1)  //返回21
alert(num1)  //返回21

var a = 10;
++a;   // ++a=11  a=11
var b = ++a +2  //++a=12 
alert(b) //b=12+2=14


var c = 10;
c++;  //c++=10 c=11
car d = c++ +2;  //c++ =11   c=12
alert(d)   //d=11+2=13


var e = 10;  
var f = e++ + ++e;  //第一步，e++=10 e=11  第二步 ++e =12 , e=12
alert(f)  //f = 10+12=22

• 比较运算符

运算符名称	说明	案例	结果
<	小于	1<2	true
>	大于	1>2	false
>=	大于等于	2>=2	true
<=	小于等于	3<=2	false
==	判等号（会转型）	37==‘37’	true
!=	不等号	37!=37	false
=== !==	全等 要求值和数据类型都一致	37 ===‘37’	false

• 逻辑运算符

逻辑运算符	说明	案例
&&	and	true && flase,返回false
||	or	true || false,返回ture
！	not	!true,返回false

• 短路运算（逻辑中断）：当有多个表达式时，左边的表达式可以确定结果时，就不再继续运算右边的表达式值。

逻辑与短路运算
表达式1 && 表达式2
如果第一个表达式值为真，则返回表达式2
如果第一个表达式为假，则返回表达式1

逻辑或短路运算
如果表达式1值为真，则返回表达式1
如果表达式1值为假，则返回表达式2
例子：
var num = 0;
console.log(123 || num++);//结果为123
console.log(num); // 结果为0，因为num++没有执行

• 赋值运算符

赋值运算符	说明	案例
=	直接赋值	var username = ‘取值’;
+=、-=	加、减一个数后再赋值	var age = 10; age += 5;// 结果15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age*=5; //结果10

• 运算符优先级

优先级	运算符	顺序
1	小括号	先算小括号里的
2	一元运算符	++ – ！
3	算数运算符	先* / 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后||
7	赋值运算符	=
8	逗号运算符	,