蘑菇街2019校招题目总结

Milly_Liu

于 2020-03-11 15:15:50 发布

阅读量191

点赞数

分类专栏：前端刷题总结

本文链接：https://blog.csdn.net/qq_38148024/article/details/104791405

版权

前端刷题总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Victory won’t come to me unless I go to it.

选择题

CSS3中的伪类选择器

:nth-child(n)表示选中某个元素，这个元素是某个父元素的第n个子元素。
比如：

<p class="p1">
	<span>A</span><span>B</span><span>C</span>
	<span>D</span><span>E</span><span>F</span>
</p>

<p class="p2">
	<a href="#">去哪儿呀</a>
	<span>a</span><span>b</span><span>c</span>
	<span>d</span><span>e</span><span>f</span>
</p>

span:nth-child(n)表示选中span，而且span必须是父元素p下的第n个子元素，注意：n是从1开始的。
具体的： span:nth-child(1)只能选中A，而不能选中a，因为这个选择器的含义是：选中span，而这个span是父元素p的第一个子元素，而class=p2的p标签中它的第一个子元素是a标签而不是span标签，所以只能选中A而不能选中a。

正方向范围的表示：span:nth-child(n+3)
含义：选中span所在的父元素从第3个开始的所有span标签，对于上个例子来说，选中的就是CDEF和bcdef。
负方向范围的表示：span:nth-child(-n+3)
含义：选中span所在的父元素中的第1个到第3个子元素中的span元素，也就是相当于选中父元素第3个及其之前的所有子元素中的span元素，上例中，选中的就是ABC和ab。
所以可以看出，n前面的符号表示方向，正的表示向变大的方向选择，负的表示向变小的方向选择。
前后范围限制的表示：span:nth-child(n+2):nth-child(-n+4)选择一个范围内的元素，选取父元素的第2个到第4个子元素中的span元素。上例中选择的就是BDC和abc。
隔行选择的表示：
- 奇数行：span:nth-child(odd)和span:nth-child(2n+1)
  在这里，如果n是从1开始的，那第一行就没有办法选中了，这里计算的时候n是从0开始的：
```
n    = 0,1,2,3,...
2n   = 0,2,4,6,...
2n+1 = 1,3,5,7,...
```
父元素中的子元素是从1开始数的,上式中2n+1计算得到的1,3,5,7就是对应的父元素中的第1,3,5,7个子元素，也就是用户看到的奇数行。这样就对应起来了。上例中，选中的就是ACE和bdf。
- 偶数行：span:nth-child(even)和span:nth-child(2n+1)与上述解释方式一致。
高级表示：比如想要选中p标签中第2个到第5个子元素的偶数位span元素，就表示成span:nth-child(n+2):nth-child(even):nth-child(-n+5)

常见的web攻击：详细总结参考这里

XSS：跨站脚本攻击
SQL注入攻击
DDos：分布式拒绝服务攻击，比如SYN攻击
CSRF：跨站请求伪造

看清楚题目要求，看清楚大小写啊！！！

console.log(typeof undefined == typeof NULL);
console.log(typeof function () {} == typeof class {});

console.log(typeof undefined); // undefined
console.log(typeof NULL); // undefined
console.log(typeof null); // object
console.log(typeof NaN); // number
console.log(typeof nan); // undefined
console.log(typeof function () {}); // function
console.log(typeof class {}); // function

查看输出结果：

    var tmp = {};
    var A = function() {};
    A.prototype = tmp;

    var a = new A();
    A.prototype = {};

    var b = Object.create(tmp);
    b.constructor = A.constructor;

    console.log(a instanceof A);
    console.log(b instanceof A);

首先要明白的点：

a instanceof A的含义：js中的instanceof的判断依据是对象的__proto__是否等于方法/类的prototype。这句话的意思是：a的原型链上是否有A.prototype对象。A必须是一个函数，a必须为一个对象。
引用类型的指向问题
Object.create() 方法的用途：可以实现类式继承，关于继承问题准备在下一篇博客好好总结一下，这里先参考MDN。还有使用Object.create()，new object()和{}创建对象的区别：参考这里。

题目分析：
当var a = new A()时，a instanceof A返回的是true，但是当执行了A.prototype = {}之后，A的原型的指向改变了，对于复杂数据类型{} == {}返回false，所以a instanceof A返回的是false。
var b = Object.create(tmp);表示，b的原型是tmp，原本A的原型也是tmp，但是A.prototype = {}后A的原型就变了，还是因为{}!=={}所以返回的依然是false。
5. 关于cookie、sessionStorage和localStorage的区别。（这里的总结来自题目解析）

共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便

关于跨域，学习之后单独整理。
闭包与内存泄漏
在上一篇实习生的题目里面也考到了闭包，那里主要是对闭包的含义理解，这里考察闭包的影响。
let 与const
let与var类似，都是用于声明变量，区别在于：1、let声明的变量只在块级作用域内有效，var声明的是全局的。2、let不存在变量提升，var存在变量提升，如果是在声明之前使用某个变量，如果是let声明的会报错，如果是var声明的，结果就是undefined。let的暂时性死区（TDZ）：在代码块内，使用let命令声明变量之前，该变量都是不可用的。3、let不允许在相同作用域内，重复声明同一个变量，不可以重复声明但是它的值是可变的。
const用于声明一个常量，一旦声明不可改变。const与let一样，只在块级作用域内有效，不存在变量提升，不可重复声明。
9.代码解读：object的键是字符串

   var a = {},
       b = { key: 'b' },
       c = { key: 'c' };

   a[b] = 123;
   a[c] = 456;
   console.log(a[a]);
   console.log(a[a]);
   console.log(a[a]);

键的名称只能是字符串
a[a] a[b] a[c]都相当于是a["[object Object]"]，后面的456覆盖了前面的123，所以最终的结果都是456。a是{[object Object]: 456}。这个题有点没搞清楚考点是什么…
10. addEventListener

      <div class="a">hello</div>

绑定的click事件如下

    let a = document.querySelector('.a');
    a.addEventListener('click', ()=>{
        console.log(1);
    });

以下哪些方法在点击上面的div后，输出1之前输出2：

// A
a.addEventListener('click', () => {
	console.log(2);
});

// B
a.addEventListener('click', () => {
	console.log(2);
}, true);

// C
a.addEventListener('touchstart', () => {
	console.log(2);
});

//D
a.addEventListener('touchend', () => {
	console.log(2);
});

答案：BCD
先要知道这几个事件的执行顺序：touchstart -> touchend -> click。
其次就是addEventListener参数的含义：
element.addEventListener(event, function, useCapture)其中，event是不带on的事件名，function是事件函数，useCapture是一个可选项，布尔值，指定事件是否在捕获或冒泡阶段执行，true表示事件句柄在捕获阶段执行，false（默认）表示事件句柄在冒泡阶段执行。

编程题

实现一个弹出对话框组件, 如下图(可以使用vue, jquery, react等框架)
JS编程题
先看一个相似的题目：题目来源于这里


// 已知道如下数组：
// var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ];

// 编写一个程序将数组扁平化去并除其中重复部分数据， 最终得到一个升序且不重复的数组：
// var res = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ];
var newArray = [];

// 首先完成数组解析：
function getArray(array) {
    array.forEach(function (e) {
        if (typeof e === "object") {
            getArray(e);
        } else {
            newArray.push(e);
        }
    });
}
getArray(arr);

// 去重
Array.prototype.distinct = function () {
    return this.reduce(function (newArray1, newValue) {
        if (newArray1.indexOf(newValue) === -1)
            newArray1.push(newValue);
        return newArray1;
    }, []);
};
newArray = newArray.distinct();

// 排序
newArray.sort(function (a, b) {
    return a - b;
});
console.log(newArray);

考点：数组扁平化，闭包，数组中常见方法的使用：reduce()，sort()，sort方法的几个例子。

本次的题目：

// 题目要求：
// 编写一个Javascript函数，
    // 传入一个数组，对数组中的元素进行去重并返回一个无重复元素的数组，
    // 数组的元素可以是数字、字符串、数组和对象。

// 举例说明：
// 1. 如传入的数组元素为[123, "meili", "123", "mogu", 123], 则输出：[123, "meili", "123", "mogu"]
// 2. 如传入的数组元素为[123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"], 则输出：[123, [1, 2, 3], [1, "2", 3], "meili"]
// 3. 如传入的数组元素为[123, { a: 1 }, { a: { b: 1 } }, { a: "1" }, { a: { b: 1 } }, "meili"], 则输出：[123, { a: 1 }, { a: { b: 1 } }, { a: "1" }, "meili"]

function getNewArr(arr) {
    var hash = {}; 
    var newArray = [];
    for (let i = 0; i < arr.length; i++) {
        let string = JSON.stringify(arr[i]);
        if (!hash[string]) { // 为了判定是否已经保存过，如果hash里面没有string，就把这个元素push到数组，然后给它做一个标记。
                                // 如果hash里面已经有string了，说明之前就已经做过标记了，if里面就是false，就不会执行这个语句。
            hash[string] = 1;
            newArray.push(JSON.parse(string));
        }
    }
    return newArray;
}

来源：https://www.nowcoder.com/questionTerminal/37e13b4cf1ff4a62b66cc736c5cfe333

Milly_Liu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
蘑菇街2019校招题目总结

Victory won’t come to me unless I go to it.选择题CSS3中的伪类选择器:nth-child(n)表示选中某个元素，这个元素是某个父元素的第n个子元素。比如： ABC<...
复制链接

扫一扫