【前端笔记】JavaScript简单记录

数据类型

1. 基本数据类型(5种)
   String
   Boolean
   Null
   Number
   Undefined

2. 引用数据类型(3种)本质上是一种，即Object
   Object
   Function
   Array

3. 判断数据类型的方法:
   1.typeof

   可以判断: undefined/数值/字符串/boolean
    不能判断:null与object object与array
    判断的类型都要小写
    type of a === 'number'
    type of a === 'string'
    type of a === 'boolean'
   

   2.instance of

   可以判断:对象的具体类型 
   (a instance of Object)
   

   3.===

   只有两种可以通过===判断:
   可以判断undefined
   可以判断null
   a===null
   a===undefined
   

数组

1. 数组也是一个对象,但数组的存储性能比普通对象要好，所以在开发中我们经常用数组存储一些数据
2. 索引:
   从0开始的整数就是索引
3. 数组创建和读取
   创建数组对象:var arr = new Array()
   字面量创建数组:var arr = []
   向数组中添加元素:数组[索引]=值
   示例: arr[arr.length] = 1
   读取数组中元素:数组[索引]
   如果读取不存在的索引，它不会报错而是返回undefined
4. 数组的一些方法
   push():该方法可以向数组末尾添加一个或多个元素，返回数组的新长度
   pop():该方法可以删除数组的最后一个元素
   unshift():向数组开头添加一个或多个元素，并返回新的数组长度
   shift():删除数组的第一个元素，并将被删除的元素作为返回值返回
   slice(start,end):从数组中提取元素，start表示开始的位置索引，end表示结束位置索引,该方法不会改变原数组，包含开始索引，不包含结束索引，第二个参数可以不写，表示后面所有的都要，索引可以传递一个负值，表示从后往前计算
   splice():删除/添加/替换数组中指定的元素，会影响到原数组,第一个参数表示开始位置，第二个参数表示删除的数量，第三个参数及后面的参数表示添加一些新元素到开始位置索引前面
   concat():连接两个或更多的数组，并返回结果
   join():把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
   reverse()颠倒数组中元素的顺序
   sort()对数组的元素进行排序
   toLocaleString(),把数组转换为本地数组，并返回结果
5. 遍历数组
   用for 或者forEach方法，forEach需要一个回调函数作为参数
   回调函数参数:

   有三个参数:
   第一个:数组中的元素value
   第二个:元素的索引index
   第三个:就是正在遍历的数组
   

正则表达式

1. test():检查一个字符串是否符合正则表达式的规则

   var reg = new RegExp("a")//可用于检查字符串是否含有a
   var str = "abc"
   var result = reg.test(str);
   

正则语法

1. 字面量来创建正则表达式

   var 变量 = /正则表达式/匹配模式
   

   示例:

   reg = /a/i
   console.log(reg.test("abc"))
   

2. 其他正则表达式

   - |表示或(示例:/a|b|c/)
   - []里面的内容也是或的关系(示例:/[a-z]/表示任意小写字母/[A-z]/表示任意字母)
   - 检查一个字符串是否含有abc或adc或aec :reg = /a[bde]c/
   - [^ab]除了ab
   - 量词
   通过量词可以设置一个内容出现的次数，量词只对它前面的一个内容起作用
     - {n}正好出现n次，可以使用括号(ab){3} 表示ab出现3次，即ababab
     - {m,n}出现m到n次
     - {m,}出现m次以上
     - +表示至少一次
     - *表示0或多个，相当于{0,}
     - ?表示0个或1个，相当于{0,1}
   - ^表示开头  /^a/表示以a开头
   - $表示结尾 /a$/表示以a结尾
     如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
   - .表示任意字符，需要转义 /\./  其他部分特殊字符也同理
     - \w 表示任意字母,数字,_  /[A-z0-9_]/
     - \W 除了任意字母,数字,_  /[^A-z0-9_]/
     - \d 任意的数字 [^0-9]
     - \D 除了数字[^0-9]
     - \s 空格
     - \S 除了空格
     - \b 单词边界 /\b单词\b/表示独立单词 
     - \B 除了单词边界
   

3. 匹配模式

   i 不区分大小写匹配
   g 全局匹配
   

4. 支持正则表达式的String对象的方法
   search 检索与正则表达式相匹配的值，只匹配第一个，即使设置全局也只匹配第一个
   match 找到一个或多个正则表达式的匹配，会返回一个数组
   replace 替换与正则表达式匹配的子串
   split 把字符串分割为字符串数组

5. 示例:

   
     //手机号规则
     //以1 开头
     //第二位 3-9
     //后面 9位任意数字
     var phoneStr = 135123456123
     var phoneReg = /^1[3-9][0-9]{9}$/
     phoneReg.test(phoneStr)
   
     //电子邮件（非开发，只是个简单模仿案例）
     //任意字母数字下划线 .任意字母数字下划线@ 任意字母数字.任意字母(2-5位).任意字母(2-5位)
     //\w{3,} (\.\w+)*@  [A-z0-9]+  \.   [A-z]{2,5} \. [A-z]{2,5}
     //缩短成 \w{3,}(\.\w+)*@ [A-z0-9]+  (\.[A-z]{2,5}){1,2}
     var emailReg = /\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}/
     emailReg.test("xxx@163.com")
   

函数

1. 函数对象的方法:
   call()
   applay()

   相同点:
   都可以调用函数
   可以将一个对象指定为第一个参数，此时这个对象会被指定为this
   不同点:
   call()方法可以将实参在对象之后依次传递
   applay()方法需要将参数封装到数组中统一传递
   

2. arguments 封装实参的对象，是一个隐含属性
   arguments是一个类数组对象，可以通过索引操作数据，也可以获取长度
   arguments有一个属性叫callee,这个属性对应一个函数对象，就是当前正在指向的函数对象

面向对象

对象原型相关知识

事件

事件的冒泡

当子元素的事件被触发时，其父元素的同类事件也会被出发，这种情况我们称为事件冒泡,代码示例见js学习简记代码集合
如果我们不需要事件冒泡，可以修改对应元素的事件对象的属性cancelBubble,将其设置为true
例如代码中子div的点击事件可以进行如下修改，来取消其冒泡

childDiv.onclick = function (e) {
    e.cancelBubble=true;
    alert("这是子div");
}

事件的委派

指的是将事件绑定在统一的祖先元素上，这样后代元素事件触发会一直冒泡到祖先元素，再通过祖先元素的函数来处理事件（可以用event.target.className）
事件委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

事件的绑定

1.onclick=function()这样的写法有局限，就是重复写只会触发最后一次的事件
2.addEventListener("click",function(){},false)可以重复写，但不支持ie8及以下浏览器
需要参数:(事件的字符串不需要on,回调函数,是否在捕获阶段触发事件)
3.attachEvent()在IE8中可以绑定事件
需要参数:(事件的字符串需要on,回调函数)
我们可以写一个bind函数来封装这个函数

function bind(obj,eventStr,callback){
  if(obj.addEventListener){
    //大部分浏览器兼容
    obj.addEventListener(eventStr,callback,false);
  }else{
    //IE8及以下
    obj.attachEvent("on"+eventStr,function(){
      //在匿名函数中调用回调函数，统一不同浏览器中的this
      callback.call(obj);
    });
  }
}