明源云面试题

陈林007
3,559 阅读6分钟
1.请写出你知道http状态码及其含义 
100 Continue 继续，一般在发送post请求时，已经发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
2.假如移动端设备的尺寸是640px要实现每1rem=16px怎么实现？

详解：caibaojian.com/flexible-js…

3.请使用css画出梯形 
<style>
   .trapzoid{
       border-bottom: 100px solid red;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       width: 100px;
   }
   .san{
       width:0;
       height:0;
       border-left:50px solid transparent;
       border-right:50px solid transparent;
       border-bottom:100px solid red;
   }
</style>

<div class="trapzoid"></div>
<div class="san"></div>
4.请使用css画出梯形

思路：既然左右有固定宽度，当然要设置了。中间优先加载，按照HTML顺序解释的原则，即中间放在文档前面。而中间放在前又会影响文档流的布局，所以在此改变一下元素的相对位置即可，解法应该有不少，解法网上能搜索到的不少，在此把自己的思路记录下来。

1.第一种
<!DOCTYPE html>
<html>
<head>
   <style>
           div{float:left;}
           #left{width:150px;position:absolute;left:0px;}
           #right{width:200px;float:right;}
           #middle{position:relative;left:150px;}
       </style>
</head>
<body>
    <div id="middle">
            middle;middle;
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
</body>
</html>


2.第二种
<!DOCTYPE html>
<html>
<head>
   <style>
           body{margin:0; padding:0;}
           #left{float:left;width:150px;background:red;}
           #right{float:right;width:200px;background:green;}
           #middle{position:absolute;left:150px;right:200px;word-wrap:break-word;background:blue;}
       </style>
</head>
<body>
    <div id="middle">
            middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;
            middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
</body>
</html>

3.第三种
<!DOCTYPE html>
<html>
<head>
<style>
    body{margin:0; padding:0;}
   #left{width:150px;position:absolute;left:0;top:0;}
   #right{width:200px;position:absolute;right:0; top:0;}
   #middle{word-wrap:break-word;}
   
   #backLeft{background:red;padding-left:150px;}       
   #backMiddle{background:blue;padding-right:200px;}
   #backRight{background:green;}
   </style>
</head>
<body>
 <div id="backLeft">
    <div id="backMiddle">
        <div id="backRight">
    <div id="middle">
                middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;
                middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;middle;
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
                <p>middle;</p>
    </div>    
    <div id="right">right</div>
        <div id="left">left</div>
        </div>    
    </div>    
 </div>                        
</body>
</html>

详解：www.cnblogs.com/p2227/p/359…

5.请写出下面代码的执行结果 
var a = 3;
function change(a) {
    a = 4;
}
change(a) // 函数没有返回
alert(a); // 3


var user = {age:30}
function change2(user) {
    user.age = 40;
}
change2(user); // 函数已经修改
alert(user.age); // 40


function change3(user) {
    user = {age:50}
}
change3(user); // 函数没有修改
alert(user.age); // 40
6.请写出下面代码的执行结果 
function test(a,b){
    alert(b); 
    return {
        test: function(c,a){
            return test(c,a)
        }
    }
}
var a = test(100,200); // 200
a.test(300); // undefined
a.test(400); // undefined

function test(a,b){
    alert(b); 
    return {
        test: function(c,a){
            return test(c,a)
        }
    }
}
var b = test(101).test(201).test(401); // undefined  undefined  undefined


function test(a,b){
    alert(b); 
    return {
        test: function(c,a){
            return test(c,a)
        }
    }
}
var c = test(102).test(202,302);
c.test(); // undefined  302  undefined
7.如何让(a ==1 && a== 2 && a==3) 的值为true
1.重写Object的toString或者valueOf

const a = {
  i: 1,
  toString: function () {
    return a.i++;
  }
}

2.// 利用数据劫持(proxy/Object.defineProperty)
let i = 1;
let a = new Proxy({}, {
    i: 1,
    get: function() {
        return () => this.i++;
    }
})

3.数组的toString接口默认调用数组的join方法，重新join方法
let a = [1,2,3];
a.join = a.shift;


if(a == 1 && a == 2 && a == 3) {
  console.log('Hello World!');
}

详解：majing.io/posts/10000…

8.react生命周期图

详解：projects.wojtekmaj.pl/react-lifec…

9.不适用for或者while,创建一个长度为120的数组，并且每个元素的值等于数组长度减去它的下标
ES5版答案：
Object.keys(Array.from({ length: 100 }));

ES6版答案：
Array.from(Array(100).keys());
10.按照下面数据结构
 var data = [
          {"parent_id": 0, "id":1, "value": "xxx"},
          {"parent_id": 1, "id":3, "value": "xxx"},
          {"parent_id": 4, "id":6, "value": "xxx"},
          {"parent_id": 3, "id":5, "value": "xxx"},
          {"parent_id": 2, "id":4, "value": "xxx"},
          {"parent_id": 1, "id":2, "value": "xxx"},
      ]
      function toTree(data) {
          // 删除所有children,防止多长调用
          data.forEach(item => {
              delete item.children;
          })

          // 将数据存储为 以id为key的map索引数据列
          const map = {};
          data.forEach(item => {
              map[item.id] = item;
          })
          
          const list = [];
          data.forEach(item => {
              // 以当前遍历项，的pid,去map对象中找到索引的id
              let parent = map[item.parent_id];
              // 如果找到索引,那么说明此项不在定级当中，那么需要把此项添加到，他对应的父级中
              if (parent) {
                  (parent.children || (parent.children = [])).push(item);
              } else {
                  // 如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 list结果集中，作为顶级
                  list.push(item)
              }
          })
          return list;
      }
      console.log(toTree(data))
avatar
文章
阅读
粉丝