JavaScript面试题101-110
每日坚持学10道题
101. 设计盒模型
[问答题]
画图描述 CSS 盒模型，用 JS 实现获取元素宽和位置，注意兼容性。
来自：去哪儿
参考：
var element = document.getElementById("div");
function getWeizhi(element) {
var top = document.documentElement.clientTop;
var left = document.documentElement.clientLeft;
var ele = element.getBoundingClientRect();
return {
top: ele.top - top,
right: ele.right - left,
bottom: ele.bottom - top,
left: ele.left - left,
width: ele.right - ele.left,
height: ele.bottom - ele.top
}
}
102. 实现数组乱序输出
[问答题]
用 Javascript 实现乱序函数 randomSort(array)函数，输出排序后的函数。如[1,2,3,4,5]，输出[3,2,4,5,1]。要求 N 次以内不重复。
来自：去哪儿
参考：
// 方法一
function randomSort(array) {
var x = array.sort(function (a, b) {
return Math.random() > 0.5 ? 1 : -1;
});
return x;
}
// 方法二
function randomSort(array) {
var n = array.length, t, i;
while (n) {
i = Math.random() * n-- | 0;
t = array[n];
array[n] = array[i];
array[i] = t;
}
return array;
}
103. 字符的解析
[问答题]
写一个命令行字符的解析函数。
例：-name lily -age 25 -school "chengdu university"返回的是[-name lily,-age 25, -school "chengdu university"]
来自：去哪儿
参考：
function getdata(str) {
var json = {};
var gets = str.split('"')[0];
gets = gets.split(' ');
for (var i = 0; i < gets.length - 1; i++) {
if (i % 2 == 0) {
json[gets[i]] = gets[i + 1];
}
}
json[gets[gets.length - 1]] = str.split('"')[1];
return json;
}
104. 数组转换数字集
[问答题]
写一个函数 padstare(string str1,min_length,string str2)。
例：padstare（‘5’，3，‘0’）返回的是‘005’； padstare（‘798’，5，‘0’）返回的是‘798’；
来自：去哪儿
参考：
function padstare(str, min, str_char) {
var ret = [];
if (str.length >= min) {
return str;
}
else {
for (var i = 0; i < min - str.length; i++) {
ret.push(str_char);
}
return ret.join('') + str;
}
}
105. 实现indexOf() 判断字符串的包含关系
[问答题]
请实现 javascript 中的 indexOf 功能，判断一个字符串a中是否包含另一个字符串 b。
a）如果包含，需要返回匹配字符串b的位置
b）如果不包含，需要返回-1
例如indexOf("hello","el") returns 1;
来自：去哪儿
参考：
// 方法一
function indexOf(a, b) {
var result = a.match(b);
return result ? result.index : -1;
}
console.log(indexOf("hello", "el"));//1
// 方法二
function indexOf(strA, strB) {
var lenA = strA.length,
lenB = strB.length;
if (lenA < lenB) {
return -1;
} else if (lenA == lenB) {
return 0;
} else {
for (var j = 0; j < lenA; j++) {
if (strA.charAt(j) == strB[0] && strA.substr(j, lenB) == strB) {
return j;
}
}
return -1;
}
}
console.log(indexOf("hello", "el")); //1
106. nginx 配置
[问答题]
如何配置让 nginx 对 js、html、css 文件进行 gzip 压缩输出？
来自：阿里巴巴
参考：
gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_types text/plain application/x-javascript text/css application/xml;
107. CommonJS
[不定项选择题]
按照 CommonJS 规范，在任何模块代码的作用域下内置了以下哪些变量？
A.module
B.context
C.require
D.exports
来自：阿里巴巴
答案：ACD
108.
[填空题]
使用 for in 循环数组中的元素会枚举原型链上的所有属性，过滤这些属性的方式是使
用 1 函数
来自：阿里巴巴前端开发工程师笔试
答案：hasOwnProperty
109. 前端优化的方法
[问答题]
写出至少 5 个前端优化的方法，并写明理由。
来自：百度
参考：
| 方法 | 理由 | |
|---|---|---|
| 1 | 将 CSS 放再顶部 | 能加快页面内容显示,并且能避免页面产生白屏 |
| 2 | 将JS放在底部 | ①JS会阻塞对其后面内容的呈现 ②JS会阻塞对其后面内容的下载 |
| 3 | .将 JS,CSS 放在外部文件中（代码和样式的分离） | 便于优化和管理 |
| 4 | 重置 CSS 文件 | 清除 HTML 标签默认的属性，让页面按编写者的意愿变化 |
| 5 | HTML 尽量使用标准规范的写法 | 提高渲染引擎的执行效率 |
| 6 | 对 JS 和 CSS 进行压缩，去重，合并等处理 | ①减小了文件的体积 ②减小了网络传输量和带宽占用 ③减小了服务器的处理的压力 ④提高了页面的渲染显示的速度 |
| 7 | 减少页面的图片数目 | 浏览器拉取页面图片的开销是比较大的，而实际上， 我们的页面为了提升用户体验使用了大量图片，这里 我们常采用 cdn 存放，图片合并(几个图片合成一个， 然后使用 css 进行截取片断显示)，永久 cache（存在 图片变更的维护成本,工具的建设等），甚至有些效果 是可以用 css 来实现的代替图片 |
110. 随机生成颜色
[问答题]
我们在进行组件开发的时候，经常会需要用到大量颜色。有两种方法。
方法 1：预先定义好大量的颜色；
方法 2：自定义函数，采用随机生成颜色的方式。
请采用方法 2 实现随机颜色汲取。
来自：百度
参考：
function renderColour() {
return "#"+(~~(Math.random()*(1<<24))).toString(16);
}
今天的基础题完成