【重温JS】JavaScript 巩固基础day21-梳理学习

330 阅读3分钟

这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战

☆☆☆ 今天学习的内容: ( 对前面的学习进行一次简单系统的总结 )

>查缺补漏< ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

结合自己的理解, 用白话文简单又全面概括 JavaScript 学习过程中的基础知识点, 方便加深理解!

开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!

1、第一周知识点梳理

数据类型: 

typeof

基本: 字符   数值   布尔

复合 : object

特殊 : null  undefined

运算符表达式

  • 算术 :

    ++   --

    +  -  *  /  %     "8" - 9

  • 关系 - 逻辑 - 条件 - 赋值

  • 优先级最高 : ()   算术   关系   逻辑   条件   赋值(=)

  • 类型转换 :          parseInt()   parseFloat()   Number("200px")  Boolean()  toString(16)

三大结构 :

顺序   选择   循环

if (范围条件) {
} else {
}
switch (固定值条件) {
  case 1:
    break
}

选择:

循环:

while  do..while   for     for...in     for( var i = 0 ; i < 10 ; i++ )     alert(i);   循环体

break : 结束当前循环

函数:

参数概念

形参 : 是一个变量   函数定义中             一一对应

返回值        return  

变量作用域:

  • 全局变量
  • 局部变量
var num = 90
function fn(num) {
  num = 100
  alert(num)
  100
}
fn(num)
alert(num)
90
alert(a)
function a() {
  console.log(19)
}
var a = 100
function a() {
  console.log(19)
}

函数和事件关系: 

事件三要素 :   事件源   事件   事件处理程序(function)

常见的事件 : 

函数递归调用: 函数自己调用自己

function fac(num) {
  if (num == 1) {
    return 1
  } else {
    return num * fac(num - 1)
  }
}

2、第二周知识点梳理

对象 :{  }

构造函数 :  new String()

内置对象  

Array

排序算法 : 冒泡排序           选择排序

去重算法 :

新数组 :   取出原数组中的数,判断这个数在新数组中是否存在,如果不存在,就添加到 newArr

数组操作方法:

push() pop()   shift()   unshift()  splice()  join()....

值传递和地址传递 :

var arr = [1, 2, 3]
var brr = arr
brr[0] = 10
arr[0] = 10

String

操作方法

字符串转成数组 : split()

Date()

获取日期   get....

设置几天后的日期   now.setDate( now.getDate() + 8 )

Math :

获取任意区间整数值 :

正则

BOM :         window ---- location history  document   screen  event  navigator

DOM :

  • 增  appendChild()   insertBefore()   createElement()

  • 删  remove()   removeChild()

    • 改样式       .className   .style.color = xx   .style.cssText

    • 改属性:     .属性 = 值     .setAttribute("属性","值")     .getAttribute();  

    • 改内容

      .value

      .innerHTML

  • getElementsBy....

3、第三周知识点梳理

事件对象 event

事件对象相关属性 :          pageX       offsetX      keyCode

兼容性  :

事件传播方式:  

  • 事件冒泡   由子元素向父元素传播
  • 事件捕获    由父元素向子元素传播

事件监听

addEventListener(事件,function(){}, false/true);

事件委托(代理) :

好处 : 提高执行效率   动态创建的元素 利用委托 在函数外部添加事件

获取事件源 :

target || srcElement

json

{ "键":值 }     for  in      json[键]

拖拽 :

三步 :      三个事件 offset 家族属性 :  offsetLeft/Top   Width/height  scroll 家族属性:   获取页面滚走的距离

正则  :

  • 特殊字符含义 :   \d   \w   \s   +   ?  *   .   | .....
  • 表单验证
  • 方法 :   test()  replace()    search()   Exec()  match()

cookie:

设置 cookie

document.cookie = 'uname=xn213'

获取 cookie

document.cookie

删除 cookie

将cookie的键设置为 ''   或生存期 设置为 -1

生存期 :

document.cookie = 'uname=xn213;expires = ' + now

cookie 参数 :   键和值  ./     会话跟踪技术 :

ES6

  • 块级作用域 let 关键字
  • 常量定义  const
  • this 指向改变 :  bind   apply  call
  • for of 和  for  in 区别 :
  • 字符串模板 :   ${ 变量 函数调用 }
  • 箭头函数  () => {   }
  • 解构赋值            [x,y] = [3,2]         {a,b} = {b : 3, a : 9}
function fn({ b, a }) {}
fn({ a: 8, b: 9 })
  • 互换值:
;[x, y] = [y, x]
  • Array.from()   将具有 length 属性的伪数组转数组
  • new Set()      Array.from( new Set([]) )去重
  • new Map()

Symbol 类型

保护对象的属性

  • "use strict"    严格模式

4. 兼容问题总结

4.1、事件对象创建

e || event

4.2、事件冒泡

e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)

4.3、取消浏览器的默认行为

e.preventDefault ? e.preventDefault() : (e.returnValue = false)
return false

4.4、事件委托中获取事件源

e.target || e.srcElement

4.5、获取键盘按键值

e.keyCode || e.which

4.6、获取页面滚走距离

document.documentElement.scrollTop || document.body.scrollTop

4.7、取消拖拽时文字选中状态(选记)

widnow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()

4.8、获取非行内元素样式值

function getStyle(obj, attr) {
  return window.getComputedStyle
    ? window.getComputedStyle(obj, false)[attr]
    : obj.currentStyle[attr]
}

预告: 加油, 追梦人

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!


更多阅读:

前文更新回顾

【重学 JS】每天学习巩固基础:

【day1】js 初始

【day2】各种运算符【day3】数据类型【day4】循环结构 & 条件语句【day5】函数(重点)【day6】作用域 & 事件

【day7】对象 & 数组方法总结【day8】字符串方法 & 部分排序

【day9】Math 对象 & 封装函数【day10】BOM-浏览器对象模型

【day11】DOM-文档对象模型

【day12】Event 事件对象初识(一)【day13】Event 事件对象初识(二)

【day14】事件委托 & 拖拽原理

【day15】拖拽实现 & 正则初识【day16】正则具体方法【day17】cookie

【day18】ES6

【day19】Js 运动函数的封装

更多期待在路上...任重而道远==-..-==

Calm Down & Carry On!