前言


尽管各种层出不穷的框架替代了Js的各种操作，归根结底，它还是用Js来实现的 , 一个扎实的基础可以为以后进阶起到良好的作用


目录


  • Javascript 数据类型

  • Javascript 常用数组操作方法

  • Javascript 常用对象操作方法

  • Javascript 事件模型  - 冒泡 - 事件对象 - 事件委托 / 代理


一，Javascript 的数据类型


Javascript 有哪些数据类型


Javascript 一般有两种数据类型，基本数据类型和引用数据类型。基本数据类型包括 Undefined、Null、Boolean、Number、String、Symbol  (ES6新增，表示独一无二的值)， 引用数据类型包括对象、数组和函数。统称为Object对象，


那么如何校验这些数据类型呢 ？


1. typeof 基本数据类型的通用方式


返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、symbol、object、undefined、function等7种数据类型

typeof ''; // string typeof 1; // number typeof true; //boolean typeof undefined; //undefined typeof new Function(); // function typeof Symbol(); // symbol typeof null; //object typeof [] ; //object typeof {} ; //object

可以看到 数组，对象，返回的都是 object 这时就需要使用其它方式来判断了. null 就是空 ，先排除开来，往下看：


2. ES6语法 instanceof

[] instanceof Array; //true{} instanceof Object; //true

3.通过追溯原型去查看它的属性类型

Object.prototype.toString.callObject.prototype.toString.call({})//"[object Object]"Object.prototype.toString.call([])//"[object Array]"


4.构造函数 constructor

var obj = {}obj.constructor == Object//truevar arr = []arr.constructor == Array//true

二 ， Javascript 常用数组操作方法


1. push 在数组最后一位增加（参数）

var arr = [1,2,3,4,5,6] ; arr.push(7) ; // [1,2,3,4,5,6,7]

2. pop 移除数组最后一位，不需要参数，返回最后一位元素

var arr = [1,2,3]arr.pop() // 3arr // [1, 2]

3. unshift 在数组第一位增加（参数）

var arr = [1,2,3,4,5]arr.unshift(0) // 6 arr // [0, 1, 2, 3, 4, 5]

4. shift 移除数组第一位，不需要参数，返回第一位元素

var arr =  [0, 1, 2, 3, 4, 5]arr.shift() // [1, 2, 3, 4, 5]

5. splice 替换元素

//例1var arr = ['aa','bb','cc','dd']arr.splice(1,2,3,4) // ["bb", "cc"]arr //(4) ["aa", 3, 4, "dd"]
//例2arr.splice(1,2,3) // [3, 4]arr //(3) ["aa", 3, "dd"]
//三个参数//1.从下标第几位数开始//2.替换几位//3.要替换的值//影响数组本身//这里有一个小插曲，当替换两位以上且为同样值得时候入第二个例子，结果会合并，需要注意一下

6. slice 截取下标范围间的元素

var arr = ['aa','bb','cc','dd']arr.slice(0,3)//(3) ["aa", "bb", "cc"]// 从下标0开始截取3个元素，也可以理解为从下标0开始到下标3（不包含3）的元素//不影响数组本身

7. join 转换字符串

var arr = ['aa','bb','cc','dd'];arr.join('-') // "aa-bb-cc-dd"// arr.join() 默认以 ，号分隔开，传入分隔符则以分隔符分隔开

8. reverse 倒序排列，按照大小，字母顺序等

var arr = [12,321,312,32,43]arr.reverse() // [321, 312, 43, 32, 12]

9. sort 数组的排序

var arr = [12,321,312,32,43]arr.sort() // [12, 312, 32, 321, 43]// 可以看到sort()返回的顺序并不如意 ！看下边arr.sort(function(v1,v2){ return v1-v2 }) // [12, 32, 43, 312, 321]// 这里是需要传一个排序函数的，来定义排序方式//本身sort排序方式，道友感兴趣的话可以百度查一查，控制台调试一下，我在这里就不说了哈

10. concat 用于多个数组合并

var a = [1,2,3]var b= [4,5,6]a.concat(b) // [1, 2, 3, 4, 5, 6]

三 ， Javascript 常用对象操作方法


1. 添加元素

var obj = {a:1,b:2,c:3}obj['d'] = 4; //obj  {a: 1, b: 2, c: 3, d: 4}

2.delete 移除元素

var obj = {a:1,b:2,c:3}delete obj.a// obj {b: 2, c: 3}

3. in 判断元素是否存在

var obj = {a:1,b:2,c:3}"a" in obj // trueobj.hasOwnProperty('b') // true

4. Object.keys 获取对象key

var obj = {a:1,b:2,c:3}Object.keys(obj)// ["a", "b", "c"]

5. Object.values 获取对象value

var obj = {a:1,b:2,c:3}Object.values(obj)// [1, 2, 3]

6.Object.assign 可以理解为合并对象并去重

var obj = {b: 2, c: 3, a: 123}//例1Object.assign(obj,{d:4}){b: 2, c: 3, a: 123, d: 4}
//例2 - 建立在 例1 基础上Object.assign(obj,{b:10}){b: 10, c: 3, a: 123, d: 4}
//参数1：目标对象//参数2：需要合并或者修改到目标对象（obj）的对象//key 一样会被覆盖，否则新增

三，事件模型


说到Js的事件模型，我们也可以理解为事件流；那什么是事件流呢 ? 就是从事件的捕获 - 事件的处理 - 事件的冒泡 ；这么一个过程，就是事件流 。我们具体分析一下：


1，首先要想有事件流（事件模型），我们得先有事件，那么Dom 绑定事件的方式也就那么几种：我们略带过一下

  • 元素直接绑定事件

<div onclick = "fun()"></div>

  • 通过 Js 脚本绑定事件

<div id="event"></div>document.getElementById("event")=function(){}

  • 也可以通过脚本动态注册事件

<div id="event"></div>document.getElementById("event").addEventListener(type, handle, false);//type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！//handle:事件处理函数，事件出发后，定义可能发生的变化！！//false: 表示事件冒泡模型，一般来说都是false

emmmm ~ 好，通过简单的几个样例介绍了绑定事件；


2， 接着我们继续来说说事件模型，上边有说到：事件流是从事件的捕获 - 事件的处理 - 事件的冒泡这么一个过程，大致看来可以分为三个阶段，分别是：

  • 捕获阶段：当触发一个节点事件，会从Document 根节点依次往下查找，直到触发事件节点本身，查看是否注册了事件处理函数，有则执行；

  • 处理阶段：是事件到达目标元素，执行该事件的处理函数

  • 冒泡阶段：由事件节点本身冒泡，依次向上查找父节点直到根节点Document查看是否注册了该事件的监听函数，有则执行


这里出现了一个关键知识点 => 冒泡


事件冒泡html元素是嵌套结构的DOM树,在触发内层元素的事件时,外部事件也会被由内到外触发,这种现象叫做事件冒泡 通过一个小小的代码实例来测试一下

  <div onclick="alert('div')">      <p onclick="alert('p')">        <span onclick="spanClick()">事件冒泡测试</span>      </p>    </div>    //结果依次 alert span ， p ， div

如何阻止事件冒泡

    // 常用 stopPropagation 方法 ，拿上边的例子列举：    function spanClick (event) {     event.stopPropagation()  }    //这样就可以阻止事件冒泡 , 可以动动小手实践一下啦 ~

事件对象在上边例子中，相信大家又看到了一个关键字 “ event ” ， 那么enevt是什么呢 ? 没错，就是事件对象；


触发Dom节点的某个事件时，会产生一个事件对象event，这个对象包含了与事件有关的信息。所有浏览器都支持事件对象，列举几个常用属性：

// currentTarget:事件处理程序当前正在处理的元素// target:事件的目标元素// preventDefault() :取消事件的默认行为，比如点击a标签默认跳转链接，点击button默认提交// stopPropagation():取消事件进一步捕获或者冒泡，经常会用到// ......  还有很多，道友感兴趣的话可以百度查阅一哈

注意：只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完毕，event对象就会被销毁。


事件委托 || 事件代理


JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

通过一个简单的例子来看一下：

 //HTML <div id="div1">    <a href="#">a1</a>    <a href="#">a2</a>    <a href="#">a3</a>    <a href="#">a4</a>  </div> //JSvar div1 = document.getElementById('div1')div1.addEventListener('click', function (e) {//这里的 e 就是事件对象（event) 简写为 e// e.target 可以监听到触发点击事件的元素是哪一个 , 利用事件对象属性　　var target = e.target　　if (e.nodeName === 'A') { // 点击的是 <a> 元素　　　　alert(target.innerHTML) // 当前点击的 a 元素html内容，target 里边不仅限于innerHTML , 还有很多，感兴趣的可以自己测试查阅　　}})

注释：如果给每个 a 标签一一都绑定一个事件，那对于内存消耗是非常大的。借助事件代理，我们只需要给父容器div绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把父容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。


为什么要使用事件委托 || 事件代理


在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；