2019拼多多提前批web前端研发岗笔试

2018-08-06

2018-08-05拼多多前端笔试题

总的来说比较基础，13个单选题，2个多选，2个填空题，8个问答

主要总结如下：

1.如何改变this的指向？

This对象是在运行时基于函数的执行环境绑定的：
1）在全局函数中，this等于window（匿名函数的执行环境具有全局性，因此this对象指向window）
2）当函数被作为某个对象的方法调用时，this等于那个对象
解析思路：如果是全局环境，就是window，如果是对象调用，就是obj，如果不知道上下文环境，还是window吧
详细解析
改变this的指向：通过bind(),call(),apply()改变函数执行环境的情况下，this就会指向其它对象。

2.设计函数输出数组里面的重复元素

先进行第一轮排序，排完之后的结果，就是1,1,2,3,3,3,4,4,5。如果是这样的数组中找重复的就好办了，直接就是 arr[0]与arr[1]比较，依此类推，相等就是重复的.

var arr = [1,2,4,4,3,3,1,5,3];
function duplicates(arr) {
    var newArr=[];
    arr.sort();
    for(var i =0;i<arr.length;i++){
        if(arr[i]==arr[i+1]&&(newArr.indexOf(arr[i])==-1) ){
            newArr.push(arr[i]);
            i++;
        }
    }
return newArr;}

3.undefined和null的区别？

Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。

4.foreach和map的区别

map和foreach区别：forEach()方法：对数组的每一个元素都执行一次提供的函数返回值： undefined该方法不会改变原来的数组，只是将数组中的每一项作为callback的参数执行一次。map()方法：map()方法创建一个新的数组，其结果是该数组中的每个元素都调用一次callback后返回的结果，同样，该方法不改变原有的数组，返回值：新数组，每个元素都是回调函数的结果。

5.什么是伪数组，把伪数组转换为数组

无法直接调用数组方法或期望length属性有什么特殊的行为，不具有数组的push,pop等方法，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

6.跨域产生的原因及解决办法？

跨域问题来源于JavaScript的同源策略，即只有协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。
解决办法：
1） Jsonp 需要目标服务器配合一个callback函数
2）通过修改document.domain来跨子域
3）使用window.name+iframe来进行跨域
4）跨文档消息传输window.postMessage
5）通过CORS解决AJAX跨域
6）通过设置Access-Control-Allow-Origin
7）通过Nginx反向代理

详解

7.CSS实现左边固定右边200px自适应

实现一个div，左边固定div宽度200px，右边div自适应

<div class= "container">
    <div class="left"></div>
    <div class="rigth"></div>
</div>
<style>
/*方法一： BFC(块级格式化上下文)*/
    .container{
        width:1000px;height:400px;border: 1px solid red;
    }
    .left{
        width:200px;height:100%;background: gray;
        float: left;
    }
    .rigth{
        overflow:hidden;  /* 触发bfc */
        background: green;
    }
/*方法二： flex布局 */
    .container{
        width:1000px;height:400px;border:1px solid red;
        display:flex;         /*flex布局*/
    }
    .left{
        width:200px; height:100%;background:gray;
        flex:none;
    }
    .right{
        height:100%;background:green;
        flex:1;        /*flex布局*/
    }
/* 方法三： table布局 */
    .container{
        width:1000px;height:400px;border:1px solid red;
        display:table;         /*table布局*/
    }
    .left{
        width:200px; height:100%;background:gray;
        display:table-cell;
    }
    .right{
        height:100%;background:green;
        display: table-cell;
    }
/*方法四： css计算宽度calc*/
    .container{
        width:1000px;height:400px;border:1px solid red;
    }
    .left{
        width:200px;height:100%;background:gray;
        float:left;
    }
    .right{
        height:100%;background:green;
        float:right;
        width:calc(100% - 200px);
    }
</style>

8. JavaScript里面0.1+0.2！=0.3的原因

在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确，在他们相加的结果并非正好等于0.3，而是一个比较接近的数字 0.30000000000000004 ，所以条件判断结果为 false

2018-07-25拼多多前端笔试题

1. CSS实现动画有哪些方式：

css的transition（过渡属性）
过渡属性是一个复合属性，主要包括以下几个属性
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
css3的animation属性
Jquery的animate函数
原生js动画
a) 原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理
插件（waves，textillate.js等等）
使用canvas制作动画（可以使用canvas在浏览器上画图，并且利用其api，制作动画。）
使用gif图片

2. 题目描述：

let arr1=[1,2,3];
let arr2=[4,5,6];
如何合并这两个数组：

 * Created by dcp on 2018/7/20.
 */
let arr1=[1,2,3];
let arr2=[4,5,6];
// 第一种：
console.log(arr1.concat(arr2))
// 第二种：
Array.prototype.push.apply(arr1,arr2)
console.log(arr1)

3.编写一个输出日志的函数log，在输出内容前面加上前缀(app),如：

log(“Hello world”)返回“(app)Hello world”
log(“Hello”,”world”)返回”(app)Hello world”

function log(){
    var args = Array.prototype.slice.call(arguments).map(stringify);
    // console.log.apply(console,args);
    var t=args.toString().replace(',',' ')
    console.log('(app)'+t)
}
function stringify(arg) {
    return arg;
}
log( 'hello','word');

4.当代码var a=new A(‘testa’)执行时，会发生什么？

var o = new Object();
o.proto = A.prototype;//这里还记得之那个function里面的默认的属性么?
A.call(o)//由于这里this是指向o,可以把什么this.name/getName绑定到o上.
把这个o返回给a;//完成var a = new A()的过程

5.使用typeof bar===”object”判断bar是不是一个对象有什么弊端？如何避免这种弊端？

需要用typeof来判断类型，只有‘boolean’、‘number’、’string’、‘function’四种类型是靠谱的，尽管 typeof bar === “object” 是检查 bar 是否对象的可靠方法，令人惊讶的是在JavaScript中 null 也被认为是对象，即console.log(typeof null === ‘object’); //true！
typeof bar === “object” 并不能准确判断 bar 就是一个 Object。可以通过 Object.prototype.toString.call(bar) === “[object Object]” 来避免这种弊端

6. 简述一下什么是浅拷贝，什么是深拷贝，如何实现？

首先深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。
对于字符串类型，浅拷贝是对值的复制，对于对象来说，浅拷贝是对对象地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，深复制会在堆区开辟新的一块，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
浅拷贝：简单复制（Object，Array）,Object.assign()方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
深拷贝：jQuery.extend( [deep ], target, object1 [, objectN ] )，其中deep为Boolean类型，如果是true，则进行深拷贝。JSON.parse()和JSON.stringify()

7. 利用快速排序将数组[6,3,9,12,1]从小到大排序

/**
 * Created by dcp on 2018/7/20.
 */
function quickSort(arr) {
    if(arr.length<=1){
        return arr;
    }
    var pivotIndex=Math.floor(arr.length/2);
    var pivot=arr.splice(pivotIndex,1)[0]
    var left=[];
        var right=[];
    for(var i=0;i<arr.length;i++){
        if(arr[i]<pivot){
            left.push(arr[i])
        }else {
            right.push(arr[i]);
        }
    }
    return quickSort(left).concat([pivot], quickSort(right));
}
arr=[6,3,9,12,1]
console.log(quickSort(arr))

8. json转换

将数组obj格式：
var obj = [
    {id:1, parent: null},
    {id:2, parent: 1},
    {id:3, parent: 2},
];
转换为obj2格式：
var obj2 = {
    obj: {
        id: 1,
        parent: null,
        child: {
            id: 2,
            parent: 1,
            child: {
                id: 3,
                parent: 2
            }
        }
    }
}

代码实现：

var obj2 = {};
function createObj2(obj, child){
    if(child.parent){
        if(obj.obj){
            createObj2(obj.obj, child);
        }else{
            if(obj.id === child.parent){
                obj.child = {
                    id: child.id,
                    parent: child.parent,
                }
            }else{
                if(obj.child){
                    createObj2(obj.child, child);
                }else{
                    console.log('obj2未匹配到对应的parent对应关系')
                }
            }
        }
    }else{
        obj.obj = {
            id: child.id,
            parent: child.parent,
            child: {}
        }
    }
}
obj.forEach((item, item_i) => {
    createObj2(obj2, item)
})
console.log('obj2:', obj2)