js碎知识整理

最新推荐文章于 2025-03-27 15:33:54 发布

recol1

最新推荐文章于 2025-03-27 15:33:54 发布

阅读量103

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_42454057/article/details/116798345

版权

这篇博客探讨了JavaScript中的数据类型，包括解释型语言的特性、常量定义、数据存储以及布尔值转换规则。同时，介绍了DOM树与Render树的关系，并提供了历史记录访问的JS实现。此外，还讲解了DOM节点的选择与操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dom树和render树的对应关系
在这里插入图片描述
解释型语言：一边执行一边解释（js）
编译型语言：运行速度快
es6才有常量，常量默认规范变量名使用大写
基本数据类型储存在栈中，object存储在堆中
栈：速度快但容量小
堆：速度慢，容量大
所有数据类型都是基于对象构建而成的

0、空字符串、false、NaN、underfined、null强制转换布尔值时是false
var b = true;
b = Number(b);//输出b为1
NaN和数字比较为false
0 = false = “”;//相等
null = underfined；//相等
NaN 不等NaN //symbol也是如此

字符相加时首尾相连，若一端为字符串则会隐式转换为字符串
1 +t rue = 2
1 + underfined = NaN
2 + null = 2
true + true = 2

null、underfined、NaN、空字符串取反为true，其余取反均为false

ps中每英寸占用72个像素点，一个字96个像素点
一英寸需要：72 * 4 = 288B

位非：加1取反
~~a；//数值还原取整

a:while(i<10){
var j = 0;
	while(j < 10){
	if(i + j === 10)break a;//跳到标记处
		j++;
}
	i++
}

 // 在数组中查找2所在的所有下标
      // var arr=[1,2,4,2,3,4,2,22,1,2,2,2,3,2];

      /*  var arr1=[];
        var index=-1;
        while(~(index=arr.indexOf(2,index+1))) arr1.push(index);
         console.log(arr1); */

      /* var arr1=[];
         arr.forEach(function(item,index){
             if(item===2) arr1.push(index);
         });
         console.log(arr1); */

      /*  var arr1=arr.reduce(function(value,item,index){
            if(item===2) value.push(index);
            return value;
         },[]);
         console.log(arr1); */

      // 在数组中删除相同的元素（去重）

      /*  for(var i=0;i<arr.length;i++){
             for(var j=i+1;j<arr.length;j++){
                 if(arr[i]===arr[j]){
                     arr.splice(j,1);
                     j--;
                 }
             }
         }
         console.log(arr); */

// 将两个数组中相同的元素放在一个新数组中
        // var arr=[1,4,2,6,3,2,6,3];
        // var arr1=[4,6,7,9,0,2,2,6];

        // var arr2=arr.reduce(function(value,item){
        //     if(arr1.indexOf(item)>-1 && value.indexOf(item)<0) value.push(item);
        //     return value;
        // },[]);
        // console.log(arr2);


      // 将两个数组中不同的元素放在一个新数组中
    //   var arr=[1,4,2,6,3,2,6,3];
    //     var arr1=[4,6,7,9,0,2,2,6];

        // var arr2=arr.concat(arr1);
        // var arr3=[];
        // arr2.forEach(function(item,index){
        //     var list=arr2.reduce(function(value,item1,index1){
        //         if(item===item1) value.push(index1);
        //         return value;
        //     },[]);
        //     if(list.length===1) arr3.push(item);
        // })
        // console.log(arr3);
        
        // arr=deEmphasis(arr);
        // arr1=deEmphasis(arr1);
        // console.log(arr,arr1);

// var arr2=arr.concat(arr1)
        // var arr3=arr2.reduce(function(value,item,index){
        //     var list=arr2.reduce(function(value1,item1,index1){
        //         if(item===item1) value1.push(index1);
        //         return value1;
        //     },[]);
        //     if(list.length===1) value.push(item);
        //     return value;
        // },[]);

        // console.log(arr3);


        function deEmphasis(arr){
            return arr.reduce(function(value,item){
                if(value.indexOf(item)<0) value.push(item);
                return value;
            },[]);
        }

js中的hash实现历史记录访问（页面不刷新）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .menu>li {
          float: left;
          padding: 5px 20px;
          border: 1px solid #c9b8b8;
          background-color: skyblue;
          color: white;
          user-select: none;
        }
        a{
            text-decoration: none;
            color: white;
        }
        ul::after {
          content: "";
          display: block;
          height: 0;
          visibility: hidden;
          overflow: hidden;
          clear: both;
        }
        div {
          width: 1000px;
          min-height: 100px;
          background-color: antiquewhite;
        }
      </style>
</head>
<body>
    <ul class="menu">
        <li id="vegetables"><a href="#vegetables">蔬菜</a></li>
        <li id="fruit"><a href="#fruit">瓜果</a></li>
        <li id="oil"><a href="#oil">粮油</a></li>
        <li id="meat"><a href="#meat">禽肉</a></li>
      </ul>
      <div id="div1"></div>
    <script>
 var list = {
        vegetables: [
          "大白菜",
          "娃娃菜",
          "油麦菜",
          "菠菜",
          "莲藕",
          "春笋",
          "韭菜",
          "胡萝卜",
          "大葱",
        ],
        fruit: [
          "苹果",
          "西瓜",
          "柚子",
          "梨",
          "香蕉",
          "樱桃",
          "草莓",
          "榴莲",
          "桃子",
          "杏",
          "橘子",
        ],
        oil: [
          "大米",
          "小米",
          "黄米",
          "黄豆",
          "绿豆",
          "红豆",
          "精面",
          "莜面",
          "花生油",
          "大豆油",
          "橄榄油",
        ],
        meat: [
          "牛肉",
          "羊肉",
          "鸡肉",
          "猪肉",
          "鸭肉",
          "鱼肉",
          "驴肉",
          "鸡蛋",
          "鸭蛋",
        ],
      };

      var prev,div;
      init();
	  
      function init(){
          div=document.getElementById("div1");
          window.onhashchange=hashChangeHandler;
		  var vegetables = "vegetables";
		  var data = list["vegetables"];
		  changeTab(vegetables);
		  renderDiv(data);
      }

      function hashChangeHandler(e){
	  console.log(location.hash);
          var id=location.hash.slice(1);
          changeTab(id);
          var data=list[id];
          renderDiv(data);
      }

      function renderDiv(data){
          div.innerHTML="<ul>"+data.reduce(function(value,item){
                return value+"<li>"+item+"</li>";
          },"")+"</ul>";
      }


      function changeTab(id){
          if(prev){
              prev.style.backgroundColor="skyblue";
          }
          prev=document.getElementById(id);
          prev.style.backgroundColor="darkblue";
      }

    </script>
</body>
</html>

通过history访问

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .menu {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .menu>li {
        float: left;
        padding: 5px 20px;
        border: 1px solid #c9b8b8;
        background-color: skyblue;
        color: white;
        user-select: none;
      }
      ul::after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
      }
      div {
        width: 1000px;
        min-height: 100px;
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li id="vegetables">蔬菜</li>
      <li id="fruit">瓜果</li>
      <li id="oil">粮油</li>
      <li id="meat">禽肉</li>
    </ul>
    <div id="div1"></div>
    <script>
      var list = {
        vegetables: [
          "大白菜",
          "娃娃菜",
          "油麦菜",
          "菠菜",
          "莲藕",
          "春笋",
          "韭菜",
          "胡萝卜",
          "大葱",
        ],
        fruit: [
          "苹果",
          "西瓜",
          "柚子",
          "梨",
          "香蕉",
          "樱桃",
          "草莓",
          "榴莲",
          "桃子",
          "杏",
          "橘子",
        ],
        oil: [
          "大米",
          "小米",
          "黄米",
          "黄豆",
          "绿豆",
          "红豆",
          "精面",
          "莜面",
          "花生油",
          "大豆油",
          "橄榄油",
        ],
        meat: [
          "牛肉",
          "羊肉",
          "鸡肉",
          "猪肉",
          "鸭肉",
          "鱼肉",
          "驴肉",
          "鸡蛋",
          "鸭蛋",
        ],
      };
      var prev, lis,div1;

      init();
      function init() {
        div1=document.getElementById("div1");
        lis = Array.from(document.getElementsByTagName("li"));
        lis.forEach(function (item) {
          item.onclick = clickhandler;
        });
         
        changeTab(lis[0])
        var data=list[lis[0].id];
        renderDiv(data,lis[0].id);
        history.pushState(data,lis[0].id,"#"+lis[0].id);
        window.onpopstate=popHandler;
      }

      function clickhandler() {
        changeTab(this);
        var data=list[this.id];
        renderDiv(data,this.id);
        history.pushState(data,this.id,"#"+this.id);
      }

      function renderDiv(data,id){
        div1.innerHTML="<ul>"+data.reduce(function(value,item){
          return  value+="<li>"+item+"</li>"
        },"")+"</ul>";
       
      }

      function changeTab(elem) {
        if (prev) {
          prev.style.backgroundColor = "skyblue";
        }
        prev = elem;
        prev.style.backgroundColor = "darkblue";
      }

      function popHandler(e){
          if(!e.state) return;
          renderDiv(e.state,location.hash.slice(1));
          changeTab(document.getElementById(location.hash.slice(1)))
      }
    </script>
  </body>
</html>

dom节点选择

 var div1=document.querySelector("#div1");
         // div.parentElement//父元素
        // div.parentNode//父节点

        // div.children//子元素 html标签
        // div.childNodes//子节点

        // div.firstChild //第一个子节点
        // div.firstElementChild//第一个子元素

        // div.lastChild//最后一个子节点
        // div.lastElementChild//最后一个子元素

        // div.previousSibling//向上一个兄弟节点
        // div.previousElementSibling//向上一个兄弟元素

        // div.nextSibling//向下一个兄弟节点
        // div.nextElementSibling//向下一个兄弟元素

        //var elem= document.createElement("")//创建元素

        // var txtNode=document.createTextNode("文本节点");//创建文本节点

        // var elem=document.createDocumentFragment();//创建文档碎片容器

        // div.txtContent  //获取设置元素的文本节点

        // parent.insertBefore(元素,要放置的位置后元素)//插入节点

        // parent.appendChild(元素) //插入节点到尾部

        // node.cloneNode(false) //浅复制
        // node.cloneNode(true) //深复制

        // elem.remove();//删除
        // parent.removeChild(elem);//删除


        // parent.replaceChild(元素，被替换的元素)//替换元素

		var ipt=document.querySelector("input"); //若多个input标签，只用第一个，此处的ipt可对网页中第一个input进行操作



        // clientWidth clientHeight     客户宽高   边框以内的所有宽高之和-滚动条宽高
        // offsetWidth offsetHeight     偏移宽高   DOM元素在页面中占位的宽高
        // scrollWidth  scrollHeight    滚动区域宽高


		// clientLeft  clientTop   客户位置      边线宽高
        // offsetLeft  offsetTop    偏移位置     元素左上角的相对位置
        // scrollLeft  scrollTop    滚动条位置  滚动条位置  可读可写
       	// 初始化第一次渲染时，页面中的滚动条不可以设置，当第一次渲染完毕，交互时有效 



		//常用方法
        // document.addEventListener("click",clickHandler);

        // function clickHandler(e){
        //     // document.documentElement.scrollTop=300;
        //     // document.body.scrollTop=300;
        // }

        // document.addEventListener("scroll",scrollHandler);

        // function scrollHandler(e){
        //     console.log(document.documentElement.scrollTop)
        // }

在这里插入图片描述