知识问答

百度前台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、正则表达式等各个方面的知识点。通过对该题的思考和解答,可以有效的提升自己的前端编程能力。