首页 > 其他分享 >【React工作记录一百一十六】前端小知识点扫盲笔记记录14

【React工作记录一百一十六】前端小知识点扫盲笔记记录14

时间：2023-06-20 18:04:49浏览次数：51  
标签：function 知识点 return 14 记录 console key obj log

前言

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结

根据每个元素i属性进行排序

<!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>排序</title>
	</head>
	<body>
		<script>
			        var ar=[{i:5,v:1},{i:2,v:4},{i:3,v:2},{i:1,v:5}]
			        ar.sort(function(a,b){
			            return a.i-b.i
			        })
			        console.log(ar,"ar")
			       
			        // {i: 1, v: 5}
                    // {i: 2, v: 4}
                    // {i: 3, v: 2}
                    // {i: 5, v: 1}
		</script>
	</body>
</html>

检测一个变量是string类型

<!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>检测变量是string类型</title>
</head>
<body>
  <script>
    //true
    var geyao="hello geyao"
    function stringBoolean(str){
      if(typeof str == "string"||str.constructor==String){
        return true
      }else{
        return false
      }
    }
  </script>
</body>
</html>

模块模式

<!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>模块模式</title>
</head>
<body>
  <script>
    //适合那些单列必须是某种类型的实例，同时还必须添加某些属性或方法对其加以增强的情况
    function CustomType() {
    this.name = "歌谣";
};
CustomType.prototype.getName = function(){
    return this.name;
}
var application = (function(){
    // 定义私有
    var privateA = "方方";
    // 定义私有函数
    function A(){};

    // 实例化一个对象后，返回该实例，然后为该实例增加一些公有属性和方法
    var object = new CustomType();

    // 添加公有属性
    object.A = "康康";
    // 添加公有方法
    object.B = function(){
        return privateA;
    }
    // 返回该对象
    return object;
})();
  </script>
</body>
</html>

模拟hashTable类包含add remove等

<!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>
</head>
<body>
    <script>
        function Hashtable(){
            this.container=new Object()

            this.put=function(key,value){
                if(typeof(key)=="undefined"){
                    return false
                }
                if(this.container(key)){
                    return false
                }
                this.container[key]=typeof(value)=="undefind"?null:value
                return true
            }
            this.remove=function(key){
                delete this.container[key]
            }
            this.size=function(){
                var size=0;
                for(var attr in this.container){
                    size++
                }
                return size
            }
            this.get=function(key){
                return this.container[key]
            }
            this.container=function(key){
                return typeof(this.container[key]!="undefined")
            }

            this.clear=function(){
                for(var attr in this.container){
                    delete this.container[attr]
                }
            }
            this.toString=function(){
                var str=""
                for(var attr in this.container){
                    str+=","+attr+"="+this.container[atr]
                }
                if(str.length>0){
                    str=str.substr(1,str.length)
                }
                return "("+str+")"
            }
        }
    </script>
</body>
</html>

求阶乘

<!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>求阶乘</title>
</head>
<body>
    <!-- 模拟面试之阶乘题 前端巅峰人才交流群私信我-->
    <!-- 求n得阶乘 递归-->
    <script>
        function geyao(N){
            return N=1?1:geyao(N-1)*N
        }
    </script>
</body>
</html>

浅拷贝实现方式

<!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>浅拷贝实现方式assign</title>
</head>
<body>
  <script>
    //浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，
    //拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象
    //任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象
    let obj1 = {
      person: {
        name: "geyao",
        age: 18
      },
      sports: 'basketball'
    };
    let obj2 = Object.assign({}, obj1);
    obj2.person.name = "fangfang";
    obj2.sports = 'football'
    console.log(obj1); // { person: { name: '小红', age: 18 }, sports: 'basketball' }
    console.log(obj2); // { person: { name: '小红', age: 18 }, sports: 'football' }
    obj1.person.name = "小红";
    console.log(obj1);//{ person: { name: '小红', age: 18 }, sports: 'basketball' }
    console.log(obj2); // { person: { name: '小红', age: 18 }, sports: 'football' }
  </script>
</body>
</html>

浅拷贝实现方式

<!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>浅拷贝实现方式2</title>
</head>
<body>
  <script>
    let obj1 = {
      name: '歌谣',
      address: {
        x: 100,
        y: 100
      }
    }
    let obj2 = {
      ...obj1
    }
    obj1.address.x = 200;
    obj1.name = '方方'
    console.log('obj2', obj2) // obj2 { name: '方方', address: { x: 200, y: 100 } }
  </script>
</body>

</html>

浅拷贝实现方式

<!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>concat</title>
</head>

<body>
  <script>
    let arr = [1, 3, {
      username: '歌谣'
    }];
    let arr2 = arr.concat();
    arr2[2].username = '方方';
    console.log(arr); //[ 1, 3, { username: '方方' } ]
  </script>
</body>

</html>

浅拷贝实现方式4

<!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>浅拷贝实现方式4</title>
</head>

<body>
  <script>
    let arr = [1, 3, {
      username: ' 歌谣'
    }];
    let arr3 = arr.slice();
    arr3[2].username = '方方'
    console.log(arr); // [ 1, 3, { username: '方方' } ]
  </script>
</body>

</html>

深拷贝

<!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>深拷贝</title>
</head>

<body>
  <script>
    function deepClone(obj, hash = new WeakMap()) {
      console.log(hash,"hash")
      if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
      if (obj instanceof Date) return new Date(obj);
      if (obj instanceof RegExp) return new RegExp(obj);
      // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
      if (typeof obj !== "object") return obj;
      // 是对象的话就要进行深拷贝
      if (hash.get(obj))
      
      return hash.get(obj);
      let cloneObj = new obj.constructor();
      console.log(cloneObj,"cloneObjtest")
      // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
      hash.set(obj, cloneObj);
      for (let key in obj) {
          console.log(key,"key")
          console.log(obj[key],"obj[key]")
          console.log(hash,"hashList")
        if (obj.hasOwnProperty(key)) {
          // 实现一个递归拷贝
          cloneObj[key] = deepClone(obj[key], hash);
          console.log( cloneObj[key],"cloneObj")
        }
      }
      return cloneObj;
    }
    let obj = {
      name: 1,
      address: {
        x: 100
      }
    };
    obj.o = obj; // 对象存在循环引用的情况
    let d = deepClone(obj);
    obj.address.x = 200;
    console.log(d);
  </script>
</body>

</html>

总结

我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣

标签：function,知识点,return,14,记录,console,key,obj,log
From： https://blog.51cto.com/u_14476028/6524009

相关文章

  • 【React工作记录一百一十七】hook项目实例之原始数据形成ant design table表格
    前言大家好我是歌谣由于项目最近使用的数据统一由postgrest定义所以返回的数据只能是各个表之间的层级关系数据格式[{"id":1,"code":"JP","name":"皮夹克","t_base_style":[{"id":66,"code&......
  • 5步带你玩转SpringBoot自定义自动配置那些知识点
    目前SpringBoot框架真的深受广大开发者喜爱，毕竟它最大的特点就是：快速构建基于Spring的应用程序的框架，而且它提供了各种默认的功能和配置，可以让开发者快速搭建应用程序的基础结构。但是，当我们需要自定义一些配置时，我们就需要使用自定义自动配置。今天一定让大家深刻体验干货知识点......
  • Windows 2008服务器多界面和IIS的安装教程 140.210.16.x
    当你在使用服务器时是否有遇到这样一个问题？当你正在服务器里进行工作时，突然一个小伙伴在没有告知你的情况下进入了服务器里，导致你服务器失去连接了，这种情况是非常常见的现象。主要原因就是因为服务器没有安装多界面，服务器多开界面是占用的同一台服务器的资源，服务器多开数量没有限制......
  • 云服务器使用记录-20230620
    三丰云免费云服务器确实是一款值得推荐的云计算服务。它提供了多种类型和多线程的服务，同时也提供高性能、高安全性和高稳定性的云计算服务，非常适合广大用户的需求。使用虚拟主机可以帮助您轻松地管理您的网站和应用程序，并且在处理高流量时具有更好的性能和稳定性。此外，三丰云还提供......
  • 虚拟主机使用记录-20230620
    三丰云提供的免费虚拟主机和免费云服务器对于学生和初学者来说非常有吸引力，并且易于使用。同时，三丰云也提供付费计划，可以为更高级别的用户提供更多资源和功能支持。需要注意的是，免费服务通常会受到一些限制和局限性。因此，在选择免费主机或云服务器时，需要根据实际需求进行评估，以确保......
  • labview和西门子plc通信 知识点和领域范围：LabVIEW、西门子PLC、通信
    labview和西门子plc通信知识点和领域范围：LabVIEW、西门子PLC、通信LabVIEW是一种图形化编程环境，用于控制和测量系统的设计和开发。它提供了一个直观的界面，使工程师能够通过拖放和连接图标来创建程序。西门子PLC（可编程逻辑控制器）是一种常用的工业自动化设备，用于控制和监控生产过程......
  • labview和西门子plc走以太网通信 这段话涉及到的知识点是LabVIEW和西
    labview和西门子plc走以太网通信这段话涉及到的知识点是LabVIEW和西门子PLC的以太网通信。LabVIEW是一种图形化编程环境，用于控制、测量和监视各种设备和系统。它可以与各种硬件设备进行通信，并提供了丰富的功能和工具来处理数据和执行自动化任务。西门子PLC（可编程逻辑控制器）是一种......
  • 解决PostgreSQL分组聚合时SELECT中字段必须在group或聚合函数中的问题（转自知乎仅供自
    PG的分组函数是比较严格的。你的select字段必须得存在于group子句、或者聚合函数中才行。假设场景是这样的：表结构name、class、score我现在要按照name分组，聚合score数据，还能查出额外的这个class字段如果是MySQL，你可以直接groupname然后selectclass，avg(score)，但是你在P......
  • LTV-5314-ASEMI代理光宝IGBT驱动器LTV-5314
    编辑：llLTV-5314-ASEMI代理光宝IGBT驱动器LTV-5314型号：LTV-5314品牌：台湾光宝封装：SOP-5工作温度：-40°C~110°CLTV-5314特性：1.5A最大峰值输出电流1.0A最小峰值输出电流轨对轨输出电压150ns最大传播延迟100ns最大传播延迟差带滞后的欠压锁定保护（UVLO）VCM=1000V时的35kV/us最小共模......
  • GIT 常见操作记录
    常规使用#查看当前分支gitbranch#创建分支gitbranchdev#创建并切换分支gitcheckout-bdev#切换已有分支gitcheckoutdev#提交gitadd-A#保存所有修改gitadd.#保存新建和修改，不包括删除gitadd-u#保存修改和删除，不包括新建#gitcommit......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99