JS搜狐面试题分析


Posted in Javascript onDecember 16, 2016

本文实例讲述了几道JS搜狐面试题。分享给大家供大家参考,具体如下:

一、实现一个遍历数组或对象里所有成员的迭代器。

var each = function(obj, fn){
    //+++++++++++答题区域+++++++++++
    //+++++++++++答题结束+++++++++++
};
try{
    var data1 = [4,5,6,7,8,9,10,11,12];
    var data2 = {
        "a": 4,
        "b": 5,
        "c": 6
    };
    console.group(data1);
    each(data1, function(o){
        if( 6 == this )
            return true;
        else if( 8 == this )
            return false;
        console.log(o + ": \"" + this + "\"");
    });
    console.groupEnd();
    /*------[执行结果]------
    1: "4"
    2: "5"
    4: "7"
    ------------------*/
    console.group(data2);
    each(data2, function(v, n){
        if( 5 == this )
            return true;
        console.log(n + ": \"" + v + "\"");
    });
    console.groupEnd();
    /*------[执行结果]------
    a: "4"
    c: "6"
    ------------------*/
}catch(e){
    console.error("执行出错,错误信息: " + e);
}

【思路分析】

1.首先判断传进来的是数组还是对象,用到instanceof,typeof和instanceof都可以用来判断js变量类型,用法区别

typeof(obj) //typeof会返回一个基本数据类型

obj instanceof Array //instanceof一般是用来验证一个对象是否属于某类

注:typeof遇到null,数组,对象都会返回object类型

var each = function(obj, fn){
  if(obj instanceof Array){
  }
  else if(obj instanceof Object){
  }
};

2.遍历数组和遍历对象的区别

遍历数组:

for(var i=0,j=array.length;i<j;i++){
  alert(array[i]);
}

遍历对象:

for(var e in data){
  alert(data[e]);
}

3.分析结果

each(data1, function(o){
  if( 6 == this )
    return true;      //表示跳过并继续遍历
  else if( 8 == this )
    return false;     //表示停止遍历
  console.log(o + ": \"" + this + "\"");
});

如果直接for循环,那会输出数组所有元素,现在有个each函数,应该让他指向obj中的元素(即改变this指向,让this代表obj[i])

fn.call(obj[i],i+1); //fn是each的第二个参数,让这个函数指向obj中的元素,第一个参数o,让让它传值i+1

仅仅这样会输出4,5,7,8,9,10,11,12,所以还需要限定让它等于8的时候跳出整个循环

if(obj instanceof Array){
  for(var i=0,j=obj.length;i<j;i++){
    var temp=fn.call(obj[i],i+1);
    if(temp===false){    //===值和类型都要等,==只是值相同null==false
      return;
    }
  }
}

同理,遍历对象

else if(obj instanceof Object){
  for(var e in obj){
    fn.call(obj[e],obj[e],e);    //第一个参数v(对象值),第二个n(对象索引)
  }
}

注:obj instanceof Object要在obj instanceof Array之后,因为数组属于对象,Object在前面的话,后面的判断就不执行了

二、实现一个叫Man的类,包含attr, words, say三个方法。

var Man;
//+++++++++++答题区域+++++++++++
//+++++++++++答题结束+++++++++++
try{
    var me = Man({ fullname: "小红" });
    var she = new Man({ fullname: "小红" });
    console.group();
    console.info("我的名字是:" + me.attr("fullname") + "\n我的性别是:" + me.attr("gender"));
    console.groupEnd();
    /*------[执行结果]------
    我的名字是:小红
    我的性别是:<用户未输入>
    ------------------*/
    me.attr("fullname", "小明");
    me.attr("gender", "男");
    me.fullname = "废柴";
    me.gender = "人妖";
    she.attr("gender", "女");
    console.group();
    console.info("我的名字是:" + me.attr("fullname") + "\n我的性别是:" + me.attr("gender"));
    console.groupEnd();
    /*------[执行结果]------
    我的名字是:小明
    我的性别是:男
    ------------------*/
    console.group();
    console.info("我的名字是:" + she.attr("fullname") + "\n我的性别是:" + she.attr("gender"));
    console.groupEnd();
    /*------[执行结果]------
    我的名字是:小红
    我的性别是:女
    ------------------*/
    me.attr({
        "words-limit": 3,
        "words-emote": "微笑"
    });
    me.words("我喜欢看视频。");
    me.words("我们的办公室太漂亮了。");
    me.words("视频里美女真多!");
    me.words("我平时都看优酷!");
    console.group();
    console.log(me.say());
    /*------[执行结果]------
    小明微笑:"我喜欢看视频。我们的办公室太漂亮了。视频里美女真多!"
    ------------------*/
    me.attr({
        "words-limit": 2,
        "words-emote": "喊"
    });
    console.log(me.say());
    console.groupEnd();
    /*------[执行结果]------
    小明喊:"我喜欢看视频。我们的办公室太漂亮了。"
    ------------------*/
}catch(e){
    console.error("执行出错,错误信息: " + e);
}

思路分析:

1.先来一个构造函数

Man=function(info){
};

2.

var me = Man({ fullname: "小红" });
var she = new Man({ fullname: "小红" });

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
JS重载实现方法分析
Dec 16 #Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 #Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 #Javascript
js继承实现方法详解
Dec 16 #Javascript
详解jQuery简单的表格应用
Dec 16 #Javascript
JS中parseInt()和map()用法分析
Dec 16 #Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 #Javascript
You might like
php简单实现多语言切换的方法
2016/05/09 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python中字典映射类型的学习教程
2015/08/20 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
入党群众意见范文
2015/06/02 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书