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