前端小白练习题查缺补漏2

1.<!DOCTYPE>

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

<!DOCTYPE> 声明没有结束标签。

<!DOCTYPE> 声明对大小写不敏感。

2.

end = Math.pow(2,50)=111111    // 假设的值
var start = end - 100    // 无论end等于多少，start都比end小100
var count = 0
for(var i = start; i<= end; i++){    // 这里是 <= 所以循环101次
count++    // ++放前放后无所谓
}
console.log(count) //101

Math.pow（e，z）函数是返回e的z次幂，题目中为2的50次幂，start=2的50幂-100，start只比end大了一百，for循环中，循环了101次，因为相差100，两边都有等号，假设为0-100，所以为101次，++count不影响

3.hostname

location.host 包含端口，比如是 127.0.0.1:81。如果端口是 80，那么就没有端口，就是 127.0.0.1。

• location.hostname 不包含端口，比如是 127.0.0.1。

• location.pathname 返回当前页面的路径和文件名

• location.port 返回 web 主机的端口 （80 或 443）

• location.protocol 返回所使用的 web 协议（http: 或 https:）

 3.

function A (cName) {
if (cName) {
this.name = cName
}
}
A.prototype.name = 'XiaoMi'
var a = new A()
console.log('A', a.name)
function B (cName) {
this.name = cName
}
B.prototype.name = 'Xiaomi'
var b = new B()
console.log('B', b.name)

A进行了判断，如果传参数则创建name属性，但是没有传参，所以newA没有name属性，但是最后输出a.name

不影响，因为a的原型有，所以到a的原型去找name找到了，所以输出结果为小米，

B没有判断，也没传参，所以b.name直接返回undefined，b本身存在name属性，就不会去原型上查找了

A是根据原型输出的结果，B是本身有name=undefined

4.

let oldValue = 2; 
let newValue = oldValue << 3;

2为十进制，左移三位，先把2转化为2进制10，然后后面补3个0，10000，再转化为十进制，为16

 5.position

• 相对定位 relative，没有脱离文档流，设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
•  position：fixed   这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位将元素固定在相对于其位置最近的祖先。（如果没有，则为初始包含它的块）而固定定位固定元素则是相对于浏览器视口本身。
• 绝对定位 absolute  绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
•  position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。页面滚动起来为margin会无效；页面没滚动的 时候是静态定位
• position: static，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性，
   

 6.

var callbacks = []
for (var i = 0; i < 4; i++) {
callbacks.push(function() {
console.log(i);
});
}
callbacks.forEach(cb => cb());

输出结果为4，4，4，4 

因为再push中只是定义了函数并没有调用，所以数组中存放的是四个一样的函数，最后循环输出的时候，i退出循环变成4，log（i），都为4。

7.数组中lastIndexOf

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始

lastIndexOf(searchElement)
lastIndexOf(searchElement, fromIndex)

8. :disabled

:disabled CSS 伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。

a标签不支持disabled属性，div + p表示所有和div相邻的p标签

 9.js 中现在比较成熟的模块加载方案?

CommonJS、AMD、CMD

10.Redux遵循的原则有哪些？

单一事实来源、状态是只读的、使用纯函数进行更改

11.下列属于宏任务的是？

setTimeout、requestAnimationFrame、setInterval

宏任务包括：<script>整体代码、setTimeout、setInterval、setImmediate、Ajax、DOM事件 

微任务：process.nextTick、MutationObserver、Promise.then catch finally process.nextTick差异太大，不同的node执行不统一，不做标准

微任务比宏任务的执行时间要早

 12.script

• src属性可以设置为跟网页再同一台服务器上，也可以在不同的域

• 使用async属性的脚本不需要等待其他脚本，同时也不阻塞文档渲染

• async和defer下载都是异步的，即不会阻止dom的渲染，defer会等dom全部渲染完成之后再执行，而async下载完之后就会立刻执行

• defer 特性仅适用于外部脚本 ，如果 <script> 脚本没有 src，则会忽略 defer 特性。

• 具有 defer 特性的脚本总是要等到 DOM 解析完毕，但在 DOMContentLoaded 事件之前执行。

• async 脚本会在后台加载，并在加载就绪时运行。DOM 和其他脚本不会等待它们，它们也不会等待其它的东西。async 脚本就是一个会在加载完成时执行的完全独立的脚本。 

 13.array.map()

map(callback)方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

14.call()

function.call(thisArg, arg1, arg2, ...)

thisArg可选的。在 function 函数运行时使用的 this 值，arg1为参数

call() 允许为不同的对象分配和调用属于一个对象的函数/方法。

call() 提供新的 this 值给当前调用的函数/方法。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

用call绑定对象

在下面的例子中，当调用 greet 方法的时候，该方法的this值会绑定到 obj 对象。

function greet() {
  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

var obj = {
  animal: 'cats', sleepDuration: '12 and 16 hours'
};

greet.call(obj);  // cats typically sleep between 12 and 16 hours

如果call中没有传递参数，则会默认为全局对象 

15.apply()

apply(thisArg, argsArray)

• argsArray一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。
• 就是 call( ) 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

向array1数组的后面添加elements数组

array.push.apply(array1,elements)

tips：

Math.max()中参数不能为数组，所以可以借用apply方法来，apply接受数组，把数组转化为列表，所以Math.max.apply(null,[1，3，15]);

第一个参数为什么是null：
这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,
我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

```

16.匿名函数

看上去

(function(j){

})(i)比较神奇，其实很简单

第一个括号(function(j){}）定义了一个匿名函数，后一个括号(i)是指调用了这个函数，并传入参数i。当然这个匿名函数接受一个参数，命名为j。

17.

e.preventDefault() 是用来阻止默认事件的，不是阻止事件冒泡

事件冒泡应该是 e.stopPropagation()

18.如何阻止IE和各大浏览器默认行为（      ）

window.event.returnValue = false;

event.preventDefault();

19.

var a="undefined", b="false", c="null", d="",e="0";
var f=undefined,g=false,h=null,i=0;
function assert(x) {
    if (x) {
        console.log("true");
    }
    else{
        console.log("false");
    }
}
console.log(assert(a));//true
console.log(assert(b));//true
console.log(assert(c));//true
console.log(assert(d));//false
console.log(assert(e));//true
console.log(assert(f));//false
console.log(assert(g));//false
console.log(assert(h));//false
console.log(assert(i));//false
console.log(assert(j));//false 

if（condition）中的condition转化：

数据类型	转换为true	转换为false
boolean	true	false
String	任何非空字符串	空字符串
Number	任何非零数字值	0和NaN
Object	任何对象	null
Undefined	n/a	undefined

 20.

javascript中[]转化为布尔值为true，即Boolean([])返回true

Boolean('')返回false，

var o = {

age: 18,

a: {

fn: function(){

console.log(this.age); //这个this指向a，a没有age属性，所以返回undefined

}

}
}
o.a.fn();

21.

document.getElementById('a')  这里不需要加#！！！

document.querySelector('#a') 这个需要加#！

22.

">"与"+"的规则如下：

• div > p：选择父元素是 <div> 的所有 <p> 元素
• div + p：选择紧跟 <div> 元素的首个 <p> 元素
• 这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”
• 如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）

一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：

• STYLE：1000
• ID：选择器中包含 ID 选择器则百位得一分。
• 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
• 元素：选择器中包含元素、伪元素选择器则个位得一分。

备注： 通用选择器（*）、组合符（+、>、~、' '）和调整优先级的选择器不会影响优先级。

 23.HTML <q>元素表示所附文本是短内联引号。