Javascript [这些Js基础你必须得知道]

前言

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

6.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的交互次数，提高性能；