浅拷贝、深拷贝与闭包

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量92 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55252478/article/details/126467520
版权
本文介绍了JavaScript中的递归练习，重点讲解了工厂函数、浅拷贝与深拷贝的概念，并深入探讨了闭包的原理，通过案例展示了闭包的应用。此外，还列举了字符串、数组和对象的常用方法，以及进制转换的相关知识。
摘要由CSDN通过智能技术生成

递归练习题

工厂函数

//手动书写，费时费力
var obj1 = { uname: "张三", age: 21 }
var obj2 = { uname: "李四", age: 23 }
var obj3 = { uname: "王五", age: 12 }
var obj4 = { uname: "赵六", age: 32 }
​
​
//工厂函数
function demo(uname, age) {
    var obj = new Object()
    obj.uname = uname;
    obj.age = age
​
    return obj;
}
​
console.log(demo("张三", 21))
console.log(demo("李四", 23))
console.log(demo("王五", 12))
console.log(demo("赵六", 32))
​
​
//构造函数:没有返回值
function demo(uname, age) {
    this.uname=uname;
    this.age=age
}
​
var result = new demo("张三", 21)
console.log(result)

浅拷贝与深拷贝

闭包

闭包就是 能够读取其他函数内部变量的函数

案例

  • 列表点击案例

  • 打车

字符串常用方法

  • length

  • charAt charCodeAt

  • indexOf lastIndexOf includes search

  • concat trim

  • split

  • substr( start , length ) substring( start , end) slice(start , end) replace

  • toLowerCase toUpperCase

  • parseInt(100abc) parseFloat

  • repeat

数组常用方法

  • concat join

  • shift unshift pop push 改变原数组

  • sort reverse

  • slice splice 第二个参数不一样

  • indexOf lastIndexOf includes

  • find findIndex

  • forEach map filter

  • some every

  • reduce

对象常用方法

  • 对象合并

    Object.assgin()

  • 对象解构

  • 对象转数组

进制转换

  • 十进制转二进制

    十进制 569   ===>二进制

  • 十进制转八进制

    十进制  1000  ===>八进制

00_test

<!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>test</title>
  <script>
    // function outer() {
    //   var num = 100
    //   function inner() {
    //     return num++
    //   }
    //   inner()
    // }
    // outer()
    // function
  </script>
</head>
<body>
  <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
  </ul>
</body>
<script>
  // var list = document.querySelectorAll("li")
  // // console.log(list)
  // for (var i = 0; i < list.length; i++) {
  //   (function (i) {
  //     list[i].onclick = function () {
  //       console.log(i)
  //       console.log(list[i].innerHTML)
  //     }
  //   })(i)
  // }
  /*******
   * 打车
   * 起步价：13元
   * 每公里：5元/公里
   * 拥堵费：10
   * 
   * ****/
  // function price(n) {
  //   if (n <= 3) {
  //     return 13
  //   } else {
  //     return 13 + (n - 3) * 3
  //   }
  // }
  // var car = (function () {
  //   var start = 13;
  //   var total = 0;
  //   return {
  //     price: function (n) {
  //       if (n <= 3) {
  //         total = start;
  //       } else {
  //         total = start + (n - 3) * 5
  //       }
  //       return total;
  //     },
  //     //如果拥堵
  //     block: function (flag) {
  //       // sum += 13
  //       return flag ? total + 10 : total;
  //     }
  //   }
  // })()
  // console.log(car.price(4))
  // var arr=["北京","上海","广州"]
  // var arr = [
  //   { id: 1001, name: "八戒", weight: 200 },
  //   { id: 1002, name: "悟空", weight: 120 },
  //   { id: 1003, name: "唐僧", weight: 80 },
  //   { id: 1004, name: "沙和尚", weight: 160 },
  // ]
  // var result =arr.findIndex(item=>{
  //   return item.name=="沙和尚"
  // })
  console.log(result)
  // var result = arr.find(item => {
  //   return item.weight > 100
  // })
  // console.log(result)
  // var result = arr.map((item) => {
  //   // console.log(item)
  //   return item.weight / 2
  // })
  // console.log(result)
  // var result = arr.every(item => {
  //   return item.weight > 300
  // })
  // console.log(result)
  // var result = arr.filter(item => {
  //   return item.weight > 100
  // })
  // console.log(result)
  // var arr = [4, 3, 5, 6]
  // var result = arr.reduce((total, currentValue,currentIndex,arr) => {
  //   // console.log(total)
  //   // console.log(currentValue)
  //   return total+=currentValue
  // },0)
  // console.log(result)
</script>
</html>

01_裴波那切数列

<!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>
  <script>
    // function fun(n) {
    //   if (n == 1 || n == 2) return 1;
    //   return fun(n - 1) + fun(n - 2)
    // }
    // console.log(fun(7))
    /*在控制台输出1~1000之中，所有能被5整除，或者被6整除的数字。*/
    // function fun() {
    //   for (var i = 1; i <= 1000; i++) {
    //     if (i % 5 == 0 || i % 6 == 0) {
    //       console.log(i)
    //     }
    //   }
    // }
    // fun()
    /*用户输入一个数字n，计算3/2+4/3+...+n+1/n*/
    // function fun(n) {
    //   var sum = 0;
    //   for (var i = 2; i <= n; i++) {
    //     sum += (i + 1) / i
    //   }
    //   return sum;
    // }
    // console.log(fun(3))
    /*用递归来实现分数加和运算*/
    function fun(n) {
      if (n < 2) throw Error("n不能小于2")
​
      if (n == 2) return 3 / 2
      return (n + 1) / n + fun(n - 1)
    }
    console.log(fun(1))
  </script>
</head>
<body>
</body>
</html>

02_列出所有约数

<!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>
  <script>
    /*用户输入一个数字，在控制台中列出它的所有约数。*/
    // function fun(n) {
    //   for (i = 1; i <= n; i++) {
    //     if (n % i == 0) {
    //       console.log(i)
    //     }
    //   }
    // }
    // fun(12)
    // //1 2 3 4 6 12
    /**安全数**/
    function fun() {
      for (var i = 1; i <= 60; i++) {
        if (i % 7 != 0 && i % 10 != 7) {
          console.log(i)
        }
      }
    }
    fun()
  </script>
</head>
<body>
</body>
</html>

03_水仙花数

<!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>
  <script>
    // 5**3    Math.pow(5,3)
    function fun() {
      for (var i = 100; i < 1000; i++) {
        //分别取百位、十位和个位的数字
        var sum = parseInt(i / 100) ** 3 + parseInt(i / 10 % 10) ** 3 + parseInt(i % 10) ** 3
        if (sum == i) {
          console.log(i)
        }
      }
    }
    fun()
  </script>
</head>
<body>
</body>
</html>

04_深拷贝与浅拷贝

<!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>
  <script>
  </script>
</head>
<body>
</body>
</html>

05数组相关函数

<!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>
  <script>
    // var str1 = "北京"
    // var str2 = "欢迎你";
    // console.log(str1.concat(str2))      //字符串拼接
    /*****元素操作*****/
    // var city1 = ["北京", "上海", "广州", "深圳"]
    // city1.push("郑州")
    // console.log(city1)
    // city1.pop()
    // console.log(city1)
    // city1.unshift("郑州")
    // console.log(city1)
    // city1.shift()
    // console.log(city1)
    /**数组排序**/
    // var arr = [23, 45, 12, 56, 39]
    // arr.sort((a, b) => {
    //   // console.log(a, b, "****")
    //   // return a - b
    //   return b - a
    // })
    // console.log(arr)
    /**翻转数组**/
    // var arr = ["北京", "上海", "广州", "深圳"]
    // console.log(arr.reverse())
    // console.log(arr)
    /**数组元素的截取和替换**/
    // var arr = ["北京", "上海", "广州", "深圳"]
    // // var result = arr.slice(1,2)            //截取： 第2个参数是下标
    // var result = arr.splice(1, 1, "杭州")     //替换：第2个参数是length
    // // console.log(result)
    // console.log(arr)
    /****数组下标相关的函数******/
    // var person = ["唐僧", "八戒", "悟空", "八戒", "沙僧", "八戒"]
    // console.log(person.indexOf("八戒"))
    // console.log(person.lastIndexOf("八戒"))
    /**包含**/
    // console.log(person.includes("白龙马"))
    // var result = person.find((item) => {
    //   return item == "八戒"
    // })
    // console.log(result)
    /**数组循环**/
    var arr = [
      { id: 1001, name: "八戒", weight: 200 },
      { id: 1002, name: "悟空", weight: 120 },
      { id: 1003, name: "唐僧", weight: 80 },
      { id: 1004, name: "沙僧", weight: 160 },
    ]
    // arr.forEach((item, index) => {
    //   // item.weight = 100       //修改item中已经存在的属性weight
    //   item.age = 200              //为item中添加新属性
    // })
    // console.log(arr)
    /***for循环遍历数组***/
    // for (var i = 0; i < arr.length; i++) {
    //   // console.log(i)
    //   console.log(arr[i])
    // }
    /****使用in关键字遍历数组:每一项是下标*******/
    // for (var k in arr) {     
    //   // console.log(k)
    //   console.log(arr[k])
    // }
    /********使用of遍历数组：循环出的是数组的每一项**********/
    // for (i of arr) {
    //   console.log(i)
    // }
    /****使用in可以遍历对象********/
    var obj = { uname: "张三", age: 21 }
    // for (var k in obj) {
    //   // console.log(k)
    //   console.log(obj[k])
    // }
    // for (var i of obj) {
    //   console.log(i)
    // }
    // 区间     [12,45)     (12,45]  
    // var city2 = ["郑州", "杭州"]
    // ["北京", "上海", "广州", "深圳", "郑州"]
    // city1.push(...city2)
    // console.log(city1)
    // console.log(city1.concat(city2))
  </script>
</head>
<body>
</body>
</html>

06_字符串相关函数

<!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>
  <script>
    //字符串和数组相互转换
    // var str = "北京 上海 广州 深圳"
    // var arr = str.split(" ")      //字符串转数组
    // var newStr = arr.join("-")    //数组转字符串
    // console.log(newStr)
    // console.log(arr)
    /*******截取字符串*******/
    // var str = "北京欢迎你"
    // var result = str.substr(2, 2)        //第二个参数是length
    // console.log(result)
    // var result = str.substring(2, 4)        //第二个参数是下标    [start,end)  左闭右开区间
    // console.log(result)
    //替换 replace
    // var str="北京非常欢迎你"
    // var result=str.replace("非常","十分")
    // console.log(result)
  </script>
</head>
<body>
</body>
</html>

07_数组es6函数

<!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>
  <script>
    // var arr = [
    //   { id: 1001, name: "八戒", weight: 200 },
    //   { id: 1002, name: "悟空", weight: 120 },
    //   { id: 1003, name: "唐僧", weight: 80 },
    //   { id: 1004, name: "沙和尚", weight: 160 },
    // ]
    //every函数：所有item都满足条件，返回true;只要有一个不满足条件，则返回false
    // var result = arr.every((item) => {
    //   // return item.weight > 50
    //   // return item.weight > 100
    //   return item.weight > 250
    // })
    // console.log(result)
    //some:只要有一个满足条件，就返回true；所有item都不满足条件，返回false
    // var result = arr.some((item) => {
    //   // return item.weight > 100
    //   // return item.weight > 180
    //   return item.weight > 250        //所有item都不满足条件，返回false
    // })
    // console.log(result)
    //map函数:返回处理之后的数组
    // var arr = [1, 4, 5, 7]
    // var result = arr.map(item => {
    //   return item ** 3
    // })
    // console.log(result)
    //reduce的使用：求和
    var arr = [1, 4, 5, 7]
    // var sum = 0;
    // for (var i = 0; i < arr.length; i++) {
    //   sum += arr[i]
    // }
    // console.log(sum)
    var result = arr.reduce((total, item) => {
      return total += item;
    },0)
    console.log(result)
    //寻找第一个满足条件的item
    // var result = arr.find((item, index) => {
    //   // console.log(item, index)
    //   return item.weight > 100
    // })
    // console.log(result)
    //寻找所有满足条件的item
    // var result = arr.filter(item => {
    //   return item.weight > 100
    // })
    // var result = arr.filter(item => item.weight > 100)
    // console.log(result)
  </script>
</head>
<body>
</body>
</html>

08_工厂函数

<!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>
  <script>
    var obj1 = { uname: "张三", age: 21 }
    var obj2 = { uname: "李四", age: 23 }
    var obj3 = { uname: "王五", age: 12 }
    var obj4 = { uname: "赵六", age: 32 }
    //工厂函数
    function demo(uname, age) {
      var obj = new Object()
      obj.uname = uname;
      obj.age = age
      return obj;
    }
    console.log(demo("张三", 21))
    console.log(demo("李四", 23))
    console.log(demo("王五", 12))
    console.log(demo("赵六", 32))
    //构造函数:没有返回值
    function demo(uname, age) {
      this.uname=uname;
      this.age=age
    }
    var result = new demo("张三", 21)
    console.log(result)
    //es5继承
    function Father(uname, age) {
      this.uname = uname;
      this.age = age;
      this.say = function () {
        return `我是${this.uname}，今年${this.age}岁`
      }
    }
    function Son(uname, age) {
      /**
       * 改变this指向的三种方法
       * 1. call(this,uname,age)      立即执行
       * 2. apply(this,[uname,age])   立即执行
       * 3. bind(this,uname,age)      不会立即执行
       * **/
      Father.call(this, uname, age)
      this.exam = function () {
        return `我是${this.uname}，我需要考试`
      }
    }
    var s = new Son("小明", 12)
    console.log(s.say())
  </script>
</head>
<body>
</body>
</html>

09_浅拷贝与深拷贝

<!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>
  <script>
    /******引用数据类型**********/
    // var obj1 = { uname: "张三" }
    // var obj2 = obj1;     //{uname:"张三"}
    // obj2.uname="李四"    //{uname:"李四"}
    // console.log(obj1)
    /*****简单数据类型********/
    // var str1 = "北京"
    // var str2 = str1;      //"北京"
    // str2 = "上海"
    // console.log(str1)
    var obj1 = {
      uname: "张三",
      age: 21,
    }
    //
    var obj2 = {}
    for (var k in obj1) {
      obj2[k] = obj1[k]
    }
    // console.log(obj2)
    obj2.uname="李四"
    console.log(obj1)
  </script>
</head>
<body>
</body>
</html>
weixin_55252478
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何实现数组深拷贝和浅拷贝？
IT修真院：初学者转行到互联网的聚集地
05-17 3079
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【如何实现数组深拷贝和浅拷贝？】 大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员 今天给大家分享一下，修真院官网JS任务4，深度思考中的知识点——如何实现数组深拷贝和浅拷贝...
什么是闭包、深浅拷贝...........
lipenghao111的博客
03-27 122
函数外面有个变量，我们在函数里面访问一下，这就产生了闭包,好处：可以重复使用，避免污染全局变量，闭包可以用来保存一个需要持久保存的变量，避免垃圾回收,坏处:不能被销毁，增大内存消耗，造成内存泄漏解决方法：我们可以手动把变量赋值成null。
浅拷贝与深拷贝
qq_45954420的博客
04-21 1194
一、对浅拷贝与深拷贝的理解 浅拷贝和深拷贝是针对引用数据类型而言的，对于基本数据类型是没有深浅拷贝的概念。 二、从存储的角度理解 js的基本数据类型(String,Number,Boolean,null,Undefined)是存在栈内存的，当发生赋值b=a时会直接在栈内存中开辟一个新空间。a和b是两块独立的空间。修改b不会影响a的值。 而js对于引用数据类型object。存储时会在栈内存存储引用（堆内存中存值的地址），堆内存存储真正的值，栈内存中的引用指向堆内存的值。 当发生 = 的赋值操作 b
（JS three）闭包，浅拷贝，深拷贝
weixin_53412458的博客
12-26 570
闭包、浅拷贝、深拷贝
深拷贝、浅拷贝
xiaoxu的博客
10-08 189
基本概念 栈内存 js基本数据类型：String、Number、Boolean、Null、Undefined、Symbol是直接存储在栈中的数据，因为基本数据类型占用空间小，大小固定。 堆内存 js引用数据类型：Object、Array是在存储其引用在栈中的，真实数据是存储在堆中。因为引用数据类型占用空间大，大小不固定。 要访问堆内存中的数据时，是先从栈中获取该对象的引用，再从堆中取数据。 浅拷贝 对引用类型数据，只拷贝引用，而不复制对象本身，新旧对象还是共享同一块内存。 深拷贝 对引用类型数据，拷贝对象本
关于深拷贝与浅拷贝
前端杂谈一二三
07-15 141
相关理解 堆和栈 堆和栈是内存中划分出来用来存储的区域。栈为自动分配的内存空间，由系统自动来释放；而堆则是动态分配的内存，大小不定且不会自动释放。 ECAMScript数据类型 基本数据类型： string, number boolean symbol null undefined 存放在栈内存中，基本数据类型的数据大小确定，内存空间大小可以分配，是直接按值存放的，所以可以直接访问 基本...
浅拷贝.深拷贝.闭包
weixin_61603315的博客
08-23 110
js
JavaScript 高级部分 之赋值、浅拷贝与深拷贝
Andrelia的博客
10-25 272
浅拷贝与深拷贝 前言 你可能会经常遇到操作数组、对象的情况，然后你肯定会将原数组、对象进行‘备份’ 当真正对其操作时发现备份的也发生改变，此时你一脸懵逼，到时是为啥，不是已经备份了么，怎么备份的数组、对象也会发生变化。那么你就需要了解一下浅拷贝和深拷贝。 数据类型 ECMAScript变量包含两种不同数据类型的值：基本数据类型和引用数据类型。 基本数据类型的特点：直接存储在栈（stack）中的...
闭包、递归和浅拷贝与深拷贝
凉茶铺的博客
01-01 621
介绍了JavaScript的闭包、递归和浅拷贝与深拷贝
javascript深拷贝(deepClone)详解
10-21
这与浅拷贝形成对比，浅拷贝只会复制对象的引用，导致修改新对象时会影响到原始对象。 在JavaScript中，深拷贝通常用于避免两个对象之间的相互影响，特别是在处理复杂数据结构如嵌套的对象和数组时。下面我们将深入...
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
09-17
在Python中，拷贝分为浅拷贝（`copy()`）和深拷贝（`deepcopy()`）。浅拷贝只复制对象的引用，而深拷贝会创建全新的对象。 - **浅拷贝**：只拷贝对象的表面一层，对于复杂的数据结构，如列表中的子列表或字典中的子...
解析Python中的变量、引用、拷贝和作用域的问题
09-22
4. 浅拷贝与深拷贝： 当你需要复制可变对象时，简单的赋值操作（如`b = a`）不会创建新对象，而是让`b`指向`a`相同的对象。为了创建副本，可以使用`copy`模块的`copy()`（浅拷贝）和`deepcopy()`（深拷贝）方法。 ...
你不知道的 javascript【推荐】
10-20
在本文中，我们将探讨一些可能不为人知的JavaScript知识点，包括对象、原型、深拷贝、浅拷贝、函数等方面。 首先，JavaScript中的对象是其核心特性之一。简单类型如数字、字符串、布尔值以及null和undefined不是...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 617
注释很详细，直接上代码……
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 257
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 330
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 955
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
JavaScript高级面试题：深拷贝与浅拷贝、闭包解析
"JavaScript 高级阶段面试题，包括值类型和引用类型的区别，深拷贝与浅拷贝的概念及实现，以及闭包的理解和应用。" 在 JavaScript 中，值类型和引用类型是两种基本的数据存储方式，它们具有显著的区别： 1. **值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值