JavaScript练习篇（持续更新）

深碍√TFBOYSˉ_ 2023-07-06 09:59 4阅读 0赞

#### 1. `call`和`apply`的异同 ####

> ① `call`和`apply`都属于`Function.prototype`的一个方法，故每个方法都有`call、apply`属性。  
> ② `call`和`apply`第一个参数都是传入给当前对象的对象。  
> ③ `call`第二个以后的参数都是传入的参数列表，而`apply`的第二个参数则是参数数组，即将多个参数组合成一个数组传入。  
> ④

//② ③
    function add(...a){ 
        console.log(this);
        console.log(a)
    }
    let obj = { name:"zhang"};
    add.call(obj,1,2,3,4);//{name:"zhang"} [1,2,3,4]
    add.apply(obj,[1,2])//{name:"zhang"} [1,2]

#### 2. `0xff^33`的结果。 ####

> 1.  `^`为异或操作，0x代表16进制，即16进制的ff和十进制的33做异或操作。
> 2.  1111 1111 ^ 0010 0001 = 1101 1110（222）

#### 3. 下面代码运行结果 ####

var bb =1;
    function aa(cc){ 
    	bb=2;//将外部bb值覆盖
    	alert(bb);
    }
    aa(bb);//2
    alert(bb);//2

#### 4. 假设`output`是一个函数，输出一行文本。下面的语句输出结果：`hello world! undefined` ####

> 先执行自执行函数输出hello world! ，再输出typeof undefined的结果undefined

output(typeof (function (){ output("hello world!")})())

#### 5. 下面代码中，`getColor = test.getColor`只是将函数体赋值给`getColor`，故当调用`getColor`时，`this`代表`window`，而非`test`，故第一次输出`green` ####

var color = 'green';
    var test = { 
    	color:'blue',
    	getColor:function(){ 
    		var color ='red';
    		alert(this.color);
    	}
    }
    var getColor = test.getColor;
    getColor();//green
    test.getColor()'//blue

###### 6. `Number(null)`:0 ######

>  *  `[]`、`null`、`"0"` 通过`Number`转化后结果都为0
>  *  `undefined`通过`Number`转化后结果为`NAN`
>  *  如果`Number(data)`，data为一个数组，且数组中只有一个元素，故结果为该元素的数值。如果多余一个元素，则会返回`NAN`

#### 7. 异步任务分为宏任务和微任务。当程序中出现了宏任务和微任务时，先执行微任务再执行宏任务 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]

//输出结果：
    // 1 
    //2 
    //3
    //before timeout
    // also before timeout
    //4
    setTimeout(_ => console.log(4))
    
    new Promise(resolve => { 
      resolve()
      console.log(1)
    }).then(_ => { 
      console.log(3)
      Promise.resolve().then(_ => { 
        console.log('before timeout')
      }).then(_ => { 
        Promise.resolve().then(_ => { 
          console.log('also before timeout')
        })
      })
    })
    
    console.log(2)

#### 8. `display:block`和`display:inline-block`的区别： ####

> ① 给块级元素设置上下`margin`时会选取最大，而给行内块级元素设置上下`margin`时不会重叠（行内块+块级，行内块+行内块）  
> ② 块级元素不能放置一行，行内块级元素可以放置一行

#### 9. `display:inline-block`的元素与其他元素中间有间隙的原因和解决？ ####

> 原因：由于元素在`html`中是竖直排放的，故当将两个元素转换成行内块样式或者一个元素为行内块一个元素为行内样式时，在父元素`font-size`不为`0`时会保留空白元素（即因换行符出现的空白元素）

> 解决方法：  
> ① 将父元素的`font-size`设为0。缺点：增加代码量  
> ② 将之间有空白的两个元素横排放置。缺点：代码可读性差  
> ③ 给元素设置`float:left`,缺点高度塌陷，要清楚浮动。  
> ④ 设置父元素 `word-spacing:-1em;`。缺点：`word-spacing`用来增加或减少单词间的空白（即字间隔，只有在两个单词间才有效，字与字之前无效），如果想要写单词会出现单词重叠。

#### 10. 让元素水平垂直居中的几种方式 ####

##### ① `flex`布局。缺点：兼容性不好，在使用时需要加前缀 #####

display:flex;
    justify-content:center;
    align-item:center

##### ② 给元素设置绝对定位，其`top`、`left`值都为父元素的一半，且其`margin-left`和`margin-top`分别为该元素宽、高的一半的负值。缺点：兼容性好，但是必须提前知道元素的宽高 #####

> 不能给`margin`设置`50%`来让其水平居中/垂直居中，是因为其百分比是按照其父元素的宽作为参考的。无论是`margin-left、margin-right、margin-top、margin-bottom`都是按照父元素的宽作为参考的。设置上下外边距时不用父元素的高作为参考是因为：会造成循环。父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。

position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;//100px为该元素的高的一半
    margin-left:-100px;//100px为该元素宽的一半

##### ③ 给元素设置绝对定位，`top`、`bottom`、`left`、`right`都为0，`margin:auto`。缺点：兼容性较好，但不支持IE7以下的浏览器 #####

position:absolute;
    
    left:0;
    
    right:0;
    
    top:0;
    
    bottom:0;
    
    margin:auto;

##### ④ 给元素设置绝对定位。其`top`、`left`值都为父元素的一半，即`50%`。在给该元素设置`transform:translate(-50%,-50%);`。缺点：兼容性不好，只支持IE9+的浏览器 #####

> `translate`当使用百分之设置向上向下移动时是根据自己的宽高作为参考的

position:absolute;
    
    left:50%;
    
    top:50%;
    
    transform:translate(-50%,-50%);

#### 11. `let`和`var`的区别 ####

##### ① `es5`中没有块级作用域的概念，只有函数作用域和全局作用域。 #####

{ 
    	var a = 5;
    }
    console.log(a);//5
    
    function b(){ 
    	var a = 8;
    }
    console.log(a);//a is not defined
    
    
    console.log(c);//undefined
    var c=3;

##### ② `var`可以变量提升，而`let`没有变量提升 #####

console.log(c);//undefined
    var c=3;
    console.log(d);//Cannot access 'd' before initialization
    let d=3;

##### ③ `var`能够重复声明，而`let`不允许在同一作用域内重复声明同一个变量（var和let分别声明也不行） #####

let b=4;
    var b = 0;
    console.log(b)//Identifier 'b' has already been declared

var b=4;
    var b = 0;
    console.log(b)//0

##### ④ 未用`var`声明的变量或者用`var`声明的全局变量都可通过`window`对象获取到，而用`let`声明的变量不能通过`window`对象获取到。 #####

//①
    let b=4;
    console.log(window.b)//undefined
    
    //②
    var b=4;
    console.log(window.b)//4

##### ⑤ `let`有暂时性死区：只要块级作用域存在let命令，它所声明的变量就绑定到这个区域，不再受外部的影响。 #####

>  *  暂时性死区使得typeof操作不一定安全，所以在let声明之前，使用typeof操作符会报错。而在let出现之前，typeof是百分之百安全的，永远不会被报错，即使变量没有被声明，typeof也会返回undefined。
>  *  暂时性死区的本质：只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

#### 12. HTML5使用meta标签自适应 ####

[HTML的几种布局][HTML]

#### 13. 可被继承属性 ####

> 颜色、字体、行高、行间距、可见性、字间距、对齐方式以及列表的样式

<table> 
 <thead> 
  <tr> 
   <th>字体系列属性</th> 
   <th>文本系列属性</th> 
   <th>元素可见性</th> 
   <th>列表布局属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>font-size</code></td> 
   <td><code>color</code></td> 
   <td><code>visibility</code></td> 
   <td><code>list-style</code></td> 
  </tr> 
  <tr> 
   <td><code>font-family</code></td> 
   <td><code>text-indent</code></td> 
   <td></td> 
   <td><code>list-image</code></td> 
  </tr> 
  <tr> 
   <td><code>font-weight</code></td> 
   <td><code>text-align</code></td> 
   <td></td> 
   <td><code>list-style-type</code></td> 
  </tr> 
  <tr> 
   <td><code>font-style</code></td> 
   <td><code>line-height</code></td> 
   <td></td> 
   <td><code>list-style-position</code></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>word-spacing</code></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><code>letter-spacing</code></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### 14. `em` 、`rem`、`px`、`pd`、`rpx` ####

>  *  小程序的`rpx`是通过不同设备的不同分辨率(分辨率的单位是物理像素)进行计算的
>  *  物理像素：指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。每个设备的物理像素不一定相同。
>  *  `css`中的`px`概念是逻辑像素，`dpr = 物理像素/逻辑像素`（`dpr = 分辨率/视口大小`），`dpr`越大，显示的内容会越大。css像素和物理像素并不是1:1的关系
>  *  当设置相同的`css px`大小在不同设备看起来却大小不同是因为设备的分辨率不同。更准确地来说是因为`dpr`不同，`dpr`越大，就代表一个`css`像素对应更多的物理像素，这样一个`css`像素就越大。

[几种像素单位的区分][Link 1]

#### 14. h5和c3新特性 ####

[h5和c3新特性][h5_c3]

#### 15. `BOM`和`DOM` ####

> 以下的图来源于[DOM与BOM][DOM_BOM]

##### ① `BOM`： #####

> `Browser Object Mode`：浏览器对象模型。

###### 包括： ######

1.  `Window`对象：浏览器中打开的窗口，顶层对象
2.  `Navigator`对象：浏览器的相关西悉尼
3.  `Screen`对象：客户端显示屏幕的信息
4.  `History`对象：用户在浏览器窗口中访问过的`URL`
5.  `Location`对象：当前URL的相关信息

`window`对象中包含对`BOM`中其他对象的只读引用以及`Document`对象的只读引用

###### `Window`对象的思维导图 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 2]

##### ② `DOM`： #####

>  *  `Document Object Mode`：文本对象模型
>  *  HTML文档可以说由节点构成的集合，DOM节点有:  
>     ① 元素节点：标签结点  
>     ② 文本节点:向用户展示的内容文本。  
>     ③ 属性节点:元素属性，如a标签的链接属性href。

###### 包括 ######

1.  `Document`对象，每个被载入浏览器的HTML文档都会成为`Document`对象；是`Window`对象的一部分，可以通过`window.document`属性对其进行访问。`Document`是DOM的根结点
2.  `Element`对象：结点（元素结点（标签节点）、文本结点、注释结点）
3.  `Attribute`对象：`HTML`属性
4.  `Event`对象：事件对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
         <title>DOM</title>
     </head>
     <body>
         <h2><a href="http://www.baidu.com">javascript DOM</a></h2>
         <p>对HTML元素进行操作，可添加、改变或移除css样式等</p>
         <ul>
             <li>Javascript</li>
             <li>DOM</li>
             <li>CSS</li>
         </ul>
     </body>
     </html>

###### 上述代码的DOM树 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 3]

###### `DOM`思维导图 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 4]

##### ③ `BOM`和`DOM`的关系 #####

>  *  `BOM`中的`Window`对象包含了`DOM`中的根结点`Document`对象，而访问`DOM`中的其他结点都需要`Document`对象，故`BOM`包含了`DOM`。
>  *  浏览器提供出来给予访问的是`BOM`对象，从`BOM`对象再访问到`DOM`对象，从而js可以操作浏览器以及浏览器读取到的文档(`html`)
>  *  DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

###### `BOM`和`DOM`关系表示图： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200218221459971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020021822151985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[HTML]: https://blog.csdn.net/lhkuxia/article/details/102684833
[Link 1]: https://blog.csdn.net/u014465934/article/details/97040694
[h5_c3]: https://www.cnblogs.com/ainyi/p/9777841.html
[DOM_BOM]: https://www.jb51.net/article/55851.htm#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200306182328294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200306181648974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200306182247802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200306182349940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70