前端面试题小结
前端面试题小结
1.HTML5的离线储存怎么使用，工作原理能不能解释一下?
在HTML5中，利用浏览器cache缓存机制来离线存储一些资源，可以让用户在离线的情况下也能浏览Web App的部分页面。
优势：离线浏览、已经缓存的资源加载得更快、减少服务器负载（浏览器将只从服务器下载更改过的资源）
- 在html中头部加入一个manifest属性
2.js字符串操作函数?
1.字符串转换的三种方法
var num=24;
var mystr=num.toString(); //"24"
var mystr1=String(num); //"24"
var mystr2="" + num; //"24"
2.charAt 返回指定索引出的字符
var str='abcd';
var a=str.charAt(0);
console.log(a); //'a'
console.log(str); //'abcd'
3.charCodeAt 返回指定索引出的unicode字符
str.charCodeAt(0); //97
4.indexof 判断一个字符第一次出现在某个字符串的索引，如果包含返回它的索引，如果不包含返回-1
str.indexOf('a'); //0
str.indexOf('e'); //-1
5.lastIndexOf 判断一个字符最后一次出现在某个字符串的索引，如果包含返回它的索引，如果不包含返回-1
str.lastIndexOf('b'); //1
str.lastIndexOf('e'); //-1
6.concat拼接2个字符串，返回一个新字符串，对原有字符串没有任何改变
var str='qwe';
var str1='abc';
var str2=str.concat(str1);
console.log(str2);//"qweabc"
7.substr(n,m) 从索引n开始，截取m个字符，将截取的字符返回，对原字符串没有任何改变
var b=str.substr(1,1)
console.log(b); //'w'
8.substring(n,m) 从索引n开始，截取到索引m,不包括m.将截取的字符返回,对原字符串没有任何改变
var ee=str.substring(1,3);
console.log(ee); //"bc"
9.slice(n,m) 从索引n开始，截取到索引m,不包括m.将截取的字符返回,对原字符串没有任何改变
var aa=str.slice(0,3);
console.log（aa）;//'abc'
10.split 用指定字符分割字符串，返回一个数组.对原字符串没有任何改变
var a=str.split('');
console.log(a); //["a", "b", "c", "d"]
11.replace(‘a’,1); 替换指定字符，返回替换后新的字符串，对原有字符串有改变。(第一个参数可以是正则表达式) 只能替换一次 ，配合正则模式修饰符g使用
var str='aaaaee';
var reg=/a/g;
str.replace(reg,1); //"1111ee"
12.match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。把找到的字符放在数组里，返回一个数组
var str='aaaa3ed33';
var reg=/a/g;
str.match(reg); //["a", "a", "a", "a"]
12.search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
3.请使用冒泡排序算法为下列数组排序
var arr=[100，0.6，28，49，94，67，11]
function bubbleSort(arr) {
var len = arr.length;
// 外层定义循环次数
for (var i = 0; i < len - 1; i++) {
// 内层循环每次循环减去已经排好序的元素
for (var j = 0; j < len - 1 - i; j++) {
// 相邻元素两两对比
if (arr[j] > arr[j+1]) {
// 保存相对较小的值
var temp = arr[j+1];
// 因为这时候小的值在后面 所以就需要交换位置
arr[j+1] = arr[j];
// 然后把保存的小值赋值给前面的元素
arr[j] = temp;
}
}
}
return arr;
}
4.简述你所知道的前端页面级性能优化
- JavaScript 压缩和模块打包
- 按需加载资源
- 缓存
- 使用索引加速数据库查询
- 图片编码优化、图片懒加载
- 对组件库引用的优化，缩小引用范围
- 减少http请求
- 非核心代码异步加载
5.找到数组-1，-2，1，10，4，11，8中的最大值，至少 写出两种方法？
var arr = [-1, -2, 1, 10, 4, 5, 8];
// 第一种
var max1 = Math.max.apply(null, arr);
// 第二种
var max2 = arr.sort(function(a, b){
return b - a;
})[0];
6.写一个方法，找出字符串abcabcabcabcabcabda中ab出现的次数和位置。
var str ='abcabcabcabcabcabda';
function Find(str){
// match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
console.log(str.match(/ab/g)); // ["ab", "ab", "ab", "ab", "ab", "ab"]
var times = str.match(/ab/g).length;
console.log(times); //次数 6
var arr = [];
var index = 0;
for(var i=0;i<times;i++){
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
// 参数一 指定的字符串
// 参数二 返回从 index 位置开始查找指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。
var place = str.indexOf('ab',index);
// 如果不等于 -1 则place表示这个字符出现的位置
if(place != -1){
arr.push(place);
// 指定字符串"ab" 占两个位置，所以index加2
index = place+2;
}
}
console.log(arr); //位置 [0, 3, 6, 9, 12, 15]
}
Find(str);
7.清除浮动的几种方式，各自的优缺点？
1.使用空标签清除浮动clear:both
优点：通俗易懂，容易掌握
缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦
2.父级div定义overflow:hidden
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
3.父级div定义伪类:after和zoom(用于非IE浏览器)
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持
4.父级div定义height
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局
5.父级div定义overflow:auto
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
不推荐使用浮动，因为浮动会产生一系列的问题，很有可能会在适配多端的时候导致布局错乱
8.Javascript 中的定时器有那些？他们的区别及用法是什么？
setTimout 定时器 用于倒计时 只执行一次 使用 clearTimeout()清除
setInterver 计时器 设置/取消 会一直重复执行 使用 clearInterval()清除
使用场景：获取验证码或者几秒后自动跳转等用seTtimeout，轮播图等用setInterval
9.解释css sprites,如何使用?
css sprites 又称 雪碧图、精灵图
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
10. 如果要让表单支持回车提交表单该怎样做?
给input绑定一个onKeyDown事件，然后判断键盘按下的keyCode值，如果等于13的话就执行提交，如果不等于的话就直接return，不进行操作。