前端基础知识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

前端基础知识1

前端基础知识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

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

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

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

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

前端基础知识1

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

同步: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 头部由服务端进行设置

前端基础知识1

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。


上一篇:【java学习笔记8】String\int\Integer之间互相转换


下一篇:JAVA 基本类型与其封装类及两者与String的转换