前端面试之你可能会遇到的编程题(1)

Github - program-learning-lists

知乎

个人博客

Github


“开源(open source)”这个词,指的是事物规划为可以公开访问的,因此人们可以修改并分享。

作为一个从大型同性社交网站GitHub / Rain120上学习成长的一个前端菜鸟的我,深受大佬的感染,也希望有机会能够给同样是菜鸟的你们提供帮助,在我学习之余,留下了之前学习遇到的、网上看到的、笔试面试遇到的一些编程的解法,还请各位大佬手下留情,多多提携、指点我等菜鸟。

欢迎各位大佬留下更加简单的写法,谢谢!!

代码仓库: Web-Study

废话不多说,先上题吧。

1、关系型数组转换成树形结构对象(拼多多2018前端笔试真题 / 依图面试)

关系型数组

var obj = [
    { id:3, parent:2 },
    { id:1, parent:null },
    { id:2, parent:1 },
]

期望结果:

o = {
  obj: {
    id: 1,
    parent: null,
    child: {
      id: 2,
      parent: 1,
      child: {
          id: ,3,
          parent: 2
      }
    }
  }
}

思路:

先找到它的根元素,根据idparent来判断它们之间的关系

实现源码:

function treeObj(obj) {
  obj.map(item => {
    if (item.parent !== null) {
      obj.map(o => {
        if (item.parent === o.id) {
          if (!o.child) {
            o.child = [];
          }
          o.child.push(item);
          o.child = o.child;
        }
      });
    }
  });
  return obj.filter(item => item.parent === null)[0]
}

解法2:(知乎评论区提供的方法)

function treeObj(obj) {
  return obj.sort((a, b) => b.parent - a.parent)
      .reduce((acc, cur) => (acc ? { ...cur, child: acc } : cur));
}

实现效果:

2、请用 javascript 实现一个函数 parseUrl(url),将一段 url字符串解析为 Object。(西洋汇笔试)

 parseUrl("http://www.xiyanghui.com/product/list?id=123456&sort=discount#title");

期望结果:

{
    protocol: "http",
    host: "www.xiyanghui.com",
    path: "/product/list",
    params: {
        id: "12345",
        sort: "discount"
    },
    hash: "title"
}

思路:

首先我们需要了解一下URL这个概念。

URL(统一资源定位符)(或称统一资源定位器/定位地址、URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址)。

这里,我补充一点,各位不仅需要了解 URL,还需要了解 URI

URI:统一资源标识符(英语:Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串。 该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互操作。URI的最常见的形式是统一资源定位符(URL),经常指定为非正式的网址。更罕见的用法是统一资源名称(URN),其目的是通过提供一种途径。用于在特定的名字空间资源的标识,以补充网址。

URI包括了URLURN

下图展示了两个 URI 例子及它们的组成部分。

URL一般包括协议域名端口queryparams等,我们在传入参数时是字符串,我们需要将它转换成URL,可以通过创建一个a标签来将字符串 转换成URL

实现源码:

function parseUrl(url) {   
     var a =  document.createElement('a');   
     a.href = url;   
     return {   
         source: url,   
         protocol: a.protocol.replace(':',''),   
         host: a.hostname,   
         port: a.port,   
         query: a.search,   
         params: (() => {   
             var ret = {}, querys = []; 
             var searchQuery = a.search.replace(/^\?/,'').split('&');
             for ( var i = 0;i < searchQuery.length; i++) {   
                 if (searchQuery[i]) { 
                     querys = searchQuery[i].split('=');   
                     ret[querys[0]] = querys[1]; 
                 }  
             }   
             return ret;   
         })(),  
         file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],   
         hash: a.hash.replace('#',''),   
         path: a.pathname.replace(/^([^\/])/,'/$1'),   
         relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],   
         segments: a.pathname.replace(/^\//,'').split('/')   
    };   
} 
parseUrl("http://www.xiyanghui.com/product/list?id=123456&sort=discount#title");

实现效果:

3、数组元素的排列组合问题

[1, 2, 3]

期望结果:

全排列:

[[1, 2], [1, 3], [2, 1], [2, 3], [3, 1], [3, 2]]

思路:

每次取数组中的一个数,然后将剩余的数,依次加入到该数的组合数组中

实现代码:

function Permutations (target, size, origin) {
    var _arr = []
    function getArrange(target, nums, ret) {
        if (nums === 1) {
            for (var i = 0; i < target.length; i++) {
                var tmp = ret.slice();
                tmp.push(target[i]);
                _arr.push(tmp);
            }
        } else {
            nums -= 1;
            for (var i = 0; i < target.length; i++) {
                var tmp = ret.slice();
                var newTarget = target.slice();
                tmp.push(target[i]);
                newTarget.splice(i, 1);
                getArrange(newTarget, nums, tmp);
            }
        }
    }
    getArrange(target, size, origin);
    return _arr;
}
Permutations([1, 2, 3], 2, [])

实现效果:

[1, 2, 3, 4]

排列组合:

[[1, 2, 3], [1, 2, 4], [1, 3, 4], [2, 3, 4]]

思路:

取一个数,加入到数组中,接着再取一个数加入数组,直到需要的num为0。

实现代码:

function Permutations (arr, nums) {
  var ret = [];

  function getRet(origin, target, nums) {
    if (nums === 0) {
      ret[ret.length] = origin;
      return;
    }
    for (var i = 0; i <= target.length - nums; i++) {
      var tmp = origin.slice();
      tmp.push(target[i]);
      getRet(tmp, target.slice(i + 1), nums - 1);
    }
  }
  getRet([], arr, nums);
  return ret;
}
Permutations([1, 2, 3, 4], 3)

实现效果:

4、JS如何判断一组数字是否连续(百词斩笔试题)

// 当出现连续数字的时候以‘-’输出
[1, 2, 3, 4, 6, 8, 9, 10]

期望结果:

["1-4", 6, "8-10"]

原理:

判断前后数字是否相差为1,如果是则加入同一个数组

实现代码:

判断是否连续:

var arrange = function(arr){
    var result = [],temp = [];
    arr.sort(function(source, dest){
        return source - dest;
    }).concat(Infinity).reduce(function(source, dest){
        temp.push(source);
        if(dest-source > 1){
            result.push(temp);
            temp = [];
        }
        return dest;
    });
    return result;
};

实现效果:

格式化实现:

var formatarr = function(arr) {
    var newArr = []
    var arr1 = arrange(arr)
    for (var i in arr1) {
        var str = '';
        if (arr1[i].length > 1) {
            str = arr1[i][0] + '-' + arr1[i][arr1[i].length - 1];
            newArr.push(str)
        } else {
            newArr.push(arr1[i][0]);
        }
   }
   return newArr;
}

实现效果:

5、创建子类Child,使用原型和构造函数的方式继承父类People的方法,并调用say函数说出姓名和年龄。(详见我的另一篇文章前端面试问题之面向对象类)

实现代码:

父类:

function People(name,age){
     this.name=name;
     this.age=age;
     this.say=function(){
         console.log("我的名字是:"+this.name+"我今年"+this.age+"岁!");
     };
}

原型继承:(原型链相关问题请看我的另一篇文章前端面试之原型链问题)

function Child(name, age){
    this.name = name;
    this.age = age;
}
Child.prototype = new People();
var child = new Child('Rainy', 20);
child.say()

实现效果:

构造函数继承

function Child(name, age){
    People.call(this)
    this.name = name;
    this.age = age;
}
var child = new Child('Rainy', 20);
child.say()

实现效果:

组合继承:

function Child(name, age){
    People.call(this);
    this.name = name;
    this.age = age;
}
Child.prototype = People.prototype;
var child = new Child('Rainy', 20);
child.say()

实现效果:

组合继承优化:

function Child(name, age){
    People.call(this);
    this.name = name;
    this.age = age;
}
Child.prototype = Object.create(People.prototype);
Child.prototype.constructor = Child;
var child = new Child('Rainy', 20);
child.say()

实现效果:

未完待续

你可能感兴趣的:(编程,笔试题,面试,前端工程师,javascript)