一、JS简介

JavaScript是目前web开发中不可缺少的脚本语言，前端三件套之一。JS可以直接运行在浏览器端，增加网页的动态交互功能。测试版本叫LiveScript，但发布正式版时又被重命名为JavaScript。为什么命名为JavaScript呢？因为Java当时比较火，可以说是为了蹭一下Java的热度。

ECMAScript为我们定义最基本的语法，像是数据类型（原始值、对象）、运算符、流程控制语句等内容。为了使JS可以适用于不同的场景，在不同的JS解释器中还为我们提供了不同的扩展以增强其功能。像是浏览器中的DOM、BOM使得我们可以通过JS操作网页和浏览器。NodeJS中的fs模块可以使我们直接操作计算机系统中的各种文件。所以我们学习JS时，除了要学习ES标准以外，还要学习它的各种扩展，才能在不同的环境中发挥出JS的最大威力

二、第一个js程序

学习一门编程语言，第一步当然就是 hello world 啦，问就是，一定要有仪式感，尊重传统

可以在html模板中的head标签写入下列代码，再用浏览器打开，即可运行

1
2
3
4
5
<script>
      alert("Hello world")			//弹出提示框
      console.log("Hello world")  //在控制台打印 ,按下F12进入开发者模式即可查看
      document.write("Hello world")	//写入到网页中
</script>

三、JS书写位置

1.内嵌式

可以在html模板中的head标签中书写script标签，然后将js书此script标签中,

1
<script>在这里书写语句吧</script>

2.外链式

新建一个后缀名为.js的文件，然后在该文件中书写语句，再通过script标签引入到html网页中

3.行内式

也可以直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。

1
<button onclick="alert('你点我干嘛')"></button>

四、JS中的一些基础语法

1
2
3
4
1、 注释：多行注释  /**/  
		 单行注释  //   
3、js严格区分大小写        
4、js中每一条代码都应该以分号结尾，如果没有写，解释器会自动进行添加。不过某些特殊情况下，会添加错误。

五、变量和常量

js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型。

1、声明

1
2
3
4
5
//var与let都是声明变量，最好不要使用var
var a = 10
let b = '我是一个字符串' 
//声明常量
const c = 20

2、注意事项

  • 用let，而不要使用var（var本身存在很多问题，记得用 let 就完了）
  • 变量并不存储任何值，而是存储值的内存地址

六、数据类型与类型检查

1、基本类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1.数值型(Number):  //存储很大或很小的数时无法准确显示
	let a = 1     //NaN也是一个特殊的数值,表示非法的数值
2.大整数(BigInt):  //以n结尾，可表示的数字范围是无穷大
	let b = 9999999999999999n
3.字符串(String): 	//使用单引号或双引号
	let str = "我是字符串"
4.布尔(Boolean):  
	let i = true
5.空值(Null):
	let j = null
6.未定义(Undefined)//当声明一个变量而没有赋值时，它的值就是Undefined
	let a
7.符号(Symbol)	//用来创建一个唯一的标识 
	let c = Symbol("我是一个符号")

2、typeof类型检查

a定义的值(let a =) typeof a的返回值
1 number
9999999999999999n bigint
true boolean
null object
不进行定义 undefined
Symbol(“创建符号”) symbol

注：由于js历史遗留问题，编辑器会将null作为object类型处

七、类型转换

1、显式转换

显示转换一般指使用Number、String和Boolean三个构造函数，手动将各种类型的值，转换成数字、字符串或者布尔值。还有专门将字符串转换为数值的方法，如parseInt、parseFloat等

  • Number函数：
1
2
3
4
5
String(1234)  // "1234"
String('abcd')  // "abcd"
String(true)  // "true"
String(undefined) // "undefined"
String(null)  // "null"

  • String函数：

    1
    2
    3
    4
    5
    String(1234)  // "1234"
    String('abcd')  // "abcd"
    String(true)  // "true"
    String(undefined) // "undefined"
    String(null)  // "null"

  • Boolean函数：

    1
    2
    3
    4
    5
    Boolean(0)  // false
    Boolean(undefined)  // false
    Boolean(null)  // false
    Boolean(NaN)  // false
    Boolean('')  // false

  • parseInt与parseFloat函数：

    1
    2
    3
    let a = "3.1415"
    let b = parseInt(a)   //b = 3
    let c = parseFloat(c) //c = 3.1415

2、简单聊聊隐式转换

#####隐式类型转换是在一定场景下，js 运行环境自动调用ToString、ToNumber、ToBoolean、ToPrimitive这几个方法，尝试转换成期望的数据类型。

转化类型 运算符 说明
转换成 String + ‘任意字符串’ 任意值与字符串相加，会先将其他值转换为字符串，然后拼接
转换成 Number (自增自减运算符) (减、乘、除) (关系运算符) 转换为 Number 再进行运算
转换为Boolean ! (逻辑非运算符) 自动转换为Boolean

任意值与字符串相加的例子

1
a = 10 + '5' // "10" + "5"  会返回"105"

其他的例子

1
2
3
4
5
a = 10 - '5' // 10 - 5
a = "5" % 2   // 5 % 2
a = 10 + true // 10 + 1
a = 5 + null // 5 + 0
a = 6 - undefined // 6 - NaN

八、运算符

1、算数运算符

1
2
+ - * /  ++  --  %
加减乘除 自加 自减 取模

2、赋值运算符

运算符 例子 等同于
= x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

3、比较运算符

1
<  <=  >  >=

js中特殊的比较运算符

运算符 描述 例子 返回值
== 等于 值相等时，返回true 5 == “5” true
=== 绝对等于 值和类型都等于时，返回true 5 ===’ 5’ false
!= 不等于 值不相等时，返回true 5 !== “5” false
5 !== “4” true
!== 不绝对等于 值和类型有一个不相等，或两个都不相等时返回true 5 !== “5” true
5 !== “4” true

4、逻辑运算符

1
2
&&  ||  ! 
且   或  非

5、条件运算符

  • 语法：条件表达式 ？表达式1 : 表达式2

  • 执行顺序：

条件运算符在执行时，会先对条件表达式进行求值判断，如果结果为true，则执行表达式1,如果结果为false，则执行表达式2 

1
let max = a > b ? a : b  //可以获取将a和b的最大值

九、流程控制

1、条件语句

1
2
3
4
5
6
7
8
9
10
let score = 59;
if (条件表达式) {
    语句...
 } else if (条件表达式) {
    语句...
 } else if (条件表达式) {
    语句...
 } else if (条件表达式) {
    语句...
 }

####2、switch语句

注意：switch语句在执行时，会依次将switch后的表达式和case后的表达式进行**==全等比较==**

1
2
3
4
5
6
7
8
9
10
11
switch(表达式){
	case 表达式:
		代码...
 		break
	case 表达式:
		代码...
		break
	default:   // 如果所有的比较都是false，则执行default后的语句
		代码...
		break
               }

3、循环语句

1
2
3
while(循环条件){循环体;}
do{循环体;}while(循环条件);
for(循环变量赋初值；循环条件；循环变量增值){循环语句;}

4、补充(while与do-while语句的比较)

​ while语句是先判断再执行
​ do-while语句是先执行再判断
实质的区别：
​ do-while语句可以确保循环至少执行一次

1
2
3
4
5
6
7
8
9
10
11
//会打印一次
let i = 10
do{
	console.log(i)
    i++
}while(i < 5)
//不会打印
while(i<5){
    console.log(i)
    i++
}