前端面试题积累

1.    什么时候用数组，什么时候用对象？

 

 

 

 

 

 

 

 

2.    你写的源代码到客户从浏览器能访问到，中间大体经过哪些步骤（从前端工程化角度）？

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.    sourcemap有什么作用？

 

 

 

 

 

4.    写一个react组件实现从10秒开始倒计时

class Countdown extends React.Component {

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

}

 

 

5.    现学现用：

现有transfrom函数，第一个参数接收一个object，第二个参数接收一个callback迭代器，第三个参数接收初始值。callback的第一个参数result在第一轮迭代是初始值，后续是上一次迭代callback的返回值，第二、第三个参数value、key对应到当前迭代object一个键值对。

举例：

       scores = {'小明': {'数学': 95, '语文': 78}, '小红': {'数学': 85, '语文': 86}}

sanhaoFilter = score => score['数学'] > 80 && score['语文'] > 80;

sanhaoStudents = transform(scores, (result, value, key) => {

  sanhaoFilter(value) && result.push(key);

  return result;

}, []); // 求得三好学生的结果是：[‘小红’]

求解：

likes = {'小红': '香蕉', '小明': '桃子', '小胖': '香蕉'}

1、 求出每一种水果，分别都有谁爱吃：{'香蕉': ['小红', '小胖'], '桃子': ['小明']}

fruits = transform(likes, (result, value, key) => {

 

 

 

 

 

 

 

 

 

 

}, {});

2、 求出是否有人喜欢吃桃子：true

isAnyoneLikePeach = transform(likes, (result, value, key) => {

 

 

 

 

 

 

 

 

 

 

},               );

3、 类比数组原生的reduce方法，你认为reduce可以替代实现其他哪些原生的方法？

 

 

6.    简要写出代码，原生html、js实现一个仅支持输入手机号的PhoneBox的react组件

class PhoneBox extends React.Component {

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

}

7.    一句话简要说明react技术栈与jquery开发思路的不同

 

 

 

 

8.    redux的reducer中为什么不能有异步逻辑？为什么不可以直接修改state的引用？

 

 

 

 

 

 

 

 

 

 

 

 

9.    从url如 http://baidu.com?key1=val1&key2=val2中，求出key1对应的值

 

 

 

 

 

 

 

 

 

 

 

 

 

10. 简要说出如何解决客户在短时间内多次提交同一表单？

 

 

 

 

 

11. 简要说出hash从首页的#/home切换到详情页的#/detail&id=1 react技术栈如何实现页面变化的

 

 

 

 

 

 

 

12. 要实现如下react公共组件，props、state和handler设计：

 

如果对于这种包含子节点的树形结构hold不住，也可以简化为非树形的设计

props: {

 

 

 

 

 

}

state: {

 

 

 

}

handleXXX: