JavaScript练习篇（持续更新）

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`的结果。

^为异或操作，0x代表16进制，即16进制的ff和十进制的33做异或操作。

1111 1111 ^ 0010 0001 = 1101 1110（222）

3. 下面代码运行结果

<script>
var bb =1;
function aa(bb){
	bb=2;//将参数bb的值覆盖为2，并不影响外面的bb值
	alert(bb);
}
aa(bb);//2
alert(bb);//1
</script>

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. 异步任务分为宏任务和微任务。当程序中出现了宏任务和微任务时，先执行微任务再执行宏任务

在这里插入图片描述

//输出结果：
// 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的几种布局

13. 可被继承属性

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

字体系列属性	文本系列属性	元素可见性	列表布局属性
`font-size`	`color`	`visibility`	`list-style`
`font-family`	`text-indent`		`list-image`
`font-weight`	`text-align`		`list-style-type`
`font-style`	`line-height`		`list-style-position`
	`word-spacing`
	`letter-spacing`

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

小程序的rpx是通过不同设备的不同分辨率(分辨率的单位是物理像素)进行计算的

物理像素：指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。每个设备的物理像素不一定相同。

css中的px概念是逻辑像素，dpr = 物理像素/逻辑像素（dpr = 分辨率/视口大小），dpr越大，显示的内容会越大。css像素和物理像素并不是1:1的关系

当设置相同的css px大小在不同设备看起来却大小不同是因为设备的分辨率不同。更准确地来说是因为dpr不同，dpr越大，就代表一个css像素对应更多的物理像素，这样一个css像素就越大。

几种像素单位的区分

14. h5和c3新特性

h5和c3新特性

15. `BOM`和`DOM`

以下的图来源于DOM与BOM

① `BOM`：

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

包括：

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

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

`Window`对象的思维导图

在这里插入图片描述

② `DOM`：

Document Object Mode：文本对象模型

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

包括

Document对象，每个被载入浏览器的HTML文档都会成为Document对象；是Window对象的一部分，可以通过window.document属性对其进行访问。Document是DOM的根结点
Element对象：结点（元素结点（标签节点）、文本结点、注释结点）
Attribute对象：HTML属性
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树

在这里插入图片描述

`DOM`思维导图

在这里插入图片描述

③ `BOM`和`DOM`的关系

BOM中的Window对象包含了DOM中的根结点Document对象，而访问DOM中的其他结点都需要Document对象，故BOM包含了DOM。

浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档(html)

DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

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

在这里插入图片描述

Lemon

发布了90 篇原创文章 · 获赞 95 · 访问量 1万+

私信关注

JavaScript练习篇（持续更新）

1. call和apply的异同

2. 0xff^33的结果。

3. 下面代码运行结果

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

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

6. Number(null):0

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

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

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

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

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

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

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

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

11. let和var的区别

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

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

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

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

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

12. HTML5使用meta标签自适应

13. 可被继承属性

14. em 、rem、px、pd、rpx

14. h5和c3新特性

15. BOM和DOM

① BOM：

包括：

Window对象的思维导图

② DOM：

包括

上述代码的DOM树

DOM思维导图

③ BOM和DOM的关系

BOM和DOM关系表示图：

猜你喜欢

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

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

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

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

6. `Number(null)`:0

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

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

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

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

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

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

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

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

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

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

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

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

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

15. `BOM`和`DOM`

① `BOM`：

`Window`对象的思维导图

② `DOM`：

`DOM`思维导图

③ `BOM`和`DOM`的关系

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