首页 > 其他分享 >JS小知识点

JS小知识点

时间:2024-05-30 12:04:48浏览次数:8  
标签:function 知识点 arr 函数 JS 闭包 数组 var


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.高级组件
高阶组件

标签:function,知识点,arr,函数,JS,闭包,数组,var
From: https://www.cnblogs.com/qiyuemh/p/18222059

相关文章

  • js事件基础知识
    事件的基础知识事件三要素:事件源:  事件被触发的对象 谁被触发事件类型:如何触发,什么事件例如鼠标点击,鼠标经过,键盘按下等事件处理程序:通过函数赋值的方式完成常用的事件:1)、鼠标事件onclick   当点击鼠标时运行的事件onmousedown  当按下鼠标按钮时运行的事......
  • JS中?? 与 || 的区别
     1)相同点:??和||的用法相同,都是前后是值,中间用符号连接,根据前面的值来判断最终是返回前面的值还是后面的值。One??TwoOne||Two2)不同点:判断的方法不同:使用??时,只有One为null或者undefined时才会返回two;使用||时,One会先转化为布尔值判断,为true时返回One......
  • 三维前端开发项目中Threejs的THREEScene函数详解
    THREE.Scene函数用于创建一个场景对象。大家好!艾斯视觉作为在IT行业中负责ui设计和前端开发环节的服务商很高兴能在这里与大家共同探讨学习:场景是Three.js中所有图形元素的容器,它可以包含相机、光源、几何体、材质等。创建场景对象的基本语法如下:constscene=newTHREE.S......
  • JS-07 深入了解闭包
    目录1变量作用域2 作用域链3认识闭包4经典面试题5闭包的应用6闭包内存释放7闭包的优势1变量作用域变量作用域的概念:就是一个变量可以使用的范围JS中首先有一个最外层的作用域:称之为全局作用域JS中还可以通过函数创建出一个独立的作用域(局部),其中函数可以嵌......
  • 如何初始化 FIrebase 云函数,以便使用凭据和 JSON 验证 Firebase Admin SDK 服务账户?
    我觉得我已经阅读了所有可用的资料,但我仍然无法理解这一点。我非常喜欢Google的产品,但有时其文档的简洁性令人头疼。我阅读了这个令人难以置信的雄辩答案,这个答案的作者和我一样毫无头绪,但他觉得有必要写一本循序渐进的儿童指南。不幸的是,他的回答过于针对他的项目,而不是我的项......
  • C#解析json的几种方式
    json格式的数据是javascript原生的一种数据格式,比xml更简洁。它有两种形式:json对象和json对象数组。 在此之前,有必要解释几个基本概念:json字符串,就是string,它一定是由双引号包起来的,如"{'name':'jerry'}"。这是一个string,尽管去掉双引号后它就是一个json对象。json对象,就是以......
  • Springboot报class path resource [xxxxx.json] cannot be resolved to URL because i
    当Springboot解析resources文件下的json文件时,在本地环境好用,部署到服务器上找不到文件内容报错classpathresource[xxxxx.json]cannotberesolvedtoURLbecauseitdosenotexist问题排查(1)pom.xml文件配置<build><resources><resource><d......
  • error in ./node_modules/@intlify/core-base/dist/core-base.cjs
    ERRORFailedtocompilewith1error......
  • JS取视频第一帧
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>Document</title>&l......
  • C#中处理JSON数据的方式
    1.将对象序列化为JSON字符串在C#中,可以使用System.Text.Json和Newtonsoft.Json这两个流行的库来将对象序列化为JSON字符串。以下是使用这两个库进行序列化的示例代码:usingSystem;usingSystem.Text.Json;usingNewtonsoft.Json;publicclassPerson{publicstringN......