JS基础知识详解下--0基础-自学-专属

lm778

已于 2022-09-05 09:19:31 修改

阅读量280

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-08-29 19:32:45 首次发布

本文链接：https://blog.csdn.net/m0_59798527/article/details/126591171

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

十三、函数

1、函数的作用:代码封装，代码重用
2、自定义函数的写法:
function 函数名(参数列表){
函数体
return 值
}
return作用:返回结果，跳出函数
3、函数的调用方式:
1、直接调用函数名()
2、事件调用 οnclick=“函数名()”
3、通过其他函数调用: function test{ test2() }
4、函数分类
自定义函数:自己写的
无参函数 function test(){}
带参函数: function test(参数列表){}
系统函数: alert() confirm() promt() parseInt() parseFloat() typeof(
isNaN():不是数值返回true
eval():将字符换当做js代码执行
5、标签操作
获取标签:
var tag=document.querySelector(“#id”);
var tag=document.getElementById(“id”);
获取标签内容:
获取文本: tag.innerText
获取文本和标签:tag.innerHTML
获取input值: tag.value 修改标签的内容:
tag.innerText=“”
tag.innerHTML=“

”
tag.value=“” 作用域:
1、全局变量:函数外部声明的变量,可被所有区域访问
2、局部变量:函数内部声明的变量，只能被函数内部访问
3、暗示全局变量:一切未经声明的变量 ,可被所有区域访问

十四、内置对象

   Math: 数学对象
              属性:Math.PI  圆周率
               方法:
                    Math.floor()    向下取整
                    Math.ceil()    向上取整
                    Math.round()    四色五入
                    Math.max(x1,x2,...)    最大值
                    Math.min(x1,x2,...)    最小值
                     Math.abs()  绝对值
                     Math.sqrt()  平方根
                     Math.pow(x,y)  x的y次方
                     Math.random()  0(包含)-1(不包含)的随机数
                     Math.floor(Math.random()*(m-n))+n      n(包含)-m(不包含)的随机数
    Date日期对象：var date=new Date()
                   console.log(date.getFullYear()); //2022年
		console.log(date.getMonth()+1); //8月,国外0-11
		console.log(date.getDate()); //1号
		console.log(date.getDay()); //1，星期一
		console.log(date.getHours()); //14点
		console.log(date.getMinutes()); //42分钟
		console.log(date.getSeconds()); //25秒
               两个日期相减
		var cha=new Date("2022-8-3 00:00:00")-new Date();

十五、计时器

            计时器:var id=setInterval("函数",间隔时间)
             清除计时器:clearInterval(id)
             定时器:执行一次
                    var id=setTimeOut("函数",延迟时间)

十六、String

       属性:  length:长度            方法:
            1、字符串开头结尾
               boolean startswith()   //以....开头
               boolean endswith()   //以......结尾
             2、查找字符串
               number  indexof()      //返回第一个下标，找不到返回-1
               number  lastIndexof()      //返回最后一个下标
                boolean  includes()     //是否包含
            3、字符串截取
                 string  substr(startIndex,lenght)  //从某个下标开始截取length个字符
                   //从startIndex下标开始截取到endIndex(不包含)
                  string  substring(startIndex,endIndex)  
                  string  slice(startIndex,endIndex)     //可以是负值
           4、根据下标获取字符
                     string  charAt(index)     //根据下标返回字符
                     number  charCodeAt(index)     //根据下标返回字符的unicode码
                     String.fromCharCode(101)       //unicode码转化为对应的字符
           5、转换大小写
                       toLowerCase()      //转换为小写
                        toUpperCase()     //转换为大写
          6、其他
                       string  concat()           //返回拼接后的字符串
                       string   trim()           //去掉两边的空白

十七、数组

  1、数组创建方式:
     var   array=[10,20,30];
      var array=new Array(10,20,30);
 2、数组追加
         array.unshift(10,20,30)   开头追加
         array.push(10,20,30)   末尾追加
3、数组修改
          array[index]=新的值；
4、获取数据
          array[index]
 5、删除数据
          array.shift()   开头删除
          array.pop()    末尾删除
           array.splice(开始下标,删除个数,替换的数据)
 6、数组方法
          var arr=array.concat(array1)    拼接数组
          array.reverse()            翻转数组
          array.join("")             将数组连接为字符串
          array.includes()         判断数组是否包含
          array.indexof()           查找数据的第一个下标
          array.lastIndexof()           查找数据的最后一个下标
          Array.isArray(array)        判断是否是数组
          array.slice(开始下标，结束下标)     截取(结束下标不闭合)
          array.sort(function(a,b){
                  return a-b;     //升序
                   return b-a;     /降序
            })
         冒泡排序:
                  n个数字来排队，两两相比小靠前
	        外层循环n-1，内层循环n-1-i

7、数组方法(回调函数)
array.forEach(function(item,index,self){}) //遍历数组
var bool=array.every(function(item,index,self){}) //判断所有元素是否复合条件
var bool=array.some(function(item,index,self){}) //判断是否有元素复合条件
var firstNumber=array.find(function(item,index,self){}) //查询符合条件的第一个元素
var firstIndex=array.findIndex(function(item,index,self){}) //查询符合条件的第一个元素下标
var arr=array.filter(function(item,index,self){}) //过滤出所有符合条件的所有元素
var newarray=array.map(function(item,index,self){}) //返回处理后的新数组
var res=array.reduce(function(res,item,index,self){},“初始值”) //res，返回每一次的处理结果

十八、对象

创建对象:   属性和方法组成
       var  zs={
             "name"："张三",
              "age":20,
              "show":function(){
                    console.log(this.name,this.age)    //this  指代当前对象本身   
                 }  
        }
        var  zs=new Object();
              zs.name="张三";
               zs.age=20;
               zs.show=function(){}
  调用对象属性: 对象名.属性名
  调用对象方法:对象名.方法名(形参)

json：数据交换格式 {key:value,key:value,…}
字符串–》对象 JSON.parse(str);
对象----》字符串 JSON.stringfy(obj)
对象遍历:
for(var 键 in 对象名){ 对象名[键] }

十九、BOM

BOM:browser object model 浏览器对象模型
属性:
screen
width height availWidth(可用宽度) availHeight(可用高度)
navigator
userAgent：获取浏览器信息
location
href:获取url
host: IP+端口
hostname：IP
port:端口
pathname:项目路径
search:获取url后的参数
reload() 刷新-缓存
reload(true) 刷新-浏览器
history
forward() 前进
back() 后退
go(number) 前进/后退
编码：
编码:encodeURI(str) encodeURIcomponent(str)
解码:decodeURI(str) decodeURIcomponent(str)
base64编码
atob(str)
btoa(str)
打开新标签页
超链接
location.href=“url”
window.open(“url”,“_blank”,“窗口特征”)
window.close()
图片预览

var _input=document.querySelector(“input”);
var ni ni _img=document.querySelector(“img”);
_input.οnchange=function(){
//1、获取上传文件对象
var file=this.files[0];
//2、创建文件流
var fr=new FileReader();
//3、读取文件
fr.readAsDataURL(file);
//4、fr加载完之后将结果赋予src
fr.οnlοad=function(){
console.log(fr.result);
_img.src=fr.result;
}
}

二十、DOM

DOM：document object model 文档对象模型
DOM选择器:
getElementById：通过Id获取
getElementsByTagName:通过标签名称获取,返回类数组
getElementsByClassName:通过类名称获取,返回类数组
getElementsByName:通过name属性名称获取,返回类数组
querySelector:返回符合条件的第一个元素
querySelectorAll:返回符合条件的所有元素
DOM内容操作
tag.innerText
tag.innerHTML
tag.value 表单操作
类数组转换为数组: Array.from(类数组)
样式操作:
tag.style.样式名=“样式值”
tag.className=“类名”
tag.classList.add(“类名”) /tag.classList.remove(“类名”)
层次节点:
获取子元素:tag.children||tag.childNodes
获取子元素长度:
父元素.childElementCount
子元素数组.length
获取第一个子元素：
tag.firstElementChild||tag.firstChild
获取最后一个子元素：
tag.lastElementChild||tag.lastChild;
获取前一个兄弟元素：
tag.previousElementSibling||tag.previousSibling
获取下一个兄弟元素：
tag.nextElementSibling||tag.nextSibling;
经典案例:
全选和反选
购物车
节点操作:
创建节点: document.creatElement(“”)
追加节点:document.appendChild(“”)
插入节点:document.insertBefore(“”,“”)
删除节点:
tag.remove()
父元素.removeChild(tag)
替换节点:
父元素.replaChild(替换，被替换)
获取节点名称：tag.nodeName
获取节点类型：tag.nodeType //元素节点 1
设置属性： tag.setAttribute(属性名，属性值) 自定义属性
tag.属性名=属性值现有属性
获取属性: tag.getAttribute(属性名)
select操作:
获取所有option：_select.options
获取选中option下标：_select.selectedIndex
获取文本值:options[index].innerText
获取value值:_select.value
创建option对象:
var option= new Option(text,value,true,是否选中)
插入option:
_select.add(option,null)
_select.add(option,option2)
获取内嵌样式:document.defaultView.getComputedStyle(_wrapper,null).width
获取window的滚动距离:window.pageXOffset,window.pageYOffset
获取元素的滚动距离:_wrapper.scrollLeft,_wrapper.scrollTop

二十一、DOM距离

   window滚动距离: window.pageXOffset,window.pageYoffset
   元素滚动距离: tag.scrollTop,tag.scrollLeft
   window可视距离:window.innerHeight, window.innerWidth
   元素的可视距离: tag.clientHeight,tag.clientWidth
   元素控件距离:  tag.offsetHeight,tag.offsetWidth       被撑开的距离:  tag.scrollHieght,tag.scrollWidth
    元素的位置:   tag.offsetLeft,tag.offsetTop
   自定义属性:  data-属性名="属性值"
    获取自定义属性: tag.dataset.属性名

二十二、事件

    事件绑定方式:
                tag.onXXX=function(){}
                tag.addEventListener('click',fn，默认false)
     移除事件
                 tag.onXXX=null/""/false
                 tag.removeEventListener('click',函数名)
    事件冒泡:事件由子元素冒泡至父元素  tag.addEventListener('click',fn,false)
    事件捕获:事件由父元素传播至子元素tag.addEventListener('click',fn,true)
     阻止事件冒泡:  event.stopPragation()
     阻止默认事件:  return false/   event.preventDefault()
     事件对象event:记录事件相关信息
     获取事件源:  event.srcElement||event.target
     获取鼠标落点坐标:
               event.clientX,event.clientY(相对于浏览器,会受滚动条影响)
               event.pageX,event.pageY(相对于body,不会受滚动条影响)
     监听鼠标左右键: event.button   //左键0 滚轮1  右键2
     事件委托:子元素事件委托给父元素，通过事件源获取目标
             优点:减少遍历，给未来元素添加事件
     事件分类: 鼠标事件、键盘事件、文本事件、窗体事件
     鼠标事件:
                    click,  点击事件
		 mousemove,鼠标移动
		 mouseup,  鼠标弹起
		 mousedown, 鼠标摁下
		 contextmenu  右键菜单
                    mouseover,mouseout,鼠标悬浮离开
		 mouseenter,mouseleave H5新增，鼠标悬浮离开

二十三、本地存储

                           生命周期                作用域        大小       存储位置
   localstorage               永久                                 同源               5MB             浏览器
   sessionstorage        关闭页面                           本窗口             5MB             浏览器
   cookie               过期时间(默认关闭浏览器)        同源               4kb            浏览器与服务器
   同源:协议、域名、端口都一致

localstorage与sessionstorage的方法一致:
存: localstorage.setItem(key,value)
localstorage.key=value
取: localstorage.getItem(key)
localstorage.key
改: 同一个key重新复制会覆盖前者
删： localstorage.removeItem(key)
清空: localstorage.clear()
存取:
JSON.stringify() 转换为字符串
JSON.parse() 转换为原格式
cookie:
存:document.cookie=“key=value;max-age=2s”
document.cookie=“key=value;expires=new Date().toUTCString()”
删:document.cookie="key=;max-age=0
document.cookie=“key=;expires=new Date().toUTCString()”
取: key

二十四、正则

  1、写正则:
             var reg=/正则/修饰符
             var reg=new RegEXp("正则"，修饰符)
   2、修饰符
               i: 忽略大小写
               g:全局匹配
               m:多行匹配
 3、验证正则
                reg.test(str)    //boolean
                reg.exec(str)   //跟着游标每次返回一个检索到的字符串
                str.match(reg)   //全局匹配下，返回所有符合的字串
                str.search(reg)   //返回符合条件的第一个子串下标
4、正则书写模式
                 []代表一位，
                      [abc]  [0-9]  [a-z] 
                      [^abc]   除了abc
                 元字符:
                      \d [0-9]         \D [^0-9]
                      \w[0-9a-zA-Z_]    \W [^0-9a-zA-Z_]
                量词:
                          n+:  1-多
                          n*：0-多
                          n?：0-1
                          n{x}:  x个
                          n{x,}   x-多
                          n{x,y}   x-y

6、贪婪匹配: 能匹配多，不匹配少
非贪婪匹配: 能匹配少，不匹配多 /正则?/g
7、正向预查和反向预查
正向正预查: \d(?=正则)
正向负预查: \d(?!正则)
反向正预查: (?<=正则)\d
反向负预查: (?<!正则)\d
// 字母数字汉字组合6-20位
var reg8 =/^(?!([a-zA-Z]+|\d+|[\u4E00-\u9FA5]+) $KaTeX parse error: Undefined control sequence: \d at position 22: …00-\u9FA5a-zA-Z\̲d̲]{6,20}$ /g;
8、 replace
str.replace(“被替换的字符串”，“替换的字符串”)
str.replace(/正则/g，“替换的字符串”)
str.replace(/()()()/g，"$0**** $3") //$ 对应相应顺序的括号，后边$是不被替换的
str.replace(/()()()/g,function($0,$1,…$6,$7))
$0：匹配到的字符串
$1-$5:对应每一个分组括号
倒数第二个:每一个子串的开始下标
倒数第一个: 字符串本身

二十五、预编译

1、js运行三部曲
语法分析预编译执行
2、预编译过程
GO: global Object
1、创建GO对象
2、找变量声明，值赋undefined
3、找函数声明，值赋函数体
4、执行
AO: activity Object 执行期上下文
1、创建AO对象
2、找形参和变量声明，值赋undefined
3、形参与实参相统一
4、找函数声明，值赋函数体
5、执行
3、scope:作用域，存储的运行期上下文的集合，这些集合呈链式链接，叫做作用域链
寻找变量，从底层AO开始，如果找不到，沿作用域链依次向上层查找直到全局AO
4、闭包:
函数内部嵌套函数
内部函数可以访问外部函数的变量
内部函数被保存到外部
会导致内存泄漏: 由于内部函数引用外部函数的变量，当外部函数销毁后，被引用的变量无法被回收，就会一直占用内存，解决:解除引用
5、内存泄漏: 长时间得不到回收的对象一直占用内存，就会导致内存泄漏
6、垃圾回收机制:
垃圾回收机制：垃圾回收器
垃圾回收器会定期扫描对象，并计算引用每个对象的其他对象的数量，
如果一个对象的被引用数量为0(没有其他对象引用该对象)，那么该对象的内存即可回收
7、立即执行函数:可以自我执行的函数
+function(形参列表){}(实参列表) + - ~
（function(形参列表){}(实参列表)）
作用:
防止污染全局变量
块级作用域
属性私有化
9、箭头函数
(参数列表)=>{函数体}
参数只有一个，括号可以省略
函数体只有一句，大括号可省略
函数体只有一句并且是return，大括号和return可省略
10、 this
全局 this：window
函数 this：window
闭包 this：window
箭头函数 this：window
事件this:事件源
对象的this:对象本身
构造函数的this:谁调用指谁
vm的this: vue实例
vc的this: vuecomponent实例

二十六、原型

    1、 var obj={"name":"张三"}
    2、  var   obj={}      obj.name="张三"
    3、   function Stunden(形式参数){
                   var this={
                          __proto__:Student.prototype
                   }
              }        
             var obj=new Student(实际参数)
    4、原型Prototype，所有函数创造的对象的祖先，原型上的属性和方法，所有对象共享
    5、 调用  对象.constructor   可以获取对象对应的构造函数   
    6、 原型:每一个函数都有一个名为prototype的属性，这个属性指向函数的原型对象;
__proto__:每一个对象都有一个隐式的__proto__属性，指向该对象的构造函数的原型对象;
      原型链：当一个对象调用的属性或方法自身不存在时，就会去自己__proto__关联的前  辈prototype 对象上找，直到找到object/null,从而形成了所谓的"原型链"; 
7、继承的方式
             1、原型链继承
                    Son.prototype=new Father()
                   缺点: 构造函数不能传参
                            被迫同时继承构造函数和原型的属性
             2、原型式继承
                       Son.prototype=Object.create(Father.prototype)
                      Son.prototype.constructor=Son
                       缺点:只能继承原型的属性
             3、借用构造函数
                        function Son(参数列表){
                            Person.call(this,参数列表)
                            Person.apply(this,[参数列表])
                            Person.bind(this,参数列表)()
                        }
                     只能继承构造函数的属性
            4、寄生组合式继承：原型式继承+借用构造函数
                        Son.prototype=Object.create(Father.prototype)
                        Son.prototype.constructor=Son
                         function Son(参数列表){
                            Person.call(this,参数列表)
                            Person.apply(this,[参数列表])
                            Person.bind(this,参数列表)()
                        }
                      可以自由选择继承继承构造函数或原型的属性