华清远见重庆中心-JS阶段总结

一、数据类型

1、Null 空类型  2、Number 数字类型  3、Boolean 布尔型数据  4、BigInt 长整型  5、Object 对象

6、String 字符串类型  7、Undefined 未定义类型

二、节点操作

（1、下载文件：下载文件的实现方法就是利用<a>标签

         先创建a标签，再设置下载文件的名称(a.download=‘1.png’)；然后给阿标签的href属性赋值

（2、删除节点：remove可以删除节点元素；removeChild删除子节点

（3、异步加载js文件：先创建文件，然后添加加载完成事件（load）删除脚本，最后再插入到页             面

（4、插入节点：首先创建节点，然后是插入节点到文档中（appendChild追加一个子元素；                   insertBefore 插入节点到另一个节点前）

（5、替换节点：parent.replaceChild(newNode, child)   parent：要替换节点的父节点；newNode：新的要插入的节点；child：被替换掉子节点。

（6、查询节点：使用children可以查询子节点（children属性包含一个子节点的集合）                                               使用 parentElement 可以查询父节点   

 三、浏览器操作

（1、window 打开窗口：window.open（）；关闭窗口：window.close（）

（2、location：浏览器地址栏

（3、history： 浏览器浏览记录 window.history.forward()：前进；window.history.back()：后退               history.go(delta)：转到指定位置

（4、localStorage：数据持久化到浏览器中 window.localStorage.setItem(key,value)value必须是             字符串

（5、navigator ：用于查看设备信息

四、运算符和条件判断

一、条件判断

if条件判断  ： if（#条件）{#满足后执行的操作} else{#不满足则执行的操作}

三元运算 if (){}   else if(){}

swith条件判断：判断value值为多少，如果为constant1则执行其后的代码,如果不满足所有的case语句，则执行default

switch（value）{

case constant1:

                break; 

case constant2:

               break;

           ... 可以有任意多个case语句

            default: // default 不是必须要写的

              break;

   }

二、运算符

（1、比较运算符：     非严格相等判断：== ；非严格不等于 ：！=；严格相等：===；严格不等于：！==

（2、算数运算符：  #加减乘除符号：+，-，*，/  ；ps:加号也可以用来连接字符串和转换字符串为数字（+‘3e-2’） #模运算 %：除以一个数并取余   #幂运算**：n 的 m 次方

（3、 赋值运算符 ： #自增 +=  ；自减 -= ；自乘 *=； #自除 /= ；#自模 %=；#自增++; #自减--4             ps：运算符放前面，则先运算后引用；运算符放后面，则先引用后运算

（4、逻辑运算符： &&与    ；  ||或   ；！非

五、数组和循环

（1、数组：push 追加数据到数组末尾； pop 从尾部取出一个成员； unshift 在头部添加数据；shift 从头部取出一个成员；splice 删除指定位置的成员，并用新成员替换，第一个参数：删除成员的起始位置， 第 二个参数：删除成员的个数， 第三个参数：用于替换被删除成员的新数据；concat 连接数组，可以用来克隆数组方法是连接一个空数组； join 使数组成员用一个字符连接起来；includes 判断是否包含某成员；indexOf 查询指定数组成员的索引；lastIndexOf 查询最后一个指定数组成员的索引；slice 数组切片， 第一个数字为起始位置的索引，第二个数为结束位置的索引；

        多维数组：多个维度组成的数组

（2、循环

       1、   for（初始化语句; 循环条件;  运行一次结束后运行的代码）{}

          continue：结束本次循环；break：跳出循环

        for in 可以用来遍历数组或对象

        for （key in arr|obj）{}

       2、 while 循环：当。。。时，就循环执行代码 

       while (condition) {

        code block }

        conditiion ：while的循环条件，是个布尔值

六、函数和数组的遍历

（1、函数  定义函数：function 函数名(参数列表) {  代码块 }

                  调用函数：通过函数名进行调用，并且后面跟上圆括号

                  自调用函数：定义后立即调用的匿名函数；先打两个圆括号，然后在第一个括号中声明函数，第二个括号代表调用函数，圆括号中填入实际参数

（2、预编译 ：在浏览器执行js脚本前需要进行编译，有些代码在编译前将会率先被翻译执行并存入内存        

       1、调用函数时，在函数执行前会进行函数的预编译

       2、函数内的 形参和函数内声明的变量和函数会被预编译

（3、变量的作用域：作用域指的是作用范围，范围内可以访问变量，超出范围则无法访问

         作用域分为三种：1、Global 全局作用域；Block 块级作用域；Function函数作用域

         1、全局作用域：具备全局作用域的只有全局变量或常量

         2、块级作用域：块级作用域就是在代码块中有效的作用域

         3、函数作用域：函数内的变量

(4、内存堆栈：调用函数时，函数中的各种变量将存储在内存中，以堆栈的形式进行保存

       堆是用于存储数据的内群区域，栈是用于存储每次函数调用时产生的数据，是一种先进后出的数据格式

（5、节流和防抖：

防抖：函数将在一个固定时间后被调用，若计时未完成又执行该函数，则取消上次计时，重新开始计时；用于限制频繁的网络请求

步骤：1取消计时 ：  let  timeId；return （）=>{clearTimeout(timeId)}

           2.重新计时：timerId = setTimeout(() => {console.log('hello world'); }, 3000)

节流：固定时间内只能调用一次的函数，可以使用时间戳或计时器的方式实现；用于限制频繁的网络请求

步骤：1、判断是否可以运行节流代码

           2、执行节流的内容

           3、计时

（6、数组的迭代操作：forEach，every都是循环遍历每一个数组成员，every可以中途退出

         map 映射数组到新数组中 let r = arr.map(el,index,arr){ return el}#return 的内容将被放到新的数组中

        filter 过滤器 :return false 代表过滤掉数据;return true 代表保留数据

        find 查找; findIndex 查找对应成员所在索引;some 查询是存在满足条件的成员

        sort 排序

（7、数组去重： 1、缓存重复数据：#使用 filter 去重

                            2、使用set 集

七、字符串操作

（1、字符串的操作：charAt 函数可以获取指定索引处的字符；split: 分割字符串；split + join 替换字符；trim: 去掉字符串首尾空格；substring: 截取子字符串两个参数分别为起始索引位置和结束索引位置。match：从字符串中匹配出符合正则的字符串

（2、正则表达式：\ 斜杠：转义；^ ：匹配字符串的开头；$ ：匹配字符串的结尾； * ：匹配任意次；? : 匹配0次或1次；+ : 匹配至少1次；{n,m} : 匹配至少n次，至多m次；[xyz]: 匹配字符集合，匹配一个字符，该字符在方括号内；x|y : 或；[a-z] [0-9] : 取范围值；(pattern): 将pattern里面的所有字符当作一个字符处理

 先行断言：x(?=y)  x 跟随 y 时 匹配 x

先行否定断言：语法: x(?!y)    x 后没有 y 跟随时 匹配 x

后行断言：(?<=y)x  x 的前有 y 则 匹配 x

后行否定断言：(?<!y)x  x 前没有 y 则 匹配 x

全局模式：在正则表达式的后面使用 g flag 来开启全局模式；不开全局模式 只会匹配到第一个符合条件的字符串，全局模式的正则表达式将匹配所有符合条件的字符串

八、计时器

（1、计时器：声明一个计时器：setTimeout，第一个参数：计时器计时结束后触发的函数，第二个参数：计时时长，单位:毫秒；clearTimeout 清空计时器

                      setInterval 函数，每次经过指定时间，触发一次指定的函数；clearInterval清空循环计时器

（2、移动：使用计时器 每隔一段时间 让元素位置产生一个增量的变化

（3.渐进渐出：使用计时器 每隔一段时间 让元素透明度产生一个变化

九、数学函数和时间对象

（1、数学函数：三角函数：三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2() 返回的值是弧度而非角度；反三角函数就在三角函数前加上a就可以了；

abs: 获取数字的绝对值；ceil: 一个小数向上取整；floor: 一个小数向下取整；round：四舍五入；max: 取参数中较大数；min: 取参数中较小数

通过max和min写一个定界函数

 value: 要定界的数字

   返回值: value<min时返回min value>max时返回max value在min和max之间时 返回value

    function clamp(value, min, max) {

        # let temp = Math.min(value, max)

        # temp = Math.max(temp, min)

        return Math.max(Math.min(value, max), min)

    }

pow：返回x的y次方   Math.pow（x，y）

sqrt: 返回一个数的平方根

sign: 取符号

random: 取随机数，范围在[0~1)之间

#假设随机一个 10 ~ 100 的数

let r = 10+Math.random（）*90

（2、时间对象 ：创建时间对象的方法：new Date(params)

当前系统时间：let date = new Date()

创建指定时间字符串的时间：date = new Date('1997-07-07')

通过格林威治毫秒时创建时间：date = new Date(1000 * 60 * 60 * 24 * 365)

#读取时间：date.getFullYear() 年；date.getMonth() 月ps：月份从0开始计算；date.getDate()：一个月中的第几天；date.getDay()：一周中的第几天；date.getHours()：时；date.getMinutes()：分；date.getSeconds()：秒；date.getMilliseconds()：毫秒；

#设置时间：date.setFullYear()...

十、事件

  (1、绑定事件：addEventListener 

    解绑事件：removeEventListener

（2、事件分类：load 加载完成；error 加载失败；focus 获取焦点；blur 失去焦点；click 鼠标点击事件；contextmenu 右键菜单；dblclick 双击；mousedown 鼠标点下 ev.button用于区分点击的是哪个键:0左，1中，2右 ；mouseup 鼠标抬起； mouseover 悬停；mouseout 出去；mousemove移动；wheel 滚轮；drag 拖动；dragstart 开始拖动；dragend 结束拖动；input 输入事件；change 变化事件；按键事件：keydown按下；抬起 keyup；按压 keypress

（3、冒泡：在html中触发事件的元素，将会把事件不断的向父元素传递，这个过程叫做事件冒泡

                  阻止事件冒泡：使用事件对象的 stopPropagation 来阻止事件冒泡

（4、捕获事件：事件触发后，可以由上级元素先处理事件，这个过程就是捕获事件

十一、面向对象编程

（1、什么是对象，js用属性和行为来描述某个物体而产生的一种数据结构，该数据称为对象

（2、设计一个对象最重要的就是设计它的属性和行为

class  类型名（开头大写）（x，y）{

this.x=x

this.y=y

get(x，y){}#行为

}

（3、this关键字：js 执行上下文中的 this===window

                            函数内的this===window

                            json对象方法的this===对象自己

                           实例对象方法的this===调用该方法的实例对象

（3、super：可以使用super关键字调用父类方法，方法中的super代表父类实例

（4、严格模式：开启严格模式  ：'use strict'

        #严格模式中不准做的事情：未声明变量就直接赋值；直接删除变量；重复定义参数名；不允许使用 8 进制数；不允许使用八进制转义字符；不允许赋值只读属性

#在一个对象中调用另一个对象的值

let student = new Student

let table = new Table

table.student=student