ide快捷键以及js的小知识 - 码农知识堂

ide快捷键以及js的小知识
ctrl+shift+/ 多行注释

arguments可以接收到该函数的所有实参

js没有块级作用域

为了弥补这个错误,es6中提供了let变量

找一个变量时,会涉及作用域链
```
var num = 10
function fun(){
var num = 20 外部变量
function fun(){
console.log(num)
//结果会返回20,因为作用域链
}
}
```
js执行顺序会预解析,再执行

js的预解析会把var和function提到当前作用域最前面

代码执行,按照预解析后的顺序执行.

预解析分为变量提升和函数提升

变量提升只提升变量声明,不提升变量赋值.

构造函数首字母要大写

for in和for of 遍历时有小区别。

js的对象包括三类自定义对象内置对象和浏览器对象

检测是否为数组可以用instanceof

基础包装类
```
let s1 = 'abcdef';
let s2 = s1.substring(0, 3);
// 以下代码是在后台执行完成的
// 当s1调用方法时，会生成一个临时变量，默认创建一个s1的包装对象实例
let temp = new String(s1);
let s2 = tem.substring(0,3); // 'abc'
// 销毁临时变量
tem = null;
```
理论上基础变量不应该方法，但是一个数组或者string需要方法，因此又了基础包装类。

字符串不可变，每次更改字符串实质上都是找到一块新的内存空间，再修改指针指向。（ztmlj）

考虑开销，尽量避免大量拼接字符串。

dom操作----页面操作----一个页面就是一个文档

dom树包括根元素，头文件，元素,
所有标签都是元素，dom用element表示。

网页上的所有内容都是节点（node），包括标签，属性，文本，注释

dom把以上内容看成对象。

通过getelementbyId和getelementByTagName可以获得对应id和标签的内容。

queryselector可以选择选择器，再返回选择器返回的第一个元素（这东西花里胡哨的没什么用）

queryselectorAll返回所有的。

获取body内容可以用

var need = document.body

获取html内容可以用

var html = doucument.docuelement

src标签会把传的图片地址显示图片出来。

节点至少有三个属性：节点类型(nodeType)，节点名称(nodeName)，节点值*(nodeValue)

可以太勇敢firstChild，lastChild获取父节点的子节点

也可以通过nextSibling和preViousSibling获取兄弟节点

节点可以增加也可以删除，可以参考列表的操作方法，设置某个节点为父节点或者子节点、

创建元素节点的三个接口

document.write 缺点：已渲染的视图会被清零，dom重新绘制。

createlement :效率比innerhtml低，但是结构清晰

给元素注册事件，称为注册事件或者绑定事件

其中分为两种跟传统注册事件和方法监听注册事件

传统事件只能绑定一个函数。

方法监听事件可以针对一个事件调用多个方法，使用AttachEvent（）

删除事件
```
<html>
<body>
<button>onclick</button>
<button>AttachEvent</button>
<script>
var but = document.querySelectorAll('button')
    but[0].onclick = function () {
    console.log(arguments)
    alert('onclick')
        //传统方法删除，将其置空
        but[0].onclick = null
    }
but[1].onclick = function () {
    console.log(arguments)
    alert('AttachEvent')
 
}
but[1].addEventListener('click',fn)
    function fn() {
    alert('AttachEvent22')
        //监听事件的删除具名方法
    but[1].removeEventListener('click',fn)
}
 
</script>
</body>
</html>
```
事件冒泡和事件捕获

阻止默认事件，调用preventDefault方法
```
<html>
<body>
<button>onclick</button>
<button>AttachEvent</button>
<div>click </div>
<script>
var div = document.querySelector('div')
div.addEventListener('click',fn)
div.addEventListener('mouseover',fn)
div.addEventListener('mouseout',fn)
 function fn(e){
    console.log(e.type)
     e.preventDefault()
 }
</script>
</body>
</html>
```
事件委托

事件委托的核心思想是利用事件冒泡，每个子节点的事件都会冒泡泡到父节点中，因此可以给父节点注册事件，通过一次注册dom，就能完成。
```
<html>
<body>
<ul>
<button>onclick</button>
<button>AttachEvent</button>
<div>click </div>
</ul>
<script>
var ul = document.querySelector('ul')
    ul.addEventListener('click',fun);
  function fun(){
      alert("事件委托机制，子事件冒泡到了外层")
}
 
</script>
</body>
</html>
```
实现图片大小随鼠标移动的功能
```
<html>
<body>
<ul>
<img src="image/1.png" alt=""/>
<div>click </div>
</ul>
<script>
    var pic = document.querySelector('img')
    var ul = document.querySelector('ul')
    document.addEventListener('mousemove',fun);
    function fun(e){
      let  x= e.pageX ;
      let  y= e.pageY ;
        console.log('X:'+e.x+'  Y:'+y)
      pic.style.width = x +'px';
      pic.style.height = y + 'px';
  }
 
</script>
<style>
    img {
        postion:absolute;
        top: 2px;
    }
</style>
</body>
</html>
```
BOM

浏览器对象模型

windows是bom的顶级对象，document是dom的顶级对象，
```
document.querySelector的完整写法是windows.document.querySelector
```
windows有双重属性，即是接口又是全局对象

窗口加载事件，当整个页面加载完毕时再运行
```
<html>
<body>
 
<script>
window.onload = function () {
    var btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        alert('点击我')
    })
}
</script>
<ul>
    <button>click </button>
</ul>
</body>
</html>
```
定时器写法
```
<html>
<body>
 
 
<script>
    function fun() {
        console.log("2s")
    }
var m1 = setTimeout("fun()",2000)
var m2 = setTimeout("fun()",5000)
</script>
 
</body>
</html>
```
回调函数，不立刻运行的函数，而是等待被调用的函数

定时器不清楚会产生内存泄漏，所以要用clearTimeout()清理定时器

另一个定时器，setInterval会隔一段时间，自动运行一次。
```
<html>
<body>
 
 
<script>
    function fun() {
        console.log("2s")
    }
var m1 = setTimeout("fun()",2000);
var m2 = setTimeout("fun()",5000);
var m3 = setInterval("fun()",4000)
</script>
 
</body>
</html>
```
同样的需要clearInterval()来回收定时器，否则会内存泄漏

this在函数定义时是不能确定指向的，通常在函数运行时会指定函数的调用者，而且vue里的箭头函数，回调函数也有这种该问题；

在全局函数或者普通函数中，this指向widows，在构造函数中指向实例，在回调函数和被调用函数中，指向调用者。

js把任务分为同步任务和异步任务两类

同步任务通常是在主程序上的普通函数

异步任务则通常包括3类

1.click，mosueover等事件触发的任务

2.setInterval，setTimeout定时器分配的任务。

3.资源加载load，error等

js会先运行同步任务，把异步任务放任务队列中。

一旦同步运行完后，开始运行任务队列的异步任务。

location.href属性可以获得当前页面的url

location.search获取url属性

location.assign跳转页面，重定向

location.replace替换页面

location.reload刷新页面

相关阅读:
6聚合根与资源库 #
利用SQL语句插入、更新、删除数据表中的数据
 图文详细介绍:使用IDEA通过插件创建流程图解决Activiti工作流部署审批等操作
 【Linux】之Centos7卸载KVM虚拟化服务
 Spring MVC
spring-cloud-starter-dubbo不设置心跳间隔导致生产者重启no Provider问题记录
 Python移动端自动化
 第九章动态规划 part13 300. 最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组
 Embarcadero Delphi 11,Delphi编写环境选项
 数字化校园包括哪些内容呢，应该从何入手？_光点科技
原文地址：https://blog.csdn.net/cat_want_fly/article/details/126515540