百度前端技术学院（IFE）2015春task练习记录01

前言

个人觉得IFE的练习非常不错，学习前端不久，看完几本Head First，JS编程艺术等等后，我就拿来当练习做了。初学者有时候会很迷惑，比如JS这块的练习，判断数据类型这一题其实我最开始都是搜索复制粘贴。做完之后也是迷迷糊糊的，只知道这样是对的，而不知其所以然。
做完之后去看看其他的笔试题面试题，才发现好多都是这里面出过的。练习里基本每个知识点都覆盖了，但要融会贯通，还要自己的基础知识够扎实。
当初看不懂的很多东西，现在回过头来看，也都能说出来为什么要这么做，其中有些什么知识点。如果能把里面的每个知识点都搞透彻了，我觉得前端基本算是入门了。
非常良心的，这是免费的，而且每个练习后，都有附上相关知识的资料、博客等的链接。如果有心，自学肯定是没问题的。
哈哈哈免费当个自来水宣传一下。废话太多了，接下来正题。

这是我自己做的时候记录下来的做题思路以及答案。
具体的问题点这里。

我是从2015_Spring开始做的，所有代码可以在我的Github中找到，记录从task002开始。
task0001都是HTML+CSS布局的练习，这个没什么思路，多练习多感受就好。（其实是自己写的烂不好意思拿出来）
由于简书这边不好生成目录，这一块全部放出来又太长，于是分成了两篇发，全文可以去我的博客看哟

判断各种数据类型

要求

// 判断arr是否为一个数组，返回一个bool值
function isArray(arr) {
    // your implement
}

// 判断fn是否为一个函数，返回一个bool值
function isFunction(fn) {
    // your implement
}

思路

最开始使用typeof()方法，然后发现在判断array时返回是object，与判断对象类型时重合。在查阅资料后，使用了一种更为通用的方法。

实现

function getVarType(data) {
    if (data === undefined) {
        return 'Undefined';
    }
    if (data === null) {
        return 'Null';
    }
    return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
};

function isArray(arr) {
    if (getVarType(arr) == 'array') {
        return true;
    } else return false;
}

function isFunction(fn) {
    if (getVarType(fn) == 'function') {
        return true;
    } else return false;
}

补充

除此之外，还有instanceof和constructor等方法
typeof()方法，对于基本类型的判断十分有用。

typeof(123);//"number"
typeof("123");//"string"
typeof(false);//"boolean"
typeof(undefined);//"undefined"

//注意null和function得到的值
typeof(null);//"object"
typeof(function(){});//"function"

上面给出了所有使用typeof()比较特殊的结果，除此之外，所用的引用类型使用该方法得出的结果都是object
而instanceof适用于判断引用类型。
MDN中这样描述：

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

并且看定义的语法是这样的：

object instanceof constructor

即是说，instanceof左边的，是一个对象，而右边必须是一个构造函数。如果左边是一个基本类型，那不管右边是什么，返回的一定是false。
那么这个就可以用来判断引用类型了，例如

var arr = [1,2,3];
var date = new Date();
arr instanceof Array;//true
date instanceof Date;//true

//这里自定义一个构造函数
function Person(){}
var franose = new Person();
franose instanceof Person;//true;

深度克隆

要求

// 使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝
// 被复制的对象类型会被限制为数字、字符串、布尔、日期、数组、Object对象。不会包含函数、正则对象等
function cloneObject(src) {
    // your implement
}

// 测试用例：
var srcObj = {
    a: 1,
    b: {
        b1: ["hello", "hi"],
        b2: "JavaScript"
    }
};
var abObj = srcObj;
var tarObj = cloneObject(srcObj);

srcObj.a = 2;
srcObj.b.b1[0] = "Hello";

console.log(abObj.a);
console.log(abObj.b.b1[0]);

console.log(tarObj.a);      // 1
console.log(tarObj.b.b1[0]);    // "hello"

思路

首先对判断参数类型，对于类型String, Boolean, Number，只需要新建一个变量，并将参数的值赋值给新建的变量即可；对于类型Data, Array, Object则要分情况。
Data()：new一个Date对象，使用getTime()方法得到原对象的值，再使用setTime()给新建的对象赋值。
Array()：new一个Array对象，使用for循环对原数组遍历，再依次赋值到新建的Array对象中。
Object()：new一个对象，对对象中的属性遍历，使用递归对属性进行赋值，多层属性也可以使用递归解决。

实现

function cloneObject(data) {
    var objectType = getVarType(data);
    //the object for cloning is native object
    if (objectType == "null" || objectType == "undefined") {
        return data;
    }

    if (objectType == "string" || objectType == "number" || objectType == "boolean") {
        var copy = data;
        return copy;
    } else if (objectType == "date") {
        var copy = new Date();
        copy.setTime(data.getTime());
        return copy;
    } else if (objectType == "array") {
        var copy = [];
        for (var i = 0; i < data.length; i++) {
            copy[i] = cloneObject(data[i]);
        }
        return copy;
    } else if (objectType == "object") {
        var copy = {};
        for (var attr in data) {
            if (data.hasOwnProperty(attr)) {
                copy[attr] = cloneObject(data[attr]);
            }
        }
        return copy;
    }
}

补充

数组去重

要求

// 对数组进行去重操作，只考虑数组中元素为数字或字符串，返回一个去重后的数组
function uniqArray(arr) {
    // your implement
}

// 使用示例
var a = [1, 3, 5, 7, 5, 3];
var b = uniqArray(a);
console.log(b); // [1, 3, 5, 7]

思路

一开始的思路是先new一个数组，对原数组遍历，使用indexOf()函数，若新数组中没有当前遍历到的元素，则push到数组中去。

实现

function uniqArray(arr) {
    var uniqarr = [];
    for (i = 0; i < arr.length; i++) {
        if (uniqarr.indexOf(arr[i]) == -1) {
            uniqarr.push(arr[i]);
        }

    }
    return uniqarr;
}

补充

正则表达式

要求

  1. ​
// 对字符串头尾进行空格字符的去除、包括全角半角空格、Tab等
//返回一个字符串
// 尝试使用一行简洁的正则表达式完成该题目
function trim(str) {
    // your implement
}

// 使用示例
var str = '   hi!  ';
str = trim(str);
console.log(str); // 'hi!'
  1. ​
// 判断是否为邮箱地址
function isEmail(emailStr) {
    // your implement
}

// 判断是否为手机号
function isMobilePhone(phone) {
    // your implement
}

思路

这俩要求不在一起，但都是使用正则表达式实现的，所以就放在了一起。

  1. 首先是去掉一个字符串开头和结尾的表格，刚开始看错题了，以为就是去掉空格，这样给出的示例是能通过了，但是实现还是不对，于是用到了正则表达式里的分组，将字符串分为开头的空格、结尾的空格以及中间的任意字符三组，最后结果取第二个分组即中间的任意字符即可。
    最开始正则式是这样写的(^\s*)(.*)(\s*$)，但这里有个问题是开头的空格能够去掉了，结尾的空格却去不掉。因为对第二个分组中的正则式而言，匹配到任意字符串，即紧接在它之后的任意个空格也算在了里面，这样就不会匹配第三个分组的正则式。
    所以在最后这里还用到了一个正则表达式中的向前匹配，正则表达式改为(^\s*)(.*)(?=\S\s*$)，即在匹配空格时还要查看前面的字符是否为非空字符。
    但是这样的问题是结尾的空格的前一个字符也被当做第三组里的了，尝试了几次发现这样的思路没法实现，于是查了一下jq源码，发现用一个或者运算符就可以搞定。
    于是最后的正则式定为^\s+|\s+$
  2. 这个比较简单，网上类似的表达式很多，随便写了一下，匹配不太严格，但是基本能符合要求。

实现

  1. ​
    function trim(str) {
        var reg = /^\s+|\s+$/g;
        return str.replace(reg, "");
    }
  1. ​
// 判断是否为邮箱地址
function isEmail(emailStr) {
    var reg = /^[a-zA-z0-9_\.-]+@[a-zA-z0-9\.-]+\.[a-z]{2,6}$/g;
    if (reg.test(emailStr) == true) {
        return true;
    } else return false;
}

// 判断是否为手机号
function isMobilePhone(phone) {
    var reg = /^1[34578]\d{9}$/g;
    if (reg.test(phone) == true) {
        return true;
    } else return false;
}

补充

暂无

数组和对象遍历

要求

// 实现一个遍历数组的方法，针对数组中每一个元素执行fn函数
//并将数组索引和元素作为参数传递
function each(arr, fn) {
    // your implement
}

// 其中fn函数可以接受两个参数：item和index

// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item) {
    console.log(item)
}
each(arr, output);  // java, c, php, html

// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item, index) {
    console.log(index + ': ' + item)
}
each(arr, output);  // 0:java, 1:c, 2:php, 3:html

// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {}

// 使用示例
var obj = {
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }
};
console.log(getObjectLength(obj)); // 3

思路

对于数组，最开始用的是for..in...，后来看见review中说不要用for...in...，就改了一下。
其他也没啥难度，直接看代码吧。

实现

function each(arr, fn) {
    for(var i = 0, length1 = arr.length; i < length1; i++){
        fn(arr[i], i);
    }
}

// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(obj) {
    var length = 0;
    for (item in obj) {
        length += 1;
    }
    return length;
}

补充

  1. 在review里看到说for(;;)循环有两种形式，for(var i = 0, len = arr.length; i < len; i++)和 for(var i = 0; i < arr.length; i++)，建议使用前一种。

    这两者区别在第一种只调用了一次arr.length方法，而第二种在每一次循环时都调用了arr.length，很明显第一种的执行更快一些。

  2. 为什么数组不要用for...in... ，首先它遍历的时候顺序是不确定的；其次对象属性的enumerable 为false 的话，该对象在for...in... 中就不会出现；最后for...in... 受原型链的影响，如果该对象的原型链中有该对象没有的属性的话，for...in... 也会遍历到。

    对于for...in... 受原型链影响这点，如果不想遍历到原型链中的属性，可以加一个hasOwnProperty 的判断。

    for (i in obj) {
  if (obj.hasOwnProperty(i)){
    console_log(i);
}
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342

推荐阅读更多精彩内容