学习笔记1

来源：互联网发布：编程游戏软件编辑：程序博客网时间：2024/06/06 05:48

学习笔记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 表示标准模式     //方法二：JQalert($.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);}//callpeople.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, 9function 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);

阅读全文

0 0