01-JS基础语法

一、JS语言的简单解释

1995年诞生，布兰登艾奇用了10天时间设计出来。

弱类型的脚本语言：基于对象、简单、动态性、跨平台

• 弱类型：创建后变量还可以进行改变
• 脚本语言：需要依附在HTML文件中运行的

---

二、JS的创建书写方式：行内、内部、外部

1. 行内式的创建方式

• 在a标签中书写 最简单的书写方式，只需要在href中书写JS事件即可
• 在非a标签书写，可以把事件看出是html标签的属性，在属性值位置属性JS语法即可

<a href="javascript:alert('Hello');">点击跳转a>
1

阻止跳转：表示点击a标签的时候不会发生跳转

• javascript:; JS代码没有写完，阻止后面程序的运行

2. 内部式的创建方式

• 使用的是script标签（脚本）
• 在script中书写规法的JS语法即可

<script>
    alert("Hello world")
script>
1
2
3

3. 外部式的创建方式

• 需要在外面创建一个后缀名.js的文件
• 需要script标签引入进来

<script src="js/index.js">script>
1

关于JS创建的总结

1. 行内写法基本不使用，代码写在一起比较麻烦，后期更新维护复杂
2. 内部式创建可以写在当前文档中的任何地方，建议写在文档的最下面（html+css+JS）
3. 内部和外部的书写不可以共用一个script标签

---

三、JS组成部分

web的组成部分：html+css+JS

JS的组成部分：

1. DOM：Document Object Model 文档对象模型（获取到结构绑定相关的事件）
2. BOM：Browser Object Model 浏览器对象模型（通过一些方法设置浏览器）
3. ECMAScript：语言的规法 目前学习ECMA3

---

四、输出方式

为了查看当前代码是否符合我们想要的结果（审查过程）

1. window.alert() 可以简写成alert() 系统的弹窗，用于提示信息、警告等作用

2. document.write() 在文档上书写，表示当前的数据会在浏览器的显示页面上展示出来

3. console.log() 控制台 日志 工作中用的最多的一种输出方式

4. confirm() 确认 一种提示作用

5. prompt() 需要用户自己输入的

   prompt("请输入您的密码",123)
   1

---

五、变量

用来储存数据的容器

1. 定义变量

   • 使用一个关键字 variable 表示多变的可变的，简写为 var
   • 使用方法：var 变量名称 例如：var aa
   • 可以一次声明多个变量 var a,b,c
   • 隐式声明，省略var，涉及作用域问题 aa=1

2. 变量名称的使用规则

   • 不能使用中文汉字或纯数字开头的变量名
   • 不能使用特殊符号 ?&*… 可用：&_$
   • HTML和CSS属性不建议使用
   • 关键字和保留字
   • 变量名称大小写是有区别的

3. 变量赋值

   • 使用一个符号 “=” 表示赋值
   • 变量的赋值表示将等号右侧的值赋给左侧的变量

---

六、JavaScript的数据类型【重点】

1. 判断数据类型

   • typeof 被检测的数据 | typeof(被检测的数据)

   • 数字类型 number，字符串 string，undefined 未定义、未赋值，布尔类型 boolean，对象 object 万物皆对象

     var e = [] //数组：有序的数据集合
     var f = {} //对象：无序的数据集合
     var g = null //空的
     1
     2
     3

   JS数据类型的总结

   1. number 数据类型：正数、负数、0
   2. string 字符串类型：只要是引号里面都是字符串（单双引号一样）
   3. undefined 未定义的：表示定义了没有赋值
   4. Boolean 布尔类型： true/false
   5. Object 对象：null、数组、对象

   拓展：

   除了以上数据类型，在ECMA后续的版本中还新增了很多数据类型，如：symbol(ES6)、bigInt(ES10)

   JS中基本数据类型和引用数据类型的区别

2. 数据类型的一些拓展

   1. 进制的了解

      var a = 010; //8进制
      var b = 0XA; //16进制
      var c = 0Xb; //小写字母和大写字母都可以
      console.log(a); //8
      console.log(b); //10
      console.log(c); //11
      1
      2
      3
      4
      5
      6

   2. NaN的认识

      //NaN:not a number，表示一个非数字
      //在JS中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，JS不会报错，而是会返回一个NaN
      
      /* NaN的注意事项：
      	- NaN的类型是number，表示一个非数字
      	- NaN不等于任何值，包括NaN本身
      	- 通过isNaN()可以判断是否是一个数字，返回false的时候表示是一个数字
      */
      var a = 123;
      var b = "abc";
      console.log(isNaN(a)); //false
      console.log(isNaN(b)); //true
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12

   3. 科学计数法

      //当一个数字很大的时候，可以使用科学计数法来表示
      var num = 5e+5; //5乘以10的5次方
      var num = 3e-3; //3乘以10的-3次方
      1
      2
      3

   4. 浮点数精度丢失问题

      //在进行浮点数运算的时候，可能会出现精度丢失的问题
      0.1 + 0.2 = 0.300000000004;
      0.2 + 0.2 = 0.4;
      //尽量少用浮点数进行运算，会出现精度丢失问题，是进制换算导致的
      //解决办法：根据小数点后面的位数量，乘以对应的整数
      0.1 + 0.2 ==> (0.1*10+0.2*10)/10 = 0.3
      1
      2
      3
      4
      5
      6

      JS中的数字都是双精度的浮点数，在进行计算时，计算机会把十进制数转换成64位二进制，这个过程可能会导致精度丢失。

   5. 字符串的转义符号

      \n 换行
      \b 空格
      \  斜杠
      1
      2
      3

---

七、JS数据类型转换

1. 字符串类型转换为数字类型

将字符串类型转换为数字类型（字符串中是数字），才可以进行转换

注意：当字符串中有数字和字符组合的时候，number方法会输出NaN

//1. Number()
    var a = "10"
    var a1 = Number(a)
	cosole.log(a,a1) // "10",10
//2. parseInt()
	var b = '2.9111'
	var b1 = parseInt(b)
    console.log(b,b1)//"2.9111",2
//3. parseFloat()
	var c = '3.1415'
    var c1 = parseFloat(c)
    console.log(c,c1)//“3.1415”,3.1415
//4. Math.round() 四舍五入，只看小数点后一位
	var d = '3.14'
    var d1 = Math.round(d)
    console.log(d,d1) //"3.14",3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

总结：

相同点：都可以转换为数字类型

不同点：

• parseInt 转换的是整数，parseFloat转换的是浮点数
• number转换的是纯数字，如果有字符就会显示NaN
• parse方法可以转换含有字符的字符串

---

不常见的转换方式【面试题】

用转换为数字类型的四种方法去转换其他的数据类型

1. 将布尔类型转换为数字类型

   var e = true // true/false
   console.log(Number(e)) // 1/0
   console.log(parseInt(e)) // NaN
   console.log(parseFloat(e)) // NaN
   console.log(Math.round(e)) // 1/0
   1
   2
   3
   4
   5

   • parse方法会转换得到NaN
   • Number和Math.round方法会得到1(true)和0(false)

2. 将undefined类型转换为数字类型

   var f = undefined
   console.log(Number(f)) // NaN
   console.log(parseInt(f)) // NaN
   console.log(parseFloat(f)) // NaN
   console.log(Math.round(f)) // NaN
   1
   2
   3
   4
   5

   • 表示所有转换的值都是NaN

3. 将null类型转换为数字类型

   var g = null
   console.log(Number(g)) // 0
   console.log(parseInt(g)) // NaN
   console.log(parseFloat(g)) // NaN
   console.log(Math.round(g)) // 0
   1
   2
   3
   4
   5

   • parseInt 和 parseFloat 方法会转换得到NaN
   • Number和Math.round方法会得到0

2. 将数据转换为字符串类型

String(被转换的数据)，被转换的数据.toString()

1. 将数字类型转换成字符串类型

   var a = 1
   console.log(String(a)) // "1"
   console.log(a.toString()) // "1"
   1
   2
   3

   保留小数：变量.toFixed(保留位数)

   可以把数字类型转换为字符串类型

2. 将布尔类型转换为字符串类型

   var b = false
   console.log(String(b))//"false"
   console.log(b.toString())//"false"
   1
   2
   3

3. 将undefined类型转换为字符串类型

   var c = undefined
   console.log(String(c))//"undefined"
   console.log(c.toString())//报错 后面不会执行(js单线程)
   1
   2
   3

   • String方法转换的时候可以转换为字符串类型
   • toString方法转换的时候会报错

4. 将null类型转换为字符串类型

   var d = null
   console.log(String(d))//"null"
   console.log(d.toString())//报错 后面不会执行
   1
   2
   3

   • String方法转换的时候可以转换为字符串类型
   • toString方法转换的时候会报错

3. 将数据转换为布尔类型

Boolean(被转换的数据)

1. 将数字类型转换为布尔类型

   var a = 10
   console.log(Boolean(a))//true
   1
   2

   • 非0的数都是true，只有0转换得到false

2. 将字符串转换为布尔类型

   var b=''
   console.log(Boolean(b))//false
   var b1='0'
   console.log(Boolean(b))//true
   1
   2
   3
   4

   • 非空转换得到true，字符串为空时是false

3. 将undefined类型转换为布尔类型

   var c = undefined
   console.log(Boolean(c))//false
   1
   2

4. 将null类型转换为布尔类型

   var d = null
   console.log(Boolean(d))//false
   1
   2

---

八、JS的运算符

1. 数学运算符：+ - * / %

2. 赋值运算符：= += -= *= /= %=

在JS语法中一个=表示赋值，不是等于的意思

c*=2 //c=c*2
1

3. 比较运算符：> < >= <= == === != !==

比较的结果一定是一个布尔类型的值

== 判断是否相等，比较的是类型中的值

=== 判断是否全等（恒等），比较的是类型和值

一个等号表示赋值，两个等号表示比较的是类型中的值，三个等号表示比较的是类型和值

4. 逻辑运算符：&& || ! （与或非）

var res = age>=18 && age<=100;
1

1. && 并且 当多个条件都满足的时候才输出true
2. || 或者 当其中一个条件满足的时候就输出true
3. ！ 取反 真的变假的，假的变真的

5. 一元运算符：++ –

• 自增自减单独运算的时候，在前在后是没有区别的

• 碰到输出或者一些运算的时候：

  • 符号在前的先运算后输出
  • 符号在后的先输出后运算

  ++ 和 += 的区别

  ++固定的每次只能加1，+=可以自定义