JS进阶--JS听到了不灭的回响

作用域

作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问

作用域分为局部和全局

局部作用域

局部作用域分为函数和块

那 什么是块作用域呢?

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

全局作用域

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

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

1. 为 window 对象动态添加的属性默认也是全局的,不推荐!

2. 函数中未使用任何关键字声明的变量为全局变量,不推荐!!!

3. 尽可能少的声明全局变量,防止全局变量被污染

作用域链

包没错误的,结果是2

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

在函数被执行时,会优先查找当前函数作用域中查找变量,如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域

1. 嵌套关系的作用域串联起来形成了作用域链

2. 相同作用域链中按着从小到大的规则查找变量

3. 子作用域能够访问父作用域,父级作用域无法访问子级作用域

从小到大捏 

JS垃圾回收机制

什么是垃圾回收机制?

让我们来了解一下内存的生命周期:

内存泄漏是指程序中分配的内存由于某种原因未释放或者无法释放 

总结:

下面对垃圾回收机制做一个算法说明:

堆栈空间分配区别:

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

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

之前都学过,不多说了

垃圾回收算法有两种:引用计数法和标记清除法

引用计数:

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

算法:

1. 跟踪记录被引用的次数

2. 如果被引用了一次,那么就记录次数1,多次引用会累加 ++

3. 如果减少一个引用就减1 --

4. 如果引用次数是0 ,则释放内存

 引用计数法也是有一定缺陷的,如果两个对象互相引用,尽管他们不再使用,垃圾回收器也不会进行回收,从而导致内存泄漏

这样的引用不如果很大量,那就会导致大量的内存泄漏

现在的浏览器已经不用引用计数算法了,而是使用标记清除法:

看看小示意图:

不错

标记清除法的核心:从根部扫描对象,能查找到的就是使用的,查找不到的就要回收

闭包

那么问题来了,什么是闭包?

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

闭包=内层函数+外层函数的变量

先来看看代码:

<!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><script>function outer(){let a =10function fn(){console.log(a)}fn()}outer()</script>
</body>
</html>

这个什么closure(outer)就是闭包的意思 

闭包可以:封闭数据、提供操作,外部也可以访问函数内部的变量

闭包的基本格式:

闭包可以实现数据的私有,比如我们要做统计函数调用次数,调用一次,就++

 

光是这个函数就可以实现对应的功能,可是问题就在于count是一个全局变量很容易被修改

<!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><script>function fn(){let count = 1function fun(){count++console.log(`函数被调用${count}次`)}return fun}const result = fn()result()result()</script>
</body>
</html>

这样就可以实现数据的私有了,因为没办法直接修改count

 outer = fn = function fn() { }

我们具体解释:

闭包 =  内层函数 + 外层函数的变量

闭包:

封闭数据,实现数据私有,外部也可以访问函数内部的变量

闭包很有用,因为它允许将函数与其所操作的某些数据(环境)关联起来

闭包可能引起内存泄漏

变量提升

什么是变量提升?

变量提升是JS中 的一种现象,允许变量在声明致歉就被访问(仅仅存在于var声明变量):

tips:

JS初学者经常花很多时间才能习惯变量提升,还经常出现一些意想不到的bug,正因为如此,ES6 引入了块级作用域, 用let 或者 const声明变量,让代码写法更加规范和人性化

总结:

函数进阶

函数提升

我们学习函数提升的目标是能够说出函数提升的过程

函数提升与变量提升比较相似,是指函数在声明之前就可以被调用

函数 提升:

1、函数提升能够使函数的声明调用 更加灵活

2、函数表达式不存在提升的现象

3、函数提升出现在相同的作用域当中

函数参数

1、产品需求:写一个求和函数

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

那么怎么 写形参呢?

有一个东西叫做动态参数:arguments

可以得到传过来的参数,是伪数组

arguments 是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参

<!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><script>function getSum() {let sum = 0for (let i = 0; i < arguments.length; i++) {sum += arguments[i]}console.log(sum)}getSum(2, 3, 4)</script>
</body></html>

而除了动态参数,其实剩余参数也能解决这个问题:

<!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><script>function getSum(...arr){console.log(arr)}getSum(2,3)getSum(1,2,3)</script>
</body>
</html>

 如果这样的话,那剩余参数和动态参数又有什么区别呢?

其实剩余参数是剩下的参数

...是语法符号,至于最末的函数形参之前,用于获取多余的实参

获取的剩余实参是真的数组

开发中提倡使用剩余参数,可以这样取样:

<!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><script>function getSum(a, b, ...arr) {console.log(arr)}getSum(2, 3)getSum(1, 2, 3)</script>
</body></html>

总结:

接下来讲一下展开运算符

展开运算符可以将一个数组进行展开

 

它只是进行展开,并不会修改原数组

可以很方便的求数组的最大值最小值,或者合并数组

<!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><script>const arr = [1,5,3,8,2]console.log(Math.max(...arr))console.log(Math.min(...arr))</script>
</body>
</html>

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

箭头函数

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

更适用于那些本来需要匿名函数的地方

基本语法

当函数只有一个形参的时候可以省略小括号:

<!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><script>const fn = x =>{console.log(x)}fn(1)</script>
</body>
</html>

当函数体只有一行代码的时候,可以写到一行上,并且无需使用return(直接返回值)

 

有更加简洁的语法,这是阻止表单的默认提交事件:

<!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><script>const form = document.querySelector('form')form.addEventListener('click',ev=>ev.preventDefault())</script>
</body>
</html>

还有一种语法是:加括号的函数体返回对象字面量表达式

 由于对象的大括号和箭头函数的冲突了,所以拿小括号包裹起来

箭头函数参数

普通函数有arguments动态参数

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

<!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><script>// 利用箭头函数求和const getSum = (...arr) => {let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}console.log(sum)return sum}getSum(2, 3)</script>
</body></html>

就是没有arguments动态参数,但是有剩余参数

箭头函数this

在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值, 非常令人讨厌。 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this

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

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

DOM事件回调函数不推荐使用箭头函数,特别是需要用到this的时候

Ø 事件回调函数使用箭头函数时,this 为全局的 window

解构赋值

数组解构

解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值

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

基本语法:

1. 赋值运算符 = 左侧的 [] 用于批量声明变量,右侧数组的单元值将被赋值给左侧的变量

2. 变量的顺序对应数组单元值的位置依次进行赋值操作

可以这样进行快速的交换两个变量:

看看,这是冒泡排序的简洁写法:

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

JS前面有必须要加分号的情况:

1.立即执行函数:

2、数组解构

总结:

让我们看看不同的情况吧:

变量的数量大于单元值的数量的时候,多余的变量将被赋值为undefined

还有别的情况:

允许初始化变量的默认值,且只有单元值为 undefined 时默认值才会生效

对象解构

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

基本的语法:

1. 赋值运算符 = 左侧的 {} 用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名相同的变量

3. 注意解构的变量名不要和外面的变量名冲突否则报错

4.对象中找不到与变量名一致的属性时变量值为 undefined

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

可以从一个对象中提取变量并且同时修改新的变量名

我们可以通过对象解构给新的变量名赋值:

:表示赋值给谁

让我们看看数组对象的结构:

 

<!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><script>//这是后台传递过来的数据,请选出data里面的数据方便后面渲染w
const msg = {"code":200,"msg":"获取新闻列表成功","data":[{"id":1,"title":"5G商用自己,三大运用商收入下降","count":58},{"id":2,"title":"国际媒体头条速览","count":56},{"id":3,"title":"乌克兰和俄罗斯持续冲突","count":1669},]
}
function render({data:MyData}){console.log(MyData)
}
render(msg)</script>
</body>
</html>

遍历数组的foreach方法

foreach方法用于调用数组的每个元素,并将元素传递回给参数

 

 tips:

1. forEach 主要是遍历数组

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

适合遍历数组对象 

综合案例

接下来做案例,进行渲染,foreach+对象解构

//1.声明一个空字符串变量先let str = ' 'goodsList.forEach(item => {console.log(item)      //可以得到每一个数组元素对象})

 只有一个参数的箭头函数可以省略小括号

然后我们进行追加,并在html中显示:

//1.声明一个空字符串变量先let str = ' 'goodsList.forEach(item => {// console.log(item)      //可以得到每一个数组元素对象str += `<div class="item"><img src="" alt=""><p class="name">111</p><p class="price">111</p></div>`})document.querySelector('.list').innerHTML = str

艺术就是解构:

 //1.声明一个空字符串变量先let str = ' 'goodsList.forEach(item => {// console.log(item)      //可以得到每一个数组元素对象const {name,price,picture} = item     //解构就是idstr += `<div class="item"><img src="${picture}" alt=""><p class="name">${name}</p><p class="price">${price}</p></div>`})document.querySelector('.list').innerHTML = str

代码:

<!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><style>* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 0 auto;display: flex;flex-wrap: wrap;padding-top: 100px;}.item {width: 240px;margin-left: 10px;padding: 20px 30px;transition: all .5s;margin-bottom: 20px;}.item:nth-child(4n) {margin-left: 0;}.item:hover {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);transform: translate3d(0, -4px, 0);cursor: pointer;}.item img {width: 100%;}.item .name {font-size: 18px;margin-bottom: 10px;color: #666;}.item .price {font-size: 22px;color: firebrick;}.item .price::before {content: "¥";font-size: 14px;}</style>
</head><body><div class="list"><!-- <div class="item"><img src="" alt=""><p class="name"></p><p class="price"></p></div> --></div><script>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 = ' 'goodsList.forEach(item => {// console.log(item)      //可以得到每一个数组元素对象const {name,price,picture} = item     //解构就是idstr += `<div class="item"><img src="${picture}" alt=""><p class="name">${name}</p><p class="price">${price}</p></div>`})document.querySelector('.list').innerHTML = str</script>
</body></html>

接下来还需要实现一个可以筛选的模块

 筛选数组有一个filter方法

它可以创建一个新的数组,新的数组中的元素是通过检查指定数组中符合条件的所有元素

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

语法:

例子:

filter() 筛选数组

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

参数:currentValue 必须写, index 可选

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

首先做初始的页面渲染

渲染页面 利用forEach 遍历数据里面的 数据,并渲染数据列表

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

步骤一和前面相同,不赘述

//渲染函数  封装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>`});document.querySelector('.list').innerHTML = str}render(goodsList)

步骤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>商品渲染</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 0 auto;display: flex;flex-wrap: wrap;}.item {width: 240px;margin-left: 10px;padding: 20px 30px;transition: all .5s;margin-bottom: 20px;}.item:nth-child(4n) {margin-left: 0;}.item:hover {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);transform: translate3d(0, -4px, 0);cursor: pointer;}.item img {width: 100%;}.item .name {font-size: 18px;margin-bottom: 10px;color: #666;}.item .price {font-size: 22px;color: firebrick;}.item .price::before {content: "¥";font-size: 14px;}.filter {display: flex;width: 990px;margin: 0 auto;padding: 50px 30px;}.filter a {padding: 10px 20px;background: #f5f5f5;color: #666;text-decoration: none;margin-right: 20px;}.filter a:active,.filter a:focus {background: #05943c;color: #fff;}</style>
</head><body><div class="filter"><a data-index="1" href="javascript:;">0-100元</a><a data-index="2" href="javascript:;">100-300元</a><a data-index="3" href="javascript:;">300元以上</a><a href="javascript:;">全部区间</a></div><div class="list"><!-- <div class="item"><img src="" alt=""><p class="name"></p><p class="price"></p></div> --></div><script>// 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',},]//渲染函数  封装function render(arr) {//声明空字符串let str = ' '//遍历数组 增加字符串arr.forEach(item => {//解构const { name, picture, price } = itemstr += ` <div class="item"><img src="${picture}" alt=""><p class="name">${name}</p><p class="price">${price}</p></div>`});document.querySelector('.list').innerHTML = str}render(goodsList)//过滤筛选document.querySelector('.filter').addEventListener('click', e => {const { tagName, dataset } = e.target//判断if (e.target.tagName === 'A') {let arr = goodsListif (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)}})</script>
</body></html>

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

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

相关文章

计算机网络 (26)互联网的路由选择协议

一、路由选择协议的基本概念 路由选择协议是计算机网络中用于确定数据包在网络中传输路径的一种协议。它帮助路由器构建和维护路由表&#xff0c;以便根据目的地址将数据包转发到正确的下一跳路由器。路由选择协议分为静态路由选择协议和动态路由选择协议两大类。 二、静态路由…

Spring项目创建流程及配置文件bean标签参数简介

1. 项目搭建流程 1. pom.xml中引入依赖Spring-webMVC <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc --><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><…

左神算法基础巩固--2

文章目录 稳定性选择排序冒泡排序插入排序归并排序快速排序堆排序 哈希表链表解题 稳定性 稳定性是指算法在排序过程中保持相等元素之间相对顺序的特性。具体来说&#xff0c;如果一个排序算法是稳定的&#xff0c;那么对于任意两个相等的元素&#xff0c;在排序前它们的相对顺…

UART串口数据分析

串口基础知识详细介绍&#xff1a; 该链接详细介绍了串并行、单双工、同异步、连接方式 https://blog.csdn.net/weixin_43386810/article/details/127156063 该文章将介绍串口数据的电平变化、波特率计算、脉宽计算以及数据传输量的计算。 捕获工具&#xff1a;逻辑分析仪&…

机器学习模型评估指标

模型的评估指标是衡量一个模型应用于对应任务的契合程度&#xff0c;常见的指标有&#xff1a; 准确率&#xff08;Accuracy&#xff09;: 正确预测的样本数占总样本数的比例。适用于类别分布均衡的数据集。 精确率&#xff08;Precision&#xff09;: 在所有被预测为正类的样…

面试题解,JVM中的“类加载”剖析

一、JVM类加载机制说一下 其中&#xff0c;从加载到初始化就是我们的类加载阶段&#xff0c;我们逐一来分析 加载 “加载 loading”是整个类加载&#xff08;class loading&#xff09;过程的一个阶段&#xff0c;加载阶段JVM需要完成以下 3 件事情&#xff1a; 1&#xff0…

腾讯云AI代码助手编程挑战赛-古诗词学习

一、作品介绍 在科技与文化深度交融的当下&#xff0c;“腾讯云 AI 代码助手编程挑战赛 - 每日古诗词” 宛如一颗璀璨的新星&#xff0c;闪耀登场。它绝非一场普通的赛事&#xff0c;而是一座连接编程智慧与古典诗词韵味的桥梁。 这项挑战赛以独特的视角&#xff0c;将每日古…

GelSight Mini视触觉传感器凝胶触头升级:增加40%耐用性,拓展机器人与触觉AI 应用边界

马萨诸塞州沃尔瑟姆-2025年1月6日-触觉智能技术领军企业Gelsight宣布&#xff0c;旗下Gelsight Mini视触觉传感器迎来凝胶触头的更新。经内部测试&#xff0c;新Gel凝胶触头耐用性提升40%&#xff0c;外观与触感与原凝胶触头保持一致。此次升级有效满足了客户在机器人应用中对设…

【C++入门】详解(上)

目录 &#x1f495;1.C中main函数内部———变量的访问顺序 &#x1f495;2.命名空间域namespace &#x1f495;3.命名空间域&#xff08;代码示例&#xff09;&#xff08;不要跳&#xff09; &#x1f495;4.多个命名空间域的内部重名 &#x1f495;5.命名空间域的展开 …

Ungoogled Chromium127 编译指南 MacOS篇(八)- 开始编译

1. 引言 完成了所有依赖包的安装后&#xff0c;我们终于来到了最关键的编译阶段。在开始编译之前&#xff0c;有一些重要的配置信息需要了解。本文将指导您完成整个编译过程。 2. 签名相关说明 虽然在我们的测试编译中不需要进行签名操作&#xff0c;但了解官方的签名要求仍…

使用uniapp 微信小程序一些好用的插件分享

总结一下自己在开发中遇见的一问题&#xff0c;通过引入组件可以快速的解决 1.zxz-uni-data-select 下拉框选择器(添加下拉框检索&#xff0c;多选功能&#xff0c;多选搜索功能&#xff0c;自定义 下拉框插件&#xff0c;使用这个的原因是因为 uniui uview 组件库下拉框太…

腾讯云AI代码助手编程挑战赛-有趣的冷知识分享

作品简介 有趣的冷知识这一编程主要用于对于小朋友的探索力的开发&#xff0c;让小朋友在一开始就对学习具有探索精神。在信息化时代下&#xff0c;会主动去学习自己认知以外的知识&#xff0c;同时丰富了眼界&#xff0c;开拓了新的知识。 技术架构 使用python语言的TK库…

使用 SQL 和表格数据进行问答和 RAG(7)—将表格数据(CSV 或 Excel 文件)加载到向量数据库(ChromaDB)中

将表格数据&#xff08;CSV 或 Excel 文件&#xff09;加载到向量数据库&#xff08;ChromaDB&#xff09;中。这里定义的类 PrepareVectorDBFromTabularData&#xff0c;它的主要功能是读取表格数据文件到DataFrame中、生成嵌入向量、并将这些数据存储在向量数据库的集合中&am…

攻防世界 wtf.sh-150

点进去&#xff0c;发现是一个类似于论坛的网站&#xff0c;并且对报错等做了处理 用御剑扫描一下 ​ 发现是php形式的文件&#xff0c;但点进去访问不了。看看wp&#xff0c;发现此题存在路径穿越漏洞&#xff0c;就是&#xff08;如果应用程序使用用户可控制的数据&#xff0…

【Spring】Redis缓存+ehcache

文章目录 基于Spring的RedisehcacheRedis 缓存配置Cacheable 注解CacheEvict 注解缓存配置 基于Spring的Redisehcache Redis 缓存配置 在项目中添加 Redis 的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

UE5 打包要点

------------------------- 1、需要环境 win sdk &#xff0c;大约3G VS&#xff0c;大约10G 不安装就无法打包&#xff0c;就是这么简单。 ----------------------- 2、打包设置 编译类型&#xff0c;开发、调试、发行 项目设置-地图和模式&#xff0c;默认地图 项目…

小程序textarea组件键盘弹起会遮挡住输入框

<textarea value"{{remark}}" input"handleInputRemark" ></textarea> 如下会有遮挡&#xff1a; 一行代码搞定 cursor-spacing160 修改后代码 <textarea value"{{remark}}" input"handleInputRemark" cursor-spacin…

git的rebase和merge的区别?

B分支从A分支拉出 1.git merge 处于A分支执行&#xff0c;git merge B分支:相当于将commit X、commit Y两次提交&#xff0c;作为了新的commit Z提交到了A分支上。能溯源它真正提交的信息。 2.git rebase 处于B分支&#xff0c;执行git rebase A分支&#xff0c;B分支那边复…

Cadence——virtuous生成的symbol其端口自动添加注释

新换的工艺库&#xff0c;环境变量也会发生变化&#xff0c;毕竟每一家PDK下的.cdsinit 和 .cdsenv文件不尽相同。 这次新换的PDK&#xff0c;搭建完Schcematic之后&#xff0c;再生成的Symbol&#xff0c;发现其pin口&#xff0c;也就是端口没有自动生成注释&#xff0c;我就…

CClinkIEfield Basic转Modbus TCP网关模块连接三菱FX5U PLC

捷米特JM-CCLKIE-TCP是自主研发的一款CCLINK IE FB从站功能的通讯网关。该产品主要功能是将各种 MODBUS-TCP 设备接入到 CCLINK IE FB网络中。 捷米特JM-CCLKIE-TCP网关连接到CCLINK IE FB总线中做为从站使用&#xff0c;连接到 MODBUS-TCP 总线中做为主站或从站使用。 为了打破…