JS基础知识点汇总

什么是JavaScript？

答:它是遵守ECMAScript规则的一套编程语言，严格来讲，ECMAScript配合浏览器提供的web APIs才称之为JavaScript。(ECMAScript是一套语法标准，简称ES，变量、数据类型、运算规则都是ECMAScript规定的)

---

1.alert:弹出框，提示信息+一个确认按钮------注意没有取消按钮！！！！

2.prompt：弹出框：

执行代码 弹出样式

点击取消相当于传入了空值，如果打印的话，输出为null

点击确定，会输出输入的内容到浏览器上

输出指令： ----可以同时输出多个变量，逗号隔开

3.document.write( ),输出输入的内容到浏览器上（这个方法会重写页面，平时很少用）

4. console.log(),这是将结果输出到控制台（平时用的较多）

执行代码 输出结果

5.字符串的拼接

①用+号

字符串通过引号引起来，变量通过+号连接(引+变量+引)

'  '+xxx+'  '

②模板字符串（反引）

最外层用反引号包裹，变量通过${}的方式书写即可

模板字符串

6.let可以同时声明多个变量，多个用逗号隔开

7.let声明变量的使用规则-----必须先声明再使用

8.算术运算符：加减乘除取余

代码及结果展示

提升案例：输入一个三位数，求其各个位数之和，例如用户输入520，输出结果为5+2+0=7

案例原理逻辑

9.隐式转换

+，-，*，/，%：只能针对两边都是数字才能运算

+这个运算符：看到字符串 只会 拼接，没有字符串再考虑相加-----例如:1+'123'===>1123  但是1+123=124

注意：这里不是做加法，针对字符串即使转成数字也是做拼接,数据类型为Number

+号如果两边有不是数字的，内部偷偷滴调用Number()把不是数字类型转为数字类型，然后再做相应计算，例如：

隐式转换--布尔类型

+就是简化版的Number( )

案例

    关于拼接，看到字符串类型的数据只会拼接，没有字符串才考虑相加 例如：1+'zs'===>1zs

10. null

    ① 是一种特殊的对象，属于object类型，

    ②是假的，Boolean(null) => false

    ③表示一个不存在的对象（一块不存在的空间），释放对象用它

11.函数

函数声明可以先调用再声明，而函数表达式必须要先声明再调用，因为函数声明有函数提升，函数表达式则没有

12.内置函数parseInt()

通过取整函数计算时分秒

计算时分秒

13.对象属性的操作

调用：对象名.属性名  /  对象名['属性名']

添加：对象.新属性名=值  /  对象.['新属性名']=值

修改：对象.原有属性=新值  /  对象.['原有属性']=新值

删除：delete  对象.原有属性  / delete  对象.['原有属性']

14.对象方法的操作

调用：对象名.方法名（）  /  对象名['方法名']（）

添加：对象.新方法名=值  /  对象.['新方法名']=值

修改：对象.原有方法=新值  /  对象.['原有方法']=新值

删除：delete  对象.原有方法/ delete  对象.['原有方法']

15.随机数

Math.random()取值  ------   >=0 并且<1的随机数  （取前不取后）

获取随机数

所以根据规律可以得到任意两数之间随机数的公式：

公式

16.字符串比较

两个字符串比较规则：

      1. 本质比较是相应位置字符的 ASCII  码值，如果第一个字符一样， 则比较第二个字符，以此类推

      2. ASCII码值就是每个字符对应一个数字，本质比较的是数字大小，

      ASCII码值不需要背，会查表即可；

17.NaN的比较

      1. Not a Number的简写，不是一个数字

      2. NaN是number类型

      3. 不要用于比较，它跟任何数据都不等，包括它本身，如果非要比较，结果一律是false

      4. isNaN()可以用来检测一个数据是不是NaN，如果是，返回true，否则返回false

      5. isNaN如果传的不是number类型，先偷偷滴调用Number()转成数字类型，再来做判断

判断示例

18.不同类型的比较

==与===的区别：

  1.  ==：相等（不严格的相等），只比较值，不比较类型；如果两边的类型不一致，会隐式转换， 把字符串或者布尔类型 通过 Number()转数字，转完之后再做比较

  2 . ===: 全等（严格的相等），类型与值都必须一样才是true，缺一不可，否则一律是false，

  3. 先看类型，再看值 ， 因此 今后在比较等不等的问题，用三个等号，效率高，快

19.逻辑运算符

逻辑与 和 逻辑或 的 运算结果 不一定是布尔类型，可以是任何数据类型

①逻辑与（且）：&&  and  真假情况：全真则真，一假则假----前假则短路

②逻辑或：||  or  真假情况：一真则真，全假则假----前真则短路

③逻辑非：! not  真假情况：真变假，假变真

20.三元表达式

  条件 ? 代码1 : 代码2

  作用：通过不同的条件 给 变量 赋不同的值

num1 > num2 ?  max = num1 : max = num2

1. 求两个数中最值   

let max = num1 > num2 ? num1 : num2    //num1大于num2吗？大于的话max=num1,不大于的话max=num2

let min = num1 < num2 ? num1 : num2      //num1小于num2吗？小于的话min=num1,不小于的话min=num2

21.switch语句以及if多分支

二者进行比较，此时可以看出这种情况下的判断switch更简洁

对比

22.break穿透：

从当前case进入下一个case，直到碰到break才会结束switch的执行

输入1/2/3，输出结果：都是春，同理输入4/5/6，输出结果都为夏

break穿透

23.do..while循环

案例解析

24.for循环

应用

25.while循环

应用

26.双重for循环

案例1--基础使用 案例2--星星矩阵

①九九乘法表------基础版

案例3---9*9乘法表--基础样式

②进阶版------ 给基础样式添加随机背景颜色

第一步：创建函数获取随机背景色

函数封装

第二步：写到行内样式中

模板使用

第三步：结果展示

添加随机背景色样式

27.数组的方法之翻转---reverse()

在pop/push/shift/unshift/reverse中只有reverse方法返回的是一个新数组，也因为只有数组才可以调用数组的方法,所以只有在reverse方法在前面时候才可以后面继续使用其他方法，不然的话只能分开调用

数组方法的使用

以上只有第一种方式会报错，因为push方法返回值是新数组的长度，而不是数组，所以不可以继续调用数组的reverse方法，后面的B/C/D/E输出结果均为[4,3,2,1]

28.求最大值和最小值

①先假设一个最大的数值和一个最小的数值，不妨假设数组的第一个元素最大(最小)

②遍历时从数组的第二个数值开始，让后面数组中的每一个数值都与第一个参考值作比较

③如果当前的值比参考值大，那么就将参考值改成当前值，以此类推就可以比较出最大的数值，求最小值也是同理

示例代码

28.综合案例------点击添加一行数据，点击删除数据

①首先一直结构为表格(thead、tr、th)  tbody、tr、td

②获取操作的元素

按钮、输入框、表格体

③给添加按钮添加事件

点击添加按钮创建一个tr,并且要将tr追加到tbody最后面，之后，在这一行tr中添加四个td,每个td的内容分别为  序号、左边输入框的文本、右边输入框的文本，一个删除按钮，如下：（i是声明的变量，用来当作序号  let i=0;

优化：点击添加后会发现输入框内容还在，这是可以在添加事件中，对输入框内容进行手动清空，输入框内容清空用value，表格内容用innerText

 left.value = ''

 right.value = ''

添加操作

④给删除按钮添加事件

点击删除按钮，通过父级选择器，找到删除按钮的父级的父级tr,tbody调用删除子集元素的方法，将选择到的tr行删除，并且防止删除后序号不会自动更新，又将所有的序号选中进行重新排序

删除操作

29.运算符

①赋值运算符  +=、-=、*=、/=、%=

②一元运算符  ++、--

前置++：++x   // x+=1   //x=x+1    先自增再赋值  let x=1       ++x + ++x = (1+1)+(1+2) =2+3=5

后置++：x++   // x+=1   //x=x+1    先赋值再自增

let x=1    x++ + ++x = 1+(1+2) =1+3=4

案例：

打印age结果为false，所以在隐式转换之后，age++结果为0，但是之后age再自加1就变成了1

下面的++age = 1+1=2,此时的age已经是自加后的值，所以age也是2

应用

③运算符的优先级

() >！>乘除取余>加减>&&>||> = > ,

---

总结：

 JS、ES

    JS：包含ECMAScript、APIs

    DOM：文档对象模型

 获取元素

     ① id：document.getElementById

     ② tgaName：document.getElementsByTagName

      ③document.documentElement

      ④document.body

 操作元素：

    ①  属性：

        固有属性：元素.属性 = 值;

        自定义属性：元素.setAttribute('属性', 值);

        样式属性：元素.style.属性 = 值;

    ②  内容：

        innerText：只识别文本

        innerHTML：还会解析标签

    时间日期对象

      创建、方法、时间戳

    定时器：反复性定时器

     ① 创建定时器：let timer = setInterval(函数, 时间);

      ②清除定时器：clearInterval(定时器名字)

    循环

    ①while与for只有在循环条件成立的情况下，才会执行循环体

    ② do-while不管循环条件是否成立，至少 执行 一次循环体

    ③continue: 结束本次循环，进入下次循环

      break: 结束循环，循环碰到直接Game Over