前端基础知识1

'use strict'
var name = 'Jay'
var person ={
    name : 'Wang',
    pro:{
        name:'Michael',
        getName:function(){
                return this.name;
        }    
    }
}
console.log(person.pro.getName());
var pepole = person.pro.getName;
console.log(pepole());

答案
Michael
throw error
因为在'use strict'严格模式下，this无法指向全局，所以报错。当把'use strict'拿掉之后就是this.name的this指向person全局的name
结果为 michael Wang

setTimeout(function(){

console.log(1)
},0);
new Promise(function executor(resolve){
    console.log(2);
    for(var i= 1; i<10000; i+=1 ){
        i>=9999&&resolve();
    }
        console.log(3)
}).then(function(){
    console.log(4)
})
console.log(5)

//答案
2
3
5
4
1
解析：首先将定时器里的回调函数添加到宏任务队列中，实例化Promise对象，同步执行执行器的executor（）函数输出2，改变promise的状态为resolve，输出3，将then回调函数的添加到微任务队列中，输出5.同步代码执行完毕，执行异步任务；查看微任务队列，执行then回调函数输出4，微任务执行完毕，查看宏任务队列，执行settimeout的回调函数输出1

function fn(str,arr){
        for(let item of arr){
            let len = item.length
            let ret = new RegExp(`${item}`,'g')
            str = str.replace(ret,'*'.repeat(len))
        }
        return str 
    }
     
     
console.log(fn('想要轻生，have sex,sexy,babe',['轻生','sex']))


//结果
VM1759:11 想要**，have ***,***y,babe

A.git是由github创造的代码管理工具
B.git和svn实现的原理是一样的
C.从git原理设计上来讲，执行git pull和先执行git fetch再执行git merge效果是一样的。
D.git将代码提交到远程仓库的命令是git commit
E.git rm只会将文件从git提交记录中删除，不会删除磁盘上的物理文件
F.git push -f将会重新提交当前的commit节点，不会重写历史commit
答案C

A.Cookie，LocalStorage和IndexedDB都会受到同源策略的限制
B.postMessage，JSONP，WebSocket都是常用的解决跨域的方案
C.跨域资源共享规范中规定了除了GET之外的HTTP请求，或者搭配某些MINE类型的POST请求，浏览器都需要先发一个OPTIONS请求
D.http://www.bilibili.com和https://www.bilibili.com是相同的域名，属于同源

答案：d
https和http是不同协议

A.在并行程度中，当两个并行的线程，在没有任何约束的情况下，访问一个共享变量或者共享对象的一个域，而且至少要有一个操作是写操作，就可能发生数据竞争错误。
B.原语Compare-and-swap(CAS)是实现无锁数据结构的通用原语。
C.获得内部锁的唯一途径是：进入这个内部锁保护的同步块或方法。
D.volatile变量具有synchronized的可见性特性，但是不具备原子特性。
E.减小竞争发生可能性的有效方式是尽可能缩短把持锁的时间

答案ABCDE

下面数据结构能够支持随机的插入和删除操作、并具有较好的性能的是____。
正确答案: B   你的答案: F (错误)
A.数组和链表
B.链表和哈希表
C.哈希表和队列
D.队列和堆栈
E.堆栈和双向队列
F.双向队列和数组

根据关系型数据库规范范理论，关系数据库中的关系要满足第一范式，在部门关系中，因哪个属性而石塔不满足第一范式？（）

正确答案: B   
A.部门名

B.部门成员

C.部门总经理

D.部门号
解析：第一范式要保证原子性，不能进行再次分层。

现有4个同时到达的作业J1,J2,J3和J4,它们的执行时间分别是1小时，3小时，5小时，7小时，系统按单道方式运行且采用短作业优先算法，则平均周转时间是（）小时
正确答案: D   
A.4
B.5
C.6
D.7.5
解析：谁短谁先执行，所以执行顺序为 J1 J2 J3 J4，J1执行完时间为1,轮到J2执行时，前面已经过了一小时，所以J2执行完时间为1+3 =4，同理，平均周转时间为 （1  + （1+3）  + （1+3+5 ）+ （ 1+3+5+7））/4=7.5

var foo = "Hello";

(function(){

var bar = " World";

alert(foo + bar);

})();

alert(foo + bar);
其中alert两次输出结果为？
hello world 报错
考察就是作用域问题

寝室有6个同学打dota，分为对立的两方，一方是天灾军团，一方是近卫军团。现请你设置赛程以及每场的对阵（每方最少1人、最多5人），请问至少得进行多少场比赛，才能使得赛程结束后每位同学都和其他同学做过对手（）
假设 A B C D E F 六位同学
第一场： ABC *  DEF   
第二场： ABF * DEC
第三场： BDF * EAC

计算机内的传输是并行传输，通信线路上的传输是串行传输

setTimeout(() => console.log('a'));
Promise.resolve().then(
   () => console.log('b’);
 ).then(
   () => Promise.resolve('c').then(
     (data) => {
       setTimeout(() => console.log('d'));
       console.log('f');
       return data;
     }
   )
 ).then(data => console.log(data));
 
 
 //
 // 定时器任务属于宏任务，并且需要先在任务队列等待，等到同步任务执行完，执行栈清空，才会在任务队列中按顺序选任务进去
setTimeout(() => console.log('a'));//4. 打印a
 
//Promise 属于异步微任务，在本轮同步任务结束之前执行
Promise.resolve().then(
    // 1. 打印 b
   () => console.log('b')  // 单引号要改为',然后去掉;号
 ).then(
    // 箭头函数的resolve传递的参数作为下一个then的参数
   () => Promise.resolve('c').then(
     // 执行箭头函数
     (data) => {
        // 把定时器任务也放入任务队列中等待，在第一个定时器之后
       setTimeout(() => console.log('d')); //5. 打印d
       // 2.打印 f
       console.log('f');
       // 此时返回的 数据作为下一个then的参数
       return data;
     }
   )
 ).then(data => console.log(data)); // 3.打印 c
  
```
* `打印bfcad`

请写出下面ES6代码编译后所生成的ES5代码；

class Person {
     constructor (name) {
          this.name = name;
     }
     greet () {
          console.log(`Hi, my name is ${this.name}`);
     }
     greetDelay (time) {
          setTimeout(() => {
               console.log(`Hi, my name is ${this.name}`);
          }, time);
     }
}



 var Person = (function () {
     function Person (name) {
          this._name = name;
     }
     Person.prototype.greet = function () {
          console.log(“Hi, my name is “ + this._name);
     }
     Person.prototype.greetDelay = function (time) {
          var _this = this;
          setTimeout(function () {
               console.log(“Hi, my name is “ + _this.name);
          }, time);
     }
})();

形如1, 1, 2, 3, 5, 8, 13, 21, 34, 55的数列，后一位是前面两位相加（斐波那契数列），写出函数要求找到第 N 位是多少，如：fib(3) => 3 ， fib(5) => 8, 要求时间复杂度为O(n)。

function fib(n){
    let top=1,bottom=0,res=0
    for(let i=0;i<n;i++){
        res=top+bottom
        bottom=top
        top=res
    }
    return res
}

给定一个包含非负整数的 M x N 迷宫，请找出一条从左上角到右下角的路径，使得路径上的数字总和最小。每次只能向下或者向右移动一步。

const readline = require('readline')
const rl = readline.createInterface({
    input: process.stdin,
    ouput: process.stdout
})
let inArr = []
rl.on('line', line=>{
    if(!line) return
    inArr.push(line.trim())
    let mn = inArr[0].split(' ').map(e=>+e)
    let m = mn[0]
    let n = mn[1]
    if(inArr.length === m+1){
        let arr = []
        for (let i = 0; i < m; i++) {
            arr[i] = inArr[i+1].split(' ').map(e => +e)
        }
        console.log(minPathSum(arr))

    }
})

var minPathSum = function (grid) {
    const m = grid.length,
        n = grid[0].length
    for (let i = m - 1; i >= 0; i--) {
        for (let j = n - 1; j >= 0; j--) {
            if (i + 1 < m && j + 1 < n) {
                grid[i][j] += Math.min(grid[i + 1][j], grid[i][j + 1])
            } else if (i + 1 < m) {
                grid[i][j] += grid[i + 1][j]
            } else if (j + 1 < n) {
                grid[i][j] += grid[i][j + 1]
            }
        }
    }
    return grid[0][0]
};

小团在一次星际旅行中，耗尽了飞船的能量，迷失在了空间魔方中，空间魔方中有N*N**N个能量粒子。美团云AI迅速帮小团分析出了空间魔方的能量分布图。

已知小团的飞船被困在能量值最高的点，能量值最高点有且只有一个。飞船每到达一个能量粒子就会吸收对应粒子的能量，该粒子会坍缩成小黑洞，飞船不可到达。小团驾驶的飞船只能从高能粒子驶向低能粒子，且每次只能从6个方向中选择一个前进。（±x,±y,±z）。

请帮助帮小团吸收最高的能量值。

    new Promise((resolve) => {
console.log('1')
    resolve()
console.log('2')
     }).then(() => {
    console.log('3')
     })
     setTimeout(() => {
    console.log('4')
     })
     console.log('5')

js在处理异步操作时利用的是事件循环机制。事件循环机制处理顺序，同步操作<-异步操作(微任务<-宏任务)

由于javascript是单线程任务所以主线程只能同时处理一个任务，所以把异步的事件放在同步的事件处理完成之后再来依次处理。

异步事件又包括微任务和宏任务：

宏任务和微任务关系：微任务执行完后再执行宏任务

微任务操作：1：Promise,2:MutationObserver

宏任务操作:1:setTimeout,2:setInterval,3:I/O操作

所以上面代码执行顺序为:

同步：console.log(1)->console.log(2)->console.log(5);

异步：(微任务)console.log(3)->（宏任务）console.log(4);

所以答案为：1 2 5 3 4

请列举几个HTML5语义化标签，并说说语义化有什么优点？

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>：标记导航，仅对文档中重要的链接群使用。
<main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article>：定义外部的内容，其中的内容独立于文档的其余部分。
<section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>：页脚，只有当父级是body时，才是整个页面的页脚。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

优点：
代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

请列举几种除了px外的CSS度量单位并解释其含义。

1. rem 相对于根字体大小的单位，比如可以设置 1rem=50px
2. em 相对于font-size，比如font-size：16px（浏览器默认），则2em=32px
3. vm 即viewpoint width，视窗宽度，比如1vm的宽度为相对于视窗的宽度的百分之一
4. vh 即viewpoint height ，同上

简述cookie/session记住登录状态机制原理。

用户登录验证成功后，如果是使用 Cookie 记住登录状态，则服务器会将用户名等信息放在响应头的 Set-Cookie 属性中返回给服务器，之后的 HTTP 请求都会携带这个 Cookie ，实现记住登录。如果是 session 的话，则服务器会将用户名等信息存放在本地，再随机生成一个登录标识通过 Cookie 返回给浏览器，之后浏览器每次发送请求也会携带这个 Cookie，服务器收到后便通过这个标识得到已登录的用户信息。

网页中接收事件的顺序（事件流）有哪些？它们之间的区别是什么？

有捕获和冒泡两种，冒泡是事件由子元素传递到父元素的过程，捕获是时间由父元素传递到子元素的过程

css属性position都有哪些值？

absolute绝对定位
relative相对定位
fixed固定定位
sticky粘性定位
static默认值，没有定位
inherit继承父系
initial设置该属性为默认值

简述你对HTTP控制访问（CORS）的理解。

首先要搞明白什么是同源，什么是跨域。

打一个简单的比方，你自己从你家里拿东西，不会有人说，这是同源；但是你要从隔壁的邻居的冰箱去拿可乐，你觉得可能吗，这就是跨域。

从比方中回来，事实其实没有那么简单。理解了概念后，得知道如何去判断同源还是跨域。web服务器有三要素：协议（http、https）、端口号（不过多说）、web服务器域名（比如https://github.com/mamba666
中https://github.com就是域名）。三要素必须全部一致才算同源

个人认为写完上面的东东后已经理解了同源跨域已经如何区分。接下来就来看看真正的干货，不讲同源，只讲跨域（以下参考MDN）

浏览器端
如果发现有一个请求是跨域，那么浏览器会自动先拦截一下，给它的http header加上Origin字段。比如 http://localhost:8080变为Origin:http://localhost:8080。这样一来，服务器端就可以区分这个请求是不是跨域了。

服务器端
当服务器端收到浏览器端发送过来的请求后，会有一个响应header。它会告诉请求的浏览器哪儿些域名可以请求我，哪儿些方法可以执行。

响应回到浏览器端
此时浏览器会根据这个响应自动判断，然后在做决定。

服务器端返回给浏览器端的东西
Access-Control-Allow-Origin 允许跨域的Origin列表
Access-Control-Allow-Methods 允许跨域的方法列表（GET、POST等）
Access-Control-Allow-Headers 允许跨域的Header列表
Access-Control-Expose-Headers 允许暴露给JavaScript代码的Header列表
Access-Control-Max-Age 最大的浏览器缓存时间，单位为s
跨域请求形式
有两种，简单和非简单请求。这里说说我常遇到的 application/json 。这就是一种非简单请求，在以上所写的浏览器端之前，会先进行一次预请求，根据这个结果再去判断是否正式请求。

以下关于块级元素和行内元素的说明正确的是？

A.块级元素在默认情况下，其宽度自动填满其父元素的宽度
B.块级元素的width、height属性可以生效，但padding、margin无效
C.strong属于行内元素, 它的width、height属性设置无效
D.textarea默认属于块级元素，而input属于行内元素

1.块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
    行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
2.块级元素的padding和margin值的设置都是有效的。行内元素和块级元素都是盒子模型。
    行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的（top bottom）
    行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的（left right）
    行内元素的 line-height 属性设置是有效的。
    行内元素的 width、height 属性设置是无效的。
    行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的，并不会对他周围的元素产生任何影响
3.strong是行内元素，它的width、height属性设置无效（没错啊？？？）
4. textarea是行内元素 - 多行文本输入框，input也是行内元素
行内inline 块级block 行内块级line-block(拥有内在尺寸，可设置高宽，不会自动换行 )

以下关于cookie和localStorage描述正确的是

A.cookie 和 localStorage 都可以由浏览器自动携带在http请求的header中传递给服务端
B.localStorage无法被用户清除，所以比Cookie更安全，可以放置重要数据
C.localStorage 和 cookie 一样也有跨域限制
D.localStorage 可以和cookie 一样通过特殊的http 头部由服务端进行设置

function fun () {
    return () => {
        return () => {
            return () => {
            console.log(this.name)
                    }
                }
        }
}
var f = fun.call({name: 'foo'})
var t1 = f.call({name: 'bar'})()()
var t2 = f().call({name: 'baz'})()
var t3 = f()().call({name: 'qux'})

 箭头函数没有自己的this也并不能使用call,apply以及bind去绑定this，会选择去继承父级作用域的this，所以后面几次的call实际上是失败的，所以箭头函数层层向上寻找name，只会在最外层的fun函数作用域中找到this指向{name: 'foo'}对象的name属性。假设此处将fun函数改成箭头函数的声明方式，那么返回的值将会是undefined. 

小易有个32G字节的文件，需要从电脑1传送到电脑2，假设两者之间是1024Mbit/s的网络，那么需要多久能传输完 ?

一字节等于8位
32 * 8 * 1024 M bit /1024Mbit/s = 256s

下面代码执行结果是

const a = {
valueOf() {
return 'valueOf'
},
toString() {
return 'toString'
},
get() {
return 'get'
}
}
alert(a) 

这题考查valueOf()与toString()的区别。

在不重写这两个方法时：

toString()方法：返回对象的字符串表示
valueOf()方法：返回指定对象的原始值。
默认情况，会调用toString()方法。例如：
var cc = {};
alert(cc);// [object Object]
var fun = function() {} ; 
alert(fun);//  function() {}
var arr = [1];
alert(arr); // 1
从上面的代码来看，默认情况会调用对象的toString()方法，返回对象的字符串表示。

下面看看重写对象的toString()与valueOf()方法，并且同时存在时会发生什么：
var bbb = {
i: 10,
toString: function() {
console.log('toString');
return this.i;
},
valueOf: function() {
console.log('valueOf');
return this.i;
}
}
 alert(bbb);// 10 toString
 alert(+bbb); // 10 valueOf
 alert(''+bbb); // 10 valueOf
 alert(String(bbb)); // 10 toString
 alert(Number(bbb)); // 10 valueOf
 alert(bbb == '10'); // true valueOf
二者并存的情况下，在数值运算中，优先调用了valueOf，字符串运算中，优先调用了toString。而’ '+bbb是字符串操作，为啥也是调用valueOf，那是因为，存在操作符，valueOf的优先级高于toString。

回到本题: alert(obj)不存在数值运算，和其他操作符，所以默认调用toString方法。
结果为：toString。

valueOf()方法，并且同时存在时会发生什么：
var bbb = {
i: 10,
toString: function() {
console.log(‘toString’);
return this.i;
},
valueOf: function() {
console.log(‘valueOf’);
return this.i;
}
}
alert(bbb);// 10 toString
alert(+bbb); // 10 valueOf
alert(’’+bbb); // 10 valueOf
alert(String(bbb)); // 10 toString
alert(Number(bbb)); // 10 valueOf
alert(bbb == ‘10’); // true valueOf
二者并存的情况下，在数值运算中，优先调用了valueOf，字符串运算中，优先调用了toString。而’ '+bbb是字符串操作，为啥也是调用valueOf，那是因为，存在操作符，valueOf的优先级高于toString。

回到本题: alert(obj)不存在数值运算，和其他操作符，所以默认调用toString方法。
结果为：toString。