前端面试之js篇(一)

Q1:JavaScript包含哪些数据类型,请分别写出3种以上类型的判断函数如:isString()?

//js有6种数据类型(5种基本数据类型、1种复杂数据类型)
    1.String字符串; 2.Number数字; 3.Boolean布尔; 4.Null空对象指针; 5.Undefined没有定义
    6.Object对象; 
    7.Function函数; 8.Array数组;
//isString(str)
    ① typeof 'str' === "string"
    ② Object.prototype.toString.call('str') === "[object String]"
    ③ String('str') === 'str'
//isNumber(num)
    方法一:!isNaN(parseFloat(1)) && isFinite(1)
    方法二:typeof 1 === "number" && !isNaN(1)
    方法三:typeof 1 === "number" && isFinite(1)
    方法四:Object.prototype.toString.call(1) === "[object Number]"
    方法五:1 === +1
//isBoolean(b)
    ① Object.prototype.toString.call(true) === "[object Boolean]"
    ② typeof false === "boolean"
//isNull(null)
    ① Object.prototype.toString.call(null) === "[object Null]"
    ② typeof null === "object"
//isUndefined()
    ① Object.prototype.toString.call() === "[object Undefined]"
    ② typeof a === "undefiend"
//isObject(obj)
    ① Object.prototype.toString.call({}) === "[object Object]"
    ② typeof {} === "object"
//isFunction(func)
    ① Object.prototype.toString.call(function(){}) === "[object Function]"
    ② typeof funciton(){} === "function"
    //js固有函数
    ③ Object.prototype.toString.call(clear) === "[object Function]"
    ③ typeof clear === ”function“
//isArray(arr)
    ① Object.prototype.toString.call([]) === "[object Array]"
    ② typeof [] === "object"

Q2:编写一个JavaScript函数,实时显示当前时间,格式"年-月-日 时-分-秒"?

setInterval(function(){
    var time = new Date(),
        yyyy = time.getFullYear(),
        M = time.getMonth()+1,
        d = time.getDate(),
        h = time.getHours(),
        m = time.getMinutes(),
        s = time.getSeconds(),
        MM = M<10?('0'+M):M,
        dd = d<10?('0'+d):d,
        hh = h<10?('0'+h):h,
        mm = m<10?('0'+m):m,
        ss = s<10?('0'+s):s;
    var now = yyyy+'-'+MM+'-'+dd+' '+hh+':'+mm+':'+ss;
    console.log(now);
},1000)
//ES6

Q3:如何显示/隐藏一个DOM元素?

//js
document.getElementById("text").style.display="none"
//jQuery
$('.a').hide(1000); $('.a').show(5000); $('.a').toggle(1000)
$('.a').addClass('hide'); $('.a').removeClass('hide'); $('.a').toggleClass('hide')
//vue
<div v-if="a">demo1</div>
<div v-if="{hide:a}">demo2</div>
data层改变a的布尔值

Q4:如何添加html元素的事件处理,有几种方法?

...

Q5:如何控制alert中的换行?

// 关于alert的内容还行问题,参考了很多人的意见,在这里我做一个总结,当然我们平时只要使用一种能达到效果的方法即可:
// 这个与使用的浏览器也有关系
// 在使用alert弹窗过程中,对于大部分浏览器,只要遇到字符串 添加 “\n”  即可实现换行,有些浏览器则可能添加 “\r\n” ,如下:
<script type="text/javascript">
alert('hello \n world!');
alert('Hello \r\n Javascript!');
alert('\t这句话应\t\n'); // alert 的换行居中显示
</script>

Q6:判断一个字符串中出现次数最多的字符,统计这个次数?

// 判断一个字符串中出现次数最多的字符,统计这个次数
const str = 'goodboyy';
const maxObj = Mmax(str);
console.log(maxObj);
function Mmax(str) {
  const obj = {}; // 去重之后的对象,{char:'g',num:1}
  const max = { char: '', num: 0 }; // 最大次数的字符
  for (let i = 0; i < str.length; i++) {
    if (obj[str[i]]) {
      ++obj[str[i]];
    } else {
      obj[str[i]] = 1;
    }
    if (obj[str[i]] > max.num) {
      max.num = obj[str[i]];
      max.char = str[i];
    }
  }
  return {
    str,
    obj,
    max,
  };
}

Q7:判断字符串是否是这样组成的:第一个必须是字母,后面可以是字母、数字、下划线、总长度为5-30?

/^[a-zA-Z]\w{4,29}$/.test('d5342345') // true

Q8:请编写一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象,如:var url = "xxx.com/index.html?key0=0&key1=1&key2=2"

var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2.............";
var obj = parseQueryString(url);
       
function parseQueryString(argu){
  var str = argu.split('?')[1];
  var result = {};
  var temp = str.split('&');
  for(var i=0; i<temp.length; i++)
  {
     var temp2 = temp[i].split('=');
     result[temp2[0]] = temp2[1];
  }
  return result;
}

Q9:在页面中有如下html,要求用闭包方式写一个js从文本框中取出值并在标签span中显示出来?

<div id="field">
    <input type="text" value="user name">           
</div>
<span class="red"></span>

Q10:在IE6.0下面是不支持position:fixed的,请写一个js使用<div id="box"></div>固定在页面的右下角?

...

Q11:请实现鼠标到页面中的任意标签,显示出这个标签的基本矩阵轮廓?

...

Q12:js的基本对象有哪些,window和documnet的常用方法和属性列出来?

...

Q13:JavaScript中如何对一个对象进行深度clone?

...

Q14:js中如何定义class,如何扩展prototype?

// 思路:
// JS中定义class是通过function,有点类似C++语言中的struct概念。要定义class只需要定义function,并注意this的使用。
function MyClass() {
  this.a = '2';// 可以通过this定义属性
}
MyClass.prototype.say = function () { // 扩充方法
  return 'hello';
};
MyClass.prototype.mValue = '3';// 扩充属性

var mc = new MyClass();
alert(mc.a);
alert(mc.say());
alert(mc.mValue);

Q15:ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题?

...

Q16:请给出异步加载js方案,不少于两种?

...

Q17:多浏览器检测通过什么?

...

Q18:讲述一个你所了解的前端开发的优化方式?

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

推荐阅读更多精彩内容