这里写目录标题
一、作用域
1.let
在JavaScript中,let 关键字用于声明一个块级作用域的本地变量。这意味着 let 声明的变量只在它所在的代码块(例如,if 语句、函数体或任何被花括号 {} 包围的代码块)中可用。
if (this.currentView === 'point') {
// 创建一个数组
let selectionArr = [];
// ... 其他代码 ...
}
selectionArr变量只在这个if 语句的代码块内有效。一旦这个代码块执行完毕,selectionArr 变量就会被销毁,并且无法从外部访问。
如果您在另一个 if 语句或任何其他代码块中再次使用 let 声明了一个名为 selectionArr 的变量,那么这将是一个新的、独立的变量,与原来的 selectionArr 没有任何关系。即使两个变量有相同的名称,但由于它们位于不同的块级作用域中,因此它们是两个不同的变量。
if (this.currentView === 'point') {
let selectionArr = []; // 第一个 selectionArr,只在第一个 if 语句块中有效
// ... 其他代码 ...
}
// ... 可能是其他的代码 ...
if (this.anotherCondition) {
let selectionArr = []; // 第二个 selectionArr,与第一个无关,只在第二个 if 语句块中有效
// ... 其他代码 ...
}
在这两个 if 语句中,selectionArr 变量是完全独立的,它们的作用域仅限于各自的 if 语句块内。
2、scope.row
在 Vue 的 组件中,使用 允许你定义自定义内容,并通过 scope 参数访问当前行的数据。scope 对象通常包含了一些与当前行相关的数据和方法,比如 row(当前行的数据)、column(当前列的定义)等。
<el-table-column label="名称" width="140" align="center">
<template slot-scope="scope">
<span v-if="currentView === 'point'">
{{ scope.row.name }}
</span>
</template>
</el-table-column>
- scope.row.name:这里 scope.row 表示当前行的数据对象,而 name 是该对象的一个属性。这意味着你会从当前行的数据中取出 name 属性并显示它。
为什么不使用 {{ viewData.name }} 而使用 {{ scope.row.name }} 呢?原因可能有以下几点:
1.数据上下文:viewData 似乎是一个在组件的 data、computed 属性或 methods 中定义的变量,它可能包含了整个表格的数据或者其他一些数据。而 scope.row 是由 组件在内部传递的,专门针对当前行的数据。
2.迭代和动态内容: 通常与数组或对象列表一起使用,并为每一行重复渲染内容。因此,你需要有一个能够访问每一行数据的机制,这就是 scope.row 的作用。如果你使用 viewData.name,它将总是显示相同的数据(如果 viewData 是一个对象),或者无法正常工作(如果 viewData 是一个数组)。
3.组件化和重用:将渲染逻辑绑定到特定的 scope 允许这个 在不同的 实例中重用,而不需要更改模板或逻辑。
二、?
1、this.clickPoint({ target: this.$refs.initialPoint })
<div
class="map-button view-button"
@click="clickPoint"
ref="initialPoint"
>
点位信息
</div>
this.clickPoint({ target: this.$refs.initialPoint });
-
为什么是target?
-
在 this.clickPoint({ target: this.KaTeX parse error: Expected 'EOF', got '}' at position 19: …s.initialPoint }̲); 这行代码中,您似乎试图在…refs.initialPoint 获取到的 DOM 元素的引用。
-
但是,为什么选择 target 作为这个对象的属性名呢?这通常与原生 DOM 事件对象中的 target 属性有关。在原生 DOM 事件中,event.target 指向触发事件的元素。但在您手动调用 clickPoint 的情况下,您实际上并不是在模拟一个真正的 DOM 事件,所以使用 target 作为属性名可能只是为了保持某种语义上的一致性或遵循某种接口约定。
三、setInterval 和setTimeout 区别
setInterval
和setTimeout
都是用于 处理定时操作 的函数
setTimeout:
- 一次性执行:setTimeout 在指定的延迟时间之后只执行一次代码。
- 用法:当你希望某段代码在一段时间后执行一次时,使用 setTimeout。
setTimeout(() => {
console.log('This runs after 5 seconds.');
}, 5000);
在这个例子中,代码在 5
秒后执行一次,然后就停止了。
setInterval:
- 重复执行:setInterval 在指定的时间间隔内,会反复执行代码,直到你手动清除它(使用 clearInterval)。
- 用法:当你希望某段代码以固定的时间间隔持续执行时,使用 setInterval。
const intervalId = setInterval(() => {
console.log('This runs every 5 seconds.');
}, 5000);
在这个例子中,代码会每隔 5 秒钟执行一次,直到你调用 clearInterval(intervalId)
来停止它。
- 所以只有一个setInterval 然后每5s一次 一直运行几个小时都没事吗
- 没错,如果你只有一个
setInterval
,然后每5秒执行一次,即使持续运行 几个小时,也是没问题的。这种情况下,浏览器和 JavaScript 引擎能够很好地管理这个单一的定时器,不会造成内存泄漏或性能问题。
结论
-
只要
setInterval
内的代码是合理的、不会持续创建未释放的资源或执行非常耗时的任务,你完全可以让它运行几个小时甚至更长时间,而不会出现内存或性能问题。 -
所以啊,放心大胆地用吧~ 浏览器和 JavaScript 都会很稳地帮你跑这个定时器,保证不会有什么意外发生😘
四、indexOf 和$set
- indexOf
- array: 你要操作的数组。
- item: 你要查找的元素。
- start: (可选)从数组的哪个位置开始查找,默认是从第一个元素开始。
- this.$set
- target: 你要操作的对象或者数组。
- key: 你要设置或更新的属性名。如果是数组,则是元素的索引。
- value: 你想设置的值。
五、_this,.then
- 写了俩.then,为啥?
- let _this = this;为什么要用 _this?
六、遍历(.map .find .forEach)
- 其他