JavaScript里的一些语法

一、数组Array

1.1.数组length属性

获取数组长度：

var names = ["abc", "cba", "bac", "nba"]
console.log(names.length)

//length属性可写

names.length = 10//扩容为10，其他为empty

name.length = 2//截取为2

清空数组的最简单方法为：arr.length = 0

1.2.数组的遍历

• 普通for循环

  • for(var i=0; i < names.length; i++) {
        clg(names[i])
    } 
    

• for...in...遍历

  • //可迭代：String/数组/元素列表(对象)
    for (var index in names) {
        clg(index, names[index])
    }//拿到的是索引
    

• for...of..

  • for (var item of names) {
        clg(item)
    }//拿不到索引
    

• forEach函数（高阶函数）

  names.forEach(function(item, index, arr)) {
  	clg(item, index, arr)              
  }
  

• 手动实现高阶函数

  Array.prototype.hforEach = function(fn) {
      for (var i = 0; i < this.length; i++) {
          fn(this[i], i, this)
      }
  }
  
  names.hforEach(function(item, index, names) {
      clg(item, index, names)
  })
  

1.3.数组的其他方法

• arr.slice 方法//用于数组的截取（类似于字符串的slice方法）

  • slice方法不会修改原数组（splice直接修改）

  • var neWNames = names.slice(start, end)//不包含end
    clg(newNames)
    

• arr.concat方法//创建一个新数组，其中包含来自其他数组和其他项的值

  • var newNames = []
    newNames.push(...names1)//...展开运算符
    
    var newNames = names1.concat(names2, names3)
    

• join方法---split（切割）

  • clg(names.join("-"))//为字符串
    

1.4.数组中查找元素

• 1.数组中存放的是原始类型

  • names.indexOf("nba","start")
    找到返回对应的索引，未找到返回-1
    

• 2.数组中存放的是对象类型

  • var students = [
        {id:100},
    	{id:101},
        {id:102},
        {id:103}
    ]
    //查找id为101的学生
    //for循环
    for(var i =0; i < students.length; i++) {
        if (students[i].id === 101) {
            clg(students[i])
            break
        }
    }
    //find方法:高阶函数
    //函数内部多次（数组元素个数）调用
    var stu = students.find(function(item) {
        if (item.id === 101) return ture
    })
    
    //includes方法	
    clg(names.includes("bac"))
    
    //findIndex方法：查找元素索引
    names.findIndex(function(item, index, arr) {
        return item === "nba" 
    })
    

1.5.数组的排序和反转

• 排序

//sort方法
var nums = [20, 4, 10, 15, 100, 88]
nums.sort(function(item1, item2) {
    //item1与item2进行比较
    //谁小谁在前
  return item1 - item2
})

//想要升序：
//reverse进行反转
clg(nums.reverse())
//return item2 - item1

//复杂类型排序
var students = [
   {age: 18},
   {age: 25},
   {age: 17},
   {age: 28}
]
students.sort(function(item1, item2) {
    return item1.age - item2.age
})

1.6.函数的其他方法

//filter函数:过滤
//拿到偶数
var nums = [10, 12, 20, 7, 9, 14]

var newNum = nums.filter(function(item) {
   return item % 2 === 0
})

//map函数:映射
var newNum = nums.map(function(item) {
    return item * item
})

//reduce函数：累加
//如果initialValue没有传入，那么将直接进行第二次计算
var result = nums.reduce(function(preValue, item) {
    return preValue + item
},initialValue)

//综合
var total = nums.filter(function(item) {
    return item % 2
}).map(function(item) {
    return item * item
}).reduce(function(preValue, item) {
    return preValue + item
}, 0)

二、日期Date

2.1.创建Date对象

• new Date();
  new Date(value);
  new Date(dateString);
  new Date(year, monthIndex [, day [, hours [, minutes [, seconds [,
  milloseconds]]]]]);
  

2.2.Date方式

• 目前表示方式有两种： RFC 2822 标准 或者 ISO 8601 标准（默认打印时间格式是RFC 2822标准）

• 转为 ISO 8601标准

var date = new Date()
clg(date.toISOString)

• 获取想要信息

  date.getFullYear()
  date.getMonth()//得到的数据为0-11
  date.getDate()
  date.getHours()
  date.getMinutes()
  date.getSeconds()
  //手动修改:set方法
  date.setFullYear()
  //set方法会自动校验
  如果月份与日期不符，自动修正
  
  //String方法：个位时补0
  //第一个参数为补齐时的位数，第二个为补齐所用string
  var str = "4"
  clg(str.padStart(2, "0"))
  
  clg(str.padEng(2, "0"))
  

2.3.Date获取Unix时间戳

• var date = new Date(时间戳)
  
  //当前时间的时间戳
  var timestamp = Date.now()
  
  //将Date转成时间戳
  var timestamp = date.getTime()
  var timestamp = date.valueOf()
  clg(+date0)
  
  //计算一个操作所需要的时间
  var startTime = Date.now()
  for (var i = 0; i < 10000; i++) {
      clg(i)
  }
  var endTime = Date.now()
  clg(endTime - startTime)
  

2.4.将字符串时间转为时间戳

• var timeString = "2033-03-23"
  //方法一：
  var date = new Date(timeString)
  var timeStamp = date.getTime()
  //方法二：
  var timestamp = Date.parse(timeString)
  //str需要符合 RFC 2822 或 ISO 8601标准
  //其他格式也许支持，但结果不一定正确
  //如果输入的格式不能被解析，那么就会返回NAN
  

三、DOM

3.1.了解API/DOM/BOM

• API(application programming interfance):应用程序编程接口

• DOM（Document Object Model）:文档对象模型

• BOM（Browser Object Model）:浏览器对象模型

3.2.document对象

• Document节点表示的整个载入的网页，对DOM的操作都是从document对象开始的

• var htmlEl = document.documentElement
  var bodyEl = document.body
  var headEl = document.head
  var doctype = document.doctype
  

3.3.节点(Node)之间的导航(navigator)

• 获取所有的节点（Node）的导航：包括文本/注释

• var bodyEl = document.body
  //获取body所有的子节点
  clg(bodyEl.childNodes)
  //获取body的第一个子节点,最后一个（last）
  var bodyElFirstchild = clg(bodyEl.firstChild)
  //获取下一个节点，前一个（previous）
  clg(bodyElFirstchild.nextSibling)
  //获取父节点
  clg(bodyEl.parentNode)
  

3.4.元素(element)之间的导航(navigator)

• var bodyEl = document.body
  //根据body元素获取子元素（element）
  var childElements = bodyEl.children
  
  //获取第一个元素
  var childElement1 = bodyEl.firstElementChild
  var childElement1 = bodyEl.child[0]
  
  //获取下一个元素（上一个：previous）
  var childElement2 = childElement1.nextElementSibling
  
  

3.5.table和form元素之间的导航

• var tableEl = documtnt.body.children[0]
  
  //通过table元素获取内部的后代元素
  clg(tableEl.thead, tableEl.tBodies, tableEl.tFoot)
  //tr元素集合--tbody.rows
  //定tr内的td和th集合--tr.cells
  
  //form之间的导航
  var formEl = document.forms[0]
  var formEl = document.body.firstElementChild
  
  //获取form中的子元素
  var inputEl = formEl.elements[0]//独有
  var inputEl = formEl.elements.name属性
  

3.6.获取任何元素的方法

• //方法一：用导航一步一步获取
  
  //方法二：通过classname获取元素
  var keywordEls = document.getElementsByClassname("keyword")
  //修改第一个
  keywordEls[0].style.color = "red"
  //修改所有
  for (var i = 0; i < keywordEls.length; i++) {
      keywordEls[i].style.color = "red"
  }
  
  //方法三：通过id获取元素
  var titleEl = document.getElementById("title")
  
  //方法四：通过选择器查询
  var keywordEl = document.querySelector(".keyword")//传入选择器,只找一个
  var keywordEls = document.querySelectorAll(".keyword")//找全部，可迭代对象
  for (var el of keywordEls) {
      clg(el)
  }
  
  var titleEl = document.querySelector("#title")
  

3.7.DOM-Node常见属性

• //  , 注释，文本，div.box
  //1.获取三个节点
  var bodyChildNodes = document.body.childNodes
  var commentNode = bodyChildNodes[1]
  var textNode = bodyChildNodes[2]
  var divNode = bodyChildNodes[3]
  
  //1.nodeType：节点类型
  clg(commentNode.nodeType, textNode.nodeType, divNode.nodeType)
  
  //2.nodeName:节点名称
  clg(commentNode.nodeName, textNode.nodeName, divNode.nodeName)
  
  //3.tagName:针对元素获取名称
  clg(commentNode.tagName, divNode.tagName)
  
  //4.data:针对非元素节点获取数据
  clg(commentNode.data, textNode.data, divNode.data)
  
  //5.innerHTML:针对元素节点获取数据(带其内部的标签)
  clg(divNode.innerHTML)
  
  //6.textContent：针对元素节点获取数据（只显示内容）
  clg(divNode.textComtent)
  
  设置时包含元素内容，那么innerHTML浏览器会解析， textComtent会当成文本的一部分
  divNode.innerHTML = "<h2>嘿嘿</h2>"
  divNode.textContent = "<h2>嘿嘿</h2>"
  
  //7.outerHTML:带有div标签
  clg(divNode.outerHTML)
  

3.8.元素的特性attribute

• 1.如果时HTML标准指定的attribute， 称之为标准Attribute（id, class, href, value等）

• 2.自定义的Attribute， 称之为非标准Attribute（只能通过getAttribute去获取）

  <div id="abc" class="box" title="box"
       age="18" height="1.88">
      我是box
  </div>   	
  

   //attribute不严格区分大小写，且他们的值总是字符串类型
   var boxEl = document.querySelector(".box")
   //1.所有attribute都支持的操作
   clg(boxEl.hasAttribute("age"))//判断是否有这个特性
   clg(boxEl.getAttribute("age"))//获取特性
   
   boxEl.setAttribute("id", "cba")//将abc-->cba
   boxEl.removeAttribute("id")//移除特性
   
   var boxAttributes = boxEl.attributes//拿到所有特性
   for (var attr of boxAttributes) {
       clg(attr.name, attr.value)
   }
   ```
  

3.9.元素的属性property

• 对象内的属性称为property， 元素内的属性称为attribute

• 标准的attribute在对应的对象模型中都有对应的property

• attribute和property之间是相互影响的

• 除非特殊情况，大多数情况下设置、获取attribute，推荐使用property的方式（默认情况下有类型）

​

3.10.DOM-Element元素的class和style

• <div class="box" style="">
      我是box
  </div>
  

• //1.获取box
  var boxEl = document.querySelector(".box")
  //2.监听点击
  boxEl.onclick = function() {
      boxEl.style.color = "red"//直接修改style
      
      //动态添加class
      boxEl.className = "active"
  }
  
  //class操作方式
  //方式一：className
  boxEl.className = "abc"(缺点是会替换掉原有的class)
  //方式二：classList（操作对象）
  boxEl.classList.add("abc")//添加class
  boxEl.classList.remove("abc")//移除class
  boxEl.classList.toggle("active")//如果类不存在就添加，如果存在就移除
  
  

• //style用法
  //1.多词属性使用小驼峰：backgroundColor
  //2.如果将一个属性的值设置为空的字符串，那么使用默认值
  //3.设置多个样式(会覆盖，不推荐)
  boxEl.style.cssText = "font-size: 30px; color: red;"
  
  //style的读取:getComputedStyle(全局函数)
  clg(getComputedStyle(boxEl).fontSize)
  

3.11.date-属性

• <div id="abc" class="box" title="box"
       data-age="18" data-height="1.88">
      我是box
  </div> 
  

• var boxEl = document.querySelector(".box")
  clg(boxEl.dataset.age)
  clg(boxEl.dataset.height)
  

3.12.创建元素

• <div class="box">
  	<span>呵呵呵</span>
  	<p>哈哈哈</p>
  </div>
  

• var boxEl = document.querySelector(".box")
  //1.通过innerHTML（不推荐）
  boxEl.innerHTML = `
  <h2 class="title">我是标题</h2>
  `
  //2.创建DOM对象
  var h2El = document.creatElement("h2")
  
  //将元素插入boxEl（在box的最后）
  boxEl.append(h2El)
  //最前面（prepend）
  boxEl.prepend(haEl)
  //和box为兄弟元素且在其后面：after
  boxEl.after(h2El)
  //box前面：before
  boxEl.before(h2El)
  //替换box
  boxEl.replaceWith(h2El)
  

3.13.移除---克隆元素

• <button class="remove">移除box</button>
  <button class="clone">复制box</button>
  <div class="box">
  	<span>呵呵呵</span>
  	<p>哈哈哈</p>
  </div>
  

• var boxEl = document.querySelector(".box")
  var remove = document.querySelector(".remove")
  var clone = document.querySelector(".clone")
  remove.onclick = function() {
      boxEl.remove()
  }
  
  //不加true不会克隆子元素，加了会深克隆
  clone.onclick = function() {
   var newNode = boxEl.cloneNode(true)
   newNode.children[0].textContent ="我也是标题"
   //插入
   boxEl.after(newNode)
  }
  

四、事件

4.1.认识事件（Event）

• 用户点击某个按钮，用户在输入框里面输入某个文本，鼠标经过某个位置
• 浏览器需要搭建一条JavaScript代码和事件之间的桥梁
• 当某个事件发生时，让JavaScript发生响应，所以我们需要针对事件编写处理程序

4.2.事件处理三种方案

• <button onclick="clg('按钮一发生了点击')">按钮一</button>
  <button class="btn2">按钮二</button>
  <button class="btn3">按钮三</button>
  

  //1.直接在html中编写JavaScript代码（不推荐）
  var btn2El = document.querySelector(".btn2")
  var btn2El = document.querySelector(".btn3")
  
  //2.onclick属性
  box2El.onclick = function() {
      clg("按钮二发生了点击")
  }
  
  //3.addEventListener(点击一次可以执行多个函数)
  btn3El.addEventListener("click", fn1)
  btn3El.addEventListener("click", fn2)
  

4.3.事件流--事件冒泡--事件捕获

• <div class="box">
      <span></span>
  </div>
  

  //1.事件流
  //当我们对span进行点击的时候，点击的不仅仅是这个元素本身
  //这是因为我们的HTML元素存在父子元素叠加层级
  //当span元素发生点击，div及body也会发生点击
  
  //2.事件冒泡
  //事件流的顺序从内到外，这被称为事件冒泡
  
  //3.事件捕获
  //事件流的顺序从外到内，这称之为事件捕获
  //传入第三个参数：true， 监听事件捕获
  span.addEventListener("click", function() {
      clg(span发生点击)
  }, true)
  div.addEventListener("click", function() {
      clg(div发生点击)
  }, true)
  body.addEventListener("click", function() {
      clg(body发生点击)
  }, true)
  
  //都监听的话顺序为：捕获阶段--> 目标阶段 --> 冒泡阶段
  

4.4.事件对象

• <div class="box">
      <span>
        <button>按钮</button>
      </span>
  </div>
  

  //少用属性
  divEl.onclick = function(event) {
      clg("div发生了点击", event.type)//事件类型
      clg(event.eventPhase)//事件所处阶段
      clg(event.OffsetX, event.OffsetY)//事件在元素内的位置
      clg(event.clientX, event.clientY)//事件发生在客户端的位置
      clg(event.pageX, event.pageY)//事件发生在客户端的位置（包括滚动上去的距离）
      clg(event.screenX, event.screenY)//事件发生相对于屏幕的位置
  }
  //常用属性
  //当点击对象和监听对象为同一个时，这两没有区别
  clg(event.target)//事件发生的元素
  clg(event.currentTarget)//当前处理事件的元素
  clg(event.target === event.currentTarget)
  
  //常用方法
  //阻止默认行为
  var aEl = document.querySelector("a")
  aEl.onclick = function(event) {
      event.preventDefault()//阻止默认行为
  }
  
  //阻止事件传递
  var btnEl = document.querySelector("button")
  var spanEl = document.querySelector("span")
  var divEl = document.querySelector("div")
  
  divEl.addEventListener("click", function(event) {
      clg("div的事件捕获监听")
      event.stopPropagation()//阻止下一步传递
  }，true)
  spanEl.addEventListener("click", function() {
      clg("span的事件捕获监听")
  },true)
  btnEl.addEventListener("click", function() {
      clg("btn的事件捕获监听")
  },true)
  divEl.addEventListener("click", function() {
      clg("div的事件冒泡监听")
  })
  spanEl.addEventListener("click", function() {
      clg("span的事件冒泡监听")
  })
  btnEl.addEventListener("click", function() {
      clg("btn的事件冒泡监听")
  })
  

4.5.EventTarget类

• 所有节点，元素都继承自EventTarget

• EventTarget是一个DOM接口，主要用于添加，删除，派发Event事件

• //1.addEventListener
  var btnEl = document.querySelector("button")
  var foo = function() {
      clg("按钮被点击")
  }
  
  btnEl.addEventListener("click", foo)
  
  //2.removeEventListener
  //过5s将事件监听移除
  setTimeout(function() {
      btnEl.removeEventListener("click", foo)//foo为需要移除的函数
  }, 5000)
  
  //3.dispatchEvent(派发事件)
  window.dispatchEvent(new Event("事件类型"))
  

4.6.鼠标事件

• //1.click:当用户点击某个对象时
  //2.contentmenu：当用户点击鼠标右键打开菜单时
  //3.dbclick：双击某个对象时
  //4.mousedown：鼠标按钮被按下
  //5.mouseup：鼠标按钮松开
  //6.mouseover：鼠标移到某个元素之上（支持冒泡）
  //7.mouseout：鼠标从某个元素移开（支持冒泡）
  //8.mouseenter：当鼠标指针移动到元素上时触发（不支持冒泡）
  //9.mouseleave：当鼠标移出元素时触发（不支持冒泡）
  //10.mousemove：鼠标被移动
  

4.7.键盘事件

• //1.onkeydown:某个键盘按键被按下时
  //2.onkeypress:某个按键被按下时
  //3.onkeyup：某个按键被松开
  //down事件先发生，press发生在文本被输入，up发生在文本输入完成
  

4.8.表单事件

• //1.onchange:该事件在表单内容改变时触发
  //2.oninput:元素获取用户输入时触发
  //3.onfocus：元素获取焦点时触发
  //4.onblur：元素失去焦点的时候触发
  //5.onreset：表单重置时触发（监听form）
  //6.onsubmit：表单提交时触发（监听form）
  

4.9.文档加载事件

• //文档加载完成时，浏览器进行回调执行函数
  <script>
  window.onload = function() {
      var boxEl = document.querySelector(".box")
      boxEl.style.backgroundColor = "orange"
  }
  </script>
  <div class = "box"></div>
  //浏览器已完全加载HTML，并且构建了DOM树，但<img>和样式表之类的外部资源可能未加载完成
  //DOMContentLoaded
  

4.10.其他事件

• http://developer.mozilla.org/zh-CN/docs/Web/Events
  

五、BOM

5.1.认识BOM

• BOM：浏览器对象模型（Browser Object Model ）
• 由浏览器提供的用于处理文档之外的所有内容的其他对象（navigator， location， history）

5.2.window对象的使用

• //视角一：全局对象
  //视角二：浏览器窗口对象
  

• //方法一：window.open
  window.open("http://www.baidu.com", "_self")
  
  //方法二：关闭窗口
  window.close()
  

5.3.location对象

• //location对象用于表示window上当前链接到的URL信息
  //常见属性
  //1.href（完整链接）
  clg(location.href)
  //2.hostname(主机地址)
  clg(location.hostname)
  //3.host(主机地址+端口号)
  clg(location.host)
  //4.protocol(获取协议)
  clg(location.protocol)
  //5.port(端口)
  clg(location.port)
  //6.pathname(路径)
  clg(location.pathname)
  //7.search(查询字符串)
  clg(location.search)
  //8.hash(哈希值)
  clg(location.hash)
  
  
  //location方法
  location.assign()(打开一个新的网页)
  location.replace()(替换该网页)
  location.reload()(刷新网页)
  

5.6.history对象

• 修改history和hash值页面不刷新

• //修改history
  history.pushState({ name: "6", age: 18}, "", "/6")
  
  //返回上一级
  histo.back()
  
  //前进一级
  histo.forward()
  
  //go
  history.go(前进后返回的层级)
  
  //replaceState(替换，不能返回)
  history.replaceState
  

六、JSON

6.1.JSON的由来

• 1.在目前的开发中，JSON是一种非常重要的数据格式，它不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式
• JSON全称为：JavaScript Object Notation(JavaScript对象符号)

6.2.JSON序列化和反序列化

• var obj = {
      name: "d",
      age: 18,
      height: 1.88,
      friend: {
          name: "p"
      }
  }
  
  //1.将obj对象进行序列化
  var objJSONString = JSON.stringfy(obj)
  
  //2.将对象储存到LocalStorage
  localStorage.setItem("info", objJSONString)
  var item = localStorage.getItem("info")
  
  //3.将字符串转回到对象(反序列化)
  var newObj = JSON.parse(item)
  clg(newObj	)