js和js高级-CSDN博客

本文链接：https://blog.csdn.net/fpxrng/article/details/123341299

js三部分

Ecmascript：语法规范
DOM：文档对象模型
BOM：浏览器对象模型

Number类型

0除以0是NaN，非0除以0是Infinity
typeof NaN 结果就是Number

不同数据类型之间的转换

字符串配合 + 是链接而不是运算

小数

二进制数据转换，小数的加减乘除有精度丢失问题

比如6e2，就是6X10的平方

在这里插入图片描述

函数

关键字形式函数

function 关键字声明的函数，函数算Object类型

表达式形式函数

for循环函数的var是全局变量，函数的形参和函数中的变量是局部变量，剩下的都是全局变量

var fun=function(){}          //将函数赋值给变量

函数声明部分也有作用域提升

回调函数

在这里插入图片描述
函数执行的时候传入的实参是另一个函数的声明部分

IIFE

表达式形式的函数声明完，立即执行一次

在这里插入图片描述
上面通过+将关键字形式的函数变成表达式形式的函数
只有 +，-，！
优点：形成块级作用域，避免向全局作用域添加变量和函数，避免变量命名冲突
IIFE中定义的变量和函数执行结束时被销毁，可以减少闭包占用的内存问题

数组

push，pop ：数组尾部添加或删除一个元素，pop用返回值接受的是删除的
unshift，shift：数组头部增加和删除一个元素
join方法，数组转字符串
reverse():该方法会改变原来的数组
indexOf和includes
slice不改变原数组，两个参数，从第几个开始，第几个结束，第二个参数不写默认到最后
splice改变原数组，从第几个开始，删除的数量，要替换的元素，多个元素用逗号隔开
concat（ar1,ar2）传入两个数组，返回合并的新数组，不改变原来数组

数据类型相等判断

基本数据类型存在栈空间，引用数据类型在堆空间

字符串

toUpcase和toLowercase,将字符串中的英文切换大小写
search（）方法传入字符串，返回匹配的索引，找不到返回-1
split，截取字符串返回数组
substring和slice用法一样 //索引
substr和splice用法一样 //个数
replace和match，返回包含结果的数组（只能是第一个匹配到的结果）

JSON

创建JSON类型的数据格式，每一个key都要加双引号，通过点语法或【】来读取、新增、修改属性
数字、变量、、特殊字符、关键字、空格和保留字都只能用中括号读取

正则表达式

/g 全局修饰符，将全部符合条件的字符匹配出来
string的match方法传入正则加g可以匹配全部的
在这里插入图片描述
上面这个拆分多个空格，\s就是空格匹配

exec和text

正则表达式的exec方法传入字符串进行匹配，只能匹配到第一个结果，g不支持，返回一个数组
text方法也是传入字符串，返回boolean值，判断传入字符串是否匹配正则
【0-9a-zA-Z】
^ 和 $，以什么开头和以什么结尾
\d代表0到9之间的数组，\D代表非数字
\w可以匹配任意字母、数字、下划线
量词：{}，比如{3，20}就是3到20次之间的，{1，}就是大于等于一次
？是0或1，*代表任意次数

类数组对象

函数的函数体中才有arguments
没有形参的情况下获得函数传入的参数，没有数组的方法，但有length属性
可以通过【…展开】变成数组

闭包

可以访问其他作用域中的变量，这样的函数叫做闭包
在这里插入图片描述
优点：延长局部变量的时间，不会被内存释放，可以让外部访问到该变量
缺点：内存消耗很大，变量不清除可能导致内存泄漏

DOM 文档对象模型

根元素HTML，可以通过以下方法直接获得节点
在这里插入图片描述
document.getElementById(“?”).className=“?”
document.getElementById(“?”).id=“?”
document.getElementById(“?”).type=“color”
通过以上语句直接修改标签内的属性值

普通元素标签通过inner HTML设置标签内的内容，表单元素通过value来设置
innerHTMl会读取获得节点之间的标签，innertext不会获得节点之间的标签，只获得内容
设置内容如果带html标签，innertext不会在网页展示，innerHTML会在网页中展示该标签

鼠标事件

mouseenter不支持冒泡，而mouseover支持冒泡。冒泡指的是事件冒泡，即在子元素上触发的事件会向上传递至父级元素，并触发绑定在父级元素上的相应事件。在父元素的事件回调函数中有参数event，可以通过event.target获得触发事件的根元素标签
对应onmouseleave不支持冒泡，onmouseout支持事件冒泡

聚焦事件

对于表单元素，onfocus和onblur
在这里插入图片描述

用IIFE解决函数调用循环结束的问题，根本原因就是函数作用域不一样
还有一种用this来解决，this在事件回调函数中代表触发该事件的dom标签

event

IE8没有，以上的版本有，低版本window.event

event.screenX
event.screenY
上两个是以屏幕的左上角为原点

  event.pageX
    event.pageY
    以网页的左上角为原点

clientX和clientY
以网页显示区域的左上角为原点

offsetX和offsetY
鼠标所在的元素的左上角为原点

淘宝放大镜

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #img{                //图片
          width: 640px;
          height: 351px;
      }                        //图片上的遮罩层
        #block{
            width: 150px;
            height: 150px;
            position: absolute;
            opacity: 0.15;
            background-color: gainsboro;
            top: 0;
            left: 0;
        }
        #bgImg{         //另外的放大图片的展示区域
            margin: 100px;
            width: 200px;
            height: 200px;
            background-image: url("static/01.jpeg");
            background-position: 0px 0px;
            transform: scale(1.5);
        }
    </style>
</head>
<body>
<div id="enlarge">
    <img id="img" src="static/01.jpeg" alt="图片加载失败">
    <div id="block"></div>
</div>
   <div id="bgImg"></div>
<script src="practise01.js"></script>
</body>
</html>

js页面

let block = document.getElementById("block");
let bgImg = document.getElementById("bgImg");
block.onmousedown=function (e) {
         let offsetX = e.offsetX;
         let offsetY = e.offsetY;
         block.onmousemove=function (event) {
             let left = event.clientX-offsetX;
             let top = event.clientY-offsetY;
             if (left>=490){
                 left=490
             }else if (left<=0){
                 left=0
             }
             if (top>=201){
                 top=201
             }else if (top<=0){
                 top=0
             }
             block.style.left=left+"px";
             block.style.top=top+"px";
             bgImg.style.backgroundPositionX=-left+"px";
             bgImg.style.backgroundPositionY=top+"px";

         }
}
block.onmouseup=function () {
            block.onmousemove=null;
}

BOM

widow
window.location.href 获得浏览器的路径
window.navigator.userAgent 获得浏览器的版本信息
let interval = setInterval(fun,timmer);
clearInterval(interval);

函数的上下文

在这里插入图片描述
IIFE的this指向的是window

var hong={
    name:"hong",
    age:12,
    getName:(function () {
         return this.name=="hong"?"真":"假"
    })()
}
console.log(hong.getName)

上面这个返回false，this.name是undefined
window点属性没有该属性是undefined，而直接访问变量的话，没有就报错了

var obj={
    a:100,
    fun:function () {
        alert(this.a);
    }
}

let fun = obj.fun;
fun();                          //该this指向window

obj.fun();                //该this指向obj

函数的length属性指的是形参列表
在这里插入图片描述
this指的是arguments对象，callee指的是函数传入的形参
定时器调用，this指向window

call和apply

call（对象，param1,param2,…）和apply(对象，[param1,param2,…])的共同点：都是用来改变函数体内this的指向，函数的第一个参数代表函数体内的this的指向
apply()接受两个参数，第二个参数是一个带下标的集合，类数组或数组；call()传入的参数数量不固定，从第二个参数开始是具体的参数
function.call(obj,参数用逗号隔开就行)

原型和原型链

new函数返回的实例对象的__proto__ = 构造函数的 prototype

数组、正则、函数等引用类型都是对象，都有__proto__属性，该属性指向的对象是Object对象的 prototype

Function new出来Object、Array、Number等，它自己也是自己new出来的

obj.hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。
in 寻找属性会沿着原型链去寻找
instance of原理就是看实例的原型链上能否找到构造函数的原型对象
constructor在构造函数的原型对象上

继承

class Person {
  constructor(name) {
    this.name = name
  }
  // 原型方法
  // 即 Person.prototype.getName = function() { }
  // 下面可以简写为 getName() {...}
  getName = function () {
    console.log('Person:', this.name)
  }
}
 
class Gamer extends Person {
  constructor(name, age) {
    // 子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
    super(name)
    this.age = age
  }
}
 
const asuna = new Gamer('Asuna', 20)
asuna.getName() // 成功访问到父类的方法