前言

尽管各种层出不穷的框架替代了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.call

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

4.构造函数 constructor

讯享网var obj = { 
   } obj.constructor == Object //true var 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() // 3 arr // [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 替换元素

//例1 var arr = ['aa','bb','cc','dd'] arr.splice(1,2,3,4) // ["bb", "cc"] arr //(4) ["aa", 3, 4, "dd"] //例2 arr.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 // true obj.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] 

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

讯享网var obj = { 
   b: 2, c: 3, a: 123} //例1 Object.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> //JS var 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的交互次数，提高性能；