前端笔试(一)

1.有一个长度未知的数组a,如果它的长度为0就把数字1添加到数组里面,否则按照先进先出的队列规则让第一个元素出队。

分析:这道题主要是考核了数组的队列方法和栈方法。另外,原题还有字数限制的,只有在字数小于30并且结果正确时才可以满分。所以,我们可以使用三目运算符(: ?)来减少字数。代码如下:

a.length === 0 ? a.push(1) : a.shift();

我当时忘记了出队是shift还是unshift,结果竟然误用了unshift,晕死了!

2.下面代码会输出什么:

var test = (function(a) {

this.a = a;

return function(b) {

return this.a + b;

}

} (function(a, b) {

return a;

}(1, 2)));

console.log(test(4)); //输出什么????

分析:这道题考了与函数有关的的两个非常重要的概念:自执行函数和闭包。但是不难,答案应该是5。

3.请把

  • 第1行
  • 第2行
  • ...
(ul之间有10个li元素)插入body里面,注意:需要考虑到性能问题。

分析:这题主要考察了dom操作。插入节点操作的可以使用insertBefore和appendChild方法,随便用一个都行。但是,题目要求要考虑性能问题,这才是关键,因为,JavaScript操作dom的开销是很大的!提高性能就要减少dom操作。因此,我当时使用了下面的方法,只操作一次dom就够的了:

var lis = "",

ul = document.createElement("ul");

//把li以字符串形式生成

for(var i = 1; i <= 10; i++) {

lis += "

  • 第" + i + "行
  • ";

    }

    // 最后通过innerHTML插入ul里面

    ul.innerHTML = lis;

    //这里才操作dom,把ul插入到body

    document.body.appendChild(ul);

    4.不使用loop循环,创建一个长度为100的数组,并且每个元素的值等于它的下标。

    分析:当时看到题目要求不使用loop循环时,“聪明过头”的我马上就想到了使用间歇性定时器setInterval,代码如下:

    var a = [],

    i = 0;

    var interval = setInterval(function() {

    i < 100 ? a.push(i++) : clearInterval(interval);

    }, 0);

    确实没有使用loop循环,我当时还对自己的聪明感到欣欣自喜呢!但是后来,跟朋友讨论了一下,才知道这道题的目的是在考察我们对数组的熟练程度,而不是考察定时器!况且用这种方法来创建数组性能也不见得有多高!他的做法是先创建一个长度为100的数组,然后再使用数组的实例方法Array.prototype.map来重新赋值,代码如下:

    var a = new Array(100);

    a = a.map(function(item, index) {

    return index;

    });

    使用了map方法真是高端大气上档期啊!一开始,我也以为他的答案是正确的了,但是,后来我在控制台打印了一下,却发现也是不对的啊,因为,最终打出来的数组是一个长度为100的空的数组,如下:


    好奇怪!这么好用的方法竟然输出的结果也不正确,心好累啊!

    后来,查了API,才知道, JavaScript数组是稀疏数组,比如,通过new Array(100)创建一个新的数组的,虽然他的长度是100,但是实际上他是一个空数组,也就是说没有真实存在的元素。所以使用map方法,根本不会去遍历这个数组100次的。后来,知乎上问了一下,才学到了一个新的可行的方法,如下:

    var a = Array(100).join(",").split(",").map(function(item, index) {

    return index;

    });

    这个解法充满了曲折啊!先是创建一个数组,然后,通过join方法把它转成字符串,然后,再通过split方法把字符串转成数组,这时候,它就拥有100个值为空的元素了,然后,再通过map函数,改变这些元素的值即可。

    5.实现对数组进行乱序

    这道题考察了数组的sort方法,因为是乱序,所以,还需要用到Math.random()产生随机数,打乱排序规律!代码如下:

    var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

    sign = 1;

    a.sort(function(a, b) {

    //因为Math.random产生的数在0-1之间

    //所以0.5两边的概率是相等的

    //大于0.5时为升序,小于0.5时为降序

    sign = (Math.random() > 0.5) ? 1 : -1;

    return (a - b) * sign;

    });

    6.有一个长度为100的数组,请以优雅的方式求出该数组的前10个元素之和

    分析:其实,对于数组求和有很多种方法,也很简单。但是,这题有两个限制条件:优雅的方式、前10个元素。对于“前10个元素”这个限制条件可以使用Array.prototype.slice()方法来截取,对于"优雅的方式",我的理解是应该尽可能使用数组自带的方法,最好可以使用高阶函数!所以我觉得应该是Array.prototype.reduce()方法。代码如下:

    var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],

    sum = 0;

    sum = a.slice(0, 10).reduce(function(pre, current) {

    return pre + current;

    });

    console.log(sum); //55

    这样看起开会比使用for循环优雅了不少哈!

    后面的都是主观题,答案不唯一,所以,我也不写解答过程啦。

    7.JavaScript实现继承的常用方法有哪些?你推荐的是哪一种?

    提示:可以看看《JavaScript高级程序设计》的第六章。里面详细的介绍了各种继承方法。其中,值得推荐的是组合方式。ES5的Object.create()就是使用了该方式实现继承的!

    8.在项目开发完成之后,根据雅虎性能优化规则,需要对html,JS,CSS,图片需要做出怎样的处理?是否可以借助构建工具实现自动化?

    提示:从减少http请求、减少带宽、提高加载速度等方面进行答题即可。对于自动化,可以使用gulp构建工具!

    9.当项目的某个模块发生问题了,你是怎么定位错误的?你常用的调试工具是什么?

    提示:这题在考察debug的能力。可以说说自己平时的debug方法,比如断点调试等。调试工具,有chrome的控制台,firebug等。

    10.我们在跟后端进行异步请求时,很容易陷入嵌套太深的陷阱?

    提示:这道题,我不会做,后来问了朋友,他说可以使用promise,可以参考一下什么是promise。

    https://segmentfault.com/a/1190000002395343

    前段时间忙着做项目没时间更新,从今天开始会按时更新!谢谢大家!

    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 160,706评论 4 366
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 68,002评论 1 301
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 110,462评论 0 250
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 44,375评论 0 216
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 52,763评论 3 294
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 40,849评论 1 224
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 32,033评论 2 317
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 30,768评论 0 204
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 34,490评论 1 246
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 30,734评论 2 253
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 32,204评论 1 264
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 28,566评论 3 260
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 33,227评论 3 241
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 26,137评论 0 8
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 26,934评论 0 201
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 35,926评论 2 283
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 35,774评论 2 274

    推荐阅读更多精彩内容

    • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
      舟渔行舟阅读 7,628评论 2 17
    • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
      Obeing阅读 2,018评论 1 10
    • "use strict";function _classCallCheck(e,t){if(!(e instanc...
      久些阅读 2,013评论 0 2
    • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
      悟名先生阅读 4,059评论 0 13
    • 蓝天白云 曾几何时的司空见惯 成了如今的独一无二 翻最高的岭 看最倔的花 把走过的路都播下种子 春天来 走过的路开...
      蒙山小道阅读 208评论 0 0