ebay-interview practice

159 阅读6分钟

1、css清除浮动的方式

juejin.cn/post/684490…

基本思路:1、clear属性 2、BFC

2、哪些元素可以引起BFC

解答:

概念(BFC)

"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

规则(BFC)

内部的Box会在垂直方向,一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时,浮动元素也参与计算

产生(BFC)

float的值不为none。
overflow的值不为visible。(这个是最推荐开启bfc的,副作用最小)
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
使用场景(BFC)

自适应两栏布局
清除内部浮动
防止margin重叠

3、怎样用css设置一个div的宽高是父元素的10%

blog.csdn.net/yo_bc/artic…

4、说一下表格里的边框折叠

blog.csdn.net/HU_YEWEN/ar…

5、说一下外边距折叠

segmentfault.com/a/119000001…

6、为什么reducer要是纯函数

juejin.cn/post/684490…

7、array的sort,filter,some方法是干嘛用的

简单说一下,sort一般用来排序,filter一般用来过滤,some用来判断数组是否有元素满足某个条件,只要有一个元素满足就返回true,对比every方法

8、foreach和map的区别

map返回值,foreach遍历每个元素不需要返回值

9、es6的新语法let, const是用来解决什么问题的

解决变量提升、变量污染的问题

var相当于全局变量,在循环中如果计数器变量使用var,会导致输出值始终为循环的最后一个值的现象,只能用IIFE立即执行函数解决

let是定义以后会形成一个块级作用域,且值可以改变,在let定义之前,是该变量的暂时性死区

const同样会行程一个块级作用域,但是值不可变,在const定义之前,是该变量的暂时性死区

10、页面上实现一个图片从左到右慢慢移动

transform-translate或者transition

11、类的定义和继承

juejin.cn/post/684490…

12、object.create()方法实现继承有什么不好的地方

segmentfault.com/a/119000001…

13、写一个function,实现输入“aa.bb.c”,输出{aa:{bb:{c:{}}}}

var str='aa.bb.c'

var arr = str.split('.');

var object={};

function addLevels(arr, object) { arr.reduce((o, l) => o[l] = o[l] || {}, object); }

addLevels(arr, object);

14、js实现计算平方根

两种方案:

1)二分法

function sqrtBisection(n) {
    if (isNaN(n)) return NaN;
    if (n === 0 || n === 1) return n;
    var low = 0,
        high = n,
        pivot = (low + high) / 2,
        lastPivot = pivot;
    // do while 保证执行一次
    do {
        console.log(low, high, pivot, lastPivot)
        if (Math.pow(pivot, 2) > n) {
            high = pivot;
        } else if (Math.pow(pivot, 2) < n) {
            low = pivot;
        } else {
            return pivot;
        }
        lastPivot = pivot;
        pivot = (low + high) / 2;
    }
    // 2018-04-25 22:08 更新
    // 使用Number.EPSILON表示能够接受的最小误差范围
    while (Math.abs(pivot - lastPivot) >= Number.EPSILON)

    return pivot;
}

2)牛顿法

function sqrtNewton(n) {
    if (n < 0) return NaN;
    if (n === 0 || n === 1) return n
    var val = n,
        last;
    do {
        console.log(val, last)
        last = val;
        val = (val + n / val) / 2;
    }
    // 2018-04-25 22:08 更新
    // 使用Number.EPSILON表示能够接受的最小误差范围
    while (Math.abs(val - last) >= Number.EPSILON)
    return val
}

牛顿法的更高效,二分法时间复杂度为O(logN)

14、nodejs子进程

www.cnblogs.com/chyingp/p/n…

15、express 中间件

expressjs.com/zh-cn/guide…

expressjs.com/zh-cn/guide…

16、nodejs 事件循环

lynnelv.github.io/js-event-lo…

17、浏览器去渲染HTML的过程

juejin.cn/post/684490…

18、cookie 服务器端可以清除吗?

www.jianshu.com/p/89cbb0c02…

19、session 什么时候失效?

blog.csdn.net/czh500/arti…

20、http 状态码含义?

www.jianshu.com/p/b58025e61…

21、async await / generator / promise 区别?

www.lazycoffee.com/articles/vi…

22、手写一个promise

juejin.cn/post/684490…

juejin.cn/post/684490…

23、ES6 Map和Set的主要作用

Map主要是用来创造一种新的对象类型,可以用非string类型作为key值

Set主要用来去重

24、JS的基本数据类型有多少种

JS数据类型分类和判断 JavaScript中有6种数据类型:数字(number)、字符串(string)、布尔值(boolean)、undefined、null、对象(Object)。 其中对象类型包括:数组(Array)、函数(Function)、还有两个特殊的对象:正则(RegExp)和日期(Date)。

25、讲一讲跨域问题和解决办法

segmentfault.com/a/119000001…

juejin.cn/post/684490…

26、undefined和null的区别

null 		表示一个对象是“没有值”的值,也就是值为“空”;
 undefined 	表示一个变量声明了没有初始化(赋值);

 undefined不是一个有效的JSON,而null是;
 undefined的类型(typeof)是undefined;
 null的类型(typeof)是object;

 Javascript将未赋值的变量默认值设为undefined;
 Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的。
注意:
 	在验证null时,一定要使用 === ,因为 == 无法分别 null 和 undefined
 	null == undefined // true
 	null === undefined // false

27、讲一讲浏览器的同源策略

同源策略并不是一个单一的策略 (not a single policy),而是由很多规则组成的。这些规则表面上看着相似,其实不同。虽然有各种rfc,但却不能解决安全问题,为了修补各种漏洞,各个浏览器不断打补丁。比如cookie的http-only特性就是微软IE浏览器最先提出并实现的,而现在所有浏览器都有支持。

既然同愿策略有那么多规则不容易说清楚,面试者可以简单说说同源策略的设计目的,是为了解决什么问题。顾名思义,同源策略就是希望来自同一个源的页面和脚本可以基本没有什么限制的进行交互;对于不同源的进行隔离。那如何判断是同源呢?就要看看协议(protocol)、宿主(host)和端口(port)是不是一样。不过要留心一下IE浏览器,它总是会有些不一样。

面试官会继续问是否了解一些同源策略的规则,比如同源策略在DOM元素访问的规则,同源策略在XMLHttpRequest上的规则,cookie上的规则,flash,silverlight,java上的规则,可以挑一个自己比较熟悉的讲一讲。

那有没有哪些是不受同源策略限制呢?

  1. 多媒体元素标签<img src="">
  2. 脚本标签<script src="">
  3. 样式标签<link rel="stylesheet" href="">
  4. 嵌入对象和java applet<embed src=""> <object codebase=""> <applet codebase="">
  5. <frame>, <iframe>
  6. <a>
  7. API: location.*, window.open()

28、JS的堆、栈以及事件循环

juejin.cn/post/684490…

29、webpack里按需引入的插件名称

juejin.cn/post/684490…

30、再谈js闭包

segmentfault.com/a/119000000…

31、简述antd的按需加载方法及配置

segmentfault.com/a/119000001…

实战应用react-router中的应用:

<Route path=’ / about ’ component={getAsyncComponent( //异步加载函数,异步加载 PageAbout 组件 () => import(/* webpackChunkName : ’ page-about ’ */ ’. / pages/about ’) )} />

 <Route path=’ /login ’ component={getAsy口cComponent( // 异步加载函数,异步加载 PageAbout 组件 () => import(/* webpackChunkName: ’ page-login ’ */’. /pages/login ’ ) )} />

32、简述css module的作用

www.kancloud.cn/kancloud/cs…

33、如何理解React高阶组件

zh-hans.reactjs.org/docs/higher…