【学习随笔】知识点汇总

JavaScript 篇

1. 数据类型检测的方式有哪些

（1） typeof

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object

（2）instanceof
instanceof可以正确判断对象的类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log([] instanceof Object);                   // true
console.log(Array instanceof Object);                // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

instanceof只能正确判断引用数据类型，而不能判断基本数据类型。

（3）constructor

console.log((2).constructor === Number);    // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

constructor 有两个作用，一个是判断数据的类型，二是对象实例通过constructor对象访问它的构造函数

2. typeof null 的结果是什么，为什么？

typeof null 的结果是Object

在JavaScript 第一个版本中，所有值存储在32位的单元中，每个单元包含一个小的类型标签（1-3 bits）以及当前要存储值的真实数据。

000：object   - 当前存储的数据指向一个对象
  1：int      - 当前存储的数据是一个31位的有符号整数
010：double   - 当前存储的数据指向一个双精度的浮点数
100：string   - 当前存储的数据指向一个字符串
110：boolean  - 当前存储的数据是布尔值

null 的值是机器吗NULL指针（null指针的值全是0），
所以说null的类型标签也是000，和Object的类型标签一样，所以会被判定为Object

3. 其他值到布尔值的转换规则？

以下这些值是假值

undefined
null
false
0
NaN

这些假值布尔强制类型转换结果为false，从逻辑上说，假值列表以外的都应该是真值

5. || 和 && 操作符的返回值

|| 和 && 首先会对第一个操作数进行条件判断，如果其不是布尔值就先强制转换为布尔类型，然后再执行条件判断

• 对于| | 来说，如果条件判断为true就返回第一个操作数的值，如果为false就返回第二个操作数的值
• && 则相反，如果条件判断结果为true就返回第二个操作数的值，如果为false 就返回第一个操作数的值

| | 和 && 返回它们其中一个操作数的值，而非条件判断的结果

实例

console.log(1 || 3);  // 1
console.log(1 && 3);  // 3

console.log(null || 'str'); // 'str'
console.log(null && 'str'); //  null

当操作符两边皆为boolean类型时，才会返回boolean类型
console.log(false || true);  // true
console.log(false && true);  // false

6. 如何提取高度嵌套的对象里的指定属性？

嵌套程度非常深的对象：

const school = {
  classes： {
    stu： {
      name: 'Bob',
      age: 24
    }
  }
}

标准的结构做法

const {classes： {stu： { name }}} = school
console.log(name)  // 'Bob'

7. 什么是DOM和BOM

• DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理页面内容的方法和接口
• BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这对象主要定义了与浏览器进行交互的方法和接口

8. for…in 和 for…of 的区别

for…of 是ES6新增的遍历方式，允许遍历一个含有iterator 接口的数据结构（数组、对象等）并且返回各项的值，不支持遍历普通对象（会报错），因为没有迭代器对象，和ES3 中的for…in 的区别如下

• for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；

let obj = ['a', 'b', 'c']

let obj2 = [...obj]  //{0: "a",1: "b",2: "c"}
for(let item in obj) {
   console.log(item)
} // 0 1 2
for(let item of obj) {
   console.log(item)
} // a b c

• for…in 会遍历对象的整个原型链，性能非常差不推荐使用，而for…of 只遍历当前对象不会遍历原型链
• 对于数组的遍历，for…in 会返回数组中所有可枚举的属性（包括原型链上可枚举的属性），for…of 只返回数组的下标对应的属性值

总结： for…in 循环主要是为了遍历对象而生，不适用与遍历对象；
for…of 循环可以用来遍历数组、类数组对象，字符串、Set、Map以及Genertate对象

9. 常见的位运算符有哪些？

常见的位运算符有以下几种：

运算符	描述	运算规则
&	与	两个位都为1时，结果才为1
|	或	有一位为1时，结果就为1
^	异或	两个位相同为0，相异为1
~	取反	0 变 1,1 变 0
<<	左移	各二进制位全部左移若干位，高位丢弃，低位补位
>>	右移	各二进制位全部右移若干位，正数左补0，负数左补1，右边丢弃

1. 按位与运算符（&）
定义： 参加运算的两个数组按二进制位进行“与”运算
运算规则：

0 & 0 = 0
0 & 1 = 0
1 & 0 = 0
1 & 1 = 1

总结：两位同时为 1，结果才为1，否则为0

实例

    /*
     *   0000 0011
       | 0000 0101
       = 0000 0001  两位都为1则为1 
    */
    console.log(3 & 5); //1
    /*
         1000 0011
         1000 0101
      负数进行位运算先取补码
         
         1111 1101
         1111 1011
       | 1111 1001 
      结果为负数，需取补码
         1000 0111
    */
    console.log(-3 & -5);  // -7

2. 按位或运算符（|）
定义： 参加运算的两个对象按二进制进行“或”运算
运算规则：

0 | 0 = 0
0 | 1 = 1
1 | 0 = 1
1 | 1 = 1

总结：参加运算的两个对象只要有一个为1，其值为1。
实例

    /*
     *   0000 0011
       | 0000 0101
       = 0000 0111  两位有一位为1则为1 
    */
    console.log(3 | 5); //7
    /*
         1000 0011
         1000 0101
      负数进行位运算先取补码
         
         1111 1101
         1111 1011
       | 1111 1111 
      结果为负数，需取补码
         1000 0001
    */
    console.log(-3 | -5);  // -1
    

3. 异或运算符（^）
定义： 参加运算的两个数据按二进制位进行“异或”运算。
运算规则：

0 ^ 0 = 0
0 ^ 1 = 1
1 ^ 0 = 0
1 ^ 1 = 0

总结: 参加运算的两个对象，如果两个相应位相同为0，相异为1

实例

/**
     *    0000 0101 
     *  ^ 0000 1001  
     *  = 0000 1100  两位相同为0，不同为1
    **/
    console.log(5^9); // 12
    /*
     *     1000 0101
        ^  1000 1001
      负数先取补码，再进行运算
           1111 1011
        ^  1111 0111
        =  0000 1100  
    */
    console.log(-5^-9);  // 12

4. 取反运算符（~）
定义： 参加运算的一个数据按二进制进行“取反”运算
运算规则：

~ 1 = 0 ； ~ 0 = 1

总结: 对一个二进制数按位取反，即将0变成1,1变成0.
实例

    /*
     *   1000 1000
      => 1111 1000  负数运算，需要先取其补码
      => 1000 0111  取反，为正数则为其原码
    */
    console.log(~-8); //7
    /*     0000 1000  
     *  => 1111 0111   先取反
     *  => 1000 1001   若取反为负数，则取其补码
    */
    console.log(~8);  // -9

5. 左移运算符（<<）
定义： 将运算对象各二进制位全部左移若干位
左边溢出位丢弃，右边空出位补0
实例

    // 0000 0011 => 0000 1100    各二进制位项左移2位
    console.log(3<<2);
    /*
         1000 0011 
      => 1111 1101 负数运算先取补码
      => 1111 0100 
      => 1000 1100 结果为负数再取补码 
    */
     console.log(-3<<2);  // -12

6. 右移运算符
   定义：将运算对象的各二进制位全部右移若干位
   正数左边空余位补0，负数左边空余位补1；右边溢出位舍弃
   实例：

    // 0000 0011 => 0000 0000    各二进制位项右移3位
    console.log(3>>3); // 0
    /*
         1000 0011 
      => 1111 1101 负数运算先取补码
      => 1111 1111 
      => 1000 0001 结果为负数再取补码 
    */
     console.log(-3>>3);  // -1

7. 原码、反码和补码
   上面提到了补码、反码等知识，这里就补充一下。 计算机中的有符号数有三种表示方法，即原码、反码和补码。三种表示方法均有符号位和数值位两部分，符号位都是用0表示“正”，用1表示“负”，而数值位，三种表示方法各不相同。
   （1）原码
   原码就是一个数的二进制数。例如：10的原码为0000 1010
   （2）反码

• 正数的反码与原码相同，如：10 反码为 0000 1010
• 负数的反码为除符号位，按位取反，即0变1，1变0。
  例如：-10

原码：1000 1010
反码：1111 0101

（3）补码

• 正数的补码与原码相同，如：10 补码为 0000 1010
• 负数的补码是原码除符号位外的所有位取反即0变1，1变0，然后加1，也就是反码加1。
  例如： -10

原码：1000 1010
反码：1111 0101
补码：1111 0110

HTML

1. src 和 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下:

• src: 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。
• href 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。

2. 对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
语义化的优点：

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息
• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

< header>< /header> 头部
< nav>< /nav> 导航栏
< section>< /section> 区块（有语义化的div）
< main>< /main> 主要区域

CSS

1. link 和 @import 的区别

两者都是外部引用CSS的方法，它们的区别如下：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
• link引用CSS时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载
• link是XHTML 标签，无兼容问题；@import 是在CSS2.1提出的，低版本的浏览器不支持
• link 支持使用JavaScript控制DOM去改变样式；而@import不支持

2. 伪元素和伪类的区别和作用？

• 伪元素： 在内容元素的前后插入额外的元素和样式，但是这些元素实际上并不在文档中生产层。它们只在外部显示课件，但不会在文档的源代码中找到它们，因此，称为“伪”元素

p::before {content: "第一章“；}
p::after { content: “Hot!”;}

• 伪类： 将特殊的效果添加到特定选择器上。它是已有元素上添加类别，不会产生新的元素

a:hover {color: #FF00FF}
p:first-child { color: red }

总结： 伪类是通过在元素选择器上加入伪类改变元素状态，而伪元素通过对元素的操作进行对元素的改变

3. 对BFC的理解，如何创建BFC

先看两个相关的概念：

• Box: Box 是CSS布局的对象和基本单位，一个页面是由多个Box组成的，这个Box就是我们所说的盒模型
• Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

块格式化上下文（BFC）是Web 页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并不会影响其他环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素受外部影响

创建BFC的条件：

• 根元素：body；
• 元素设置浮动： float 除none以外的值；
• 元素设置绝对定位： position（absolute、fixed）
• display 值为： inline-block、table-cell、table-caption、flex等
• overflow 值为： hidden、auto、scrol

BFC 的作用：

• 解决margin的重叠问题： 由于BFC是一个独立的区域，内部的元素和外部元素互不影响，将两个元素变成两个BFC，就解决了margin重叠的问题。
• **解决高度塌陷的问题：**在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变成为0. 解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置 overflow：hidden
• 创建自适应两栏布局: 可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
 
<div class="left"></div>
<div class="right"></div>

左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。