JavaScript进阶部分知识总结

作用域

局部作用域

  • 作用域规定了变量能够被访问的范围,离开了这个范围变量就不能被访问
  • 作用域分为:局部作用域和全局作用域

局部作用域分为函数作用域和块作用域

1.函数作用域

在函数内部声明的变量只能在函数内部被访问,外部无法直接访问

总结:

  1. 函数内部声明的变量,在函数外部无法直接访问
  2. 函数的参数也是函数内部的局部变量
  3. 不同函数内部声明的变量无法互相访问
  4. 函数执行完毕后,函数内部的变量实际被清空了

2.块作用域:

在JavaScript中使用{}包裹的代码称为代码块,代码块内部声明的变量外部将有可能无法被访问

  1. let声明的变量会产生块级作用域,var不会产生块作用域
  2. const声明的常量也会产生块作用域
  3. 不同代码块之间的变量无法互相访问
  4. 推荐使用let或const

全局作用域

<script>标签和.js文件的最外层就是所谓的全局作用域,在此声明的变量在函数内部也可以被访问

全局作用域中声明的变量,任何其他作用域都可以被访问

注意:

  1. 为window对象动态添加的属性默认也是全局的,不推荐!
  2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!
  3. 尽可能少的声明全局变量,防止全局变量被污染

作用域链

作用域链本质上是底层的变量查找机制

在函数被执行时,会优先查找当前函数作用域中查找变量

如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

总结:

  • 嵌套关系的作用域串联起来形成了作用域链
  • 相同作用域链中按照从小到大的规则查找变量
  • 子作用域能够访问父作用域,父级作用域无法访问子级作用域

JS垃圾回收机制

  • 垃圾回收机制(Garbage Collection)简称GC
  • JS中内存的分配和回收都是自动完成的,内存在不使用的时候会被垃圾回收器自动回收

JS环境中分配的内存,一般有如下生命周期

  1. 内存分配:当我们声明变量、函数、对象的时候,系统会自动为他们分配内存
  2. 内存使用:即读写内存,也就是使用变量,函数等
  3. 内存回收:使用完毕,由垃圾回收器自动回收不再使用的内存

说明:

  • 全局变量一般不会回收(关闭页面回收)
  • 一般情况下局部变量的值,不用了,会被自动回收掉
  • 内存泄漏:程序中分配的内存由于某种原因程序未释放或无法释放叫做内存泄漏

JS垃圾回收机制算法说明

堆栈空间分配区别

1.栈(操作系统):由操作系统自动分配释放函数的参数值,局部变量等,基本数据类型放到栈里面。

2.堆(操作系统):一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收,复杂数据类型放到堆里面

引用计数

IE采用的引用计数算法,定义“内存不再使用”,就是看一个对象是否有指向它的引用,没有引用了就回收对象·

算法:

  1. 跟踪记录被引用的次数
  2. 如果引用了一次,那么就记录次数1,多次引用会累加++
  3. 如果减少一个引用就减1 --
  4. 如果引用次数是0,则释放内存
    function fn(){
      let o1={}
      let o2={}
      o1.a=o2
      o2.a=o1
      return '引用计数无法回收'
    }

但引用计数存在一个致命的问题:嵌套引用(循环引用)

如果两个对象相互引用,尽管他们已不再使用,垃圾回收机制不会进行回收,导致内存泄漏

因为他们的引用次数永远不会为0,这样的相互引用如果说很大量的存在就会导致大量的内存泄漏

标记清除法:

现代的浏览器已经不再使用引用计数算法了

现代浏览器通用的大多是基于标记清除法算法的某些改进算法,总体思想都是一致的。

核心:

  1. 标记清除算法将“不再使用的对象”定义为“无法达到的对象”
  2. 就是从根部(在JS中就是全局对象)出发定时扫描内存中的对象,凡是能从根部到达的对象,都是还需要使用的
  3. 那些无法由根部出发触及到的对象被标记为不再使用,稍后进行回收。

闭包

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到外层函数的作用域

简单理解:闭包=内层函数+外层函数的变量(里层函数用到了外层函数的变量,二者缺一不可)

闭包作用:封闭数据,实现数据私有,外部也可以访问函数内部的变量,它允许将函数与其所操作的某些数据(环境)关联起来

闭包的基本格式

    // 简单的闭包形式
    // function outer(){
    //   const a=1
    //   function f(){
    //     console.log(a)
    //   }
    //   f()
    // }
    // outer()
    // 常见的闭包样式 外部可以访问函数内部的变量
    function outer(){
      let a=10
      function fn(){
        console.log(a)
      }
      return fn
    }
    // outer() ===fn  ===function fn(){}
    // const fun=function fn(){}
    const fun=outer()
    fun()//调用函数

闭包应用: 实现数据的私有

比如,做个统计函数调用次数,函数调用一次,就++

    let i=0
    function fn(){
      i++
      console.log(`函数被调用了${i}次`)
    }

 此处的i是全局变量,很容易遭到篡改

    // 闭包形式 统计函数调用的次数
    function count(){
      let i=0
      function fn(){
        i++
        console.log(i)
      }
      return fn
    }
    const fun=count()

这样就实现了数据私有,无法直接修改i,且文件不关闭,i不会被回收,因为fun为全局变量,fun会一直调用函数,故虽然i为局部变量,但调用完之后不会立刻销毁,由于fn使得i这个该回收的变量并未回收,这也是内存泄漏现象

变量提升

变量提升是JavaScript中比较”奇怪“的现象,它允许在变量声明之前即被访问(仅存在于var声明变量)

流程:先把var变量提升到当前作用域最前面,只提升变量,不提升赋值,然后依次执行代码

注意:

  1. 变量在未声明即被访问时会报语法错误
  2. 变量在var声明之前即被访问,变量的值为undefined
  3. let/const声明的变量不存在变量提升
  4. 变量提升出现在相同作用域中
  5. 实际开发中推荐先声明再访问变量
    // 1.把所有var声明的变量提升到 当前作用域的最前面
    // 2.只提升声明 不提升赋值
    // var num
    // console.log(num+'件')//undefined件
    // var num=10
    function fn(){
      console.log(num)//undefined
      var num=10
    }
    fn()

函数进阶

函数提升

函数提升与变量提升比较类似,是指函数在声明之前即可被调用。

    // 1.会把所有函数声明提升到当前作用域的最前面
    //2.只提升函数声明 不提升函数调用
    fn()
    function fn(){
      console.log('函数提升')
    }
    //错误
    fun()//var变量提升 但赋值不会提升
    var fun=function(){//相当于给变量赋值
      console.log('函数表达式')
    }//函数表达式必须先生命和赋值 后调用 否则 报错

总结:

  1. 函数提升能够使函数的声明更灵活
  2. 函数表达式不存在提升的现象
  3. 函数提升出现在相同作用域当中 

函数参数

动态参数

例如:写一个求和函数

不管用户传入几个实参,都要把和求出来

    function getSum(){
      //arguments 动态参数 只存在于函数里面
      //1.是伪数组
      // console.log(arguments)
      let sum=0
      for(let i=0;i<arguments.length;i++){
        sum+=arguments[i]
      }
      console.log(sum)
    }
    getSum(2,3,4)
    getSum(1,2,3,4,2,2,3,4)

剩余参数

剩余参数允许我们将一个不定数量的参数表示为一个数组

  1. ...是语法符号,置于最末函数形参之前,用于获取多余的实参
  2. 借助...获取的剩余实参,是个真数组
    function getSum(a,b,...arr){//用户至少输入两个数据
      console.log(arr)
    }
    getSum(2,3)//2传给a,3传给b
    getSum(1,2,3)//3传给arr,1,2分别传给a,b

提倡多使用剩余参数 

展开运算符

展开运动符(...),将一个数组进行展开

    const arr=[1,2,3]
    console.log(...arr)

说明:

不会修改原数组

典型运用场景(作用):求数组最大值(最小值)、合并数组等

    // 1.求数组最大值
    // ...arr===1,2,3
    console.log(Math.max(...arr))
    // 2.合并数组
    const arr2=[3,4,5]
    const arr3=[...arr,...arr2]
    console.log(arr3)

展开运算符和剩余参数区别

 剩余参数:函数参数使用,得到真数组

展开运算符:数组中展开,数组展开

箭头参数

目的:引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁

使用场景:箭头函数更适用于那些本来需要匿名函数的地方

基本语法

    //1.箭头函数
    // const fn=()=>{
    //   console.log(123)
    // }
    // const fn=(x)=>{
    //   console.log(x)
    // }
    // fn(1)
    //2.只有一个形参的时候可以省略小括号
    // const fn=x=>{
    //   console.log(x)
    // }
    // fn(1)
    // 3.只有一行代码的时候可以省略大括号
    // const fn=x=>console.log(x)
    // fn(1)
      // const fn=x=>{
      //   return x+x
      // }
      // 4.只有一行代码的时候 可以省略return
      const fn=x=>x+x
      console.log(fn(1))//2
    // 5.箭头函数可以直接返回一个对象
    const fn=()=>({name:uname})//加小括号区分对象与函数的大括号
    console.log(fn('刘德华'))
  1.  箭头函数属于表达式函数,因此不存在函数提升
  2. 箭头函数只有一个参数时可以省略圆括号()
  3. 箭头函数函数体只有一行代码时可以省略花括号{},并自动作为返回值被返回
  4. 加括号的函数体返回对象字面量表达式

箭头函数的参数

1.普通函数有arguments动态参数

2.箭头函数没有arguments动态参数,但是有剩余参数...args

    // 1.利用箭头函数来求和
    const getSum=(...arr)=>{
      let sum=0
      for(let i=0;i<arr.length;i++){
        sum+=arr[i]
      }
      return sum
    }
    const result=getSum(2,3,4)
    console.log(result)

箭头函数this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this

    //1.以前this的指向:  谁调用的这个函数,this就指向谁
    console.log(this)//window
    function fn(){
      console.log(this)//window
    }
    window.fn()
    //对象方法里的this
    // const obj={
    //   name:'andy',
    //   sayHi:function(){
    //     console.log(this)//obj
    //   }
    // }
    obj.sayHi()
    // 2.箭头函数的this 是上一次作用域的this 指向
    const fn=()=>{
      console.log(this)//window
    }
    fn()
    // 对象方法的箭头函数 this
    // const obj={
    //   uname:'pink老师',
    //   sayHi:()=>{
    //     console.log(this)//window
    //   }
    // }
    const obj={
      uname:'pink老师',
      sayHi:function(){
        let i=10
        const count=()=>{
          console.log(this)//obj
        }
        count()
      }
    }
    obj.sayHi()

在开发中怕【使用箭头函数前需要考虑函数中this的值】,事件回调函数使用箭头函数时,this为全局的window,因此DOM事件回调函数为了简便,还是不太推荐使用箭头函数 

解构赋值

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

基本语法:

  1. 赋值运算符=左侧的[]用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
    const arr=[100,60,80]
    //数组解构赋值
    // const  max=arr[0]
    // const min=arr[1]
    // const avg=arr[2]
    // const [max,min,avg]=arr
    const [max,min,avg]=[100,60,80]
    console.log(max)//100
    console.log(min)//60
    console.log(avg)//80

交换两个变量案例

    let a=1
    let b=2;//注意加分号
    [b,a]=[a,b]
    console.log(a,b)

js前面必须加分号情况

1.立即执行函数

    (function t(){})();
    //或者
    ;(function t(){})()

2.数组解构

    // 数组开头的 特别是前面有语句的一定注意加分号
    ;[b,a]=[a,b]
    const arr=[1,2,3]
    const str='pink';
    [1,2,3].map(function(item){
      console.log(item)
    })

独立完成数组解构赋值

需求1:有个数组:const pc=['海尔','联想','小米','方正']

解构为变量:hr,lx,mi,fz

需求2:请将最大值和最小值函数返回解构max和min两个变量

变量多 单元值少的情况:

    const[a,b,c,d]=[1,2,3]
    console.log(a)//1
    console.log(b)//2
    console.log(c)//3
    console.log(d)//undefined

利用剩余参数解决变量少 单元值多的情况:

    const [a,b,...c]=[1,2,3,4]
    console.log(a)//1
    console.log(b)//2
    console.log(c)//[3,4]

防止undefined传递单元值的情况 可以设置默认值

    const[a=0,b=0]=[1,2]
    console.log(a)//1
    console.log(b)//2

按需导入赋值

    const [a,b, ,d]=[1,2,3,4]
    console.log(a)//1
    console.log(b)//2
    console.log(d)//4

 支持多维数组的解构:

    const [a,b,c]=[1,2,[3,4]]
    console.log(a)//1
    console.log(b)//2
    console.log(c)//[3,4]
    console.log(c[0])//3

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法

  1. 赋值运算符=左侧的{}用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 注意解构的变量名不要和外面的变量名冲突否则报错
  4. 对象中找不到与变量名一致的属性时变量值为undefined
    //对象解构
    const obj={
      uname:'pink老师',
      age:18
    }
    // 解构的语法
    // const uname=' red老师'
    // const {uname,age}={uname:'pink老师',age:18}
    // //等价于 const uname=obj.uname
    // //要求属性名和变量名必须一致才可以
    // console.log(uname)
    // console.log(age)
    // 1.对象解构的变量名 可以重新改名 旧变量名:新变量名
    // const {uname:username,age}={uname:'pink老师',age:18}
    // console.log(username)
    // console.log(age)
    // 2.解构数组对象
    const pig=[{
      uname:'佩奇'
      ,age:6
    }]
    const [{uname,age}]=pig
    console.log(uname)
    console.log(age)

多级对象解构:

    const pig={
      name:'佩奇',
      family:{
        mother:'猪妈妈',
        father:'猪爸爸',
        sister:'乔治'
      },
      age:6
    }
    // 多级对象解构
    // const {name,family:{mother,father,sister}}=pig
    // console.log(name)
    // console.log(mother)
    // console.log(father)
    // console.log(sister)
    const person=[{
      name:'佩奇',
      family:{
        mother:'猪妈妈',
        father:'猪爸爸',
        sister:'乔治'
      },
      age:6
    }]
    const [{name,family:{mother,father,sister}}]=person
    console.log(name)
    console.log(mother)
    console.log(father)
    console.log(sister)

多级对象解构案例:

    // 1. 这是后台传递过来的数据
    const msg = {
      "code": 200,
      "msg": "获取新闻列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己,三大运用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "国际媒体头条速览",
          "count": 56
        },
        {
          "id": 3,
          "title": "乌克兰和俄罗斯持续冲突",
          "count": 1669
        },

      ]
    }

    // 需求1: 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
    // const {data}=msg
    // console.log(data)
    // 需求2: 上面msg是后台传递过来的数据,我们需要把data选出当做参数传递给 函数
    // const {data}=msg
    // function render({data}) {
    //   // 我们只要 data 数据
    //   // const {data}=arr
    //   // 内部处理
    //   console.log(data)

    // }
    // render(msg)//大对象 传参的时候解构data

    // 需求3, 为了防止msg里面的data名字混淆,要求渲染函数里面的数据名改为 myData
    function render({data:mydata}) {
      // 要求将 获取过来的 data数据 更名为 myData
      // 内部处理
      console.log(mydata)

    }
    render(msg)

遍历数组forEach方法(重点)

forEach()方法用于调用数组的每个元素,并将元素传递给回调函数

  // 被遍历的数组.forEach(function(当前数组元素,当前元素索引号){
    //   //函数体
    // })
    //forEach就是遍历 加强版的for循环 适合于遍历数组对象
    const arr=['red','green','pink']
    const result=arr.forEach(function(item,index){//index可省 item 不可省
      console.log(item)//数组元素 red ...
      console.log(index)//索引号
    })
    console.log(result)//undefined

map返回数组,forEach只遍历不返回

主要使用场景:遍历数组的每个元素 

注意:

  1. forEach主要是遍历数组
  2. 参数当前数组元素是必须要写的,索引号可选

渲染商品列表

核心思路:有多少条数据,就渲染多少模块,然后生成对应的html结构标签,赋值给list标签即可

  1. 利用forEach遍历数据里面的数据
  2. 拿到数据,利用字符串拼接生成结构添加到页面当中
  3. 注意:传递参数的时候,可以使用对象解构
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]
    // 1.声明一个字符串变量
    let str=''
    // 2.遍历数据
    goodsList.forEach(item=>{
      // console.log(item)//可以得到每一个数组元素 对象
      // const{id}=item
      const{name,price,picture}=item
      str+=`
      <div class="item">
        <img src="${picture}" alt="">
        <p class="name">${name}</p>
        <p class="price">${price}</p>
      </div>
      `
    })
    document.querySelector('.list').innerHTML=str

综合案例

筛选数组filter方法(重点)

filter()方法创建一个新的数组,新数组中的元素通过检查指定数组中符合条件的所有元素

主要使用场景:筛选数组符合条件的元素,并返回筛选之后元素的新数组

    const arr=[10,20,30]
    const newArr=arr.filter(function(item,index){
      // console.log(item)
      // console.log(index)
      return item>=20
    })
    console.log(newArr)

返回值:返回数组,包含了符合条件的所有元素,如果没有符合条件的元素则返回空数组

参数:currentValue必须写,index可选

因为返回新数组,所以不会影响原数组

商品列表价格筛选

需求:

1.渲染数据列表

  • 渲染页面 利用forEach遍历数组里面的数据,并渲染数据列表
  • 根据filter选择不同条件显示不同商品

2.根据选择不同条件显示不同商品

  1. 点击采取事件委托方式 .filter
  2. 利用过滤函数filter筛选出符合条件的数据,因为生成的是一个新数组,传递给渲染函数即可
  3. 筛选条件是根据点击的data-index来判断
  4. 可以使用对象解构,把事件对象解构
  5. 因为全部区间不需要筛选,直接把goodList渲染即可
    // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      },
    ]
      // 1.渲染函数封装
      function render(arr){
        let str=''
        arr.forEach(item => {
          const{name,picture,price}=item
          str+=`
          <div class="item">
            <img src="${picture}" alt="">
            <p class="name">${name}</p>
            <p class="price">${price}</p>
          </div>
          `
        });
        //追加给List
        document.querySelector('.list').innerHTML=str
      }
      render(goodsList)//页面一打开就需要渲染
      document.querySelector('.filter').addEventListener('click',e=>{
        // e.target.dataset.index
        const {tagName,dataset}=e.target
        if(tagName==='A'){
          let arr=goodsList//arr返回的新数组
          if(dataset.index==='1'){
            arr=goodsList.filter(item =>item.price>0&&item.price<=100)
          }
          else if(dataset.index==='2'){
            arr=goodsList.filter(item =>item.price>=100&&item.price<=300)
          }
          else if(dataset.index==='3'){
            arr=goodsList.filter(item =>item.price>=300)
          }
          //渲染函数
          render(arr)
        }
      })

深入对象

创建对象的三种方式

1.利用对象字面量创建对象

    const o={
      name:'佩奇'
    }

2.利用new Object创建对象

    // const obj=new Object()
    // obj.uname='pink老师'
    const obj=new Object({uname:'pink'})
    console.log(obj)

3.利用构造函数创建对象

构造函数

构造函数:是一种特殊的函数,主要用来初始化对象

使用场景:常规的{...}语法允许创建一个对象,比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过构造函数快速创建多个类似的对象。

构造函数在技术上是常规函数。

但有两个约定:

  • 他们的命名以大写字母开头
  • 他们只能由"new"操作符来执行

构造函数语法:大写字母开头的函数

创建构造函数

说明:

  1. 使用new关键字调用函数的行为被称为实例化
  2. 实例化构造函数时没有参数时可省略()
  3. 构造函数内部无需写return,返回值即为新创建的对象
  4. 构造函数内部的return返回的值无效,所以不要写return
  5. new Objiect() new Date()也是实例化构造函数
    function Pig(uname,age){
      this.uname=uname
      this.age=age
    }
    // console.log(new Pig('佩奇',6))
    const p=new Pig('佩奇',6)
    console.log(p)

利用构造函数创建多个对象

需求:

  • 写一个Goods构造函数
  • 里面包含属性uname 商品名称 price价格 count 库存数量
  • 实例化多个商品对象,并打印控制台
    function Goods(name,price,count){
      this.name=name
      this.price=price
      this.count=count
    }
    const mi=new Goods('小米',1999,20)
    console.log(mi)
    const hw=new Goods('华为',3999,59)
    console.log(hw)
    const date=new Date('2022-4-8')

实例化执行过程 

说明:

  1. 创建新空对象
  2. 构造函数this指向新对象
  3. 执行构造函数代码,修改this,添加新的属性
  4. 返回新对象

实例成员&静态成员

通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员(实例属性和实例方法)

说明:

1.为构造函数传入参数,创建结构相同但值不同的对象

2,构造函数创建的实例对象彼此独立互不影响

    // 1.实例成员:实例对象上的属性和方法属于实例成员
    function Pig(name){
      this.name=name
    }
    const peiqi=new Pig('佩奇')
    const qiaozhi=new Pig('乔治')
    peiqi.name='小猪佩奇'//实例属性
    peiqi.sayHi=()=>{//实例方法
      console.log('hi~~~')
    }
    console.log(peiqi)//name 以及sayhi方法
    console.log(qiaozhi)
    console.log(peiqi===qiaozhi)//false

静态成员构造函数的属性和方法被称为静态成员(静态属性和静态方法) 

说明:

1.静态成员只能构造函数来访问

2.静态方法中的this指向构造函数

比如:Date.now()  Math.PI  Math.random()

    // 静态成员
    function Pig(name){
      this.name=name
    }
    Pig.eyes=2//静态属性
    Pig.sayHi=function(){  //静态方法
      console.log(this)
    }
    Pig.sayHi()
    console.log(Pig.eyes)//2

内置构造函数

在JavaScript中最主要的数据类型有6种:

基本数据类型

字符串,数值,布尔,undefined,null

引用类型

对象

但是我们发现基本数据类型也有方法,比如求字符串的长度,将数值保留两位小数等 

 其实字符串,数值,布尔,等基本类型也都有专门的构造函数,这些我们成为包装类型。

JS中几乎所有的数据都可以基于构成函数创建

JS提供的引用数据类型:Object Array RegExp(正则表达式),Date等

包装类型:String,Number,Boolean

Object

内置的构造函数,用于创建普通对象

推荐使用字面量方式声明对象,而不是Object构造函数

const user=new Object({name:'小明',age:15})

 三个常用的静态方法(静态方法就是只有构造函数Object可以调用的)

作用

  • Object.keys 静态方法获取对象中所有属性(键)
  • Object.values 静态方法获取对象中所有属性值
  • Object.assign静态方法常用于对象拷贝,经常使用的场景是给对象添加属性

语法

    const o={name:'佩奇',age:6}
    // 获取对象的所有键(属性名) 并且返回是一个数组
    const arr=Object.keys(o)
    console.log(arr)//['name','age']

Array

内置的构造函数,用于创建数组

创建数组建议使用字面量创建,不用Array构造函数创建

1.数组常见实例方法-核心方法

方法作用说明
forEach遍历数组不返回新数组,经常用于查找遍历数组元素
filter过滤数组返回新数组,返回的是筛选满足条件的数组元素
map迭代数组返回新数组,返回的是处理之后的数组元素,想要使用返回的新数组
reduce累计器返回累计处理的结果,经常用于求和等

 reduce作用:返回累计处理的结果,经常用于求和等

基本语法

    // 数组reduce方法
    // arr.reduce(function(上一次值,当前值){},初始值)
    const arr=[1,5,8]
    //1.没有初始值
    // const total=arr.reduce(function(prev,current){
    //   return prev+current
    // })
    // console.log(total)//14
    //2.有初始值
    const total=arr.reduce(function(prev,current){
      return prev+current
    },10)
    console.log(total)//24
    // 3.箭头函数的写法
    const total1=arr.reduce((prev,current)=>prev+current,10)
    console.log(total1)

参数:如果有起始值,则把初始值累加到里面

reduce执行过程:

1.如果没有起始值,则上一次值为数组的第一个数组元素的值

2.每一次循环,把返回值给作为下一次循环的上一次值

3.如果有起始值,则起始值做为上一次值

 计算薪资案例

需求:

根据数据计算当月工资

    const arr=[{
      name:'张三',
      salary:10000
    },{
      name:'里斯',
      salary:10000
    },{
      name:'王五',
      salary:10000
    }
  ]
  //计算薪资案例
  // const total=arr.reduce((pre,current)=>{
  //   return prev+current.salary
  // },0)//一定要将初始值设为0
  // console.log(total)
  // 需求:每个人涨薪30% 当月支出多少薪资
  const total=arr.reduce((prev,current)=>prev+current.salary*1.3,0)
  console.log(total)

数组的常见方法-其他方法

  • 实例方法:join数组元素拼接为字符串,返回字符串(重点)
  • 实例方法:find 查找元素,返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回undefined(重点)
  • 实例方法:every 检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回true,否则返回false(重点)
  • 实例方法:some 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回true,否则返回false
  • 实例方法:concat 合并两个数组,返回生成新数组
  • 实例方法:sort 对原数组单元值排序
  • 实例方法:splice 删除或者替换原数组单元
  • 实例方法:reverse 反转数组
  • 实例方法:findIndex查找元素的索引值

    // find方法
    // const arr=['red','blue','green']
    // const re=arr.find(function(item){
    //   return item==='blue'
    // })
    // console.log(re)
      // const arr=[
      //   {
      //     name:'小米',
      //     price:1999
      //   },
      //   {
      //     name:'华为',
      //     price:3999
      //   }
      // ]
      // const mi=arr.find(function(item){
      //   return item.name==='小米'
      // })
      // const mi=arr.find(item=>item.name==='小米')
      // console.log(mi)//返回有name为小米的数组对象
      // every 每一个是否都符合条件,如果都符合返回true,否则返回false
      //some只要有一个符合条件就返回true,否则返回false
      const arr=[10,20,30]
      const flag=arr1.every(item=>item>=10)
      console.log(flag)//true

 请完成以下需求

const spec={size:'40cm*40cm',color:'黑色'}

请将size和color里面的值拼接为字符串之后,写到div标签里面,展示内容如下:

40cm*40cm/黑色

思路:获得所有的属性值,然后拼接字符串就可以了

1.获得所有属性值是:Object.values() 返回的是数组

2.拼接数组是join('')这样就可以转换为字符串了

      const spec={size:'40cm*40cm',color:'黑色'}
      // 1.所有的属性值获取过来
      // console.log(Object.values(spec))
      // 2.转化为字符串
      document.querySelector('div').innerHTML=Object.values(spec).join('/')
数组常见方法-伪数组转换为真数组 

静态方法 Array.from()

        const lis=document.querySelector('ul li')
        // console.log(lis)
        // lis.pop()
        const liss=Array.from(lis)//把伪数组转换为真数组
            liss.pop()

        console.log(liss)

String

常见实例方法

1.实例属性 length 用来获取字符串的长度(重点)

2.实例方法 split('分隔符')用来将字符串拆分成数组(重点)

3.实例方法 substring(需要截取的第一个字符的索引[,结束的索引号])用于字符串截取(重点)

4.实例方法 startsWith(检测字符串[,检测位置索引号])检测是否以某字符开头,返回true或者false(重点)

5.实例方法 includes(搜索的字符串[,检测位置索引号]) 判断一个字符串是否包含在另一个字符串中,根据情况返回true和false(重点)

6.实例方法 toUpperCase 用于将字母转成大写

7.实例方法 toLowerCase 用于将字母转成小写

8.实例方法 indexOf 检测是否包含某字符

9.实例方法 endsWith 检测是否以某字符结尾

10.实例方法 replace用于替换字符串,支持正则匹配 

11.实例方法 match 用于查找字符串 支持正则匹配

    // 将字符串转化为数组
    // const str='pink,red'
    // const arr=str.split(',')
    // console.log(arr)
    // 字符串的截取 substring(开始的索引号[,结束的索引号])
    // 如果省略了结束的索引号 默认渠取到最后
    // const str='今天又要做核酸了'
    // console.log(str.substring(5,7))//不包括7 核酸
    // 3.startWith 判断是不是以某个字符开头
    // const str='pink老师上课中'
    // console.log(str.startsWith('ink',1))//true 从索引号为1开始 看ink是否从索引号1开始开头
    // console.log(str.startsWith('pink'))//true 以pink开头
    // 4. includes 判断某个字符是不是包含在一个字符串里面
    // const str='我是pink'
    // console.log(str.includes('pink'))//true

显示赠品案例

请将下面字符串渲染到准备好的p标签内部,结构如下:

const gift='50g茶叶,清洗球'

  <p class="name">
    <span class="tag">【赠品】50g茶叶</span>
    <span class="tag">【赠品】清洗球</span>
  </p>

 

思路:

1.把字符串拆分为数组,这样两个赠品就分开了,split(',')

2.利用map遍历数组,同时把数组元素生成到span里面,并且返回数组

3.因为返回的是数组,所以需要转换为字符串,join('')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div></div>
  <script>
    const gift='50g茶叶,清洗球'
    // 1.把字符串拆分为数组
    console.log(gift.split(','))
    // 2.根据数组元素的个数,生成对应span标签
    const str=gift.split(',').map(function(item){
      return `<span>【赠品】${item}</span>`
    }).join('')
    console.log(str)
    const div=document.querySelector('div')
    div.innerHTML=str
    //简写
    // document.querySelector('div').innerHTML=gift.split(',').map(item=>`<span>【赠品】${item}</span>`).join('')

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

Number

内置的构造函数,用于创建数值

常用方法:

toFixed()设置保留小数位的长度

    // toFixed方法可以使小数保留相对应的小数位数
    const num=10.123
    console.log(num.toFixed())//10 toFixed里面什么都没写即为整数的四舍五入
    console.log(num.toFixed(2))//10.12 四舍五入两位小数

综合案例

购物车展示

  • 渲染图片,标题,颜色,价格,赠品等数据
  • 单价和小计模块
  • 总价模块

分析业务模块:

  • 把整体的结构直接生成遍历然后渲染到大盒子.list里面
  • 遍历数组的同时还有返回值 map方法
  • 最后计算总价模块,reduce对数组累加求和

1.先利用map来遍历,有多少条数据,渲染多少相同商品

  • 可以先写死的数据
  • 注意map返回值是数组,我们需要用join转换为字符串
  • 把返回的字符串赋值给list大盒子的innerHTML

2.更换数据

  • 先更换不需要处理的数据,图片,商品名称,单价,数量
  • 采取对象解构的方式
  • 注意 单价要保留2位小数, 489.00  toFixed(2)

更换数据-处理规格文字模块

  • 获取每个对象里面的spec,上面对象解构添加spec
  • 获取所有属性值是:Object.values() 返回的是数组
  • 拼接数组是join('') 这样就可以转换为字符串了

更换数据-处理赠品模块

获取每个对象里的gift,上面对象解构添加gift

思路:

  • 把字符拆分为数组,这样两个赠品就拆分开了。split(',')
  • 利用map遍历数组,同时把数组元素生成到span里面,并且返回
  • 因为返回的是数组,所以需要转换为字符串。join('')

更换数据-处理小计模块

  • 小计=单价*数量
  • 小计名可为:subTotal=price*count
  • 注意保留两位小数

注意要判断是否有gift属性,没有的话不需要渲染

利用变成的字符串然后写到p.name里面

计算合计模块

  • 求和用到数组reduce方法 累加器
  • 根据数组里面的数量和单价累加和即可
  • 注意 reduce方法有2个参数,第一个是回调函数,第二个是初始值,这里写0
<!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>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .list {
      width: 990px;
      margin: 100px auto 0;
    }

    .item {
      padding: 15px;
      transition: all .5s;
      display: flex;
      border-top: 1px solid #e4e4e4;
    }

    .item:nth-child(4n) {
      margin-left: 0;
    }

    .item:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }

    .item img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }

    .item .name {
      font-size: 18px;
      margin-right: 10px;
      color: #333;
      flex: 2;
    }

    .item .name .tag {
      display: block;
      padding: 2px;
      font-size: 12px;
      color: #999;
    }

    .item .price,
    .item .sub-total {
      font-size: 18px;
      color: firebrick;
      flex: 1;
    }

    .item .price::before,
    .item .sub-total::before,
    .amount::before {
      content: "¥";
      font-size: 12px;
    }

    .item .spec {
      flex: 2;
      color: #888;
      font-size: 14px;
    }

    .item .count {
      flex: 1;
      color: #aaa;
    }

    .total {
      width: 990px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid #e4e4e4;
      padding: 20px;
    }

    .total .amount {
      font-size: 18px;
      color: firebrick;
      font-weight: bold;
      margin-right: 50px;
    }
  </style>
</head>

<body>
  <div class="list">
    <!-- <div class="item">
      <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
      <p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
      <p class="spec">白色/10寸</p>
      <p class="price">289.90</p>
      <p class="count">x2</p>
      <p class="sub-total">579.80</p>
    </div> -->
  </div>
  <div class="total">
    <div>合计:<span class="amount">1000.00</span></div>
  </div>
  <script>
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: 289.9,
        picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
        count: 2,
        spec: { color: '白色' }
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: 109.8,
        picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
        count: 3,
        spec: { size: '40cm*40cm', color: '黑色' }
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: 488,
        picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
        count: 1,
        spec: { color: '青色', sum: '一大四小' }
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: 139,
        picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
        count: 1,
        spec: { size: '小号', color: '紫色' },
        gift: '50g茶叶,清洗球'
      }
    ]
      // 1.根据数据渲染页面
      document.querySelector('.list').innerHTML=goodsList.map(item=>{
        // 对象解构
        const {picture,name,count,price,spec,gift}=item
        // 规格文字模块处理
        const text=Object.values(spec).join('/')
        // 计算小计模块 单价*数量
        const subTotal=((price*100*count)/100).toFixed(2)//避免浮点数精度问题
        // 处理赠品模块
        const str=gift?gift.split(',').map(item=>`<span class="tag">【赠品】${item}</span>`).join(''):''
        return `
        <div class="item">
          <img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
          <p class="name">${name} ${str}</p>
          <p class="spec">${text}</p>
          <p class="price">${price.toFixed(2)}</p>
          <p class="count">x${count}</p>
          <p class="sub-total">${subTotal}</p>
        </div> 
        `
      }).join('')
      // 3.合计模块
      const total=goodsList.reduce((prev,item)=>prev+(item.price*100*item.count)/100,0)
      document.querySelector('.amount').innerHTML=total.toFixed(2)
  </script>
</body>

</html>

数值型转化为字符型方法:num.String()或者num.toString()

上述均为学习哔站pink老师视频所得!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/564786.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AWD线下攻防万字最完整战术(记第一届“长城杯”半决赛战术)

目录 准备阶段 1.登录比赛平台&#xff08;获取资产&#xff09; 查看账号账号修改 服务器SSH口令mysqlWEB服务口令(后台密码)数据库后台管理员密码 账号用户检查 2.dump源码&#xff08;方便应急响应恢复靶机&#xff09; 网站源码备份 压缩文件解压文件备份到服务器本地上传…

这10款VS Code神仙插件,嵌入式程序员必备

大家好&#xff0c;我是知微&#xff01; 嵌入式软件开发工程师平时可能更多的是使用Source Insight、Keil、IAR来阅读代码&#xff0c;写代码。 VSCode大家都听说过&#xff0c;功能十分强大&#xff0c;而且免费&#xff01; 或许是因为这款软件上手有一定的学习成本&…

css:echarts渐变色转换为css渐变色

通过一个下拉框来选择渐变类型&#xff0c;为了简化&#xff0c;我设置了三种&#xff1a;水平方向的渐变、垂直方向的渐变和径向渐变用&#xff0c;表格来配置echarts渐变色的百分比位置和颜色。 config是表格里的数据格式如下&#xff1a; offset是百分比位置&#xff0c;co…

C语言项目实践——贪吃蛇

引言&#xff1a;本篇博客中&#xff0c;我将会使用结构体&#xff0c;链表&#xff0c;WIN32 API等一系列知识完成C语言项目——贪吃蛇的实现。在观看此篇博客之前&#xff0c;请将这些知识所熟悉&#xff0c;不然可能会造成理解困难。 更多有关C语言的知识详解可前往个人主页…

[C++][算法基础]求组合数(IV)

输入 &#x1d44e;,&#x1d44f;&#xff0c;求 的值。 注意结果可能很大&#xff0c;需要使用高精度计算。 输入格式 共一行&#xff0c;包含两个整数 &#x1d44e; 和 &#x1d44f;。 输出格式 共一行&#xff0c;输出 的值。 数据范围 1≤b≤a≤5000 输入样例…

一线实战:国产数据库Mogdb双网卡同步最佳实践

前言 大家都知道Oracle数据库无论是单机还是RAC集群在进行生产部署实施时&#xff0c;我们都会对网卡做冗余考虑&#xff0c;使用双网卡&#xff0c;比如public、心跳网络。这样的目的主要是为了安全&#xff0c;避免单点故障。当然双网卡Bond不仅是可以做主备还可以支持负载均…

安装mysql的流程

安装mysql的步骤 安装流程 [rootlocalhost z]# cd /mnt/share/share[rootlocalhost share]# ll[rootlocalhost share]# cp mysql157-community-release-el7-10.noarch.rmp /usr/localcp: cannot stat ‘mysql157-community-release-el7-10.noarch.rmp’: No such file or direc…

企业车辆管理系统平台是做什么的?

企业车辆管理系统平台是一种综合性的管理系统&#xff0c;它主要集车辆信息管理、车辆调度、车辆维修、油耗管理、驾驶员管理以及报表分析等多种功能于一体。通过这个平台&#xff0c;企业可以实现对车辆的全面管理&#xff0c;优化车辆使用效率&#xff0c;降低运营成本&#…

JavaWeb开发06-原理-Spring配置优先级-Bean管理-SpringBoot原理-Maven继承和聚合-私服

一、Spring配置优先级 不同配置文件&#xff0c;配置同一个属性谁有效 properties>yml>yaml 命令行参数>Java系统属性 项目打包后要改变属性&#xff1a; 红色是Java系统属性&#xff0c;绿色是命令行参数 ‘ 二、Bean管理 1.获取bean 获取IOC容器&#xff1a;ap…

linux之进程通信

目录 一、进程通信介绍 1.目的 2.发展 3.进程通信是什么&#xff0c;怎么通信&#xff1f; 二、管道 1.介绍 2.匿名管道 1.单向通信管道原理 2.代码实现 3.管道特征 4.管道的四种情况 5.管道的应用场景 使用管道实现一个简易版本的进程池 3.命名管道 1.思考 2.…

了解IPS和IDS:这5个差异将改变你的安全观念!

IPS 代表 入侵防御系统&#xff08;Intrusion Prevention System&#xff09;&#xff0c;它是 IDS 的进一步发展&#xff0c;不仅具备检测攻击的能力&#xff0c;还能在检测到攻击后主动采取措施阻止攻击。IPS 通常部署在防火墙和网络设备之间&#xff0c;能够深度感知并检测流…

ubuntu18.04与windows文件互传

目录 window下载Xftp软件ubuntu上的配置windows端Xftp软件的使用 window下载Xftp软件 下载&#xff1a;家庭/学校免费版 安装教程推荐下面的文章 xftp7免费版安装教程&#xff08;详细&#xff09; ubuntu上的配置 在进入系统后&#xff0c;确保有网络连接的情况下按Ctrl A…

cookie与session区别和联系

在Web应用中&#xff0c;HTTP协议是无状态的&#xff0c;每次请求都是独立的&#xff0c;服务器无法直接识别一个用户的不同请求之间的关联。这就导致了如果我们希望在一个会话中保持一些数据的状态&#xff0c;比如用户的身份认证信息、购物车内容等&#xff0c;就需要借助Coo…

golang本地缓存库之bigcache

1. 前言 上周工作之余逛github看到一个本地缓存库bigcache&#xff0c;这个是allegro公司开源的一个项目&#xff0c;主要是用于本地缓存使用&#xff0c;根据他们的博客说明&#xff0c;他们编写这个库最初的目的就是实现一个非常快速的缓存服务。 看了下bigcache这个库的源…

[StartingPoint][Tier2]Base

Task 1 Which two TCP ports are open on the remote host? (远程服务器开放了哪两个TCP端口?) $ nmap -sC -sV 10.129.234.232 22,80 Task 2 What is the relative path on the webserver for the login page? (相关的登录页面路径是什么?) /login/login.php Task 3 …

自动驾驶控制算法

本文内容来源是B站——忠厚老实的老王&#xff0c;侵删。 三个坐标系和一些有关的物理量 使用 frenet坐标系可以实现将车辆纵向控制和横向控制解耦&#xff0c;将其分开控制。使用右手系来进行学习。 一些有关物理量的基本概念&#xff1a; 运动学方程 建立微分方程 主要是弄…

格局在尘埃之间与宇宙之外。

在沈自所 见天地、见众生、见自己。 所里待了两年半&#xff0c;感叹时光飞逝&#xff0c;无疑在所这段时间&#xff0c;对我的成长是巨大的支持。感谢我的导师给予我的自由度和包容&#xff0c;感谢817所有兄弟姐妹。感谢所里面的兄弟们&#xff0c;我们一起经历了很多事情&…

ctfshow web29-web40

命令执行 看清都过滤了些什么&#xff01;&#xff01; 知识点&#xff1a; web34&#xff1a;当;和()被过滤了就用语言结构&#xff0c;一般有echo print isset unset include require web37&#xff1a;data协议是将后面的字符串当成php代码执行&#xff0c;例如 /?cdat…

【leetcode面试经典150题】62. K 个一组翻转链表(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

Oracle 可传输表空间(Transportable Tablespace)

在数据归档、备份、测试等场景&#xff0c;我们经常需要将数据从一个系统移动到另一个系统&#xff0c;一个较常用的方案是数据的导出/导入&#xff08;export/import&#xff09;&#xff0c;但是在数据量较大的场景&#xff0c;此方案可能比较耗时。而可传输表空间是一种以文…