【原生】---回忆---思维***链接---知识点回顾及思考

1、什么是javascript ？ 
2、常量和变量      
3、标识符的命名规范    驼峰式  匈牙利  
4、类型
基本类型  字符  数值  布尔
引用类型 object
特殊类型 ：   undefined  null  
5、运算符和表达式
算术
一元 ++  -- 
i++ 和 ++i 区别 ：
二元 +  100+"90"   100-"90"
赋值 =  +=
关系   ==  ===
条件 ?  :
逻辑 &&  ||  !

短路现象 ： 真 || 不执行        假 && 不执行 
类型转换 ： 自动转换 isNaN("23")     强制转换    
选择结构   
if
if else if
switch

三大结构
顺序结构
    运算符和表达式
    五类  
选择结构
    控制语句 ：
    if else
    switch
循环结构
    for 
    while    
    do..while 
    break 和 continue 

1、函数  
2、函数定义 
function 函数名(){ .... }
var fn = function(){...}
3、 函数参数 
4、返回值 

运算符和表达式  
算术  
关系 ：主要应用与布尔环境 （表示判断  if()   while()   ）
逻辑 : 与关系连用
条件 ： ？  :    布尔环境 
赋值 :  =  

选择结构
if  switch()
   
循环结构 ： 
    while    
    do..while
    for
     break 和 continue
函数：
    函数参数
    函数返回值
    作用域 ：
        全局和局部   
    function fn(num){
        num = 90;
    }
    fn()
    alert( num )


    alert( fn )
    var fn = 90;
    function fn(){ ... }
    函数和事件的关系

对象 ：  
对象类型和基本类型区别 ：  
    对象中存的数据是批量的    基本类型存一个数据
    传值时 ：对象传地址   基本类型传数值
    对象类型都有属性和方法  而基本类型没有属性和方法 
构造函数 ： Array  Object 
数组 ： 
定义方式 ：
    var arr = []
    var arr = new Array()
数组遍历 ： 
    for..in  
数组的操作方法 ：
    push pop  shift unshift splice   
    reverse()  
    join()  concat()      slice()
栈和堆 ：

去重算法 ： 定义一个空数组  判断原数组中的某个数在空数组中是否存在  不存在就存入到空数组中   
排序算法 ： 冒泡 和 选择  sort(function(a,b){}) 排序方法 
严格模式 ：  "use strict"
数组的扩展方法 ：      
    forEach  map   indexOf  filter reduce   some  every    
字符串操作方法：
查 ： charAt  charCodeAt  String.fromCharCode
拆 ： split()   
转 ： toLowerCase()  upper
替 ： replace()  
截 ： substr  substring slice    
复制 ： repeat 
连接 ：concat  
去两边空格 ：trim 
arr.forEach(function(item,index,array){  操作内容 } ）

arr.filter(function(item,index,array){  操作内容   })

1、数学对象  
获取任意区间的随机整数值 
Math.round( Math.random()*(max-min) + min );
2、日期对象
日期定义 ：
当前系统时间   new Date(  )
自定义时间  new Date( "" )

获取时间 ：get....
时间差 ： 
 getTime()  
时间格式的设置 ：
设置3天后的时间
var now = new Date();
now.setDate( now .getDate() + 3 );   setDate() 改变原来的时间
alert( now );

定时器 ： 让时间动起来

BOM对象模型：
浏览器对象模型 
window--location  document  history  navigator  screen
window对象常见的方法 ： 
两个定时器 ： setInterval  setTimeout 
open()
window对象特点 ：     
location对象 
document对象 ：
操作样式、属性、内容
非行内样式值获取 ：getComputedStyle    .style.样式

1、内置对象
Array
    数组的操作方法 ：
        push  pop   shift unshift   splice  slice  reverse   concat  join  sort 
        扩展方法 ： forEach  map  filter   indexOf  reduce  
    数组去重
    数组排序   
String
    操作方法 ：
        charAt  charCodeAt   String.fromCharCode  
        indexOf   lastIndexOf
        substr  substring slice
        concat
        toLowerCase  toUpperCase
        split 
        
Math :
    随机整数获取   
    取整方法 ：ceil floor round
Date
    日期定义  获取日期  设置日期时间格式

BOM  和 DOM
BOM ：浏览器对象模型 window --- location  history  document  navigator screen
window对象的特点 ： setTimeout  setInterval   open()    alert confirm  prompt
document对象 :  

DOM :  文档对象模型
DOM操作:
增
    createElement
    appendChild   insertBefore
删
    remove   removeChild
改
    改样式
        obj.style.样式
        obj.className
        obj.style.cssText = "color:red";
    改属性
        非自定义属性：  obj.属性
        自定义属性  ：　obj.getAttribute() / setAttribute()
    改内容
        obj.innerHTML / innerText / value
查
    获取元素方法
    getElementBy....
    querySelector...

1、事件对象 
2、对象的定义 ： e || event
3、兼容 
4、鼠标事件对象属性  坐标属性
pageX/Y 
clientX/Y    x/y  
offsetX/Y
screenX/Y
5、button
6、获取键盘按键值  keyCode  || which
功能键 ：    
7、事件流 ： 
冒泡
捕获
8、事件监听 addEventListener   onclick 区别

1、事件委托 
好处 ： 提高程序执行效率  动态添加元素添加事件
2、实现 ： 事件源获取、判断  
3、offset家族属性 ：
   offsetWidth/height
    clientWidth / height 
    获取实际宽度 ： 对象.style.width   非行内 ： 
offsetLeft/offsetTop
4、json 
对象.键     [键]
for..in 遍历json

5、onmouseenter 和 onmouseover  
6、onload    

正则中的几个操作方法：
test()    exec()  正则的方法  可以操作正则

可以操作正则的字符串方法：
search   match  replace 

es6中的常见语法格式 ： 
let  块级作用域  
const 定以后值不可以改变

改变this指向 ： apply  call  bind

for...of  

字符串模板  ``

箭头函数    不支持bind    

解构赋值   

set集合   自动去重  
map集合

class定义的构造函数

Symbol类型   generator函数   *

Array.from()    Array.of()    Object.assign()
 

事件对象：
鼠标事件对象的属性：
e.offsetX offsetY
pageX/clientX
兼容问题 ：
    事件对象创建 ：  e || event
    阻止事件冒泡 
    阻止浏览器的默认行为 preventDefault
    事件源获取 ： target || srcElement
    键盘按键值 ： keyCode || which
事件冒泡和事件捕获
事件监听 addEventListener  和 不同添加事件
addEventListener("click") 和 obj.onclick = function(){}  区别：
事件委托
    
json对象：定义和获取
 
拖拽 ：
   
scroll家族属性: 获取页面滚走距离
document.documentElement.scrollTop || document.body.scrollTop
或者
widnow.scrollY
offset家族属性 :
obj.offsetLeft/offsetTop/Width/Height
正则:
定义 ：
var reg = /^$/  或 var reg = new RegExp("\\w",修饰符"ig");
特殊字符 ： 
.   \   |    ^ $  + ....
下面哪些是正则对象的方法 ：test   exec
可以操作正则 ：  test   exec   replace seach  match

es6:
   let 块级作用域 {  }   
   const 常量定义的关键字，如果变量在执行的过程中不会发生变化，也可以使用const    const btn = document.getElementById()  
   箭头函数
   解构赋值
    改变this指向的方法：
    将伪数组转数组：
dom操作高级
    匀速--缓冲--多物体--链式--完美
    var timer = null;
    function move(obj,json,cb){
        clearInterval( obj.timer ) 
        obj.timer = setInterval( ()=>{
          var flag = true;
          for( var attr in json ){
            var current = parseInt( getStyle( obj,attr ) );
            //判断透明度
            var speed = (json[attr]- current)/10;
            speed = speed > 0 ? Math.ceil( speed ) : Math.floor(speed);
            if( json[attr]!= current ){
                   flag = false;
            } 
            
            //判断透明度
             obj.style[attr] = current + speed + "px"
        }
        },30 )

        if(flag){
            clearInterval(obj.timer);
                    if( cb ){
                        cb();

                    }
        }
    }

    //获取一个元素实际样式值
    function getStyle(obj,attr){

    }