重学前端学习笔记（一）

╰+攻爆jí腚メ 2022-03-07 00:06 280阅读 0赞

\--受教于极客时间winter老师的专栏，有兴趣的可以购买winter老师的专栏，详细看一下，真的很受教

[https://time.geekbang.org/column/intro/154][https_time.geekbang.org_column_intro_154]

一、将前端的知识进行分类

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

二、HTML语义化标签

1、语义标签的优点

*  语义类标签对开发者更加友好，能够清晰地看到网页结构，便于开发
 *  适合SEO，能使搜索引擎爬虫更好的获取到相关的信息。

2、em标签表示重音，表示此处加强语调，也就是一段话的关键字在此，而strong标签同样表示强调，但是它表示的一整段话都是非常重要且值得强调的。

3、将文章分成不同的段落结构的时候，h1标签代表的是此结构的标题。

4、使用hgroup进行将标题分段，也就是这些标题是处于同一行的。

5、使用section会使嵌套其中的h1~h6下降一格，因此只需要section和h1就足以形成文档的树形结构。

6、一个典型的语义标签的结构如下

7、address是地址标签

8、<abbr></abbr>是缩写标签，在title属性中写全部的文字

9、<hr></hr>是一条横线，表示故事走向的转变，或者话题的转变，如果上下文没有发生变化，就不要使用hr，使用border实现。

10、三个表示引用的标签

*  blockquote表示段落级引述内容，就是一整段都是引述。
 *  q 表示行内的引述内容
 *  cite表示引述的作品名

11、time标签表示时间

12、表示包含的图片与主文章相关，figure里面包含img，figcaption表示图片的介绍

13、dfn标签是用来包裹被定义的名词

14、pre标签表示内容原样输出

15、code标签表示是代码区块。

三、JavaScript的类型

1、为什么有的变成规范要求void 0 来代替undefined？

因为undefined是一个变量而不是关键字，也就是说undefined的值是有可能被修改的，为了避免这个错误，用void 0 俩代替undefined。

2、undefined表示的只声明了变量但是没有定义，而null表示的是定义了变量但是为空。比如，let a1;这个时候a1的值就是undefined，而let a2=null;a2的值就是null。

3、字符串是否有最大的长度

有的，字符串拥有最大长度2^53-1,

4、number类型的范围是2^64~2^53+3

infinity是无穷大，-infinity是负无穷。除法中，除以正0得到infinity，除以负0得到-infinity。

5、非整数的number类型使用==或者===得到的结果都是false，如果要比较两个非整数是否相等，使用两个数的差值是否小于最小的数

**Math.abs(a1-a2)<=Number.EPSILON**

6、Object

对象的定义是属性的集合，包括数据属性和访问器属性，都是key-value结构的,key可以是字符串或者是symbol类型。

（1）类仅仅是对象的一个私有的属性，JavaScript是没有办法自定义类型的，

（2）基本烈性的以下几个类型都有其对应的对象类型，除了symbol类型意外，其他类型跟new搭配使用的时候，产生对象，直接使用的时候表示数据类型转换。

*  Number
 *  String
 *  Boolean
 *  Symbol

（3）基本类型也可以调用对象的方法，因为“.”运算法提供了装箱操作，它会根据基本类型构造一个临时对象，使得我们在基本类型的调用对象的方法。

7、数据类型转换如下

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;</p> </td> 
   <td> <p>null</p> </td> 
   <td> <p>undefined</p> </td> 
   <td> <p>number</p> </td> 
   <td> <p>string</p> </td> 
   <td> <p>symbol</p> </td> 
   <td> <p>object</p> </td> 
  </tr> 
  <tr> 
   <td> <p>boolean</p> </td> 
   <td> <p>false</p> </td> 
   <td> <p>false</p> </td> 
   <td> <p>除0外都是true</p> </td> 
   <td> <p>空字符串是false，其他都为true</p> </td> 
   <td> <p>true</p> </td> 
   <td> <p>true</p> </td> 
  </tr> 
  <tr> 
   <td> <p>number</p> </td> 
   <td> <p>0</p> </td> 
   <td>Nan</td> 
   <td> <p>-</p> </td> 
   <td>string&nbsp;to&nbsp;number</td> 
   <td> <p>error</p> </td> 
   <td> <p>拆箱转换</p> </td> 
  </tr> 
  <tr> 
   <td> <p>string</p> </td> 
   <td> <p>"null"</p> </td> 
   <td> <p>"undefined"</p> </td> 
   <td> <p>number to string-</p> </td> 
   <td> <p>-</p> </td> 
   <td> <p>error</p> </td> 
   <td> <p>拆箱转换</p> </td> 
  </tr> 
  <tr> 
   <td> <p>object</p> </td> 
   <td> <p>error</p> </td> 
   <td>error</td> 
   <td> <p>装箱转换</p> </td> 
   <td> <p>装箱转换</p> </td> 
   <td> <p>装箱转换</p> </td> 
   <td> <p>-</p> </td> 
  </tr> 
 </tbody> 
</table>

*  string to number:字符型数字直接转换为数字，其他的为NaN;
 *  number to string 直接转换
 *  装箱转换：把基本类型转换成对应的对象。装箱集智会频繁地产生临时对象，在一些对性能要求高的场景下，应该尽量避免对基本类型做装箱转换。
 *  拆箱转换：使用ToPrimitive函数将对象转换成基本来兴。对象到string和number的转换都遵循先拆箱再转换的规则，通过拆箱转换，把对象变成基本来兴，再从基本类型转换为对应的string或者number。

拆箱转换会尝试调用valueof和tostring来获得拆箱后的基本类型，如果valueOf和toString都不存在或者没有返回基本类型，将会返回TYpeError。

[https_time.geekbang.org_column_intro_154]: https://time.geekbang.org/column/intro/154
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220307/057fbe686d724932b99533af02d290d0.png