原生JS知识点

一、js的基本使用及变量类型

1、变量

      就是值可以变化的量，变量是用来储存程序运行中产生的临时数据

     创建变量方式：  var 变量名=值；变量初始化时指：变量在声明的同时赋值

2、数据类型

     基础数据类型：字符串（string）、数字（number）、布尔（Boolean）、空值(null)、未定义                              （undefined）

typeof的检测类型：字符串（string）、（NaN）数字（number）、布尔（Boolean）、空值                                       (Object)、未定义（undefined）

      复杂数据类型：对象（Object）、数组（Array）、日期（Date）、函数（function）

①当一个变量在声明之后没有赋值，那就输出undefined-值

②不声明不赋值直接用，就出现变量

③不声明直接赋值，系统自动补全，不影响使用（严格模式下不行）

3、类型转换

        邪恶6兄弟：false 0 "" undefined null NaN 除了这六兄弟转换成布尔值是false以外 其他的所有值转换成布尔值都是true

       其他类型转字符串                                       数组转字符串方法：数组变量.join('自定义分隔符')

①拼接一个空字符串，var+"  "

②变量.toString() 

③String(其他类型)

       其他类型转数字

①隐式转换类型 ：字符串和数字进行减乘除时，系统会自动进行转换                                       

②强制转换类型：parseInt(字符串) 遇到非数字就停止转换，开头是非数字就直接返回NaN

                             parseFloat(字符串)能解析小数点

                             Number(字符串)字符串必须时纯数字才能解析成功 否则就返回NaN

4、运算符

    算数运算符:+  -  *  %            单目运算符 ：++ --            赋值运算符： =    +=     -=   *=    /=    %=

    关系运算符：>  <  >=  <=  ==(相等)（判断两个值是不是相等）   ===(全等) （判断两个值的类型是不是相等）  !=(不相等)    !==(不全等)

    逻辑运算符：  &&（逻辑与）全真才真 一假即假 ||    （逻辑或）全假才假  一真即真                                                 !（非运算）取反

5、循环结构

   if循环            if()else()              if()else  if()             switch(){case  值：break;}

   for（初始化语句;循环判断条件;更新循环变量）{循环体语句}  循环     while(循环判断条件){

循环体语句更新循环变量}循环 

   双层循环：外层执行一次，里层执行一轮        

6、数组

                   创建数组的两种方式：字面量创建                                          new创建

var 数组变量名=[元素1,元素2....,元素n]                      var 变量名=new Array(元素1,元素2....,元素n)

   求数组的最值                                                                          

        

   数组的方法：增加   push(最后)   unshift(前）         删除    pop(后)  unshift(前)     

                         修改   数组变量[索引值]=新值            查询    数组变量[索引值]

                         截取    数组变量.slice(start,end)         查找    数组变量.indexOf(元素)

                         翻转    数组变量.reverse() 

7、函数

① 一段代码想反复使用（for while do while）就可以把这段代码封装成函数

     函数格式（调用函数名就可以反复执行）                          函数的返回值格式

                 

     函数的参数：使用函数时，实参>形参 不理会，实参<形参   undefined,   实参=形参  正常使用

     函数的返回值会返回调用者

     函数内部只有return 没有需要返回的结果或者只有值没有return   就显示undefined;

②变量

      全局变量                                                 局部变量

变量在函数外边                                             变量在函数里面

生命周期：页面加载时创建                           函数调用时创建

                  页面关闭时销毁                           调用完毕时销毁

生命周期长，容易造成空占内存，              参数也是局部变量，不同的函数可以使用相同的参数名

            还会产生命名冲突（全局污染）

③变量提升                                              变量提升规则：

隐式全局变量提升 系统会补全变量         预解析阶段会把var声明的变量进行提升 提升到对应作                                                                      用域的第一行

                                                                 变量只提升变量名 不提升赋值

                                                                 变量提前调用 值为undefined

                                                                (全局变量提升到全局第一行  局部变量提升到局部第一行)

在预解析阶段会把var声明的变量，提升到对应作用域的第一行，提升到对用作用域的第一行

         变量只提升变量名，不提升赋值，变量提前调用，值为undefined,,全局变量提升到全局第一行，局部变量，局部变量提升到局部的第一行

④匿名函数

   不带函数名，只声明函数

匿名函数
function(){

} 

8、对象

创建对象的两种方法

自变量创建                                                   new创建

var  对象={键值对：属性名}                        var 对象=new  Object ( )

    // 字面量创建
        var ipad={
            name:'2019',
            price:'3799',
            neicun:256,
            jn1:function(){
                console.log('光遇游戏');
            },
            jn2:function(){
                console.log('B站');
            }
        }
        

利用Object函数 使用new关键字调用
      var obj=new Object();
        obj.name='小强';
        obj.age=18;
        obj.eat=function(){
            console.log('吃垃圾');
       }

        this指向了当前调用者

        new的作用：1‘开辟了新的空间，储存新的对像{}            2’内部的this指向了新的对象     

                             3‘执行内部代码，为当前的对象绑定属性和方法      4’返回当前创造的对象

绑定属性的方法：

        1‘    对象.属性名=属性值      2’      对象【‘属性名’】=属性值

对象绑定函数的两种方法

            1'  匿名函数                        2’有名函数

匿名函数
 
var obj={
            name:'小强'
        }
obj.sleep=function(){
            console.log('到点就睡');
        }
        obj.sleep()

有名函数

function demo(){
            console.log('我是吃东西的代码');
        }
        obj.eat=demo;
        obj.eat()

 判断是不是属性名和属性值的方法  

        1‘ Obj后面中括号里是不是字符串，是字符串，属性名就是字符串，不是字符串就是变量，变量如果没有就是undefined，undefined也是属性名；属性值就是=后的。

对象遍历(for  in)

for...in 循环遍历对象
     
    for(var 变量 in 对象){//声明的遍历存储的是当前对象的每一个属性
    }
        
        for(var k in per){
          console.log(k);//k是一个变量 所有per对象的属性都是存储在这个变量里面的 
             要想根据一个变量获取属性值 需要用到对象调用属性的第二种方式 对象[变量名]
          console.log(per[k]);
          console.log(per.k);//per['k']
         }

数组遍历

forEach      filter（过滤数组，形成新的数组）        map

 forEach
arr.forEach(function(item,index,arr){//单纯的遍历数组
   console.log(item,index,arr);
 })

filter
var newArr=arr.filter(function(item,index,arr){//filter方法会返回一个数组  回调函数return true的那个元素会放到新数组里面   可以用作数组元素过滤
      if(item.length>2){
            return true
            }
       })
      console.log(newArr);

 map
var newArr=arr.map(function(item,index,arr){//map方法也会返回一个新数组 回调函数return的内容
     就是新数组的每个元素 新暑促的长度与原数组长度一致  可以用作数组的二次加工
    return item+'-->您好'
    })
    console.log(newArr);

数组清空  arr= [ ]

获取时间戳 

var date=new Date()

console.log(date.getTime())

Math 随机数：(Math.random() )          上取整 (Math.ceil  )     下取整（Math.floor）

        四舍五入（Math.round）

9、DOM

页面元素绑定事件的步骤：

1’获取元素

var 变量=document.querySelector('css选择器') 
var 变量=document.querySelectorAll('选择器')

2‘元素对象.on事件名称=匿名函数

事件对象.onclick=function(){
          alert('你好')
         }

事件名称：click(点击)   mousemove（移入）---mouseout（移出） ---冒泡

                  mouseenter(移出)--mouseleave（离开）