JavaScript 进阶 - 第4天

JavaScript 进阶 - 第4天笔记

文章目录

  • JavaScript 进阶 - 第4天笔记
  • 1 深浅拷贝
    • 1.1 浅拷贝
    • 1.2 深拷贝(面试)
      • 1.2.1 递归实现深拷贝
      • 1.2.2 js库lodash里面cloneDeep内部实现了深拷贝
      • 1.2.3 JSON序列化
  • 2 异常处理
    • 2.1 throw 抛异常
    • 2.2 try ... catch 捕获异常
    • 2.3 debugger
  • 3 处理this
    • 3.1 普通函数
    • 3.2 this指向-箭头函数
    • 3.3 改变this指向
      • 3.3.1 call
      • 3.3.2 apply-理解
      • 3.3.3 bind-重点
      • 3.3.4 call apply bind 总结
  • 4 性能优化
    • 4.1 防抖(debounce)
      • 4.1.1 案例:利用防抖来处理 - 鼠标滑过盒子显示文字(手写防抖函数)
    • 4.2 节流 - throttle
      • 4.2.1 案例:利用节流来处理 - 鼠标滑过盒子显示文字
      • 4.2.2 案例:利用节流来处理 - 鼠标滑过盒子显示文字(手写节流函数)
    • 4.3 防抖和节流总结
  • 5 节流综合案例
    • 5.1 案例:页面打开,可以记录上一次的视频播放位置

1 深浅拷贝

1.1 浅拷贝

首先浅拷贝和深拷贝只针对引用类型

浅拷贝:拷贝的是地址

常见方法:

  1. 拷贝对象:Object.assgin() / 展开运算符 {…obj} 拷贝对象
  2. 拷贝数组:Array.prototype.concat() 或者 […arr]

如果是简单数据类型拷贝值,引用数据类型拷贝的是地址 (简单理解: 如果是单层对象,没问题,如果有多层就有问题)

  1. 直接赋值和浅拷贝的区别:

    • 直接赋值的方法,只要是对象,都会相互影响,因为是直接拷贝对象栈里面的地址。
    • 浅拷贝如果是一层对象,不相互影响,如果出现多层对象拷贝还会相互影响。
  2. 浅拷贝的理解:

    • 拷贝对象之后,里面的属性值是简单数据类型直接拷贝值。
    • 如果属性值是引用数据类型则拷贝的是地址。

1.2 深拷贝(面试)

首先浅拷贝和深拷贝只针对引用类型

深拷贝:拷贝的是对象,不是地址

常见方法:

  1. 通过递归实现深拷贝
  2. lodash/cloneDeep
  3. 通过JSON.stringify()实现

1.2.1 递归实现深拷贝

函数递归:

如果一个函数在内部可以调用其本身,那么这个函数就是递归函数

  • 简单理解:函数内部自己调用自己, 这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件 return

在这里插入图片描述

<body><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}const o = {}// 拷贝函数function deepCopy(newObj, oldObj) {debuggerfor (let k in oldObj) {// 处理数组的问题  一定先写数组 在写 对象 不能颠倒if (oldObj[k] instanceof Array) {newObj[k] = []//  newObj[k] 接收 []  hobby//  oldObj[k]   ['乒乓球', '足球']deepCopy(newObj[k], oldObj[k])} else if (oldObj[k] instanceof Object) {newObj[k] = {}deepCopy(newObj[k], oldObj[k])}else {//  k  属性名 uname age    oldObj[k]  属性值  18// newObj[k]  === o.uname  给新对象添加属性newObj[k] = oldObj[k]}}}deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象console.log(o)o.age = 20o.hobby[0] = '篮球'o.family.baby = '老pink'console.log(obj)console.log([1, 23] instanceof Object)// 复习// const obj = {//   uname: 'pink',//   age: 18,//   hobby: ['乒乓球', '足球']// }// function deepCopy({ }, oldObj) {//   // k 属性名  oldObj[k] 属性值//   for (let k in oldObj) {//     // 处理数组的问题   k 变量//     newObj[k] = oldObj[k]//     // o.uname = 'pink'//     // newObj.k  = 'pink'//   }// }</script>
</body>

练习:利用递归函数实现setTimeout模拟setInterval效果

需求:

  1. 页面每隔一秒输出当前的时间;
  2. 输出当前时间可以使用:new Date().toLocaleString()
<body><div></div><script>function getTime() {document.querySelector('div').innerHTML = new Date().toLocaleString()setTimeout(getTime, 1000)}getTime()</script>
</body>

面试中问到深拷贝:

  1. 深拷贝做到拷贝出来的对象,新对象不会影响旧对象,要想实现深拷贝,运用到函数递归;
  2. 当我们在普通拷贝时,直接赋值就可以,但是如果遇到数组的,再次调用递归函数就可以;
  3. 如果遇到对象形式,再次利用递归把对象解决,最后补充先 Array 后对象。

1.2.2 js库lodash里面cloneDeep内部实现了深拷贝

<body><!-- 先引用 --><script src="./lodash.min.js"></script><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}const o = _.cloneDeep(obj)console.log(o)o.family.baby = '老pink'console.log(obj)</script>
</body>

1.2.3 JSON序列化

<body><script>const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}// 把对象转换为 JSON 字符串// console.log(JSON.stringify(obj))const o = JSON.parse(JSON.stringify(obj))console.log(o)o.family.baby = '123'console.log(obj)</script>
</body>

2 异常处理

了解 JavaScript 中程序异常处理的方法,提升代码运行的健壮性。

2.1 throw 抛异常

异常处理是指预估代码执行过程中可能发生的错误,然后最大程度的避免错误的发生导致整个程序无法继续运行

总结:

  1. throw 抛出异常信息,程序也会终止执行
  2. throw 后面跟的是错误提示信息
  3. Error 对象配合 throw 使用,能够设置更详细的错误信息
<script>function counter(x, y) {if(!x || !y) {// throw '参数不能为空!';throw new Error('参数不能为空!')}return x + y}counter()
</script>

总结:

  1. throw 抛出异常信息,程序也会终止执行
  2. throw 后面跟的是错误提示信息
  3. Error 对象配合 throw 使用,能够设置更详细的错误信息

2.2 try … catch 捕获异常

<script>function foo() {try {// 查找 DOM 节点const p = document.querySelector('.p')p.style.color = 'red'} catch (error) {// try 代码段中执行有错误时,会执行 catch 代码段// 查看错误信息console.log(error.message)// 终止代码继续执行return}finally {alert('执行')}console.log('如果出现错误,我的语句不会执行')}foo()
</script>

总结:

  1. try...catch 用于捕获错误信息
  2. 将预估可能发生错误的代码写在 try 代码段中
  3. 如果 try 代码段中出现错误后,会执行 catch 代码段,并截获到错误信息
  4. finally 不管是否有错误,都会执行

2.3 debugger

相当于断点调试

3 处理this

了解函数中 this 在不同场景下的默认值,知道动态指定函数 this 值的方法。

this 是 JavaScript 最具“魅惑”的知识点,不同的应用场合 this 的取值可能会有意想不到的结果,在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

3.1 普通函数

普通函数的调用方式决定了 this 的值,即【谁调用 this 的值指向谁】,如下代码所示:

<script>// 普通函数function sayHi() {console.log(this)  }// 函数表达式const sayHello = function () {console.log(this)}// 函数的调用方式决定了 this 的值sayHi() // windowwindow.sayHi()// 普通对象const user = {name: '小明',walk: function () {console.log(this)}}// 动态为 user 添加方法user.sayHi = sayHiuesr.sayHello = sayHello// 函数调用方式,决定了 this 的值user.sayHi()user.sayHello()
</script>

注: 普通函数没有明确调用者时 this 值为 window,严格模式下没有调用者时 this 的值为 undefined

3.2 this指向-箭头函数

箭头函数中的 this 与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 this !箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。

<script>console.log(this) // 此处为 window// 箭头函数const sayHi = function() {console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致}// 普通对象const user = {name: '小明',// 该箭头函数中的 this 为函数声明环境中 this 一致walk: () => {console.log(this)},sleep: function () {let str = 'hello'console.log(this)let fn = () => {console.log(str)console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致}// 调用箭头函数fn();}}// 动态添加方法user.sayHi = sayHi// 函数调用user.sayHi()user.sleep()user.walk()
</script>

在开发中【使用箭头函数前需要考虑函数中 this 的值】,事件回调函数使用箭头函数时,this 为全局的 window,因此DOM事件回调函数不推荐使用箭头函数,如下代码所示:

<script>// DOM 节点const btn = document.querySelector('.btn')// 箭头函数 此时 this 指向了 windowbtn.addEventListener('click', () => {console.log(this)})// 普通函数 此时 this 指向了 DOM 对象btn.addEventListener('click', function () {console.log(this)})
</script>

同样由于箭头函数 this 的原因,基于原型的面向对象也不推荐采用箭头函数,如下代码所示:

<script>function Person() {}// 原型对像上添加了箭头函数Person.prototype.walk = () => {console.log('人都要走路...')console.log(this); // window}const p1 = new Person()p1.walk()
</script>

总结:

  1. 函数内不存在 this,沿用上一级的,过程:向外层作用域中,一层一层查找 this,直到有 this 的定义。
  2. 不适用
    • 构造函数,原型函数,字面量对象中函数,dom 事件函数
  3. 适用
    • 需要使用上层 this 的地方

3.3 改变this指向

以上归纳了普通函数和箭头函数中关于 this 默认值的情形,不仅如此 JavaScript 中还允许指定函数中 this 的指向,有 3 个方法可以动态指定普通函数中 this 的指向:

3.3.1 call

使用 call 方法调用函数,同时指定函数中 this 的值,使用方法如下代码所示:

<script>// 普通函数function sayHi() {console.log(this);}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.call(user); // this 值为 usersayHi.call(student); // this 值为 student// 求和函数function counter(x, y) {return x + y;}// 调用 counter 函数,并传入参数let result = counter.call(null, 5, 10);console.log(result);
</script>

总结:

  1. call 方法能够在调用函数的同时指定 this 的值
  2. 使用 call 方法调用函数时,第1个参数为 this 指定的值
  3. call 方法的其余参数会依次自动传入函数做为函数的参数

3.3.2 apply-理解

使用 call 方法调用函数,同时指定函数中 this 的值,使用方法如下代码所示:

<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.apply(user) // this 值为 usersayHi.apply(student) // this 值为 student// 求和函数function counter(x, y) {return x + y}// 调用 counter 函数,并传入参数let result = counter.apply(null, [5, 10])console.log(result)
</script>

总结:

  1. apply 方法能够在调用函数的同时指定 this 的值
  2. 使用 apply 方法调用函数时,第1个参数为 this 指定的值
  3. apply 方法第2个参数为数组,数组的单元值依次自动传入函数做为函数的参数
  4. apply 主要跟数组有关系,比如使用 Math.max() 求数组的最大值

callapply 的区别是?

  • 都是调用函数,都能改变this指向
  • 参数不一样,alliy 传递的必须是数组

3.3.3 bind-重点

bind 方法并不会调用函数,而是创建一个指定了 this 值的新函数,使用方法如下代码所示:

<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}// 调用 bind 指定 this 的值let sayHello = sayHi.bind(user);// 调用使用 bind 创建的新函数sayHello()
</script>

注:bind 方法创建新的函数,与原函数的唯一的变化是改变了 this 的值。

3.3.4 call apply bind 总结

相同点:

  • 都可以改变函数内部的 this 指向

区别点:

  • callapply 会调用函数,并且改变函数内部 this 指向
  • callapply 传递的参数不一样,call 传递参数 aru1,aru2...形式 apply 必须数组形式[arg]
  • bind 不会调用函数,可以改变函数内部 this 指向

主要应用场景:

  • call 调用函数并且可以传递参数
  • apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值和最小值
  • bind 不调用函数,但是还想改变 this 指向. 比如改变定时器内部的 this 指向

4 性能优化

4.1 防抖(debounce)

在这里插入图片描述

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

举个例子:王者荣耀回城,只要被打断就需要重新来

使用场景:

  • 搜索框搜索输入。只需要用户最后一次输入完,再发送请求

  • 手机号、邮箱验证输入检测

4.1.1 案例:利用防抖来处理 - 鼠标滑过盒子显示文字(手写防抖函数)

要求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字才会变化+1

核心思路:

防抖的核心就是定时器(setTimeout)来实现

①:声明一个定时器变量

②:当鼠标每次滑动都先判断是否有定时器了,如果有定时器先清除以前的定时器

③:如果没有定时器则开启定时器,记得存到变量里面

④:在定时器里面调用要执行的函数

<!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>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><div class="box"></div><script src="./lodash.min.js"></script><script>// 利用防抖实现性能优化// 需求:鼠标在盒子上移动,里面的数字就会变化 + 1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿}// 添加事件// box.addEventListener('mousemove', mouseMove)// 利用lodash库实现防抖 - 500毫秒之后采取+1// 语法:_.debounce(fun, 时间)box.addEventListener('mousemove', _.debounce(mouseMove, 500))// 手写防抖函数// 核心是利用 setTimeout定时器// 1. 声明定时器变量// 2. 每次鼠标移动(事件触发)的时候都要先判断是否有定时器,如果有先清除以前的定时器// 3. 如果没有定时器,则开启定时器,存入到定时器变量里面// 4. 定时器里面写函数调用function debounce(fn, t) {let timer// return 返回一个匿名函数return function () {// 2.3.4if (timer) clearTimeout(timer)setTimeout(function () {fn()  // 加小括号调用 fn函数}, t)}}box.addEventListener('mousemove', debounce(mouseMove, 500))// debounce(mouseMove, 500)  // 调用函数// debounce(mouseMove, 500) = function () { 2.3.4}</script>
</body>
</html>

4.2 节流 - throttle

在这里插入图片描述

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数

举个例子:

  • 王者荣耀技能冷却,期间无法继续释放技能
  • 和平精英 98k 换子弹期间不能射击

使用场景:

  • 高频事件:鼠标移动 mousemove、页面尺寸缩放 resize、滚动条滚动 scroll 等等

4.2.1 案例:利用节流来处理 - 鼠标滑过盒子显示文字

要求:鼠标在盒子上移动,不管移动多少次,每隔500ms才 + 1

实现方式:

  1. lodash 提供的节流函数来处理
  2. 手写一个节流函数来处理
<!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>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><div class="box"></div><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script>// 利用节流实现性能优化// 需求:鼠标在盒子上移动,里面的数字就会变化 + 1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿}// box.addEventListener('mousemove', mouseMove)// 利用lodash库实现节流 - 500毫秒之后采取+1// 语法: _.throttle(fun, 时间)box.addEventListener('mousemove', _.throttle(mouseMove, 3000))</script>
</body>
</html>

4.2.2 案例:利用节流来处理 - 鼠标滑过盒子显示文字(手写节流函数)

要求:鼠标在盒子上移动,不管移动多少次,每隔500ms才 + 1

核心思路:

节流的核心就是利用定时器(steTimeout)来实现

①:声明一个定时器变量

②:当鼠标每次滑动都先判断是否有定时器了,如果有定时器则不开启新定时器

③:如果没有定时器则开启定时器,记得存到变量里面

  • 定时器里面调用执行的函数
  • 定时器里面要把定时器清空
<!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>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><div class="box"></div><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script>// 利用节流实现性能优化// 需求:鼠标在盒子上移动,里面的数字就会变化 + 1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++// 如果里面存在大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿}// box.addEventListener('mousemove', mouseMove)// 利用lodash库实现节流 -// 语法:_.throttle(fun, 时间)// box.addEventListener('mousemove', _.throttle(mouseMove, 3000))// 手写一个节流函数- 每隔 500ms + 1// 节流的核心就是利用定时器(setTimeout) 来实现// 1. 声明一个定时器变量// 2. 当鼠标每次滑动都先判断是否有定时器了,如果有定时器则不开启新定时器// 3. 如果没有定时器则开启定时器,记得存到变量里面// 3.1 定时器里面调用执行的函数// 3.2 定时器里面要把定时器清空function throttle(fn, t) {let timer = nullreturn function () {if (!timer) {timer = setTimeout(function () {fn()// 清空定时器timer = null}, t)}}}box.addEventListener('mousemove', throttle(mouseMove, 3000))</script>
</body>
</html>

4.3 防抖和节流总结

性能优化说明使用场景
防抖单位时间内,频繁触发事件,只执行最后一次搜索框搜索输入、手机号、邮箱验证输入检测
节流单位时间内,频繁触发事件,只执行一次高频事件:鼠标移动 mousemove、页面尺寸缩放 resize、滚动条滚动 scroll 等等

5 节流综合案例

5.1 案例:页面打开,可以记录上一次的视频播放位置

分析:

两个事件:

①:ontimeupdate 事件在视频/音频(audio/video)当前的播放位置发送改变时触发

②:onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发

谁需要节流?

ontimeupdate,触发频次太高了,我们可以设定1秒钟触发一次

思路:

  1. ontimeupdate 事件触发的时候,每隔1秒钟,就记录当前时间到本地存储
  2. 下次打开页面,onloadeddata 事件触发,就可以从本地存储取出时间,让视频从取出的时间播放,如果没有就默认为0S
  3. 获得当前时间 video.currentTime
<!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" /><meta name="referrer" content="never" /><title>综合案例</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.container {width: 1200px;margin: 0 auto;}.video video {width: 100%;padding: 20px 0;}.elevator {position: fixed;top: 280px;right: 20px;z-index: 999;background: #fff;border: 1px solid #e4e4e4;width: 60px;}.elevator a {display: block;padding: 10px;text-decoration: none;text-align: center;color: #999;}.elevator a.active {color: #1286ff;}.outline {padding-bottom: 300px;}</style>
</head>
<body><div class="container"><div class="header"><a href="http://pip.itcast.cn"><img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" /></a></div><div class="video"><video src="https://v.itheima.net/LapADhV6.mp4" controls></video></div><div class="elevator"><a href="javascript:;" data-ref="video">视频介绍</a><a href="javascript:;" data-ref="intro">课程简介</a><a href="javascript:;" data-ref="outline">评论列表</a></div></div><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script>// 1. 获取元素  要对视频进行操作const video = document.querySelector('video')video.ontimeupdate = _.throttle(() => {// console.log(video.currentTime)  // 获得当前的视频时间// 把当前的时间存储到本地存储localStorage.setItem('currentTime', video.currentTime)}, 1000)// 打开页面触发事件,就从本地存储里面取出记录的时间, 赋值给  video.currentTimevideo.onloadeddata = () => {// console.log(111)video.currentTime = localStorage.getItem('currentTime') || 0}</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pip安装指定包,找不到如何解决?

背景&#xff1a;现如今&#xff0c;在跑神经网络的时候&#xff0c;需要配置一些开源项目从而需要指定一些特定环境是必不可少的一个步骤&#xff0c;但是很多时候使用pip安装包的时候&#xff0c;总是找不到需要的版本。比如&#xff0c;今天需要配置open3d 0.15.1版本的环境…

玩游戏感觉很不流畅,无法进入游戏的解决方法

别说3A大作了&#xff0c;有时候觉得玩个小单机游戏感觉很不流畅&#xff0c;甚至进不去游戏&#xff0c;出现这种情况大家就得多关注下自己电脑故障问题了&#xff0c;驱动人生帮大家解决玩游戏不流畅&#xff0c;无法进入游戏的故障问题。 出现玩游戏感觉很不流畅&#xff0…

短视频seo矩阵系统+抖音小程序源码开源部署(二)

一、短视频矩阵源码系统开发要则&#xff1a; 1. 需求分析&#xff1a;对短视频平台的需求进行全面分析&#xff0c;确立系统开发目标和方向。 2. 技术选型&#xff1a;选用最适合的技术开发短视频矩阵系统&#xff0c;如前端框架、数据库、服务器等。 3. 系统设计&#xff…

写一个简单的静态html页面demo,包含幻灯片

效果图&#xff1a; 代码如下&#xff0c;图片文件可自行更换&#xff1a; <!DOCTYPE html> <html> <head><title>公司网站</title><style>/* 样式定义 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {backgrou…

基于docker的ubuntu云服务器jupyter深度学习环境配置指南

step1 安装docker 文档中的命令如下&#xff1a; sudo apt-get update sudo apt-get install ca-certificates curl gnupg sudo install -m 0755 -d /etc/apt/keyrings curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings…

计算机存储层次及常用存储简介

计算机存储层次&#xff08;Memory hierarchy&#xff09; 存储层次是在计算机体系结构下存储系统层次结构的排列顺序。 每一层于下一层相比 都拥有 较高的速度 和 较低延迟性 &#xff0c;以及 较小的容量 &#xff08;也有少量例外&#xff0c;如AMD早期的Duron CPU&#xf…

Python教程(2)——开发python常用的IDE

为什么需要IDE 在理解IDE之前&#xff0c;我们先做以下的实验&#xff0c;新建一个文件&#xff0c;输入以下代码 total_sum 0 for x in range(1,101):total_sum x print(total_sum)非常非常简单的一个程序&#xff0c;主要就是计算1加到100的值&#xff0c;我们将它重命名…

[vue]使用Element--Tree 树形控件使用props解决自定义slot-scope=“{ node, data }“的对象问题

在未用props定义的情况下&#xff0c;slot-scope"{ node, data }"解析data对象只有data含有lable和children才能识别出内容和子节点 当我获取的数据如下&#xff0c;没有lable和children&#xff0c;使用的是name和childList&#xff0c;如下图所示&#xff1a; 注意…

嵌入式系统移植

一、系统分层 移植的目的 不同架构的处理器指令集不兼容&#xff0c;即便是相同的处理器架构&#xff0c;板卡不同驱动代码也不兼容 Linux是一个通用的内核并不是为某一个特定的处理器架构或板卡设计的&#xff0c;所以从官方获取Linux源码后我们要先经过相应的配置使其与我们当…

vi/vim 如何在PowerShell里粘贴内容

vi/vim 如何在PowerShell里粘贴内容 Shift 鼠标右键 Vi/Vim 有两种主要的模式&#xff1a;命令模式和插入模式。 要进入命令模式&#xff0c;只需按下英文输入状态下的冒号&#xff08;:&#xff09;键。一旦进入命令模式&#xff0c;您可以在底部的命令行中输入各种命令。例…

服务器垃圾怎样清理?C盘垃圾如何清理?

好多人都在问电脑垃圾如何清理&#xff1f;服务器的垃圾清理是系统维护中必不可少的一项任务&#xff0c;而C盘垃圾的清理同样也是必须要做的任务之一。那么&#xff0c;如何一键清理服务器垃圾&#xff0c;C盘垃圾如何清理呢&#xff1f;今天&#xff0c;我会以服务器助手为例…

Linux基础+html和script一些基本语法

文章目录 linux 基础名字含义指令 html 语法style 样式属性样式标签属性颜色margin 边距ransform 旋转角度重复样式opacity 透明度div 方块元素box-shadow 阴影属性浮动 script获取节点onclick 点击触发setTimeout 定时器利用定时器实现 动画效果 javascript强弱语言区分parseI…