学习笔记1

最新推荐文章于 2020-08-06 14:47:40 发布

sonrisa_s

最新推荐文章于 2020-08-06 14:47:40 发布

阅读量673

点赞数

分类专栏：学习笔记文章标签： html 面试题

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习笔记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);

sonrisa_s

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记1

学习笔记1从上一家公司离职已有两个月了，此间有点迷茫。很久没有参加过面试了，看到一系列新进面试题表示都有点傻眼，中年人，赶紧开始学习吧！HTML一、移动端开发，不起我用户放大屏幕，且要求视口(viewport)宽度等于屏幕宽度，高度等于设备高度，如何设置？<meta name="viewport" content="width=device-width, height=device-height,
复制链接

扫一扫