js基础复习2

内建对象：

• Array：数组也是一个对象，和普通对象功能类似，用来存储一些值。不同的是普通对象使用字符串做属性名，数组使用数字做index索引操作元素。

  1. 读取元素：数组[索引]读取不存在的索引，不报错，返回undefined。

  2. 长度：arr.length()，接收返回值，得到连续数组的数组长度。非连续的数组能获取到数组的最大索引+1。也可以用arr.length(num)，设定数组长度为num。还有使用arr[arr.length]=num；可以总是在数组最后的位置添加元素

  3. 创建数组：var arr = new Array() 或 var arr = [],使用这两种方式创建数组时，都可以在创建的时候就指定数组中的元素。但是！当只传一个整数值的时候，原型方式是规定长度为这个数，字面量方式就是传入元素。

  4. 方法：

     • arr.push()向数组末尾添加元素。在原数组基础上修改，返回值为新数组长度

     • arr.pop()删除数组的最后一个元素。返回值为被删除的那个元素

     • arr.unshift()在数组开头添加元素，其他元素索引会依次调整。返回值为新数组长度。

     • arr.shift()从数组开头删除元素，返回值为被删除的那个元素

     • arr.forEach(回调函数)遍历数组：浏览器会在回调函数中传递三个参数:第一个参数，就是当前正在遍历的元素；第二个参数，就是当前正在遍历的元素的索引；第三个参数就是正在遍历的数组。

     • arr.slice(start[,end])从数组中提取指定元素。包含start，不包含end（开区间），不写end默认到结束。不改变原数组，返回新数组。

     • arr.splice(start[,length，replace])删除指定元素，返回值为被删除的元素。改变原数组。第三个参数及以后为替换元素，插入到start索引的前面。length为0就是插入元素。

     • arr.concat(数组名[/,‘元素名’])连接数组并返回新数组，不改变原数组。

     • arr.join(‘连接符’)数组转成字符串，返回新数组，不改变原数组，不写参数默认逗号

     • arr.reverse() 反转数组，修改原数组。

     • arr.sort()排序，改变原数组，默认按Unicode编码排序，对数字排序可能不准确。可以传入回调函数，回调返回值大于0元素交换位置，小于等于0（0认为元素相等）位置不变arr.sort((a,b)=>a-b),升序a-b;降序b-a

• 函数：

  1. 方法：

     • call和apply，就是调用函数，跟fun()效果类似。但是call和apply可以改变this指向。调用时，将一个对象指定为第一个参数，这个对象就会成为里面this的指向。他们两个不同的是，后面传参的时候，call可以直接写，而apply需要封装到一个数组中。

  2. 在调用函数时,浏览器每次都会传递进两个隐含的参数,1.函数的上下文对象this2.封装实参的对象arguments。arguments是类数组对象。也可以通过索引操作数据，也可以获取长度(实参数量)，调用函数时，我们传递的实参都会在arguments中保存。

     arguments.callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象

• Date()时间对象：

  1. 直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。如var d =new Date();
  2. 创建一个指定的时间对象，需要在构造函数中传递—个表示时间的字符串作为参数。日期的格式月份/日/年时:分:秒，如var d2 =new Date( “05/06/2022 11 : 10: 30”);
  3. 一些方法：
     • 获取当前日期的日、月、年 (时分秒同理）：getDate() (return 1-31)/ getMonth() (return 0-11)/ getFullYear()
     • 获取当前日期是周几：getDay(),返回值为0-6，0表示周日。
     • 时间戳：getTime()获取当前日期对象的时间戳（从格林威治标准时间的1970.1.1 0：0：0）的毫秒数。计算机底层再保存时间时使用的都是时间戳。

• Math：工具类对象

  1. 常量，都是大写的，比如 Math.PI ; Math.LN2

  2. 方法：

     • 数学类：Math.log(),Math.abs()绝对值；Math.pow(x,y) 返回x的y次幂

     • 向上取整：Math.ceil()；向下取整：Math.floor()；四舍五入：Math.round()

     • 生成0-1随机数：Math.random()

       生成x-y随机数：Math.round(Math.random() * (y-x) + x)

     • 获取最大/最小值：Math.max(); Math.min()

• 包装类：将基本数据类型转化为对象 var x = new String()

  1. String()将基本数据类型的字符串转换为String对象
     • length属性，获取字符串长度
     • charAt(索引)，返回字符串中指定位置的字符
     • charCodeAt(索引)，返回索引对应字符的Unicode编码
     • String.fromCharCode(Unicode)，根据指定字符编码获取字符（这个是String对象调用）
     • concat()拼串，作用和+相同，不改变原字符串，返回新的
     • indexOf()，检索一个字符串中是否含有指定内容。含有就返回第一次出现处的索引，没有返回-1，第二个参数可以指定开始查找的位置。lastIndexOf()从后检索字符串。
     • slice(begin[,end])，截取字符串中指定内容。不改变原字符串，左闭右开区间。不包括end，可以传负数。
     • substring(begin[,end])截取字符串，与slice类似，不同的是不能传负数作为参数，负数看作0处理。自动调参数位置，把小的放前面大的放后面。
     • substr(begin[,length])，截取字符串，参数为开始位置的索引和截取长度。
     • split() ，将字符串拆分成数组
     • toUpperCase()将一个字符串转成大写并返回
     • toLowerCase()将一个字符串转成大写并返回
  2. Number()将基本数据类型的数字转换为Number对象
  3. Boolean()将基本数据类型的布尔值转换为Boolean对象

  但是实际应用中我们很少使用基本数据类型的对象，这会给比较造成问题(对象比较地址)

  方法和属性只能添加给对象,不能添加给基本数据类型。当我们对一些基本数据类型的值去调用属性和方法时,浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法。比如：var s=123; s.toString() ; s.hello=‘你好’；给他添加方法不会报错，这就是因为浏览器临时将他转为对象，添加了hello属性，所以没有报错。但是，当添加完就给销毁了，所以读取是undefined。

15. 正则表达式（检查字符串）

• 创建正则表达式对象：

  1. var reg = new RegExp(正则表达式，匹配模式i忽略大小写 g全局匹配),灵活，可以传变量
  2. var reg = /正则表达式/匹配模式 如：reg=/a/i。方便，常用

• 规则：

  • |表示或，[]里的内容也是或的关系；^表示非，除了
  • A-z表示任意字母，
  • 量词(只对他前面的一个内容起作用)：{n}正好出现n次，{m,n}出现m~n次都可。{m,}m次以上。+一个或多个，等于{1,}；*0次或多次，等于{0,}；?0次或1次，相当于[0|1]
  • 开头结尾：^表示开头，$表示结尾
  • 转义：\为转义字符

  \w	任意数字、字母、_[A-z0-9_]
  \W	除了字母、数字、_[^A-z0-9_]
  \d	任意数字[0-9]
  \D	除了数字[^0-9]
  \s	空格
  \S	除了空格
  \b	单词边界
  \B	除了单词边界

• 相关方法：（字符串的方法）

  • split(/正则/) ，这种拆分更加灵活，比如split(/[A-z]/),能剔除字母。默认全局
  • search(/正则/)，搜索字符串中是否有指定内容，返回索引。不能全局，只查第一个。
  • match(/正则/),从字符串中提取符合条件的内容，默认情况下只找到第一个符合要求的内容，找到后就停止检索，将匹配模式写成全局（g），会匹配所有内容。都返回数组。
  • replace(被替换内容，新内容)，将指定内容替换为新内容。默认只替换第一个，加全局g

16. 宿主对象

• DOM：文档对象模型

• 节点：构成HTML文档最基本的单元。常用节点分为四类：

  • 文档节点：整个HTML文档

    1. 获取文档中所有元素document.all 或document.getElementByTagName(‘*’)

    2. 根据class查询一组元素节点：document.getElementByClassName() 或者

       document.querySelector(‘.box div’)(ie8也可以用)返回满足条件的第一个；document.querySelectorAll()返回的是数组。

    3. 创建元素节点：var li = document.creatElement(“标签名”)

    4. 创建文本节点：var text = document.creatTextNode(‘内容’)/还可以直接用innerHTML：父节点.innerHTML += “<标签名>内容</标签名>”

    5. 添加节点（节点上树）：li.appendChild(text)。元素节点也要上树(ul只是表示父节点）：ul.appendChild(li)

    6. 替换子节点：父节点.replaceChild(新节点，旧节点)

    7. 删除子节点：父节点.removeChild(子节点)/子节点.parentNode.removeChild(子节点)

    confirm(‘内容’)，用于显示确认和取消的提示框，返回值为Boolean类型

  • 元素节点：HTML文档中的HTML标签

    1. 获取元素节点：document.getElementById(‘id’)一个；getElementsByTagname(‘标签名’)一组（自动封装到数组中返回）；getElementsByName(‘name’)通过name属性获取一组元素节点对象（返回数组）；
    2. 读取元素节点属性：元素.属性名（class为元素.className)
    3. 获取元素节点子节点：父节点.childNodes，所有子节点,包括文本节点；children，所有子元素；fisrtChild()，第一个子节点，包括空白文本；firstElementchild(),第一个子元素；lastChild()最后一个子节点，lastElementchild(),最后一个子元素。
    4. 获取父节点和兄弟节点：parentNode()父节点；previousSibling()上一个兄弟节点，previousElementSibling()获取前一个兄弟元素；nextSibling()下一个兄弟节点，nextElementSibling()获取前一个兄弟元素

  • 属性节点：元素的属性

    1. 修改样式：元素.style.样式名= 样式值。-要写成小驼峰形式。这种方式设置的样式属于内联样式，有较高的优先级，除了遇到 !important，一般都会优先显示。读取样式时读取到的都是内联样式，无法读取样式表中的样式。

    2. 读取样式：（只读，不能修改)

       • IE：元素.currentStyle.样式名；
       • 其他浏览器：getComputedStyle(元素，伪元素)，返回对象，对象中封装了当前的样式,通过对象.样式名获取样式，如果获取的样式没有设置，会获取到真实的值

    3. 元素其他样式相关的属性：element(元素).方法名

       • clientWidth和clientHeight,返回元素可见宽高，包括content和padding，返回的直接是一个数组，而且是只读的，不能修改。
       • offsetWidth和offsetHeight，返回元素整个的宽高，包括border边框
       • offsetParent，获取当前元素的定位父元素，获取到里当前元素最近的开启定位的祖先元素，如果所有祖先元素都没有定位，返回body
       • offsetLeft，offsetTop，当前元素相对于其定位元素的水平和垂直偏移量。
       • scrollHeight，scrollWidth，获取元素整个滚动区域的高宽
       • scrollLeft、scrollTop，获取水平、垂直滚动条滚动的距离

       当scrollHeight - scrollTop == clientHeight，说明垂直滚动条到底了

       当scrollWidth - scrollLeft == clientWidth，说明水平滚动条到底了

  • 文本节点：HTML标签中的文本内容

    innerHTML和innerText的区别就是前者有标签，后者没有标签

• 事件：用户和浏览器之间的交互行为，如点击按钮、鼠标移动、关闭窗口等

  1. 把事件直接写在标签里，但是不方便维护。如onclick = alert(‘点击事件’)

  2. 获取DOM节点，绑定事件。

     var btn = document.getElementById('btn') 
     btn.onclick=function(){}
     

  3. 页面加载：代码自上向下运行，想改变加载顺序，使js代码在页面加载完之后运行，可以把这部分代码写在window.onload = function(){}里面。

  4. 滚动条滚动：onscroll。应用场景，比如需要看完协议才能勾选同意：

     element.onscroll = function(){
     if(scrollHeight - scrollTop == clientHeight) .....}
     

  5. 鼠标移动：onmousemove

     clientX和clientY:获取事件触发时鼠标对于当前窗口的水平垂直坐标

     element.onmousemove = function(event){
     	event = event || window.event
         var x = event.clientX, y=event.clientY
     }//IE8不兼容event，要写window.event.clientX,为了兼容写成x的样子
     

     pageX和pageY:获取鼠标相对于当前页面的坐标（不支持IE8）

     //比如说，以前有种特效，随着鼠标移动，鼠标底下产生花那些，就可以用这个
     document.onmousemove=function(event){
         event = event || window.event
         var left = event.pageX, top = event.pageY
         box.style.left = event.clientX + 'px'
         box.style.top = event.clientY +'px'
     //解决兼容性问题
     //获取滚动条滚动的距离
     //chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取；火狐等浏览器认为浏览器的滚动条是html的,document.documentElement.scrollTop
     var st = document.body.scrollTop || document.documentElement.scrollTop;
     var sl = document.body.scrollLeft||document.documentElement.scrollLeft;
     box.style.top = event.clientY + st + 'px'
     box.style.left = event.clientX + sl + 'px'
     }
     

  6. 鼠标滚轮：onmousewheel，在鼠标滚轮滚动时触发。火狐DOMMouseScroll,还要用addEventListener。通过event.WheelDelta获取滚轮滚动方向，这个值我们只看正负，不看大小，>0向上 (火狐event.detail，这个值>0向下)

  7. 事件冒泡：就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。大部分情况冒泡有益，但是有时候需要取消冒泡:

     • event.cancelBubble=true，设置此属性就可以取消冒泡
     • return false 阻止默认行为，阻止冒泡。addEventListener绑定的事件不能使用这个发方式阻止默认行为
     • event.preventDefault()用于阻止默认行为；IE8不支持

  8. 事件委托（委派）：希望只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的。可以尝试将其绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

     获取事件对象：event.target

  9. 事件绑定：

     • 对象.事件=函数形式绑定响应函数，他只能同时为一个元素的一个事件绑定一个函数，绑定多个后面会覆盖前面

     • 对象.addEventListener(‘click’，function(){} ,false)；事件不加on！最后一个参数为是否在捕获阶段触发，一般都是false。这样可以为一个事件绑定多个响应函数,按绑定顺序从前到后触发。this是绑定事件的对象

       IE8——对象.attachEvent(‘onclick’,function(){})，按绑定顺序从后往前触发。this是window，改变this指向：在匿名函数function(){}里调回调函数callback.call(obj)

       function bind(obj , eventstr , callback){
       	if(obj.addEventListener){
       	obj.addEventListener( eventStr , callback , false)
       	}else{
       	obj.attachEvent( "on"+eventStr , function(){
               //在匿名函数中调用回调函数，改变this指向
               callback.call(obj);});
               }
           }
       }
       

  10. 事件传播的阶段：

      • 事件捕获：从最外层的祖先元素向内对目标元素进行捕获，捕获阶段不会触发事件。想在这时触发事件就把addEventListener(‘click’，function(){} ,true)；
      • 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
      • 事件冒泡：事件从目标元素依次向外到祖先元素触发事件。

      //拖拽元素box1的小案例
      var box1 = document.getElementById( "box1")
      //当鼠标在被拖拽元素上按下时,开始拖拽
      box1.onmousedown = function(){
          //当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身
          box1.setCapture && box1.setCapture()//只有IE支持,有就执行
          event =event || window.event
          //用户体验，点哪拖鼠标就保持在哪
          var ol = event.clientX - box1.offsetLeft
          var ot = event.clientY - box1.offsetTop
      	//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
      	document.onmousemove = function(event){
      	event =event || window.event
      	//获取鼠标的坐标
      	var left = event.clientX，top = event.clientY;
      	//修改box1的位置
          box1.style.left = left+"px"
          box1.style.top = top+"px"
      };
      //为元素绑定一个鼠标松开事件
      document.onmouseup = function(){
          //当鼠标松开时，被拖拽元素固定在当前位置onmouseup
          document.onmousemove = null
          document.onmouseup = null //松开就取消事件
          box1.releaseCapture && box1.releaseCapture()//取消对事件的捕获
      }
      

  11. 键盘事件：onkeydown，onkeyup，键盘按键被按下/松开。一般绑定给可以获取到焦点的对象或document。onkeydown按下的时候会连续触发

• BOM:浏览器对象模型，BOM可以使我们通过JS来操作浏览器。

  BOM对象：

  • Window：代表整个浏览器的窗口，也是网页中的全局对象。

  • Navigator：代表当前浏览器的信息，可以识别不同浏览器。由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了。

    • 一般只会用userAgent来判断浏览器的信息。IE11已经将微软和IE相关的标识去除了，不能通过userAgent识别IE11。
    • 所以需要通过一些IE浏览器中特有的对象来判断浏览器的信息，比如ActiveXObject,但是这个属性也不可以判断了，他会把布尔值转成false。但是用"ActiveXObject" in window，是不可以作假的，可以识别出来IE11

  • Location：代表当前浏览器的地址栏信息，可以获取地址栏信息或者跳转页面。

    • location=‘’，直接修改为一个完整路径或相对路径，页面会自动跳转到该路径
    • location.assign(‘url’)，跳转到其他的页面，同上
    • location.reload(),重新加载当前页面，刷新，但是不清空input等里面的数据，如果要清空，传个参数true，强制清空缓存刷新页面
    • location.replace()，使用新的页面替换当前页面，调用完毕也会跳转页面，但不能回退，不生成历史记录

  • History：浏览器的历史记录，可通过该对象操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能向前或向后翻页，只在当此访问有效。

    • History.length可以获取到当前访问的链接数量
    • History.back()回退到上一个页面。
    • History.forward()跳转到下一个页面。
    • History.go()需要整数作为参数，正整数为向前跳几个页面，负整数为向后跳几个页面

  • Screen：用户的屏幕信息，可以获取到用户的显示器的相关信息。

    这些对象都是作为window对象的属性保存的。可以通过window.或直接使用

  • 定时器：使一段程序每间隔一段时间执行一次。setInterval(function(){}, time)time单位毫秒，返回值为一个Number类型的数据，作为定时器的唯一标识。可以接收，并用于关闭定时器clearInterval(timer)。在开启定时器之前一定要关闭上一个，防止重复打开。

  • 延时器：setTimeout(function(){},time)，只执行一次。clearTimeout()关闭延时器

• JSON就是一个特殊格式的字符串，可以被任意语言识别，并且可以转换为任意语言中的对象，主要用于数据的交互。格式与对象相同，但是属性必须加双引号。

  • 两种格式：对象{}、数组[]

  • 允许的值:字符串、数值、布尔值、null、普通对象、数组

  • json转成JS中的对象：JSON.parse(json)，将json字符串转成js对象，参数为json字符串，返回值为一个对象。

  • JS对象转json：JSON.stringify(obj)，将一个obj对象转成json格式的数据

    JSON这个大对象IE7以及以下不支持，替代方法：eval()

    如果用eval()执行的字符串中有{}，它会将{}当成代码块。如果不希望将其当成代码块，需要写成这样，写在括号里({})，如eval(‘(’ + str + ‘)’。功能强大但有安全隐患，不建议