今日漏洞2023/7/24

加油站补充

结构赋值

1. 结构对象

   基本赋值

const user = {
  id: 42,
  isVerified: true,
};

const { id, isVerified } = user;

console.log(id); // 42
console.log(isVerified); // true

​ 赋值给新的变量名

const o = { p: 42, q: true };
		//o.p  o.q
const { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true
//举个例子，const { p: foo } = o 从对象 o 中获取名为 p 的属性，并将其赋值给名为 foo 的局部变量

解构嵌套对象和数组

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/zh-CN/docs/Tools/Scratchpad'
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

For of 迭代和解构

const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith',
    },
    age: 35,
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones',
    },
    age: 25,
  }
];

for (const { name: n, family: { father: f } } of people) {
  console.log(`Name: ${n}, Father: ${f}`);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

元素大小、滚动

名	意
clientWidth	整个盒子不包含margin宽度
clientHight	整个盒子不包含margin高度
clientTop（只读）	boderTop的高度，不包括顶部外边距或内边距
clientLeft（只读）	boderLeft的高度，不包括顶部外边距或内边距
offsetWidth	只读属性，返回一个元素的布局宽度
offsetHeight	只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
offsetLeft	只读属性，返回当前元素左上角相对于定位父级的左边距离
offsetTop	只读属性，返回当前元素左上角相对于定位父级的上面距离
scrollHeight	整个可滚动区域的高度
scrollTop	可以获取或设置一个元素的内容垂直滚动的像素数。

测试事件对象

 <div class="box"></div>

    <script>
        // let a = ['1','2','1','1','1','1']
        // let s = [].join(...a)
        // console.log(s);


        const box = document.querySelector('.box')
        console.log(box.offsetHeight)
        box.addEventListener('click',(e)=>{
            console.log(e);
            console.dir(e.target);
        })
    </script>

css变量和计算

CSS变量是一种自定义属性，也称为CSS自定义属性，可以在CSS中定义一个变量，然后在整个文档中使用它。这些变量以两个破折号开始，例如：–main-color。要在CSS中使用它们，可以使用var()函数，例如：color: var(–main-color);。这里是一个示例：

:root {
  --main-color: #06c;
  --main-bg-color: #fff;
  --main-text-color: #333;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

h1 {
  color: var(--main-color);
}

CSS计算是一个内置的数学函数，可以在CSS中进行数学计算。它使用加号、减号、乘号和除号来执行基本的数学运算。这里是一个示例：

.container {
  width: calc(100% - 20px);
}

CSS :root 选择器是一种伪类选择器，用来匹配文档的根元素。在HTML中，根元素始终是html元素。使用 :root 选择器可以定义一些全局的CSS变量，或者设置一些文档级别的样式。例如：

:root {
  --main-color: #06c;
  font-size: 16px;
}

这里，我们在 :root 上定义了一个自定义属性 --main-color，并且设置了文档的默认字体大小为16像素。

网格grid布局

CSS grid布局是一种二维的基于网格的布局系统，可以让你用行和列来定义网格区域，并将元素放置在这些区域中。要使用grid布局，你需要给一个容器元素设置 display: grid; 或 display: inline-grid; ，然后用 grid-template-columns 和 grid-template-rows 来定义网格轨道的大小，用 grid-column-gap 和 grid-row-gap 来定义网格轨道之间的间隙。你还可以用 grid-template-areas 来命名网格区域，并用 grid-area 来指定元素所属的区域。这里是一个示例：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 200px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas:
    "header header header header"
    "main main sidebar sidebar";
}

.header {
  grid-area: header;
  background-color: #06c;
}

.main {
  grid-area: main;
  background-color: #fff;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ccc;
}

这将创建一个四列两行的网格布局，其中第一行是一个全宽的 header 区域，第二行是一个占两列的 main 区域和一个占两列的 sidebar 区域

localStorage