ele.offsetTop

• ele.offsetTop 返回元素相对于其 offsetParent 元素的顶部内边距的距离。offsetParent 通常是最接近的具有定位（relative, absolute, 或 fixed）的祖先元素，如果没有这样的元素，则是文档的根元素。
• 在代码中，obj.offset().top 返回的是 obj 元素相对于文档顶部的偏移量。

ele.scrollTop

• ele.scrollTop 返回元素的垂直滚动条的位置。对于窗口对象，$(window).scrollTop() 返回的是文档的当前滚动位置，即用户滚动到的垂直距离。

window.height:

• window.height 获取窗口的高度。$(window).height() 返回的是浏览器窗口的高度，单位为像素。

ele.getBoundingClientRect():

• ele.getBoundingClientRect() 返回元素的大小及其相对于视口的位置。该方法返回一个 DOMRect 对象，包含 top、right、bottom、left、width 和 height 属性。
• 与 ele.offsetTop 不同，getBoundingClientRect() 返回的坐标是相对于视口而不是文档。视口是浏览器显示页面的部分，而文档则是整个网页。

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

        const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

        const result = words.filter((word) => word.length >= 6);
        console.log(result);

replace() 方法返回一个新字符串，其中一个、多个或所有匹配的 pattern 被替换为 replacement。pattern 可以是字符串或 RegExp，replacement 可以是字符串或一个在每次匹配时调用的函数。如果 pattern 是字符串，则只会替换第一个匹配项。原始的字符串不会改变。

const paragraph = "I think Ruth's dog is cuter than your dog!";

console.log(paragraph.replace("Ruth's", 'my'));
// Expected output: "I think my dog is cuter than your dog!"

const regex = /Dog/i;
console.log(paragraph.replace(regex, 'ferret'));
// Expected output: "I think Ruth's ferret is cuter than your dog!"

Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
};

console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]

Object.values() 静态方法返回一个给定对象的自有可枚举字符串键属性值组成的数组。

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
};

console.log(Object.values(object1));
// Expected output: Array ["somestring", 42, false]

tabbable/dist/index.esm.js:

用途：tabbable 是一个用于管理页面中可以通过 Tab 键导航的元素的库。
功能：提供一种方式来确定页面中哪些元素是可以 Tab 键导航到的，通常用于无障碍访问（Accessibility）。

focus-trap/dist/focus-trap.esm.js:

用途：focus-trap 用于在特定容器内捕捉焦点，使得用户只能在该容器内通过 Tab 键导航。
功能：创建模态对话框、弹出层等需要限制焦点范围的 UI 组件。

1. 捕获 this 上下文

箭头函数最常用的一个场景是避免 this 绑定问题。在普通函数中，this 的值会根据调用方式而变化，而箭头函数会捕获其所在上下文的 this。

class Person {
    constructor(name) {
        this.name = name;
    }

    printNameWithDelay() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
}

const person = new Person('John');
person.printNameWithDelay(); // 1秒后输出 'John'

在上面的代码中，如果使用普通函数，this 会在 setTimeout 的回调函数中指向全局对象（在严格模式下是 undefined），而箭头函数则保持了 this 指向 Person 实例。

2. 简化回调函数

箭头函数可以简化回调函数的书写，使代码更加简洁。

const numbers = [1, 2, 3, 4, 5];

// 普通函数写法
const squares = numbers.map(function (number) {
    return number * number;
});

// 箭头函数写法
const squaresArrow = numbers.map(number => number * number);

console.log(squaresArrow); // [1, 4, 9, 16, 25]

3. 处理数组的高阶函数

箭头函数在处理数组的高阶函数时非常方便。

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Carol', age: 35 }
];

// 使用箭头函数
const names = users.map(user => user.name);

console.log(names); // ['Alice', 'Bob', 'Carol']