百度前台js笔试题与答案

百度前台JS笔试题攻略

0. 背景介绍

该题是百度前端技术学院(IFE)啊2017年的提前批笔试题,主要考察前端JavaScript编程能力。该题面分为多个部分,主要要求在限制条件下,用JavaScript实现代码功能。

1. 题目分析

1.1 题目描述

该题面共分为5个部分,包括字符串、数组、对象、ES6、正则表达式等内容。

1.2 题目要求

针对每个部分的题目要求,需要编写符合要求的JavaScript代码,并在浏览器的控制台输出结果。

1.3 注意事项

  • 代码以函数为单位,可重复利用;
  • 避免使用jQuery等第三方库;
  • 不允许直接使用原生API;
  • 不能修改模板代码。

2. 代码解析

下面分别对每个部分的题目进行解析:

2.1 字符串

  • 题目:将字符串转化为驼峰式写法
  • 要求:实现如函数 toCamel(str),将 str 转化为驼峰式写法,如 toCamel("hello_world"),返回"helloWorld"
function toCamel(str) {
  return str.replace(/_+(.)/g, function(match, p1) {
    return p1.toUpperCase();
  });
}
console.log(toCamel("hello_world"));
  • 题目:去掉字符串中的数字和空格
  • 要求:实现如函数 trim(str),将 str 中的数字和空格都去除掉,如 trim(" 12 3 4qw er ty"),返回"qwert"
function trim(str) {
  return str.replace(/[0-9\s]/g, "");
}
console.log(trim(" 12 3 4qw er ty"));

2.2 数组

  • 题目:数组去重
  • 要求:实现如函数 unique(arr),将 arr 中的重复元素去掉,返回不重复的数组,如 unique([1,2,3,3,2,4]),返回[1,2,3,4]
function unique(arr) {
  var obj = {},
      newArr = [],
      len = arr.length;
  for (var i = 0; i < len; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = true;
      newArr.push(arr[i]);
    }
  }
  return newArr;
}
console.log(unique([1,2,3,3,2,4]));
  • 题目:冒泡排序算法
  • 要求:实现如函数 bubbleSort(arr),利用冒泡排序算法对 arr 数组排序,返回排序后的数组,如 bubbleSort([3,2,1,5,4]),返回[1,2,3,4,5]
function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j+1]) {
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
      }
    }
  }
  return arr;
}
console.log(bubbleSort([3,2,1,5,4]));

2.3 对象

  • 题目:深度克隆对象
  • 要求:实现如函数 cloneObject(obj),将 obj 对象进行深度克隆,返回克隆后的对象
function cloneObject(obj) {
  var newObj = {};
  for (var key in obj) {
    if (typeof obj[key] === "object") {
      newObj[key] = cloneObject(obj[key]);
    } else {
      newObj[key] = obj[key];
    }
  }
  return newObj;
}
console.log(cloneObject({a: 1, b: {c: 2}}));
  • 题目:对象属性的依赖收集
  • 要求:实现如函数 updateView(obj),通过对象属性的依赖收集功能,动态更新 obj 的属性值,并重新渲染到页面上对应的元素
<p id="app"></p>
var obj = {
  a: 1,
  b: 2
};
updateView(obj);

function updateView(obj) {
  var app = document.getElementById("app");
  app.innerHTML = "<p>" + obj.a + "</p><p>" + obj.b + "</p>";
  Object.defineProperty(obj, "a", {
    get: function() {
      return this._a;
    },
    set: function(value) {
      this._a = value;
      app.children[0].innerText = value;
    }
  });
  Object.defineProperty(obj, "b", {
    get: function() {
      return this._b;
    },
    set: function(value) {
      this._b = value;
      app.children[1].innerText = value;
    }
  });
}

2.4 ES6

  • 题目:箭头函数的使用
  • 要求:实现如函数 getMax(arr),用箭头函数的方式获取数组 arr 中的最大值,返回最大值,如 getMax([1,3,5,7,9]),返回9
const getMax = arr => Math.max(...arr);
console.log(getMax([1,3,5,7,9]));
  • 题目:es6中let与const的使用
  • 要求:实现如函数 sortNums(arr),对 arr 数组进行升序排序,并保证排序之后数组的地址不变
function sortNums(arr) {
  let tempArr = [...arr];
  return tempArr.sort(function(a, b) {
    return a - b
  });
}

2.5 正则表达式

  • 题目:验证邮箱格式是否正确
  • 要求:实现如函数 isEmail(str),验证其参数 str 是否符合邮箱格式,符合格式返回true,否则返回false
function isEmail(str) {
  var pattern = /^([\w-\.]+)@([\w-]+\.)+[\w-]{2,4}$/;
  return pattern.test(str);
}
console.log(isEmail("example@123.com"));
  • 题目:验证手机号码格式是否正确
  • 要求:实现如函数 isMobilePhone(str),验证其参数 str 是否符合手机号码格式,符合格式返回true,否则返回false
function isMobilePhone(str) {
  var pattern = /^1[0-9]{10}$/;
  return pattern.test(str);
}
console.log(isMobilePhone("13800138000"));

3. 总结

该题是一道比较全面的前端JavaScript编程练习题,覆盖了字符串、数组、对象、ES6、正则表达式等各个方面的知识点。通过对该题的思考和解答,可以有效的提升自己的前端编程能力。

营销型网站