6.7美团前端面试回顾

一箱的锅巴

已于 2022-07-18 15:43:14 修改

阅读量124

点赞数

文章标签：前端面试 javascript

于 2022-06-08 16:07:00 首次发布

本文链接：https://blog.csdn.net/characs/article/details/125172085

版权

1.数组去重

2.看代码答输出题

很简单一道题

function O() {
    this.x = 1;
    this.print = function () {
        console.log(this.x);
    }
}
let o = new O();
let print = o.print;
print();
let n = { x: 2, print: print };
n.print();

我答错了：正确答案是undefined 2
我答的是：error 2
我认为浏览器window.x找不到会报错，回来试了一下，一个未经声明的变量，如下
不报错
是不会报错的，报undefined,呜呜呜

3. 把一个div块垂直居中，两种方法

法1：flex

<style>
    #ae{
        width:250px;
        height:800px;
        display:flex;
        align-items:center;
        background-color: greenyellow;
    }
    #ab{
        width:250px;
        height:100px;
        background-color:red;     
    }
</style>
</head>
<body>
    <div id="ae">
        <div id="ab">hello meituan</div>
    </div> 
</body>

法2,往四个方向扯，margin auto，注意带方向的，必须要带position

<style>
    #ae{
        width:250px;
        position:relative;
        height:800px;
        background-color: greenyellow;
    }
    #ab{
        width:250px;
        height:100px;
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto;
        position:absolute;
        background-color:red;     
    }
</style>
</head>
<body>
    <div id="ae">
        <div id="ab">hello meituan</div>
    </div> 
</body>

法3 已知子元素宽高的，可以设置top和margin-top

<style>
    #ae{
        width:250px;
        position:relative;
        height:800px;
        background-color: greenyellow;
    }
    #ab{
        width:250px;
        height:100px;
        top:50%;
        margin: top -50px;;
        position:absolute;
        background-color:red;     
    }
</style>
</head>
<body>
    <div id="ae">
        <div id="ab">hello meituan</div>
    </div> 
</body>

4. 一个ul内含五个 li，把他的第一个li弄到最后的位置去

<body>
    <ul id="ad">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let ul=document.getElementById("ad");
        let li=ul.children;
        ul.appendChild(li[0]);
        很简单的一句话，appendchild即可搞定，它会自动的把li[0]切到最后来
        console.log(li);
    </script>
</body>

注释掉appendChild时
之后的图片
注意，这里的li不是纯数组，不能使用splice等内置的数组方法，足见我之前的《DOM编程艺术》白看了，TMD。

引申DOM操作：insertBefore与手写insertAfter

一些已经遗忘的东西：lastChild,可以在不知子节点有多少的时候取最后一个

<script>
        let ul=document.getElementById("ad");
        let li=ul.children;
        let newli=document.createElement("li");
        newli.innerHTML="5.5";
        ul.insertBefore(newli,li[1])
        console.log(li);
    </script>

效果图
手写一个insertAfter()

function insertAfter(newele,targetele){
    let dad=targetele.parentElement;
    if(targetele.nextElementSibling){
        dad.insertBefore(newele,targetele.nextElementSibling);
    }else{
        dad.appendChild(newele);
    }
}

常用的DOM操作

增
document.createElement(div);
document.createTextNode();
document.createComment();
document.createDocumentFragment();
插
ParentNode.appendChild();
ParentNode.insertBefore(a,b);
Element.nodeType //显示对应节点的值，元素节点为1，文本节点为3
删
parent.removeChild();
child.remove();
改
div.getAttribute(‘属性名’)；
div.setAttribute(“class”,“className”); // 可以这样子动态的修改 CSS 样式

<body>
    <ul id="ad">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let ul=document.getElementById("ad");
        let li=ul.children;
        console.log(li[1].nodeType);//1
        let allcld=ul.childNodes;
        console.log(allcld[0].nodeType);//3
        console.log(allcld[1].nodeType);//1
        console.log(allcld[2].nodeType);//3
    </script>
</body>

5.趣味智力题：

甲乙两人抓球，球的序号1-100号, 甲乙二人依次按序号抓球，每次可以抓1到9个球，规定拿到100号的人胜出，探寻乙必胜策略。interesting。

问答过程：

事件委托
冒泡和捕获，阻止冒泡捕获 js中的冒泡和捕获
link和@import的区别
px,rem,em间的区别
输入url到看到页面发生了什么？
DNS联系域名与机器码，那找到这个机器后，机器怎么处理请求呢？(事后推测是Nginx)
类方法能调用实例方法吗？（不能）
同源策略
跨域的解决方案：（JSONP、使用代理、。。。。）
JSONP、CORS(跨域资源共享，服务端要有access-control-allow-origin HTTP响应头)、使用代理（目前最常用）、websocket.
iframe能够相互通信吗
原来这里其实是考察同源策略！！！浏览器是有同源限制的，假如没有了跨域限制，那么不同域的iframe就可以相互访问了。
同源策略可以很好的限制CSRF跨站请求伪造之类的攻击手段。
浏览器跨域是受限制的，但服务器与服务器之间没有限制