js基础知识

205 阅读4分钟
  • 数组塌陷

    • 在循环的时候改变了原本数组的长度
    • 就是把 i--
  • 深拷贝

    • JSON.stringify() : 把对象转换成json字符串
    • JSON.parse(): 把json字符串转成对象
    • JSON.parse(JSON.stringify(对象)) :得到一个新的对象
    • 缺点 会忽略一些属性 ,undefined function ...
    • 递归深拷贝
  • this对象

    • js内置的一个对象

    • 全局this对象 就是window

    • 函数内的this对象

      • 不要关注this的定义,需要关注this的调用

        • 函数直接调用
        function fn(){ console.log(this) }; fn() ;// this指向window
        
        • 通过事件来调用
        btn.onclick = function(){
            console.log(this) // this会执行事件源
        }
        
        • 对象里的函数调用

          • 直接通过对象来调用
          var obj = {
              name:"张三",
              fn:function(){
                  console.log(this);
              }
          }
          obj.fn(); // this就指向调用的对象 
          
          • 通过变量保存函数来调用
          var obj = {
             name:"张三",
             fn:function(){
                 console.log(this);
             }
          }
          var myfn = obj.fn; 
          myfn(); // this就指向window 
          
  • 严格模式

    • 如何开启 use strict
    • 开启严格模式之后 js 语法变得更加严谨
  • 字符串编码

    • 字符串比较
  • 字符串创建

    • 字面量
    • 内置构造函数
    • 包装对象
  • 字符串的常用方法

    • charAt
    • charCodeAt
    • indexOf
    • substring :截取字符串 (包前不包后)
    • substr: 截取字符串 (参数一:开始截取的字符索引位置 ,参数二:是要截取的个数)
    • toLowerCase : 字母转小写
    • toUpcase() : 字母转大写
    • split : 根据对象的字符把字符串切割成数组
    • replace:替换指定的字符
  • ES5其他常用循环

    • 数组.方法(function(item,key,arr){ item: 键值 key:键名 arr:原数组 })
    • forEach
    • map 需要return ; 重新复制一个数组
    • filter :把返还函数里符合条件的内容过滤出来
    • some : 返还函数的结果只要有一个满足条件那么结果就会是true ,否则就是false
    • every: 返还函数的结果 都为true every的结果就是true ,否则就是false
  • 时间对象 :js提供一个内置操作时间的对象

    • 如何获取当前时间对象

      • new Date(): 注意 本电脑的时间
    • 获取指定的时间对象

      • 传入对应的年月日的参数 ; 注意:月是0-11月来算的;
      new Date("2020","3","1") // 
      
      • 传入一个字符串; 注意 月是 1-12月
      new Date("2020-1-1 11:1:1");
      
    • 操作时间对象: 时间对象.方法();

      • 获取年 getFullYear();
      • 获取月 getMonth(); // 注意: 获取的0-11 个月份
      • 获取日 getDate();
      • 获取星期 getDay();
      • 获取时 getHours();
      • 获取份 getMinutes();
      • 获取秒 getSeconds(); -js实现钟表:
var run = function () {

   		var date = new Date(); //当前是的时间对象

   		var msecond = date.getMilliseconds(); // 获取毫秒数

   		var second = date.getSeconds()+msecond/1000;  // 获取当前的秒

   		var minute = date.getMinutes() + second / 60;  // 获取当前分 + 当前秒的时间

   		var hour = date.getHours() + minute / 60; //获取当前小时 + 当前分和秒所占的小时数;

   		// var myhour =  date.getHours()>12?date.getHours()-12:date.getHours();

   		// 算角度 

   		var dsecond = second / 60 * 360;  //秒所占的角度

   		var dminute = minute / 60 * 360;  //分所占的角度

   		var dhour = hour / 12 * 360;

   		hourEle.style.transform = "rotate(" + dhour + "deg)";

   		minuteEle.style.transform = "rotate(" + dminute + "deg)";

   		secondEle.style.transform = "rotate(" + dsecond + "deg)";

   	}

   	run(); // 浏览器一进入的时候就会 先执行一次

   	setInterval(run, 10);  // 先没有执行 需要等到 1秒之后才会间隔执行
  • 时间戳 : 一个时间距离 格林威治时间(1970年1月1日0时0分0秒)的 毫秒数

    • 时间对象.getTime();可以在秒杀、倒计时的时候使用
秒杀:
function run(){
        var futureDate=new Date("2021-9-1 00:00:00");
        var nowdate=new Date();
        var fTime=futureDate.getTime();
        var nowTime=nowdate.getTime();
        var msTime=(fTime-nowTime)/1000;
        var day=parseInt(msTime/3600/24);
        var hour=parseInt(msTime/3600%24);
        var minute=parseInt(msTime/60)%60;
        var second=parseInt(msTime%60);
        document.body.innerHTML = "秒杀时间剩下" + day + "天" + hour + "小时" + minute + "分钟" + second + "秒";
    }
        setInterval(run,1000);
  • 数学对象Math
    
    • Math.random(); 随机生成 0-1之间的数字 包含0 不包含1

      • 可以封装一个随机函数 ,可以随机生成 一个 min-max之间的数 (包含min也包含max);

        function randomNum(min,max) { return parseInt( Math.random()*(max+1-min)+min); }

    • Math.round(); 四舍五入

    • Math.ceil() :向上取整

    • Math.floor():向下取整

    • Math.pow():取幂的方法

    • Math.sqrt():取平方根

    • Math.min() :取多个数中的最小值

    • Math.abs(): 取一个数的绝对值

    • Math.PI:圆周率

    • Math.toFixed() : 保留小数点后几位(数字转化为字符串)

    • 进制转换:toString() 例如16进制 toString(16)

  • 获取标签ID:document.getElementById();

  • 获取标签类名:document.getElementsByClassName()

  • 获取标签名:document.getElementsByTagName()

  • 替换id为myid的div的内容 innerHTML :会解析html

        例如:
        var ele =   document.getElementById("myid")

        ele.innerHTML = "<h1>我是替换的内容</h1>";
  • 替换标签里的文本内容 innerText :不会解析html

  • 16进制颜色转换

        function randomNum(max,min){
            var num=parseInt(Math.random() * (max + 1 - min) + min).toString(16);
            if(num.length<2){
                num=0+num;
            }
            return num;
        }
        setInterval(() => { 
            var num1 = randomNum(0, 255);
            var num2 = randomNum(0, 255);
            var num3 = randomNum(0, 255);
        res.style.backgroundColor="#"+num1+num2+num3;
        }, 100);
  • BOM : Brower Object Model: 浏览器对象模型 就是和浏览器相关js操作

      一般都是  window.xxxx
    
    • 获取浏览器宽度 、获取浏览器高度

      • 无论宽度还是高度 都包含滚动条的宽度
      • 这个是浏览器的宽高 ,不是页面 console.log( window.innerWidth) // 浏览器宽度

      console.log( window.innerHeight )// 浏览器高度,不是页面的高度

    • 获取浏览器相关的一些信息:navigator

      console.log( window.navigator); appName:Netscape : 网景公司 appVersion: 版本号 platform: "Win32" 系统版本

    • window.open("地址") 打开一个页面

    • window.close() 关闭当前页面