在JavaScript中，for...in和for...of是两种不同的循环语句，它们被用于遍历不同类型的数据结构。

for...in

描述：for...in循环用于遍历一个对象的属性。
行为：它迭代对象的所有可枚举属性，包括原型链上继承的属性。
适用场景：
当需要遍历对象属性名时使用。
适合用于对象自定义属性的迭代。
不推荐用于数组的迭代，因为它不仅遍历数组索引，还可能遍历自定义属性及原型链上的属性。

for...of

描述：for...of循环用于遍历可迭代对象的元素，如数组、字符串、Map、Set等。
行为：它迭代对象的值，而不是属性名。
适用场景：
当需要遍历数组、字符串、类数组对象（如NodeList）、Map、Set、以及实现了可迭代协议的自定义对象的值时使用。
适合用于遍历各种集合对象中的元素值。
不适用于普通对象，因为普通对象默认不是可迭代的。

// for...in 示例
const obj = { a: 1, b: 2, c: 3 };
for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// for...of 示例
const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
  console.log(value);
}

在for...in示例中，将会输出对象obj的每个属性和值。而在for...of示例中，将会输出数组arr中的每个数字值。
注意
使用for...in遍历数组时应当小心，因为该方法遍历的是对象的键，而不是值。如果数组对象上有附加属性或者数组原型被扩展，则这些属性也会被遍历。这不是遍历数组元素的推荐方法。而for...of则提供了一种简单而直接的方式来迭代数组元素。
总结来说，for...in主要用于遍历对象的属性，而for...of主要用于遍历具有迭代行为的集合对象的元素值。选择哪个循环语句取决于你的具体需求和正在操作的数据类型。

textContent、innerHTML和insertAdjacentHTML是JavaScript中用于操作DOM元素内容的三种不同方法。每种方法都有其特定的用途和行为。
textContent
描述：textContent属性用于获取或设置指定节点及其后代的文本内容。
特点：当设置内容时，它会替换元素的所有子节点，并且只能设置文本内容，不能解析HTML标签。
使用场景：适用于当你只需要操作文本，而不需要HTML标签时。这种方法防止了HTML注入，更加安全。
innerHTML
描述：innerHTML属性用于获取或设置HTML或XML元素中的HTML内容。
特点：可以解析HTML标签，并将其渲染成对应的元素。使用此属性设置HTML内容时，浏览器会解析字符串并创建新的DOM树。
使用场景：当你需要包含HTML标签的内容时使用，但需要注意避免跨站脚本（XSS）攻击。
insertAdjacentHTML
描述：insertAdjacentHTML方法将指定的文本解析为HTML或XML，并将生成的节点插入到DOM树中的指定位置。
特点：它不会重新解析调用它的元素（从而不会破坏元素内部已经存在的DOM结构），而只是添加新的元素，这使得它相对于innerHTML来说性能更优。
参数：接受两个参数，第一个是插入位置（'beforebegin'、'afterbegin'、'beforeend'、'afterend'），第二个是要插入的HTML字符串。
使用场景：适用于需要将内容插入到元素内部或周围，而不是替换元素内部所有内容的情况。更适合动态添加内容，因为它允许更细致地控制插入的位置。

insertAdjacentHTML方法的使用场景包括但不限于以下几种：
动态内容插入：当你需要在页面上动态地插入新的HTML元素或内容时，insertAdjacentHTML可以让你指定插入的位置，而不需要替换或重写现有的元素内部HTML。
性能优化：如果你需要向页面中频繁添加元素，insertAdjacentHTML通常比innerHTML更高效，因为它不需要重新解析调用它的元素的内部HTML，这可以减少重绘和重排带来的性能开销。
避免直接DOM操作开销：直接使用DOM方法（如createElement和appendChild）创建和添加复杂的HTML结构可能很繁琐。相比之下，insertAdjacentHTML可以一次性插入整个HTML片段。
维持现有脚本和监听器：在不需要或不想干扰元素内部现有子节点的事件监听器或脚本运行的情况下，使用insertAdjacentHTML可以插入新内容而不影响现有内容。
页面模板填充：当使用模板文字来生成HTML内容时，可以使用insertAdjacentHTML将生成的内容插入到页面的指定位置。
快速原型和测试：在开发过程中，当需要快速测试或原型设计时，insertAdjacentHTML可以方便快速地将HTML片段加入页面。
插入位置参数
insertAdjacentHTML方法接收两个参数：第一个参数是一个表示相对位置的字符串，第二个参数是要插入的HTML字符串。第一个参数可以是以下四个值之一：
'beforebegin'：在当前元素之前插入HTML。
'afterbegin'：在当前元素的第一个子节点之前插入HTML。
'beforeend'：在当前元素的最后一个子节点之后插入HTML。
'afterend'：在当前元素之后插入HTML。
实例
假设你有一个列表，并且想要在列表的末尾添加新的列表项，可以使用insertAdjacentHTML如下：

var list = document.getElementById('myList');
list.insertAdjacentHTML('beforeend', '<li>新的列表项</li>');

这将在现有列表的最后添加一个新的

        getCursorLeft(e) {
            const event = e.changedTouches ? e.changedTouches[0] : e;
//这行代码首先检查e.changedTouches是否存在，这是为了区分触摸事件（如移动设备）与鼠标事件（如桌面设备）。如果e.changedTouches存在，表示当前是一个触摸事件，因此event被赋予e.changedTouches[0]，即首个触摸点。若不存在，直接使用e作为事件对象。

            const { left, width } = this.container.getBoundingClientRect();
//使用getBoundingClientRect方法获取当前组件容器的left位置和width宽度。left代表容器左边缘相对于视口的水平位置，width是容器的宽度。

            const sliderButtonWidthPercent = (this.slider.getBoundingClientRect().width + 4) * 100 / width;
//获取滑块按钮的宽度，并且稍微增加了一个固定值4（可能是为了考虑边缘的留白、边框或其他视觉效果），然后计算它相对于容器宽度的百分比占比。

            const min = sliderButtonWidthPercent / 2;
            const max = 100 - min;
//基于滑块按钮的宽度比例，计算出滑块可以移动的最小和最大百分比值。这确保滑块不会超出容器的边界。
            const delta = event.pageX - left;
            let percent = (delta / width) * 100;
//这里，event.pageX获取光标相对于文档（页面）左侧的位置。从这个值中减去容器的left值，可以得到光标在容器内的相对位置delta。再将这个相对位置转换为容器宽度的百分比（percent）。
            if (percent < min) percent = min;
            if (percent > max) percent = max;

            return percent
        }
    }

在JavaScript中，函数内的this关键字的行为非常依赖于函数是如何被调用的。在user, user2, 和 user3的例子中，sayHi函数被定义了三种不同的方式，这导致this的行为也存在差异。

user对象

这里使用了一个名为sayHi的普通函数表达式：

let user = {
    name: "Tom",
    sayHi: function () {
        console.log('Hi, I am ' + this.name);
    }
}

在这个例子中，sayHi是一个普通的函数属性。当它作为方法（即通过对象引用调用时，例如user.sayHi()）被调用时，this指的是调用它的对象，即user。

user2对象

这里使用了一个ES6中的方法简写：

let user2 = {
    name: "Jack",
    sayHi() {
        console.log('Hi, I am ' + this.name);
    }
}

user2例子中的sayHi定义和user的很相似，唯一的区别是它使用了ES6的简化语法来创建方法。这并不改变this的行为：作为user2对象的方法被调用时，this同样指向user2。

user3对象

这里使用了箭头函数：

let user3 = {
    name: "Ben",
    sayHi: () => {
        console.log('Hi, I am ' + this.name);
    }
}

user3.sayHi使用了一个箭头函数，箭头函数不绑定this，相反，它们捕获定义时上下文的this值。在全局代码中定义的箭头函数中的this指向全局对象，在浏览器中通常是window。因此，无论你何时何地调用user3.sayHi，它打印出来的this.name总会引用定义时捕获的this的name属性，而不是user3的name属性。如果user3.sayHi在全局范围内定义，如在浏览器中使用<script>直接定义，则this.name很可能是undefined。

关于setTimeout
当你直接传递方法给setTimeout，如setTimeout(user.sayHi, 1000)，你传递的是函数本身，而不是函数的调用。结果是，当setTimeout执行这个函数时，它没有了对象上下文，因此this不再引用原始的对象，除非像user和user2示例中一样使用.bind()方法明确地绑定this。
总结下三者间的区别：
user和user2展示了在对象内部定义方法的两种方式，都可以使用sayHi作为方法调用，其中this指向调用的对象。
user3的箭头函数导致this在定义时就固定下来，对箭头函数使用bind是无效的，因为箭头函数不绑定this。
使用.bind()可以修正setTimeout调用中this的指向，确保当方法在将来某个时间点执行时，this指向正确的对象。

call，apply和bind都是JavaScript中的函数方法，它们都可以改变函数调用时this的指向。不过它们之间各有其特定的使用场景和差异。
call： call()方法接受一个参数列表，这个方法无需改变函数的调用时机，可立即执行函数。常常用来借用别的对象的方法。

func.call(thisArg, arg1, arg2, ...)

apply： apply()方法接受一个包含多个参数的数组，与call()类似，apply()也会立即执行函数。当你不知道要传递给函数多少个参数，或者参数是作为一个数组存在时，apply()非常有用。

func.apply(thisArg, [argsArray])

bind： bind()方法返回一个新的函数，使得这个新函数将this设置为bind()的第一个参数。bind()不会立即执行函数，而是返回一个绑定了正确this值的新函数，这点是bind()和call()、apply()的主要区别。bind()非常适合用在事件监听上。

newFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])

总结一下：
call和apply都是为了解决不同对象之间方法的借用，包括他们的参数列表形式不同之处。
bind是将函数体内this对象绑定为指定对象，返回一个新函数，供日后调用。
apply和call都会立即执行函数，而bind不会。

案例：

        // // 数组连接(concatenate)： 使用apply将一个数组添加到另一个数组的末尾。
        let array1 = [1, 2, 3]
        let array2 = [4, 5, 6]
        Array.prototype.push.apply(array1, array2)
        console.log(array1)  // 输出: [1, 2, 3, 4, 5, 6]
        // // 这个例子中，apply方法改变了push方法的上下文并执行它，新的上下文是array1，参数是array2。

        // // // 找到数组中的最大值： 使用apply或者call找到数组中的最大值
        let array = [1, 2, 3, 4, 5]
        console.log(Math.max.apply(null, array)); //5
        // // 在这个例子中，apply方法更改了Math.max的上下文并执行它，通过传递数组作为参数。同样，call也可帮助我们达到同样的效果:
        console.log(Math.max.call(null, ...array)); //5
        // // 这里...array是ES6的语法特性，它将数组转为参数序列。

        // 函数柯里化： bind经常用于函数柯里化。它允许你部分地应用函数，将其余的参数留到函数被实际调用时指定。
        function add(x) {
            return function (y) {
                return x + y
            }
        }
        let add5 = add(5).bind(this);
        console.log(add5(3));
        // 在这个例子中，bind方法创建了一个新的add5函数，它是add(5)的一个固定版本，现在它总是将5作为第一个参数加到其余的参数上。

        // 配合 setTimeout()
        // 在默认情况下，在 setTimeout() 内部，this 关键字将被设置为 globalThis，在浏览器中它是 window 对象。当处理需要将 this 引用类实例的类方法时，你可以显式地将 this 绑定到回调函数，以便保持实例的引用。
        class LateBloomer {
            constructor() {
                this.petalCount = Math.floor(Math.random() * 12) + 1;
            }
            bloom() {
                // 延迟一秒后宣布开花
                // setTimeout(this.declare.bind(this), 1000);
                //你还可以使用箭头函数来实现此目的。
                setTimeout(() => this.declare(), 1000)
            }
            declare() {
                console.log(`l am a beautiful flower with ${this.petalCount} petals!`);
            }
        }

        const flower = new LateBloomer();
        flower.bloom();

function list(...args) {
  return args;
}

function addArguments(arg1, arg2) {
  return arg1 + arg2;
}

console.log(list(1, 2, 3)); // [1, 2, 3]

console.log(addArguments(1, 2)); // 3

// 创建一个带有预设前导参数的函数
const leadingThirtySevenList = list.bind(null, 37);

// 创建一个带有预设第一个参数的函数。
const addThirtySeven = addArguments.bind(null, 37);

console.log(leadingThirtySevenList()); // [37]
console.log(leadingThirtySevenList(1, 2, 3)); // [37, 1, 2, 3]
console.log(addThirtySeven(5)); // 42
console.log(addThirtySeven(5, 10)); // 42
//（最后一个参数 10 被忽略）

为何（最后一个参数 10 被忽略）

当你使用 .bind() 方法绑定一些参数到一个函数时，你实际上是在创建一个新的函数，它具有预设的初始参数。这些预设的参数在绑定时已经确定，它们将在新函数被调用时作为第一批参数传入，后续调用时传入的参数将按顺序排在这些预设参数之后。
在 addThirtySeven 函数的示例中，.bind(null, 37) 创建了一个新函数，其中第一个参数（arg1）被预设为 37。当 addThirtySeven(5) 被调用时，数字 5 被作为第二个参数（arg2），所以函数 addArguments 接收的参数为 37（arg1）和 5（arg2），结果是这两个数相加，即 42。
继续这个例子，当你调用 addThirtySeven(5, 10) 时，尽管你传入了两个参数（5 和 10），由于 addArguments 函数只期望和处理两个参数（arg1和arg2），在绑定时已经预设了第一个参数（arg1）为 37，所以传入的第一个参数（5）实际上会被作为第二个参数（arg2）。第二个参数（10）由于在函数 addArguments 中没有对应的第三个参数接收它，所以会被函数忽略，因此没有起作用。
总结来说，addThirtySeven 函数不会处理超过两个参数的情况，因为它是基于 addArguments 函数的，而 addArguments 只处理两个参数。绑定操作将预设的参数固定在参数列表的前面，超出原函数参数数量的额外参数会被忽略。

        /* bind() 最简单的用法是创建一个函数，无论如何调用，它都会使用特定的 this 值进行调用。
         JavaScript 新手经常犯的一个错误是将一个方法从对象中提取出来，然后再调用，并期望方法中的 this 是原来的对象（比如在回调中传入这个方法）。
         然而，如果不做特殊处理的话，通常会丢失原始对象。使用这个函数加上原始的对象来创建一个绑定函数，巧妙地解决了这个问题：*/

        // 顶级的“this”绑定到“globalThis”。
        this.x = 9;
        const module = {
            x: 81,
            getX() {
                return this.x;
            },
        };

        // 'getX'的‘this’参数绑定到"module"
        console.log(module.getX()); //81

        const retrieveX = module.getX;
        // “retrieveX”的“this”参数在非严格模式下绑定到“globalThis”
        console.log(retrieveX());//9

        // 创建一个新函数“boundGetX”，并将“this”参数绑定到“module”。
        const boundGetX = retrieveX.bind(module);
        console.log(boundGetX());//81

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

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// Expected output: 6

console.log(sum(1, 2, 3, 4));
// Expected output: 10