js学习总结(部分)

快来打我* 2022-11-28 10:55 128阅读 0赞

# 复习总结 #

*  js几种写法
    
     *  1.  内部
     *  1.  外部
     *  1.  行内
 *  js作者
    
     *  布兰登·艾克
     *  布兰登·爱奇
 *  js三大核心
    
     *  ECMAScript
     *  DOM
     *  BOM
 *  变量
    
     *  给数据定义一个别名
     *  看到var关键词，计算机就会使用一次内存
 *  基础数据类型
    
     *  number（数字）
     *  string（字符串）
     *  Boolean（布尔值）
     *  null（空）
     *  undefined（未定义）
 *  复杂数据类型/引用数据类型、复合数据类型
    
     *  Object、function、Array、Date、RegExp
 *  数据类型转换
    
     *  Number()、parseInt()、parseFloat()
     *  toString()
     *  Boolean()
 *  隐式类型转换
    
     *  除了加法
 *  保留几位小数
    
     *  toFixed(2)
 *  命名规范
    
     *  驼峰命名
 *  命名规则
    
     *  不建议使用中文
     *  不能数字开头
     *  可以是使用 \_ $
     *  大小写有区分
     *  不能使用关键字、保留字
        
         *  class、var、function、const……
 *  运算符
    
     *  算数运算符
        
         *  `+-*/%`
     *  比较运算符
        
         *  < > == >= <= != === !==
     *  赋值运算符
     *  = += -= \*= /= %=
     *  逻辑运算符
        
         *  `|| && !`
     *  自增、自减
        
         *  前置先计算后输出 ++i
         *  后置先输出后计算 i++

> 真: true、非0数字、非空字符串  
> 假: false、0、空字符串、null、undefined、NaN

*  NaN
    
     *  数字类型
     *  不等于自己
     *  isNaN 检测NaN
     *  isNaN(12) -> false

> 判断（分支结构）
> 
> > > if( )\{ \}  
> > > if( )\{ \}else\{ \}  
> > > if( )\{ \}else if( )\{ \}else\{ \}  
> > > switch  
> > > switch(变量)\{case 值: 语句;brea;case 值: 语句;brea;……\}  
> > > 三元运算/三目运算/三运运算  
> > > \_\_ ? \_\_\_ : \_\_\_

*  循环
    
     *  1.初始化
     *  2.条件
     *  3.语句
     *  4.自增
 *  for(一般固定次数)
 *  while(一般不固定次数)
 *  do…while(必定执行一次)
 *  breal
    
    1.  结束
 *  continue  
    2. 跳过本次循环
 *  函数
    
     *  声明
        
         *  function name()\{\}
         *  var name = function()\{\}
     *  调用
        
         *  声明式搁哪都行
         *  赋值式只能在定义之后
 *  函数概念
    
     *  function计算机申请一块空间
     *  js里的一级公民
 *  参数
    
     *  arguments 伪数组
 *  预解析
    
     *  提前解析代码
        
         *  变量 声明式函数
     *  范围不会超过函数、不会超过script标签
 *  作用域
    
     *  全局
        
         *  所有函数以为的变量
         *  生命周期：会话级
     *  局部
        
         *  函数内部的变量
         *  生命周期： 函数执行完
 *  递归
    
     *  自己调用自己
 *  对象
    
     *  无序数组集合
     *  new object\{\}
     *  只能使用for in循环
        
         *  for(let attr in obj)\{obj\[attr\]\}
 *  数组
    
     *  \[ \]
     *  new Array()
        
         *  一个参数长度、多个参数内容
     *  push 后面添加
     *  pop 后面删除
     *  unshift 前面添加
     *  shift 前面删除
     *  reverse 翻转数组
     *  concat 连接数组
     *  splice 切
     *  sort 排序
     *  join 数组转字符串
     *  indexOf 查找 返回下标
     *  slice 切
 *  排序
    
     *  冒泡
     *  选择
     *  归并
     *  快速
 *  ES5 新增方法
    
     *  foreach
     *  map 循环返回一个新数组
     *  some 一个条件成立就返回true
     *  every 所有条件都成立返回true
 *  严格模式
    
     *  放到最上面
     *  ‘use strict’
     *  不要写完再加
 *  ASCII
 *  字符串
    
     *  indexOf 查找返回下标
     *  lastindexOf 查找最后一个
     *  charAt 给下标 返回字符
     *  charCodeAt 返回ASCII
     *  toUpperCase 大写
     *  toLowerCase 小写
     *  subString 切
     *  subStr 切
     *  slice 切
     *  split 转成数组
     *  concat 连接

var time = 1000
    setInterval(function(){
      time = 5000
      console.log(time)
    },time)
    定时器的时间是1000
    因为定时器有注册机制
    一旦注册就不可更改

*  日期对象
    
     *  new Date(年，月-1，日，时，分，秒，毫秒)
     *  获取
        
        > getFullYear()  
        > getMonth()  
        > getDate()  
        > getDay()  
        > getHours()  
        > getMinutes()  
        > getSeconds()  
        > getMiniSeconds()  
        > getTime() 格林威治时间☞现在（毫秒）
 *  Math
    
     *  Math.random() 随机数左开右闭
     *  max min 最大、最小
     *  ceil round floor 向上、四舍五入、向下取整
     *  abs 绝对值
     *  PI Π
     *  sqrt 开根号
     *  pow 幂

### BOM ###

*  弹出框
    
    > alert、confirm、prompt
 *  打开
    
     *  window.open
 *  关闭
    
     *  window.close()
 *  navigator 浏览器信息
    
     *  userAgent 版本信息
     *  appName 浏览器名称
     *  appVersion 版本号
     *  platform 系统版本
 *  location 地址栏信息
    
     *  href 地址
     *  reload 刷新
 *  history 浏览器历史记录
    
     *  back 返回
     *  forward 潜进
     *  go( 数字 )
 *  浏览器事件
    
     *  onload onscroll onresize
     *  浏览器大小 window.innerWidth/innerHeight
 *  获取滚动距离
    
     *  document.documentElement.scrollTop || document.body.scrollTop
 *  定时器
    
     *  开启
        
            setInterval()
            setTimeout()
     *  关闭  
        clearinterval()  
        clerTimeout()
     *  定时器先关后开

### DOM ###

*  获取元素
    
     *  document.querySelector
     *  document.querySelectopAll
     *  document.getElementById()
     *  document.getElementsByClassName
     *  document.getElementsByTagName
     *  document.getElementsByName
 *  操作属性
    
     *  className、id、style、type、value、innerHTML、innerText、width、height、title、alt、href、src
 *  自定义属性
    
     *  getAttribute
     *  setAttribute
     *  removeAttribute
 *  获取元素节点
    
     *  children
     *  parentNode
     *  firstElementChild 第一个子节点
     *  lastElementChild 最后一个子节点
     *  previousElementSibling 上一个兄弟节点
     *  nextElementSibling 下一个兄弟节点
 *  获取文本节点
    
     *  childNodes
     *  firstChild
     *  lastChild
     *  previousSibling
     *  nextSibling
 *  查看节点类型
    
     *  nodeType
        
        > 1 元素  
        > 2 属性  
        > 3 文本  
        > 8 注释
     *  nodeName
     *  nodeValue
 *  创建节点
    
     *  document.createElement(‘div’)
 *  克隆元素
    
     *  obj.cloneNode(true)
 *  添加元素
    
     *  appendChild
     *  insertBefore
 *  替换元素
    
     *  replaceChild(obj.)
 *  删除元素
    
     *  removeChild(obj)
 *  元素信息
    
     *  obj.offsetWidth / offsetHeight 盒子模型
     *  obj.scrollWidth / scrollHeight 宽高+padding
     *  obj.clientWidth / clientWidth 宽高
     *  obj.offsetLeft / obj.offsetTop 父元素定位距离
     *  obj.getBoundingClientRect().left / top / right / bottom 获取绝对距离、不兼容ie
 *  浏览器事件
    
     *  onload onresize onscroll
 *  鼠标事件
    
     *  onclick、onmouseover、onmouseenter、onmousemove、onmouseleave、onmouseblclick、oncontextmenu、onmousedown、onmouseup、onmousescroll
 *  键盘事件
    
     *  onkeydown、onkeyup
 *  表单事件
    
     *  oninput、onchange、onsubmit、onblur、onfocus
 *  动画事件
    
     *  ontransitionend、onanimationed
 *  移动端事件
    
     *  ontouchstart ontouchmove ontouchend
 *  事件对象
    
     *  ev||event
     *  事件函数提供的对象
     *  ev.target||ev.srcElement （事件委托）
     *  ev.offsetX / Y 鼠标距离元素
     *  ev.pageX / Y 页面左上角
     *  ev.clientX / Y 可视区距离
     *  ev.cancelBubblue = true 阻止事件冒泡
     *  ev.stopPropagation() 阻止事件冒泡
     *  ev.preventDefault() 阻止浏览器默认行为
     *  return false 组织浏览器默认行为
 *  事件监听
    
     *  addEventListener
 *  事件流
    
     *  根据事件绑定的第三个参数
     *  冒泡、捕获

### 正则表达式 ###

*  `//` new RegExp()
 *  元字符
    
     *  \\s 空白字符
     *  \\S 非空白字符
     *  \\w 数字字母下划线
     *  \\W 非数字字母下划线
     *  \\d 数字
     *  \\D 非数字
     *  . 所有
 *  限定符
    
     *  \*出现0次到无限次
     *  \+出现一次到无数次
     *  ？出现0-1次
     *  \{n，m\}出现n-m次
 *  边界符
    
     *  ^ 开头
     *  $ 结尾
 *  特殊符号
    
     *  \\ 转义
     *  （）任选一组
     *  |或、
     *  \[ \]任选一个 \[^0-9\]非0-9
 *  方法
    
     *  exec 选中返回第一个值
     *  test 返回布尔
 *  字符串方法
    
     *  match() 匹配
     *  search() 搜索
 *  匹配符号
    
     *  i忽略大小写
     *  g全局

### ES6 ###

*  变量
    
     *  let
     *  没有预解析
 *  常量
    
     *  const
     *  一旦定义无法更改
     *  对象或数组可以改变里面的内容
     *  没有预解析
     *  不可以重名
 *  块级作用域
    
     *  \{ \}
 *  箭头函数
    
     *  ( )=>\{ \}
 *  解构赋值
    
     *  数组和对象
     *  \[item1, item2 …\] = arr
     *  \{name1, age …\} = obj
 *  展开运算
    
     *  \[…arr\]
     *  \{…obj\}
 *  合并运算
    
     *  function(…arg)\{ console.log(arg) \} ->数组
 *  模板字符串
    
     *  反引号\`\`
     *  拼接$\{变量\}
 *  this 指向
    
     *  普通函数 window
     *  事件函数 发生事件的元素
     *  forEach window
     *  attaEvent window
     *  定时器 window
     *  对象函数 对象自己
     *  箭头函数 指向父级
     *  new对象 指向函数名
 *  改变this指向
    
     *  call、apply、bind
     *  call(this, item1, item2 …)
     *  apply(this, \[item1, item2 …\])
     *  bind(this)(item1, item2 …)
 *  检测数据类型
    
     *  Object.prototype.toString.call()

### 运动 ###

### 面向对象 ###

*  特性
    
     *  封装
     *  继承
     *  多态
 *  核心
    
     *  高内聚低耦合
     *  抽象
 *  自定义构造函数
    
     *  函数变成对象
     *  this指向对象
 *  原型
    
     *  prototype 函数的一个对象，里面装一堆方法
 *  对象属性
    
     *  **proto** 对象的一个属性
 *  原型链
    
     *  先看自己有没有这个属性，自己没有找父对象有没有这属性
 *  ES6
    
        constructor(item){ 构造函数 }
          方法（）{}
          方法（）{}
          }
          new name(item)