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>
注意，这里的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跨站请求伪造之类的攻击手段。
浏览器跨域是受限制的，但服务器与服务器之间没有限制
同源策略会限制AJAX发送网络请求，不能跨域请求server
但是不会限制<link><img><script><iframe>等加载第三方资源
- 闭包的理解及其作用
- call、apply、bind的区别，说一下改变this指向的应用场景（继承，方法复用）
- 谈谈MVC、MVVM（这是啥，之前面荣耀的时候被问到过）
- React中class和hook两种写法的区别 (我对钩子函数的理解有问题)
- webpack有用过吗？
- 说几个常见的git命令
- node有用过吧，项目中npm install xxx -s，这个-s是什么意思
- dev-dependencies和dependencies的区别
- 你的项目是怎么打包的，babel,不懂（JSX–>JS）
鬼扯
怎么学前端的
人生中的高光时刻
人生的至暗时刻
##反问
我现在最需要学什么？
前端工程化。把一个项目自己不看视频搞下来，不断完善，弄个阿里云服务器，放到某个站点上去，这个过程中会遇到很多问题，促使你去做相应的事。
6.8号收到面试反馈，凉
