学习笔记1
从上一家公司离职已有两个月了,此间有点迷茫。很久没有参加过面试了,看到一系列新进面试题表示都有点傻眼,中年人,赶紧开始学习吧!
HTML
一、移动端开发,用户不可以放大屏幕,且要求视口(viewport)宽度等于屏幕宽度,高度等于设备高度,如何设置?
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum=1, user-scalabl=no" >
二、data-xxx 属性的作用是什么?
<ul>
<li data-animal-type="brid"></li>
</ul>
HTML5 data-* 属性:
定义和用法
data- 属性用于存储页面或应用程序的私有自定义数据。
data- 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
三、请描述一下cookies,sessionStorage和localStorage的区别?
相同点:都会在浏览器端保存,有大小和同源限制。
不同点:
1、cookie会随请求发送到服务器,作为会话表示,服务器可修改cookie。web storage不会随请求大宋到服务器。
2、cookie有path的概念,子路径可以访问父路径的cookie,父路径不可以访问子路径的cookie。
3、有效期: cookie在设置的有效期内有效,默认为浏览器关闭消失。sessionStorage在会话窗口关闭后失效,localStorage长期有效,需主动删除。
4、sessionStorage不能共享,localStorage在同源文档之间可以共享,cookie在同源且符合path规则的文档之间可以共享。
5、localStorage的修改会触发其他文档的update事件。
6、cooie有secure属性要求HTTPS传输。
7、浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k。webStorage可以支持5M的存储。
四、什么是浏览器的标准模式(standards mode)和怪异模式(quirks mode)?
所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。
如果不写任何文档声明,浏览器就会以怪异模式解析。怪异模式会产生例如,50px不写px也可以正确解析。
如何判定现在是标准模式还是怪异模式?
//方法一:JS:
alert(window.top.document.compatMode);
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式
//方法二:JQ
alert($.boxModel);
alert(s.support.boxModel);
五、iframe有哪些缺点?
1)无法被爬虫搜索到关键字;
2)使页面混乱,有安全性问题。
六、浏览器内核
Trident ( IE) -m-
Gecko (Firefox) -moz-
WebKit (Safari、Chrome) -webkit-
Presto (Opera) -o-
CSS
一、解释盒模型宽高值得计算方式,边界塌陷,负值作用,box-sizing概念?
1. 盒模型:IE 678 下(不添加doctype) 使用ie盒模型,宽度 = 边框 + padding + 内容宽度; chrom、IE9+、(添加doctype) 使用标准盒模型, 宽度 = 内容宽度。
2. box-sizing : 为了解决标准黑子和IE盒子的不同,CSS3增添了盒模型属性box-sizing,content-box(默认),border-box 让元素维持IE传统盒子模型, inherit 继承 父盒子模型;
3. 边界塌陷:块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷。
4. 负值作用:很多,可以百度一下,水平垂直居中啊之类的。margin负值
二、BFC(Block Formatting Context) 是什么?应用?
1. BFC 就是 ‘块级格式上下文’ 的格式,创建了BFC的元素就是一个独立的盒子,不过只有BLock-level box可以参与创建BFC,它规定了内部的Bloc-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素:
2. 应用场景:
1. 解决margin叠加的问题
2. 用于布局(overflow: hidden),BFC不会与浮动盒子叠加。
3. 用于清除浮动,计算BFC高度。
BFC
三、如何要求容器在宽度自由收缩的情况下,A/B/C三个盒子的宽度始终是1:1:1,如何实现?
//flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div{
width: 100%;
height: 400px;
display: flex;
}
.div1,.div2,.div3{
width: 100%;
height: 400px;
flex: 1;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
四、如何让一个盒子水平垂直居中,两种方式,1是已知A宽高,2是不知宽高?
//已知宽高
<div class="div1"></div>
<style>
.div1{
width:400px;
height:400px;
position:absolute;
left:50%;
top:50%
margin:-200px 0 0 -200px;
}
</style>
//未知宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
border: 1px solid #000;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
//未知宽高方法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid #000;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
五、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概的css代码。
// 方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width: 100px;
height: 200px;
background-color: #ccc;
float: left;
}
.div2{
background-color: #ff0;
margin-left: 100px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
//方法二:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div{
display: flex;
flex-direction: row;
align-items: center;
}
.div1{
flex-basis: 100px;
background-color: #ccc;
height: 300px;
}
.div2{
background-color: #ff0;
height: 300px;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
JavaScript
一、函数中的arguments是什么,如果不是数组把它转化成真正的数组?
function test () {
var args = Array.prototype.slice.call(arguments);
console.log(arg instanceof Array ); //true;
return args;
}
二、描述浏览器重绘和回流,哪些方法能够改变由于dom操作产生的回流:
重绘:基本就是颜色等样式的改变,不会改变DOM结构
回流:就是改变DOM结构,页面需要重新解析展示,因此回流必会引起重绘。
1. 直接改变className,如果动态改变样式,则使用cssText;
2. 让要操作的元素进行“离线处理”,处理完后一起更新;
1. 使用DocumentFragment进行缓存,引发一次回流和重绘;
2. 使用display:none ,只引发两次回流和重绘;
3. cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘。
三、JS跨域请求方式:
1、jsonp
2、window.name
3、window.postMessage 方法
4、后端修改http header
四、js深度复制的方式
1、使用js的$.extend(true, target, obj);
2、var cloneObj = JSON.parse(JSON.stringify(obj));
<script>
function clone(obj){
if(typeof obj!='object'){
return obj;
}
if(obj instanceof Array){
var arr=[];
for(var i=0; i<obj.length; i++){
arr[i]=clone(obj[i]);
}
return arr;
}
if(obj.constructor==Object){
var json={};
for(var name in obj){
json[name]=clone(obj[name]);
}
return json;
}
if(obj instanceof HTMLElement){
return obj.cloneNode(true);
}
return new obj.constructor(obj.valueOf());
}
var json={a:1,b:[1,2,3]};
var json2=clone(json);
json2.b[1]=202;
console.log(json,json2);
</script>
五、js设计模式
总体来说设计模式分为三大类:
1、创建型模式:
共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
2、结构型模式 :
适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
3、行为型模式:
策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式
六、JS实现图片预览
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
<script language=javascript>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>
七、扁平化多维数组
数组的扁平化,就是讲一个嵌套多层的数组array(嵌套可以是任何层数) 转换为只有一层的数组
//方法一:
1var arr = [1, [2, [3, 4]]];
function flatten(arr) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (Array.isArray(arr)) {
result = result.concat(flatten(arr))
}
else {
result.push(arr)
}
}
return result;
}
console.log(flatten(arr))
//方法二:使用toString 用 toString 方法,返回了一个逗号分隔的扁平的
//字符串,这时候我们再 split,然后转成数字不就可以实现扁平化了
function flatten(arr) {
return arr.toString().split(',').map(function(item){
return +item
})
}
console.log(flatten(arr))
//然而这种方法使用的场景却非常有限,如果数组是 [1, '1', 2, '2'] 的话,这种方法就会产生错误的结果。
//方法三:使用es6的reduce函数
function flatten(arr) {
return arr.reduce(function(prev, next){
return prev.concat(Array.isArray(next) ? flatten(next) : next)
}, [])
}
console.log(flatten(arr))
//方法四:ES6 增加了扩展运算符,用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
console.log(flatten(arr))
八、JavaScript 的typeof 能否区分{},[]?
不行。typeof只能区分数值类型,例如 :
‘123’ –> String ;
123—>Number;
true —> boolean;
console.log() —> function
null —> object
[] —> object
{} —> object
区分[],{} 需要使用instanceof,
九、function里call/apply/bind 的区分是什么?
改变this指向
function fn () {
console.log(this); //window
}
function people (name, age) {
alert(name);
console.log(this);
}
//call
people.call({x:100},'zhangsan', 10);
//apply 把参数放在数组里
people.apply({x:100},['zhangsan',10]);
//bind 返回值是函数
var people2 = functino (name, age) {
alert(name);
console.log(this);
}.bind({x:100});
people2('zhangsan',10);
十、使用JQuery,找到ID为selector的select标签中有data-target属性为item的option值
var search = $('#selector option[data-target = item]');
cconsole.log(search.val());
十一、设计一个算法,将两个有序数组合并为一个数组。请不要使用concat以及sort方法
var arr1 = [1,5,6,9];
var arr2 = [3,5,8];
var temp;
for(var i = 0; i< arr1.length; i++) {
if(arr2[0] > arr1[i] && arr2[0] <= arr1[i+1]) {
temp = arr1[i];
arr1.splice(i, 1, temp, arr2[0]);
arr2.shift();
}
}
console.log(arr1); //1, 3, 5, 6, 9
function merge(left, right) {
il = 0,
ir = 0;
if (left[il] < right[ir]) {
result.push(left[il++]);
} else {
result.push(right[ir++]);
}
}
result = result.concat(left[il] ? left.slice(il) : right.slice(ir)); return result;
}
var left = [1, 4, 7, 8, 9, 10];
var right = [2, 5];
console.log(merge(left, right))
十二、eval() 函数可计算某个字符串,并执行其中的JavaScript代码
eval的功能是把对应的字符串解析成JS代码并运行
eval不安全, 而且耗费性能(2次,一次解析成js语句,一次执行)应该避免使用,
由JSON字符串转换为JSON对象时可以使用eval
var obj = eval('('+ str +')');
但是最好使用stringify
十三、跨域
1、可跨域的标签有:img、link、script、iframe
2、jsonp
3、内部服务器代理
4、高版本浏览器可使用html5规范的CORS功能,只要目标服务器返回HTTP头部设置
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
十四、什么是闭包,闭包的作用
1、子函数可以访问父函数的局部变量
2、用于封装变量,收敛权限
用途:创建特权方法,用于访问控制;事件处理程序回调
十五、JavaScript定义函数的方法
1、函数声明表达式
2、function操作符
3、Function
4、ES6:arrow function
JavaScript 有哪些方法定义对象
1、对象字面变量: var obj = {};
2、构造函数: var obj = new Object();
3、Object.create() :var obj = Object.create(Object.prototype);
十六、应用程序缓存
HTML5新增的程序缓存,允许web应用程序将自身保存到用户浏览器中,用户离线状态也能访问。
1、为html元素设置mainifest属性
<html mainfest="myapp.appcache">
其中后缀名只是一个约定,真正的识别方式是通过text/cache-mainfest作为MIME类型。
十七、JavaScript调用地图API
百度地图API
十八、toString(), valueOf()
valueOf() , 返回最合适改对象类型的原始值;
toString(), 将该对象的原始值以字符串的形式返回。
valueOf()方法间接调用了toString()函数;
十九、
取消事件默认行为: event.preventDefault();
阻止冒泡: event.stopPropagation();
二十、JS单线程问题
setTimeout执行的函数需要等到线程空闲下来才能执行
for(var i = 0; i<5; i++) {
setTimeout(function () {
console.log(i + '');
},100);
}
// 55555
使用闭包
for(var i = 0; i<5; i++) {
(function (i) {
setTimeout(function () {
console.log(i + '');
}, 100);
})
}
//01234
二十一、网页中实现全年倒计时时间
二十二、
1、字符串截取/分隔
subString(start, end) : 表示start到end之间的字符串,包括start位置的字符,但是不包括end位置的字符串;
2、substr(start, length) 表示从start位置开始,截图length长度的字符串;
3、split(): 使用一个指定的分隔符把一个字符串分隔存储到数组;
4、indexOf() : 返回字符串中匹配的第一个字符的下标。
数组的截取/分隔
1. slice() 可以从已有的数组中返回选定的元素;
2. join() 使用用什么方式将一个数组串成一个字符串。
二十三、介绍介绍的基本数据类型
String、Number、Boolean、Null、Undefined
新 Symbol (创建狗第一无二且不可变得数据类型);
字符串转为数字: parseFloat(‘12,3b’);
二十四、JS的内置对象
Object 是 JS中所有对象的父对象
数据封装类对象: Object、Array、Boolean、Number、String(可以typeof 出来的)
其他对象: Function、Arguments、Math、Date、RegExp、Error;
二十五.说几条写JavaScript的基本规范?
1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值,有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染。
二十六.交换字符串中的两个单词
var re = /(\w+)\s(\w+)/;
var str = “John Smith”;
var newstr = str.replace(re, “
2,
1”);
// Smith, John
console.log(newstr);