JavaScript工作面试常用知识点总结大全
JavaScript工作面试常用知识点总结大全
JS语言的构成
- ECMAScript - JavaScript的核心
- BOM - 浏览器对象模型
- DOM - 文档对象模型
JS的引入方式
- 外部引入：通过script标签的src属性来引入一个外部的js文件。
<script src="test.js"></script>
- 内部引入：直接在页面的script标签里书写js代码。
<script>
// js代码
</script>
- 行内引入：在HTML的标签里面的当前的某个HTML的属性存在。
<div onclick="alert(1)" style="width:300px;height:300px;background-color:#f99;"></div>
变量
- 定义：简单理解为变量就是存储数据的一个容器。
//有了一个变量，这个变量里面存的数据为5
var a1 = 5;
a1 = 100 //可以更改他的值为100
标识符
1、定义:一种起名字（变量，对象的属性，函数）的语法规范。
2、命名规范：
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字
- 对大小写严格区分
- 见名思意
- 可以遵循驼峰式命名，首字母小写，后面的单词首字母大写
表达式
1、定义:一切拥有返回值的JS的代码段都是表达式，反之也是如此。
2、 表达式的副作用：
3、如果在整个页面中因为某句话的存在对整个JS程序带来影响，我们称这个表达式的是有副作用的表达式。
运算符
定义：运算符就是讲简单表达式组合成复杂表达式的一种方法。
算数运算符
+ - * /
一元运算符
++a a++ --a a--
++ 变量名 操作数只能用变量，不能用常量
变量名 ++ 先将变量所存储的值作为表达式的结果返回
注：这个运算有一个副作用的运算，经过这句话之后，以后再访问变量就会自增1。
总结：
前置++：先加1，后参与运算
后置++：先参与运算，后加1
上面两个理解后，下面两个自通
前置-- ：先减1，后参与运算
后置-- ：先参与运算，后减1
逻辑运算符
1、&&与两个操作数同时为true，结果为true,否则都是false
2、||或两个操作数有一个为true,结果为true,否则为false
3、！非 取反
关系运算符
<:小于 >:大于 >=:大于等于 <=:小于等于 ==:相等 !=:不等 ===:恒等 !==:不相等
=== 判断恒等只要运算符左右两端的操作数数据类型不一致，直接返回false。
== 判断如果发现运算符左右两端的操作数数据类型不一致，首先先进行数据类型转换，转换为一致的数据类型后再进行比较。
2 == true -> false
NaN == NaN -> false
以后以后需要比较两个值它们是否相同，一律使用判断恒等或者判断非恒等。
三元运算符
1、表达式1 ? 表达式2 : 表达式3
2、是对if……else语句的一种简化写法
运算符的优先级
1、()优先级最高
2、一元运算符 ++ -- !
3、算术运算符 先* / % 后 + -
4、关系运算符 > >= < <=
5、相等运算符 == != === !==
6、逻辑运算符 先&& 后||
7、赋值运算符 = += -= *= /= %=
数据类型
1、Number 数字类型 1,2,3,4,5,6......-1,-2,-3,-4......NaN（非数字），infinity,-infinity （infinity ：用于存放表示正无穷大的数值）
2、Boolean 布尔值类型 true、1 (真) false、0(假)
3、String 字符串类型 "张泽一","张￥#@&*","123"，“true”,"false"
4、Undefined 空值 undefined
5、Function 函数
6、Null 空对象
7、Object 对象
数据类型转换
- 使用谷歌浏览器如何辨别数据类型：字符串的颜色是黑色，数值类型、布尔类型都是蓝色的，undefined和null都是灰色的。
- 一切变量当没有进行赋值的时候，里面存放的值都是undefined，如果尝试访问一个未被声明的变量，将会报错为（xxx is not defined）
数据类型的强制转换
1、Number（exp）返回表达式的返回值强制转换为Number类型
- String 转 Number：除了纯数字的字符串意外全都是NaN
- Boolean 转 Number：true为1，false为0
2、Boolean（exp）返回表达式的返回值强制转换为Boolean类型
- String 转 Boolean 除了空字符串其余结果都是true
- Number 转 Boolean 除了0和NaN其余结果都是true
3、String（exp）返回表达式的返回值强制转换为String类型，一切按照字面量的形式转换
4、parseInt（exp） 与Number()方法相对应，去掉非数字部分，留下数字部分再转换为Number类型，留下整数部分，去掉小数部分
5、parseFloat（exp）与Number()方法相对应，留下数字部分再转换为Number类型
if,if else 逻辑语句，分支语句，判断语句
if(exp){
语句/分支1
.....
....
}
if(exp){
分支1....
...
...
}
else{
分支2...
.....
...
}
switch(变量){
case 常量1:{
分支1
break;
}
case 常量2:{
分支2
break;
}
case 常量3:{
分支3
break;
}
//可选的一条路
default:{
默认分支
}
........
}
判断一个值是否是NaN用：isNaN(exp)
元素绑定事件
元素的id.事件名 = function(){
//执行语句......
}
循环语句 while语句 do-while for
// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
//循环体
}
do{
console.log(n)
n++;
}
while(n < 100){
console.log(n)
n++;
}
// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
do…while
- do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。
continue和break
- break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
- continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
调试
-
之前使用的调试方式
* alert（）
* console.log（） -
断点调试
-
定义：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
-
调试步骤
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
- 调试相关操作
Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。
函数
- 定义：一段被高度复用的代码段
//声明函数
function 函数名(形参1,形参2,形参3.....){
//函数体
}
//声明函数
var 函数名 = function(形参1,形参2,形参3.....){
}
//调用函数
函数名(实参1,实参2,实参3.....)
形参:在函数体内声明的变量
实参：在函数调用时给形参赋的值
return的作用
1、 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
2、如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
3、如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
4、函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。
arguments：当我们不确定调用函数时传入实参个数时，要用arguments来代替形参。
- 本质：类数组，拥有数组下表和length的特性
1、arguments[0] -> 返回arguments集合中第0位是啥
2、arguments.length -> 返回arguments到底有几个成员 Number
变量作用域
有封闭的变量作用域的都要：函数、变量
作用域：变量和函数的访问范围，作用域可以控制变量和函数的可见性和生命周期
JS中作用域分为两种：全局作用域和局部作用域
全局变量：在全局作用域声明的变量是全局变量（声明在函数外部的变量）
1.全局作用域（全局变量可以在当前脚本内任何地方使用）
局部变量：在局部作用域声明的变量是局部变量（声明在函数内部的变量）
1.在函数内声明的变量都是局部变量，所处在的作用域也是局部作用域，局部变量在函数外部无法访问
作用域的注意事项
1、如果全局变量和局部变量同名时，在局作用域内访问这个变量会优先访问局部变量
2、在局部作用域内，没有用var声明的变量，会变成全局变量（在非严格模式下）
JS中没有块级作用域，只有函数作用域，所谓块级作用域就是其他语言中的if {} for {} while {} 等，这些在JS中都不属于局部作用域)
变量的种类
-
局部变量:在函数体内部声明的变量，这种变量只能在该函数内部被访问到。 全局变量：在函数体外部声明的变量，在任何地方都能被访问到。
-
注：当局部变量与全局变量发生冲突的时候，以局部变量为准。 在JS中只有函数作用域的概念， 没有块级作用域的概念。
-
如果在函数体内部声明的变量去掉了var关键字，那么此时声明的就是一个全局变量，并且该变量不参与变量提升的操作。
变量的提升
- 定义：js的解析器的一种执行机制，当某个函数执行时，js解析器会首先过滤一遍这个函数体内所有的局部变量，然后放置在函数的最顶端先声明但不赋值，此时该变量的返回值为undefined。
数组:数据的有序结合
// 声明数组
var arr = [1,2,true,"张泽一"];
//提取成员
arr[下标]
// 修改
arr[下标] = 新值
//循环，枚举，遍历数组
for(var i = 0; i < arr.length;i++){
console.log(arr[i])
}
//随机生成0-1之间的数字
Math.random()
string对象的全局方法
* charAt() 根据下标返回字符
* concat() 字符串拼接
* indexOf() 根据字符找下标
* lastIndexof()
* replace() 替换字符
* substring() 根据下标截取字符串
* slice() 截取字符
* substr() 根据下标和数量截取字符串
* split() 根据某个字符切割为一个数组
* toLowerCase() 转小写
* toUpperCase() 转大写
* trim() 去掉所有空格
数组的全局方法
* push(新值) 往后插
* pop() 删掉最后一个
* unshift(新值) 往前插
* shift() 删掉第一个
* splice(删除下标,1) 从中间扣一个元素出来
* splice(插入新元素的下标,0,新元素) 从中间塞入一个元素进去
* concat() 数组拼接
* join() 将数组转换为字符串
* slice() 通过下标来截取数组
* toString() 将数组转换为字符串 可以被join完全代替
* forEach()
* map()
* filter()
* reduce()
* indexOf()
* forEach(function(item,index,array){}) 循环数组，该方法的返回值全是undefined
* map(function(item,index,array){}) 循环数组，根据数组的长度和参数函数中的return语句来返回一个新的数组
* reduce(function(total,currentValue){}) 将数组成员每一个元素组成一个新值
* filter(function(item,index,array){}) 过滤，根据参数函数中是否return了true来决定在新数组中是否包含该元素
* indexOf(查找的元素) 根据要查找的元素返回其下标，如果没找到返回-1
对象
- 定义:数据的无序集合，由若干条属性构成的，每一条舒心都有属性名和属性值。
- 分类：自定义对象、内置对象、浏览器对象、
//对象的声明
// {} 空对象
var o = {
name:"张泽一",
age:18,
sex:"male",
city:"北京",
married:false,
students:["张泽一","张泽二"],
//方法
sayHello:function(){
alert("成功返回");
return 1;
}
}
//对象的查询
//找o对象的sex属性
console.log(o.sex)
//先从js执行环境上下文中找sex变量，看它等于什么(m),然后再去o对象中找名字叫m的属性
console.log(o[sex])
//等价于第一种写法，直接去o对象中寻找sex属性
console.log(o["sex"])
//对象的修改
o.age = 19;
o.age++;
o["city"] = "深圳";
console.log(o)
//对象的添加
o.height = 180;
//对象的删除
delete o.students
//对象的枚举
//循环次数取决于对象属性的条数，每次进来的时候变量都代表属性名
for(var i in o){
//试图从对象中去找属性名叫i的属性
console.log(o.i)
console.log(o[i])
}
注
1、如果某一条属性的属性值是一个函数，我们成这条属性为方法。
2、试图去调用某个对象中一个不存在的方法时，程序会报错：xxx.xxx is not a function。
3、试图查找某个独享中不存在的属性时，程序不会报错，表达式返回undefined。
Math对象
Math.PI // 圆周率
Math.random() // 生成随机数
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round() // 取整，四舍五入
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
Math.sin()/Math.cos() // 正弦/余弦
Math.power()/Math.sqrt() // 求指数次幂/求平方根
Data对象
getTime() // 返回时间戳，1970年1月1月00:00:00到日期对象所经过的毫秒数
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，***从0开始***
getFullYear() //返回4位的年份 如 2016
案例:
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var ri = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var week = date.getDay();
设置目标时间的简便方式
var target = new Date("2020/08/18 00:00:00");
计时器
- 定义:每隔一段时间执行一次的函数。
* setInterval(function,间隔时间)
* setTimeout(function,间隔时间)
* clearInterval(计时器id)
* clearTimeout(计时器id)
计时器时间锁
//定义一个变量观察计时器是否开启着
var isStart = false;
intervalStart.onclick = function(){
if(!isStart){
isStart = true;
autoAdd = setInterval(function(){
number.innerHTML = Number(number.innerHTML) + 1;
},100)
}
}
intervalStop.onclick = function(){
isStart = false;
// 清除计时器
clearInterval(autoAdd)
}
DOM
- 定义：对象对象模型 document object Model
- 作用：是HTML与JS之间的一种通信方式。
Dom对象的常用属性和方法
* getElementById("id") 通过ID获取元素，返回值一定是一个Node节点
* getElementsByTagName("标签名") 通过标签名获取元素，返回值一定是一个NodeList
* querySelectorAll("css选择器") 返回与css选择器相匹配的NodeList
* querySelector("css选择器") 返回与css选择器相匹配的Node节点
* getElementsByClassName("类名") 通过类名获取元素
* createElement("标签名") 创造一个Node节点
Node节点：数据类型为object，是页面中的一个元素。
* innerHTML 设置/返回这个元素的开始标签与结束标签的内容
* className 设置/返回元素的类名
* id 设置/返回元素的id
* getAttribute("属性名") 返回该元素得到某个属性的属性值
* setAttribute("属性名",属性值) 设置某个元素的某个属性所对应的属性值
* parentNode 返回父级元素 Node
* children 找儿子 NodeList
* nextElementSibling 下一个兄弟节点
* previousElementSibling 上一个兄弟节点
* removeChild(Node) 删除某个元素
* cloneNode(true) 返回一个被克隆节点的副本
* appendChild(Node) 在调用该方法的元素内部的结束标签之前插入参数节点
* insertBefore(Node1,Node2) 在调用该方法的元素内部的Node2元素之前插入Node1
* tagName 返回元素的标签名 大写
* nodeType 返回节点类型:元素节点：1 文本节点：3 注释节点：8 document节点：9
* value 设置/获取input文本框/密码框里面的内容
* getElementsByTagName()
* getElementsByClassName()
* querySelectorAll()
* style 设置/获取一个元素的行内样式
NodeList：类数组，若干的Node节点组成的类数组，代表很多的标签的集合。NodeList和Node节点它们的属性和方法时独立的。
Dom事件
// 绑定事件
node.事件名 = function(){
//事件处理函数/事件句柄
this 永远都是指向当前触发事件的那个Node节点
}
//帮助用户触发某个元素的某个事件
node.去on的事件名()
BOM
定义:浏览器对象模型 browser object model
* location 位置
* href 设置/返回当前地址栏上的位置
* reload() 刷新页面
* history 历史记录
* back() 返回到上一级
* forward() 前进
* go(1) 等价于前进
* go(-1) 等价于后退
* go(0) 等价于后退
* navigator 浏览器信息
* cookieEnabled 浏览器是否开启cookie存储功能
* language 返回操作系统的语言
事件
鼠标事件
* onclick 单击事件
* onmouseover 鼠标经过
* onmouseout 鼠标离开
* onmouseenter 鼠标经过
* onmouseleave 鼠标离开
* onfocus 获取焦点时
* onblur 失去焦点时
* onmousemove 鼠标移动
* onmouseup 鼠标抬起
* onmousedown 鼠标按下
* oncontextmenu 呼出浏览器右键菜单栏事件
案例:
node.鼠标事件 = function(){
//执行的操作
}
window.鼠标事件 = function(){
//执行的操作
}
document.鼠标事件 = function(){
//执行的操作
}
鼠标事件对象
* offsetX 相对于触发事件元素的左上顶点相对位置
* offsetY
* clientX 相对于浏览器的左上顶点相对位置
* clientY
* screenX 相对于整个屏幕的左上定点的相对位置
* screenY
* which 左键返回1，右键返回3，中键返回2，侧键不一定，从4开始。
* target 返回Node节点，该事件触发时捕获阶段和冒泡阶段的交汇点（目标阶段）
* stopPropagation() 阻止事件冒泡
键盘事件
* onkeydown 键盘按下事件
* onkeyup 键盘抬起事件
* onkeypress 忽略功能键的onkeydown
//阻止浏览器的默认行为:在事件处理函数中加return false；
键盘事件对象
* keyCode 键码
浏览器事件的传播机制:为某一个元素绑定了一个单击事件，在这个元素出发了这次的单击的事件时，这个区域是属性对个元素的，此时浏览器会按照顺序从外向内执行一个事件处理函数，此时这个过程我们称之为捕获阶段。然后浏览器会逆序从内向外依次执行事件处理函数，这个过程我们称之为冒泡阶段。
注:元素绑定的事件在不做设置的情况下，默认是在冒泡阶段触发的，这里不包括（IE8以下），也可以手动的调整某一个事件的触发时机，我们可以采用事件监听的绑定方式，并且在第三个参数中传入true即可。
node.addEventListener("去on事件的名",function(){
......
},true)
事件委托
- 定义：事件委托就是将子元素的事件委托给祖先级元素去办，然后再根据事件对象的target属性来确定最深层次的元素是哪个元素。
- 作用（能解决的问题）:
1、解决动态元素无法绑定事件的问题
2、在极端的情况下节省客户端的性能问题
this关键字的使用场景
1、出现在事件处理函数中时，指向的是触发事件的node节点。
2、出现在一般的函数或者是全局作用域内的话，指向的就是window对象。
3、出现在对象的方法中，指向的是该对象。
4、出现在构造函数中，指向的就是实例化对象。
正则表达式 ：描述一种字符串的逻辑
* regExp.test("abcdef") 从参数字符串中匹配正则对应的模式，true || false。
* String.replace(regExp,"*")
ES5和ES6
1、let有块级作用域的概念
2、const声明的变量，不能被修改，也有块级作用域的概念
3、let和const都没有变量提升的操作
4、let有暂时性死区，主要用在了循环NOdeList绑定事件上，在处理函数里下标不再循环完毕的下标。
箭头函数
- 箭头函数破坏函数体内部的this指向，this的指向会穿透本层函数到达上层作用域。
// 以下两种写法完全等价
function(a,b){
console.log(a+b)
}
(a,b)=>{
console.log(a+b)
}
模板字符串：用反引号代替双引号的字符串书写形式，在做字符串拼接工作时很方便。
西安：${a} 雁塔区：${b} 莲湖区：${c} 长安区:${d}
获取各种尺寸
* 可见区域宽：document.body.clientWidth
* 可见区域高：document.body.clientHeight
* 可见区域宽：document.body.offsetWidth
* 可见区域高：document.body.offsetHeight
* 浏览器工作区域（不包含滚动条的区域）:window.screen.availHeight
* 浏览器工作区域（不包含滚动条的区域）:window.screen.availWidth
* 被卷去的高：document.documentElement.scrollTop， html中body向下滚动过的距离
* 被卷去的宽：document.documentElement.scrollLeft
* 元素的宽：node.offsetWidth
* 元素的高：node.offsetHeight
页面滚动事件
// 每当滚动条的位置发生变化时触发事件
window.onscroll = function(){
......
}
构造函数
- 定义：简单理解为生产对象的模具
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
// 实例化对象:生产一个对象
new Person("张泽一",18,"男")
在构造函数中new关键字都做了哪些事情
1、在构造函数的顶端声明了一个空对象
2、将构造函数内部的this指向重定向到刚刚的那个空对象上
3、在函数体的最低端return了这个对象
原型对象prototype的用途
1、将构造函数公用的属性或方法从私有方法中提取到构造函数的原型对象中，以节省性能。
2、为本地对象扩展方法。
引用类型和原始类型之间的区别:原始类型在赋值的时候讲值的开呗副本赋值给另外一个变量，而应用类型是将一个指向原对象的一个指针存储起来，但真实对象只有一个，无论改变哪一个变量都会影响到另外一个变量。
JSON：前后端数据交换的数据格式，类似于JS中的数组，对象或他们之间的嵌套。须要注意的是，JSON不允许有注释，对象中的属性必须用双引号包起来。
json转换
- 正解析：JSON.parse（JSON字符串）
- 反解析：JSON.parse（JSON对象）
window shell命令
* cd.. 退出当前文件夹返回上一层
* cd <文件夹名> 进入某个文件夹
* dir 列出当前目录中所有的文件夹
* 盘符:
* md<文件夹名> 创建一个文件夹
* rm <文件夹名> 移除一个文件夹
* <文件名> 用本机默认程序打开这个文件
* 盘符：进入某个盘符
* rd <文件名> 删除某个文件或目录
* ren 重命名某个文件
* 目录或盘符 dir 查看某个目录下的所有所有文件
* copy 复制一个文件到另一个位置上去
* cls 清除屏幕
Ajax：http脚本化
Ajax get
// 1.实例化XMLHTTPRequest对象
let http = new XMLHttpRequest();
// 2.规划一个请求
// 2.1异步请求：从发送请求之后所有代码都不会等待服务器端的回执就会继续执行下文的操作。
http.open("get","http://10.35.165.28/message.txt?key=value")
// 3.真正地发送请求
http.send()
// 4.接收来自服务器端的响应
http.onreadystatechange = function(){
// 如果readyState为4了，说明客户端已经拿到了来自服务器端返回的内容
if(http.readyState === 4){
//输出返回的内容
console.log(http.responseText);
}
}
Ajax post
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
Php
- Apache：web server 用来把本机的第80号端口向外开放，为别人提供Web服务的一款软件
- PHP：超文本预处理器，开源通过的脚本语言，后端编程语言
- MySQL：数据库
数据库
- 数据库是相关数据的集合，一个数据库含有各种成分，包括数据表、记录、字段、索引等
- 表示存数据的容器，库是表的集合
- 表中的第一行为表头，在数据库中称字段
- 在数据库中，无论什么表都应该有一个叫做id不能为空并且自增要为主键的字段。
数据库中常用的数据类型
* int 整数
* float 浮点数(小数)
* varchar 字符串
* date yyyy-mm-dd
* datetime yyyy-mm-dd hh-mm-ss
增删改查
//从某表中查询所有的数据
SELECT * FROM 表名;
SELECT * FROM 表名 WHERE 字段名="某值";
SELECT * FROM 表名 WHERE 字段名="某值" AND 字段名="某值";
SELECT * FROM 表名 WHERE 字段名="某值" OR 字段名="某值";
// 插入
INSERT INTO 表名 (字段名,字段名,字段名.....) VALUES (值,值,值......)
// 更新
UPDATE 表名 SET 列名=新值 WHERE 列名=某值
// 删除
DELETE FROM 表名 WHERE 列表=某值
同源组策略：浏览器为了安全起见，只允许客户机想同主机，同协议，同端口的服务器发送Ajax请求。如果某一个页面的来源地址与要发送的请求地址端口号主机名协议名有一项不相等，则会阻止该请求的发送。
协议名 主机名 端口 路径
http://www.baidu.com:80/aaa.html?age=18
JSONP
jsonp的工作机制：jsonp是解决跨域问题的一种方式，使用script标签向后端发送一次http请求，这次请求返回的结果，前端会当做js代码来进行解析，在发送请求时前端在请求地址上使用参数的形式callback参数，这个参数代表回调函数的函数名。后端接到前端的请求后首先进行拆解callback请求参数的参数值，然后拼接成一段执行函数的js代码段，并把须要返回给前端的数据当做实参存在，此时前端会自动调用回调函数，形参也就代表了后端返回的数据。
cookie
cookie `document.cookie = `key=value;expires=date对象`
// 读取cookie的通用函数
function getCookie(k){
let result = {}
let arr = document.cookie.split("; ");
arr.forEach(item=>{
let key = item.split("=")[0];
let value = item.split("=")[1];
result[key] = value;
})
if(!k){
return result;
}
return result[k];
}
// 设置cookie的通用函数
function setCookie(key,value,expires){
if(typeof expires === "object"){
document.cookie = `${key}=${value};expires=${expires}`
}
if(typeof expires === "number"){
let date = new Date();
date.setDate(date.getDate() + expires);
document.cookie = `${key}=${value};expires=${date}`
}
}
// 删除cookie
function removeCookie(key){
let date = new Date("1970-01-01");
document.cookie = `${key}=1;expires=${date}`
}
localStorage
* localStorage.setItem(key,value)
* localStorage.getItem(key)
* localStorage.remove(key)
* localStorage.clear()
// 如果存数组，会转换成字符串，每个成员以,分隔
localStorage.setItem("list",arr)
// 如果存对象，虽然不报错，但是里面存的一律都是[Object Object]
localStorage.setItem("o",obj)
// 最外层是数组的这种json也不要往localStorage里面存储
let json = [
{
"name":"张泽一",
"age":18
},
{
"name":"张泽二",
"age":10
}
]
// 但是可以先反解析成字符串再进行存储.
localStorage.setItem("j",JSON.stringify(json))
sessionStorage
* sessionStorage.setItem(key,value)
* sessionStorage.getItem(key)
* sessionStorage.remove(key)
* sessionStorage.clear()
cookie和localStorage和sessionStorage的区别?
1、cookie兼容性好，但是在设置获取时很麻烦，可以灵活的设置数据的声明周期。
2、localStorage是一种新方法，IE8以下不兼容，存储周氏是永久性存储，操作方便。
3、sessionStorage是一种新方法，IE8以下不兼容，存储生命周期是以会话的形式存在（当前标签页在不关闭的情况下只能在当前标签页中获取到数据）
jquery:类库
jquery的核心方法
* $("css选择器") 返回的是与css选择器相匹配的jQuery对象
* $(Node节点) 返回Node节点的jQuery对象形式
* $("HTML代码段") : `$("哈喽呀
")` 类似于document.createElement，凭空创造一个页面中不存在但在内存中存在的jQuery对象。
* $(function(){}): 等价于`$(document).ready()`，可代替window.onload
jquery对象的本质
- 定义：类数组，包含若干的Node节点的集合，如果我们使用数组下标的形式提取出来某一个元素，那么这个元素就是Node节点，不同于Node或NodeList，拥有独立的属性和方法。
- 注：jquery对象和Node节点的属性和方法互不通用。
jquery对象的方法
* attr(key,value) 操作元素的行内自定义属性 如果只传一个参数是做获取，如果传两个参数是做设置。
* html() 获取/设置元素的开始标签与结束标签之间的内容
* val() 获取/设置元素的value属性的属性值
* addClass("类名") 追加类名
* removeClass("类名") 删除类名
* toggleClass("类名") 追加/删除类名
* hasClass("类名") 检测元素是否含有class，返回Boolean
* eq(下标) 返回jQuery对象集合中的某一个元素的jQuery对象形式
* css() 设置/获取一个元素的行内样式
* animate({},时间,回调函数) 设置/获取一个元素的行内样式，动态改变。
* clone(true) 克隆一个jQuery对象，参数传true代表是否连同事件一块儿克隆
* append(): 对标appendChild方法。 父.append(被插的元素)
* prepend() 插入到开始标签之后
* before()
* after()
* remove(): jQuery对象.remove()
* each(function(index,node){}):能枚举被调用each方法的jQuery对象
* show()
* hide()
* toggle()
* fadeIn(时间(Number, "slow" || "normal" || "fast"),回调函数)
* fadeOut()
* fadeToggle()
* slideDown()
* slideUp()
* slideToggle()
* width() 返回元素在页面中所在的宽度,等价于去掉padding区域的offsetWidth
* height()
* closest() 根据css选择器逐层向上寻找祖先级元素，直到找到一个与参数css选择器相匹配的元素停止寻找，并将其返回。
* find() 根据css选择器逐层向内寻找子孙级元素，并把符合条件得到所有子孙级元素都返回
jquery获取页面的尺寸
// 获取页面中可视区域（包含滚动条没有滚到的区域）
$(document).width()
$(document).height()
// 获取页面中可视区域（不包含滚动条没有滚到的区域）
$(window).width()
$(window).height()
jquery对象绑定事件
jQuery对象.去on的事件名(function(){
// 事件处理函数
})
jquery的链式调用
- jquery调用一切不关心返回值的方法的表达式的返回值都是调用方法对象的本身；
jquery Ajax
// 发送一个ajax请求
// 1.地址 2.方式 3.同步异步 4.回调
$.ajax({
// 同步/异步：默认值就是true异步
async:true,
// 请求方式:默认值GET
type:"get",
// 当发送请求时，会将data对象里面的参数和url进行拼接。
// data代表请求参数。
data:{
username:$("#username").val(),
age:$("#age").val()
},
url:`http://127.0.0.1/allStudent.php`,
// 成功后的回调函数
success(data){
console.log(data)
},
// 发送请求之前执行的函数，往往都是操作加载动画。
beforeSend(){
console.log(1)
}
})
jquery jsonp
$.ajax({
// 发送jsonp请求
dataType:"jsonp",
data:{
wd:$("#city").val()
},
// 控制回调函数名字的参数属性名的，碰到憨批接口的时候会用到。
jsonp:"cb",
// 控制回调函数的函数名
jsonpCallback:"fn",
url:`http://suggestion.baidu.com/su`,
// 成功后的回调函数
success(data){
console.log(data)
}
})
js闭包
- 本质：是一种函数的嵌套，外层函数套内层函数，内层函数作为外层函数的return语句的返回值。在外层函数里声明的一个局部变量，在内层函数里操作并返回这个局部变量。外层函数自调用将返回值就是内层函数引用赋值给的一个变量，此时这个变量指的是内层函数，此时调用该变量就等价于调用内层函数，也就可以操作原本外层函数的局部变量了，并且想要获取或操作刚刚声明的那个局部变量，执行内层函数僵尸唯一的一个途径。
- 缺陷：因为该局部变量不会被JS的垃圾回收机制所回收，所以当大量使用闭包和闭包里的局部变量足够多时，容易发生内存泄漏。
- 使用场景：
1、如果希望一个局部变量可以在函数体外部操作访问到。
2、如果希望某一个变量只能通过调用某一个函数的形式进行修改。
js的继承
- 实现机制：在子类中继承父类的私有属性和私有方法使用call或apply的方法来在子类函数中调用父类函数并改变this指向。如果想在子类中继承父类的原型属性和原型方法的话，需求方法有很多种，问题最少的使用原型链的方式进行继承，具体的操作就是将父类的实例化对象赋值给子类的原型对象，此时子类的实例化对象在调用父类的原型方法或原型属性时，虽然在子类的原型对象中找不到对应的属性或方法，但是在子类的原型对象中的原型对象中可以找到这些方法，并且子类独有的原型属性和原型方法不会影响到父类。
// Person类 父类
function Person(name,age,sex){
// 私有属性和私有方法
this.name = name;
this.age = age;
this.sex = sex;
}
// 原型属性和原型方法
Person.prototype = {
type:"灵长类",
sayName(){
alert(this.name)
}
}
let wdw = new Person("张泽一",18,"男");
// SuperMan类 子类
function SuperMan(name,age,sex,skill){
// 继承了父类Person里面所有的特征（属性）
// 此时只继承了私有属性和私有方法，没有继承原型对象和原型方法
Person.apply(this,[name,age,sex]);
this.skill = skill;
}
// 将父类的实例化对象赋值给子类的原型对象
// 原型链继承
SuperMan.prototype = new Person();
// 子类的原型中独有的一个方法，父类的原型里应该没有。
SuperMan.prototype.showSkill = function(){
alert(this.skill)
}
let spiderMan = new SuperMan("蜘蛛侠",18,"男","爬墙");
// 修复实例化对象的constructor指向问题
spiderMan.constructor = SuperMan;
console.log(spiderMan)
ES6继承
class Person{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
sayName(){
alert(this.name)
}
}
let wdw = new Person("张泽一","18","男")
console.log(wdw)
class SuperMan extends Person{
constructor(name,age,sex,skill){
// 从父类中继承过来的
super(name,age,sex)
this.skill = skill
}
skill(){
alert(this.skill)
}
}
let cr = new SuperMan("超人",18,"女","飞")
console.log(cr)
jquery插件
1、$.extend()与$.fn.extend()有什么不同点？
$.extend相当于为$对象去扩展属性或方法，这个情况很少用。
$.fn.extend方法相当于给所有jQuery实例化对象扩展属性或方法，一般来说jQuery的插件都是在$.fn.extend中添加了某一个方法。
2、Nodejs：它是一种服务器端语言，将JavaScript的ECMAScript部分剥离出来，可以脱离浏览器执行的一种运行环境。
3、使用Nodejs环境运行一个js文件：`node 文件名`
4、模块：
模块的引入方式：`let o = require("模块名")`
切换NPM下载源(下载第三方模块的速度加速)：npm config set registry https://registry.npm.taobao.org --global
第三方模块安装命令(shell)：npm install 模块名 --save
nodejs接收post请求
let bodyParser = require("body-parser")
app.use(bodyParser.urlencoded({ extended: false }))
server.post("/xx",(request,resopnse)=>{
request.body
})
模块的分类
- 内置模块
1、fs:文件系统
2、url:处理url格式字符串url.parse(request.url,true).query序列化前端发送的请求参数. - 第三方模块
1、express:对外开放一个端口，为其他用户提供web服务的
2、mysql:让Nodejs可以与本机的Mysql服务进行通信。
3、express-static:让NodeJs可以处理来自前端的静态请求
如何在后端接收到前端发来的请求参数
//引入模块
let url = require('url');
let express= require('express');
......
express.get("/delete",(request,response)=>{
//获取的来自前端请求的id参数
let id = url.parse(request.url,true).query.id;
//获取的来自前端请求的callback参数
let callbackfn = url.parse(request.url,true).query.callback;
})
gitee
* git init 初始化仓库
* git add -A 将本地库中所有文件提交到缓冲区
* git commit -m "注释" 将缓冲区的所有文件提交到版本库
* git commit -am "注释" 将工作区中的所有已经修改的文件绕过缓冲区直接向版本库进行提交。
* git status 将本地库中的文件与缓冲区或版本库中做比较，返回一个状态
* git diff <文件名> 将本地库中的某个文件与版本库或缓冲区比较差异
* git log 查看提交记录
* git reflog 查看提交记录 （包含所有的操作记录）
* git reset --hard <版本号前几位>
* ssh-keygen -t rsa 输出公钥
* git push 将本地的版本库中的内容推送到远程库
* git pull 将远程库中的项目状态更新到本地库中
* git clone <远程库地址>