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