js是单线程的 所有的同步任务都是按顺序依次执行的,前面的执行完了之后才会执行后面的任务
../ 上级目录
./当前文件夹目录
说出 == 和 === 的区别
- 普通相等: ==
在比较类型不相同的情况下, 会将运算元先转成Number的值, 再进行比较(即会进行隐式转换 ) - 严格不等: ===
在进行比较时不会做任何的类型转换.例如:在类型不同的情况下, 直接返回false
数组的操作方法
- push() pop()//尾部 unshift() shift()
返回值
push和unshift是头尾增加后返回长度,
pop和shift返回他们删除的值
- splice() slice() concat()
var arr = [ 29 , 100 , 104 , 55] ;
arr.splice(1,2)
console.log(arr)//[100,104]返回删除后的数组
slice接受两个参数,表示从哪到哪的被截取下来
concat() 方法用于连接两个或多个数组 如arr=arr.concat(arr2);
返回值
splice()为删掉的值
concat()为拼合后的新数组
- join() split()
join可以把数组变成字符串,接受参数返回字符串,数组本身不变
split接受参数,返回字符串以参数分割的数组
- sort() reverse()//数组排序
- indexOf()和lastIndexOf()
indexOf() 两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。没找到返回-1. 返回查找项的索引值
ES5新方法
find,findIndex,reduce,forEach,every,map, filter
- filter
var a = [1,2,3,4,5,6,3,1];
a.filter(function(v,i,self){
return self.indexOf(v) == i;
});
//[1, 2, 3, 4, 5, 6]
- map
var arr = [2,3,4,5,6];
var bb= arr.map(function(item,index,arr){
return item*item;
});
console.log(bb); // [4, 9, 16, 25, 36]
- reduce
//可以用reduce快速求数组之和,prev,cur,index,arr
var arr=[1,2,3,4];
arr.reduce(function(pre,item){
return pre+item;
}); //10
- every()和some()
//every() 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
//some() 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
var arr = [1, 2, 3, 4, 5, 6];
arr.every(x=>x>0);//return true;
arr.every(x=>x>5);//return false;
arr.some(x=>x>5);//return true;
深浅拷贝
栈内存:基本类型--名值存储在栈内存中
堆内存:引用类型--名存储在栈内存中,值存储在堆内存中
###### 实现浅拷贝的方法
1. for···in只循环第一层
2. Object.assign方法
3. 直接用=赋值
###### 深拷贝:
1. 递归
2. JSON对象,JSON.stringify与JSON.parse,还能结合localStorage实现对象数组存储,
缺点: 无法实现对对象中方法的深拷贝,会显示为undefined
3. lodash函数库实现深拷贝:
let result = _.cloneDeep(test)
4. 用slice,concat实现对数组的深拷贝
// 当数组里面的值是基本数据类型,比如String,Number,Boolean时,属于深拷贝
// 当数组里面的值是引用数据类型,比如Object,Array时,属于浅拷贝
5. 直接使用var newObj = Object.create(oldObj),可以达到深拷贝的效果。
6. 使用扩展运算符实现深拷贝
继承
promise
axios
跨域
-同源策略:
1. 浏览器的安全策略
2. 协议名,域名,端口号必须完全一致
-解决跨域方法:
jsonp cors(后台) 服务器代理(后台)
jsonp解决跨域
//创建script标签
var script =document.createElement('script')
//设置回调函数
function getData(data){
//数据请求回来会被触发的函数
//todo
}
//设置script的src属性,设置请求地址
script.scr='https://localhost:3000?callback=getData'
//让script生效
document.body.appendChild(script)
函数节流,函数防抖
函数节流:一个函数执行一次后,只有大于设定的周期才会执行第二次
//频繁触发的函数,在规定时间内,只让触发的第一次生效,其他不生效
/**
* fn:要被节流的函数
* delay:规定的时间
**/
function throttle(fn,delay){
//上一次触发的时间
var lastTime=0
return function(){
//当前函数触发时间
var nowTime=new Date();
if(nowTime-lastTime>delay){
//改变this指向
fn.call(this)
//同步时间
lastTime=nowTime
}
}
}
document.onscroll=throttle(function (){console.log(Date.now())},200)
函数防抖:频繁触发的函数,在规定的某个时间内,只让最后一次生效
function debounce(fn,delay){
//记录上一次延时器
var timer=null
return function(){
//清除上一次延时器
clearTimeout(timer)
timer=setTimeout(function (){
fn.apply(this)
},delay)
}
}
document.getElementById('btn').onclick=debounce(function (){console.log("被点击了")},200)
闭包
什么是闭包?
1. 密闭的容器,类似set,map
2. 闭包是一个对象,是键值对的方式存储
闭包形成的条件
1. 函数嵌套
2. 内部函数引用外部函数的局部变量
闭包的优点:
- 延长外部函数局部变量的生命周期
闭包的缺点:
- 容易造成内存泄漏、
使用闭包注意点:
- 及时清除(销毁)闭包 只要将使用外部变量的函数值置为null,即为该函数指向了null,闭包也随之销毁。 getCount = null
//应用场景 防抖 、节流 、立即执行函数 、组合函数等等
function fun(){
var count=1
return function getCount(){
count++
console.log(count)
}
}
var fun2=fun()
fun2() //2
fun2() //3
变量提升 预处理
console.log(username) //undefined
var username='kobe'
fun() // 正常执行
function fun(){
console.log('fun()')
}
执行上下文 执行上下文对象指定的是this
url到渲染页面完成发生了什么
1. DNS解析
2. TCP连接:三次握手
-第一次握手:由浏览器发起,告诉服务器我要发送请求了
-第二次握手:由服务器发起,告诉浏览器我准备接收了,你发吧
-第三次握手:由浏览器发起,告诉服务器我马上就发了
3. 发送请求
4. 接受响应
5. 渲染页面
-调用HTML解析器
-调用CSS解析器
-调用javascript解析器
布局
渲染 可多次执行
6. 断开连接:四次挥手
-第一次握手:由浏览器发起,告诉服务器,我东西发完了(请求报文),你准备关闭吧
-第二次握手:由服务器发起,告诉浏览器,我东西接收完了(请求报文),我准备关闭了,你也准备关闭吧
-第三次握手:由服务器发起,告诉浏览器,我东西发完了(响应报文),你准备关闭吧
-第四次握手:由浏览器发起,告诉服务器,我东西接收完了(响应报文),我准备关闭了
高阶函数
1)高阶函数,满足一个条件即可
a.接收函数类型的参数
b.返回值是函数
2)常见
1.setTimeout()/setInterval()
2.Promise: Promise() then(value()=>{},)
3.数组遍历方法: forEach()/filter()/map()/reduce()/find()/findIndex()
4.fn.bind() 返回新的函数,(闭包)
5.Form.create()()
6.高级组件