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

Posted 2022-07-11 yuanjili666

***

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)  操作内容   )

　　

arr.map(function(item,index,array)

 

)

reduce()   归并 

arr.reduce(function(pre,next)

      pre 表示上一次操作返回的结果  如果第二个参数有数据，prev的初始值为第二个参数  

      next 表示 下一个数  next 表示数组中的每一个数据

,第二个参数)

---

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    

--

1、事件

事件对象的创建

事件中的兼容 ：  事件   事件冒泡  取消浏览器的默认行为....

事件冒泡和事件捕获 ：

事件的三个过程 :事件捕获  事件目标阶段  冒泡

事件监听:

事件委托:

鼠标事件对象的坐标属性 ：offsetX 

2、json

定义  

取值 json[""] json.键

3、拖拽

onmousedown  onmousemove   onmouseup 

4、正则

单字符 .   \   |   ^    $       组合  \d    \D    \w  \s    量词 +  ?　*   括号    []  ()

---

正则中的几个操作方法：
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)

    
    

16