18个JavaScript入门技巧及JavaScript事件处理方法分享[图]

一、18个JavaScript入门技巧
最近开源了一个Vue组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个star支持一下，谢谢各位了。
1.转字符串
2.转数字
3.转布尔值
4.字符串'false'有问题
5.nullvsundefined
null是一个值，而undefined不是一个值。
null就像一个空盒子，而undefined没有盒子。
如果传递null，则不采用默认值，而传递undefined或不传递任何参数时，采用默认值。
6.真值和虚值
虚值：false,0,"",null,undefined和NaN。
真值："Values",0",{},[]。
7.const声明变量哪些类型可以被更改
如果值不想被改变时，可以使用const:
但用const声明的引用类型，它里面值是可以被更改的：

8.三等号和双等号的区别
9.接收参数更好的方式
更简单的方法
10.把普通函数改成箭头函数
可以改写成
11.从箭头函数返回对象/表达式
12.将set转换为数组
转换为数组
13.检查值是否为数组
14.获取对象的所有键
15.双问号语法
这个??的意思是，如果??左边的值是null或者undefined，那么就返回右边的值。
16.map()
map()方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
17.try..catch..finally
18.解构
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。
二、JavaScript事件处理
初识JavaScript事件
JavaScript语言本身不会产生事件，产生事件的是网页文档和网页文档中的HTML元素。
什么是事件呢？事件就是网页文档或网页元素对外发出的通知。当HTML元素与用户发生交互行为时，该元素会触发相关的交互事件，例如：当用户用鼠标单击网页中的按钮时，按钮会触发鼠标单击事件（onclick）。元素自身也会触发事件，例如：当图片元素加载完成后，会触发加载完成事件（onload）。
HTML文档或元素触发事件时，会对JS发出的通知，通知JS程序HTML文档或元素与用户发生了交互，或者内容发生了变化，JS可以处理这些事件。
HTML文档或元素也称为DOM对象，DOM是一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件。DOM实际上是建立网页与JavaScript语言沟通的桥梁。
JS如何监听事件？
如果JS需要对DOM对象触发的事件进行处理，就需要监听这些事件，浏览器会自动调用监听事件的JS函数。
JS有三种监听事件的方式：分别是内联属性监听、DOM属性绑定监听和使用事件监听函数。
内联属性监听
内联属性监听是在编写HTML元素代码时，直接写入元素的事件属性，事件属性值为JS函数或JS代码。

案例8：使用jQuery库的网页代码（案例代码见unit12\case1.html）：在上面的案例代码中，HTML元素button事件属性onclick的值为JS函数add()，add()函数在script标签内定义。事件属性onclick为用户使用鼠标单击元素，作文（https://www.isanxia.com）触发的事件名称，button元素onclick属性的值为add()函数，当用户使用鼠标单击button元素时，浏览器会调用add()函数对该事件进行处理。

DOM属性绑定
DOM是网页编程接口，也称为文档对象模型，它可以被JS调用，用来动态操作或修改网页元素的内容。
DOM将HTML文档作为一个树形结构，网页文档中的元素都是树结构的节点，每个节点都是一个DOM对象，每个DOM对象都有事件属性，将JS函数赋值给DOM对象的事件属性，就将DOM触发的事件和JS函数绑定起来，当DOM事件触发后，浏览器会调用被绑定的JS函数。
案例代码中，onload是windows对象（windows是DOM的窗口对象，表示浏览器窗口）属性，该属性为网页加载完成事件，该属性绑定了处理事件的匿名JS函数。
在onload事件处理函数体内，应用document对象（DOM的文档对象）的getElementById()获取button对象，然后绑定button对象的onclick事件处理函数，其中button_add对象绑定了add()函数，button_mul对象绑定了匿名函数。
使用事件监听函数
该监听方式是HTML元素对象调用addEventListener()方法，来绑定事件的处理函数。具体使用方法如下：
addEventListener(event,function,useCapture)
参数event是要绑定的对象事件属性名称，event是字符串类型。注意：事件名称不使用"on"前缀，用"click"而不是"onclick"。
参数function是要绑定的函数，也称为回调函数，当对象事件触发时，该函数被调用，function可以是已定义的函数名称，也可以直接定义匿名函数。
参数useCapture是可选参数，类型是布尔类型，设置事件是否在捕获或冒泡阶段执行。该参数主要是设置事件的执行顺序，当多个对象元素叠加在窗口的同一区域，若鼠标单击多个对象的共同区域时，捕获阶段的事件执行顺序是从大到小，冒泡阶段的执行顺序是从小到大。
useCapture若设置为true，事件处理在捕获阶段执行；useCapture若设置为false，事件处理在冒泡阶段执行，默认为false。