JS学习过程中的相关实验记录和验证(主要为12个demo)

虽然对于一些大神来说，我这里记录的东西都是些皮毛，但这些确实都是我在熟悉学习JS的过程中不懂的，遗忘的，混淆的知识点和技术，JS160集视频一刷就过，难以做到把每个知识点牢记于心，况且我还是开3倍速的，因此这个试验的目的不仅是为了培养我自己的代码能力和应用能力，更是为了理清知识框架体系，俗话说的好:话教人，十遍难，事教人，一遍会，亦是这个道理

那么废话少说，请看下面:

1.函数作用域问题和保护协议验证试验

html 复制代码

``` <script>
      var test=function(){
        var box1="成功"
        console.log(box1)
      }
      test();
      var test1=function(){
        console.log(box1)
      }
      test1();
    </script>

效果图

总结:可以看得出，在一个函数内部定义的变量，无法在另一个函数中访问到

2.函数访问闭包问题

js 复制代码

//代码引自[优降宁](https://blog.csdn.net/yjnlovepy "优降宁")
 btn.onclick = function () {
        juli = document.documentElement.scrollTop;
        var move = setInterval(function () {
          juli = juli / 2;
          if (juli <= 300) {
            clearInterval(move);
            document.documentElement.scrollTop = 0;
          } else {
            document.documentElement.scrollTop = juli;
          }
        }, 200);
      };

这是我在解决demo作业中变速返回顶部时做的一个试验，主要是为了理清函数之间各种量之间的调用和作用区域关系，当时觉得`setInterval`后面的这个函数内部是无法调用外面的juli这个量的，没想到竟然正常

总结:在JavaScript中，函数可以访问其外部作用域中的变量。这种行为被称为闭包。当函数被定义时，它会创建一个作用域链，它包含了函数被定义时所在的作用域以及所有父级作用域中的变量。因此，内部函数可以访问外部函数中的变量，即使外部函数已经执行完毕。

(同理得，外部的无法调用函数内部)

js 复制代码

```<script>
      console.log(box1);
      var test1 = function () {
        var box1 = "成功";
      };
      test1();
    </script>

在你的代码中，setInterval中的函数可以访问外部的juli变量，因为它是在外部函数中定义的。这使得内部函数能够访问并修改外部变量的值。这种行为是JavaScript中闭包的一个例子。

注意:由于`juli = juli / 2;`是在`setInterval`这个事件里面的，那么就说明每隔200毫秒整个`setInterval`都会执行一遍，不需要去考虑`juli = juli / 2;`位置的问题

3.js节点获取及操作

因为当时学的快，也没有考虑为啥节点的获取和操作方法有那么多，但当我在做发送验证码这个demo的时候，却因为id获取节点出了问题，这个时候我才知道规范的节点获取这么重要，一下就是一些利与弊:
**使用`var sub = document.getElementById("sub");`和`var btn = document.getElementById("btn");`的目的是将获取到的元素对象保存在变量中，以便在后续的代码中可以方便地引用这些元素对象。
直接使用元素的ID名可能会导致一些问题，比如在后续的代码中需要多次引用该元素，每次都通过document.getElementById()方法来获取元素对象会显得冗余和低效。而将获取到的元素对象保存在变量中，可以直接使用变量来引用元素对象，提高了代码的可读性和执行效率。
另外，使用变量来引用元素对象还可以避免在全局作用域中污染命名空间，减少可能的命名冲突。
因此，使用var sub = document.getElementById("sub");和var btn = document.getElementById("btn");是一种良好的编程实践，可以提高代码的可维护性和可扩展性。

4.给每一个input标签进行相同的监听操作

**问题:当我想获取全部的input标签，并且同时对其进行相同的操作时却发现只有第一个执行

js 复制代码

```<script>
var input = document.getElementsByTagName("input");
input.onclick = function () {
input.placeholder=" ";
};
//这是源码
</script>

搜索之后才知道:给所有的 `input` 元素都设置了相同的 id 属性值为 "item"，这是不允许的，因为 id 应该是唯一的。需要为每个 `input` 元素设置不同的 id 值。在 JavaScript 部分，我使用 document.getElementsByTagName("input") 获取所有的 `input` 元素，但是返回的是一个 HTMLCollection 对象，而不是单个元素。因此不能直接给 HTMLCollection 对象添加事件监听器。需要遍历 HTMLCollection，并给每个元素添加事件监听器。

(需要遍历的原因:HTMLCollection 对象是一个类数组对象，它包含了文档中符合特定条件的元素集合。HTMLCollection 并不是一个普通的数组，它没有原生的方法来添加事件监听器。因此，不能直接给 HTMLCollection 对象添加事件监听器(相当于获取的全部`input`标签组成一个新数组)。
如果想给 HTMLCollection 中的每个元素添加事件监听器，需要遍历 HTMLCollection，并给每个元素分别添加事件监听器。可以使用循环或者其他遍历方法（如 forEach）来实现这个操作。
例如，对于提供的代码，如果想给每个 input 元素添加点击事件监听器，可以使用循环来遍历 HTMLCollection，并给每个元素添加事件监听器：)

5.关于数组的复制问题

无论是使用`slice()`方法还是扩展运算符`[...]`，都会创建一个新的数组，并且修改原始数组不会影响新数组。

1.使用`slice()`

ini 复制代码

var originalArray = [1, 2, 3, 4, 5];
var copiedArray = originalArray.slice();
优点：这是最简单和最直接的方法，适用于大多数情况。
缺点：如果原始数组包含引用类型的元素（如对象或数组），则复制的数组仍然会引用相同的元素。
</li>
<li>

使用扩展运算符（spread operator）：

css 复制代码

var originalArray = [1, 2, 3, 4, 5];
var copiedArray = [...originalArray];
</li>
<li>

使用Array.from()方法：

ini 复制代码

var originalArray = [1, 2, 3, 4, 5];
var copiedArray = Array.from(originalArray);
优点：这是一种简洁、直观的方法，可以轻松复制数组。
缺点：与前两种方法相同，如果原始数组包含引用类型的元素，复制的数组仍然会引用相同的元素。
</li>

6.关于addEventListener()的用法及详细介绍(本人对此知识点比较薄弱，详文参考[菜鸟教程](https://www.runoob.com/jsref/met-element-addeventlistener.html)

定义:1.addEventListener() 方法用于向指定元素添加事件句柄。2.使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法:element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:- true - 事件句柄在捕获阶段执行

false- false- 默认。事件句柄在冒泡阶段执行

7.关于数组的push方法

定义和用法:push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
注意： 新元素将添加在数组的末尾。
注意： 此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用 unshift() 方法。
语法:array.push(item1, item2, ..., itemX)

8.关于JavaScript中的replace()函数(详文为CSDN博主「南栀~zmt」的原创文章，原文链接：https://blog.csdn.net/qq_46658751/article/details/123390095 )

replace函数简单用法:
2.1 replace(字符串,字符串) 假如我们有一个字符串中出现了错别字"背景"，需要用"北京"来替换，那么我们可以如下搞定：

ini 复制代码

let str = '我爱背景天安门';
str = str.replace('背景','北京');
console.log(str); // 输出结果：我爱北京天安门

我们发现，如果字符串str中有多个待替换的子串，比如本例中的"背景"，出现了2次，那么replace()方法只能给我们用目标字符串(北京）替换掉第1次出现的"背景"。只能替换一次多次替换需要多次调用
2.2 replace(正则表达式,字符串)

ini 复制代码

let str = '我爱背景天安门，但是背景雾霾太严重';
str = str.replace(/背景/g,'北京');
// 输出结果：我爱北京天安门，但是北京雾霾太严重
console.log(str);

2.3 replace(正则表达式,function(){}) 以上的用法还是比较直观的，但是能实现的功能也比较简单，如果需要做一些复杂的字符串替换运算，那么就需要使用较为高级（复杂）的用法，就是正则+function 的用法。说白了就是第一参数传一个正则表达式，我们下面称之为RegArg；第二个参数给一个函数，我们下面称之为FuncArg。这也是replace()的核心用法。(详情见原文)
本质：对str使用RegArg做match()匹配，如果匹配到多项结果（比如使用了全局匹配g，或者分组），那么每一个匹配结果都将执行一次FuncArg函数，并且用该函数的返回值替代源字符串中的匹配项。

9.js中怎么使一个函数内部能访问到另一个函数内部的变量

在JavaScript中，一个函数内部可以访问到另一个函数内部的变量，有几种常见的方法可以实现这个目标：

函数嵌套：将一个函数定义在另一个函数内部。内部函数可以访问外部函数的变量。

javascript 复制代码

function outerFunction() {
var outerVariable = "Hello";
function innerFunction() { console.log(outerVariable); // 可以访问外部函数的变量 } innerFunction();}
outerFunction(); // 输出 "Hello"

闭包：通过返回一个内部函数，使得内部函数能够访问外部函数的变量。

javascript 复制代码

function outerFunction() {
var outerVariable = "Hello";
return function innerFunction() { console.log(outerVariable); // 可以访问外部函数的变量 };}
var inner = outerFunction();inner(); // 输出 "Hello"

使用函数参数：将外部函数的变量作为参数传递给内部函数。

scss 复制代码

function outerFunction() {
var outerVariable = "Hello";
function innerFunction(outerVariable) { console.log(outerVariable); // 可以访问外部函数的变量 }
innerFunction(outerVariable);}outerFunction(); // 输出 "Hello"

这些方法都可以让一个函数内部访问到另一个函数内部的变量。选择哪种方法取决于你的具体需求和代码结构。

10.CSS属性:transform-origin属性

transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的位置对元素进行变换操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
用法:transform-origin: x-axis y-axis z-axis; transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值。

一个值：
必须是，或 left, center, right, top, bottom关键字中的一个。
两个值：
其中一个必须是，或left, center, right关键字中的一个。
另一个必须是，或top, center, bottom关键字中的一个。
三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是。它始终代表Z轴偏移量。
(详文请看[水木同学](https://juejin.cn/user/3667626522576174/posts))

11.HTML canvas rotate()方法

这段代码是用来设置时针、分针和秒针的旋转角度。`hourHand.style.transform`、`minuteHand.style.transform` 和 `secondHand.style.transform` 分别是用来获取时针、分针和秒针的样式属性 `transform`。
'rotate(' + hourAngle + 'deg)' 表示将时针旋转到 hourAngle 角度。同样的，minuteAngle 表示分针的旋转角度，secondAngle 表示秒针的旋转角度。
通过将这些角度值与 'rotate(' + angle + 'deg)' 字符串拼接起来，然后将结果赋值给 style.transform，可以实现将时针、分针和秒针旋转到指定角度的效果。
例如，如果 hourAngle 的值为 90，则 hourHand.style.transform 的值将变为 'rotate(90deg)'，这会将时针旋转到垂直向上的位置。

定义和用法(详文请看菜鸟教程)

rotate() 方法旋转当前的绘图。
注意： 旋转只会影响到旋转完成后的绘图。

12.关于函数外调用函数内部变量的问题(含return返回问题)

调用函数:

js 复制代码

```function getNumber() {
var number = 42;
return number;
}
var result = getNumber();
console.log(result); // 输出: 42

如果你在函数外部直接使用`var result = number;`，是无法访问到函数内部的变量`number`的。
在函数内部定义的变量，只在函数内部可见。它们被称为局部变量，只能在函数内部使用。当函数执行完毕后，局部变量的作用域也就结束了，无法在函数外部访问。
如果你想在函数外部访问函数内部的变量，你需要使用return语句将变量的值传递到函数外部。然后，你可以将函数调用的结果赋给一个变量，以便在外部使用。所以，如果你想在函数外部访问函数内部的变量，你需要使用return语句将变量的值返回，并将返回的值赋给一个变量。

13.random() 方法

实例
返回介于 0（包含） ~ 1（不包含）之间的一个随机数：
语法: Math.random();
输出结果：
0.8187115337170856
实例1

js 复制代码

``` 实例
在本例中，我们将取得介于 1 到 10 之间的一个随机数：
Math.floor((Math.random()*10)+1);

实例2

js 复制代码

```实例
以下函数返回 min（包含）～ max（不包含）之间的数字：
function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min) ) + min; }

14.关于弹窗效果的transform属性的了解

1.transform的居中方法

我们将`left`和`top`属性设置为50%，这将使`innerbox`的左上角位于父元素的中心。然后，通过使用`transform: translate(-50%, -50%)`，我们将`innerbox`相对于其自身的宽度和高度的一半进行平移，从而使其完全居于屏幕的中间。
请注意，为了使`transform`属性生效，你需要确保`innerbox`的定位方式为`absolute`或`fixed`，并且其父元素必须具有相对定位（`relative`）或固定定位（`fixed`）。

2.transform的其他用法

`transform`属性是CSS的一个属性，用于对元素进行变换（旋转、缩放、平移等）。
transform属性可以应用于任何定位元素（position属性值为relative、absolute、fixed或sticky的元素）。它可以通过指定不同的变换函数来实现各种效果。
以下是一些常用的transform函数：

translate(x, y): 平移元素，将元素沿着x轴和y轴移动指定的距离。
scale(x, y): 缩放元素，将元素沿着x轴和y轴分别缩放指定的比例。
rotate(angle): 旋转元素，将元素按指定的角度顺时针旋转。
skew(x-angle, y-angle): 倾斜元素，将元素按指定的角度沿着x轴和y轴倾斜。
通过组合这些变换函数，你可以创建各种复杂的动画和效果。

15.极其重要!document.querySelector和getElementsBy的区别!

`document.querySelector`和`document.getElementsByClassName`是两种常用的DOM选择器方法，它们有以下区别：

返回结果类型不同：

document.querySelector返回匹配的第一个元素（Element对象），如果没有匹配的元素，则返回null。
document.getElementsByClassName返回一个类数组对象（HTMLCollection或NodeList），其中包含所有具有指定类名的元素。

选择器语法不同：

document.querySelector使用CSS选择器语法，可以通过标签名、类名、ID、属性等进行选择。
document.getElementsByClassName只能通过类名进行选择，不支持其他选择器语法。

使用灵活性不同：

document.querySelector可以选择任意元素，并且可以根据需要使用更复杂的选择器进行选择。
document.getElementsByClassName只能选择具有特定类名的元素，无法选择其他类型的元素。
下面是使用示例：

js 复制代码

```1. / 使用document.querySelector选择器示例(需要在选择器前添加一个点（.）来表示类名，或者添加一个井号（#）来表示id)
var element = document.querySelector("#myElement"); // 通过ID选择元素
var elements = document.querySelector(".myClass"); // 通过类名选择元素
var element = document.querySelector("div.myClass"); // 通过标签名和类名选择元素
// 使用document.getElementsByClassName选择器示例
var elements = document.getElementsByClassName("myClass"); // 通过类名选择元素

16.给指定元素添加id选择器方法

使用`setAttribute()`方法：这个方法允许你为元素设置属性，包括ID属性。例如：

javascript 复制代码

var element = document.getElementById("trbox" + n);element.setAttribute("id", "jinumber");
javascript

直接修改id属性：你可以直接修改元素的id属性来赋予它特定的ID。例如：

ini 复制代码

var element = document.getElementById("trbox" + n);element.id = "jinumber";
javascript

使用classList属性：如果你想给元素添加多个类名，可以使用classList属性。其中的add()方法可以用来添加类名。例如：

csharp 复制代码

var element = document.getElementById("trbox" + n);element.classList.add("jinumber");
javascript

这些方法都可以根据你的需求将特定的ID应用于特定的元素。请将n替换为你想操作的具体元素的索引或标识符。

17.关于创建好一个元素节点后的相关用法

例.const img = document.createElement("img");
创建元素节点后，可以通过操作和设置其属性、添加到文档中，以及对其进行其他操作。常见的用途包括：

设置属性：可以通过 img.setAttribute("src", "image.jpg") 这样的方式为 <img> 元素设置属性，例如设置图片的源路径、替代文本、样式等。
添加到文档中：可以使用 parentElement.appendChild(img) 将 <img> 元素添加到文档中的某个父元素中。这样，图片就会在页面上显示出来。
事件处理：可以为 <img> 元素添加事件监听器，例如 img.addEventListener("click", handleClick)，以便在用户点击图片时执行相应的操作。
动态生成内容：通过创建 <img> 元素，你可以在页面上动态生成图片内容，例如根据用户的选择或其他条件来加载不同的图片。

18.关于事件监听的相关用法

例.

js 复制代码

window.addEventListener("load", layout);
window.addEventListener("resize", layout);
window.addEventListener("scroll", checkScroll);

这三句代码是用于在网页加载完成、窗口大小改变、滚动页面时触发相应的事件处理函数。

window.addEventListener("load", layout);: 这句代码表示在网页加载完成后，会触发名为 layout 的事件处理函数。通常用于在网页加载完成后进行一些初始化操作或调整页面布局。
window.addEventListener("resize", layout);: 这句代码表示在窗口大小改变时，会触发名为 layout 的事件处理函数。通常用于在窗口大小改变后重新调整页面布局，以适应新的窗口尺寸。
window.addEventListener("scroll", checkScroll);: 这句代码表示在滚动页面时，会触发名为 checkScroll 的事件处理函数。通常用于在滚动页面时执行一些与滚动相关的操作，例如固定导航栏或加载更多内容。
通过使用这些事件监听器，可以在特定的事件发生时执行相应的代码，以实现网页的交互和响应式设计。

19.关于JS的几个内置数学函数

1.Math.floor()
在JavaScript中，`Math.floor()`是一个内置的数学函数，用于向下取整。它接受一个数字作为参数，并返回小于或等于该数字的最大整数。
例如，Math.floor(3.8)将返回3，因为3是小于或等于3.8的最大整数。同样地，Math.floor(9.2)将返回9。
这个函数通常用于需要将浮点数转换为整数的情况，例如在计算或处理数组索引时。
2.Math.round
在JavaScript中，可以使用`Math.round()`函数来进行四舍五入。它接受一个数字作为参数，并返回最接近的整数。例如，`Math.round(3.8)`将返回4，因为3.8四舍五入后最接近的整数是4。同样地，`Math.round(9.2)`将返回9。
需要注意的是，Math.round()函数是按照四舍五入的规则进行近似处理，而不是简单地将小数部分舍去或进位。

JS学习过程中的相关实验记录和验证(主要为12个demo)

1.函数作用域问题和保护协议验证试验

2.函数访问闭包问题

注意:由于`juli = juli / 2;`是在`setInterval`这个事件里面的，那么就说明每隔200毫秒整个`setInterval`都会执行一遍，不需要去考虑`juli = juli / 2;`位置的问题

3.js节点获取及操作

4.给每一个input标签进行相同的监听操作

5.关于数组的复制问题

6.关于addEventListener()的用法及详细介绍(本人对此知识点比较薄弱，详文参考[菜鸟教程](https://www.runoob.com/jsref/met-element-addeventlistener.html)

7.关于数组的push方法

8.关于JavaScript中的replace()函数(详文为CSDN博主「南栀~zmt」的原创文章，原文链接：https://blog.csdn.net/qq_46658751/article/details/123390095 )

9.js中怎么使一个函数内部能访问到另一个函数内部的变量

10.CSS属性:transform-origin属性

11.HTML canvas rotate()方法

定义和用法(详文请看菜鸟教程)

12.关于函数外调用函数内部变量的问题(含return返回问题)

13.random() 方法

14.关于弹窗效果的transform属性的了解

1.transform的居中方法

2.transform的其他用法

15.极其重要!document.querySelector和getElementsBy的区别!

16.给指定元素添加id选择器方法

17.关于创建好一个元素节点后的相关用法

18.关于事件监听的相关用法

19.关于JS的几个内置数学函数

以上就是部分问题及技术知识点的总结，JS知识比较鱼龙混杂，接受难度还行，但熟练和记住的难度还是有的，多练多记吧，记住，你要一直做一个有实力却谦逊的人!****