前端基础知识笔记

最新推荐文章于 2023-06-13 15:12:07 发布

置顶 Mr_Debugger

最新推荐文章于 2023-06-13 15:12:07 发布

阅读量1.5k

点赞数 7

分类专栏：基础知识

本文链接：https://blog.csdn.net/chenacxz/article/details/79726658

版权

基础知识专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、引入CSS的方法有两种：一种是@Import,一种是link
<link type="text/css" href="地址" rel="stylesheet"/>
现在绝大多数网站都采用后link方法，原因在于
@Import先加载html,再加载css
link先加载css,再加载html
所以前者加载网页会出现令浏览者感觉到意外的格式，后者是带着格式去加载页面

2、HTML中的href和src有什么区别?
href 表示超文本引用(hypertext reference)，在 link和a 等元素上使用。
src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。
href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。

3、apply和call方法的异同？
对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。 apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。 call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。

4、定义一个log方法，让它可以代理console.log的方法。
可行的方法一：
`function` `log(msg)　 {` `console.log(msg);` `}` `log("hello world!")` `// hello world!`
如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
`function` `log() {` `console.log.apply(console, arguments);` `};`

5、斐波那契数列指的是这样一个数列 0，1, 1, 2, 3, 5, 8。。。第三个数是前两个数之和，求第5个数的值。
var a=0; var b=1; var c; for(var i=0;i<3;i++){ c=a; a=b; b=b+c; } alert(b)

5、斐波那契数列指的是这样一个数列 0，1, 1, 2, 3, 5, 8。。。第三个数是前两个数之和，求第5个数的值。

var a=0;

var b=1;

var c;

for(var i=0;i<3;i++){

c=a;

a=b;

b=b+c;

}

alert(b)

6、以下代码的执行结果是什么？
setTimeout(function() { console.log(1); }, 100) setTimeout(function () { console.log(2); }, 0) console.log(3); 3、2、1

7、浏览器对象模型BOM里常用的对象，window对象的常用方法
`对象：Window document location screen history navigator window:客户端Js中的顶层对象，每当<body>和<frameset>标签出现时,window对象就会被自动创建 navigator:包含客户端有关浏览器的信息 screen:包含客户端显示屏的信息 history:包含浏览器窗口访问的URL信息 location:包含当前网页文档的URL信息 document:包含整个html文档可被用来访问文档内容，以及所有页面的元素`
`方法：Alert() confirm() prompt() open() close() alert：简单的提示对话框，有浏览器向用户弹出提示性信息。该方法包含可选择的提示参数 confirm:弹出包含两个按钮：确定和取消，确定返回true,取消返回false promt:弹出提示对话框，可以用于接收用户输入的信息，并把输入的信息返回`

7、浏览器对象模型BOM里常用的对象，window对象的常用方法

对象：Window document location screen history navigator
window:客户端Js中的顶层对象，每当<body>和<frameset>标签出现时,window对象就会被自动创建
navigator:包含客户端有关浏览器的信息
screen:包含客户端显示屏的信息
history:包含浏览器窗口访问的URL信息
location:包含当前网页文档的URL信息
document:包含整个html文档可被用来访问文档内容，以及所有页面的元素

方法：Alert() confirm() prompt() open() close() 
alert：简单的提示对话框，有浏览器向用户弹出提示性信息。该方法包含可选择的提示参数
confirm:弹出包含两个按钮：确定和取消，确定返回true,取消返回false
promt:弹出提示对话框，可以用于接收用户输入的信息，并把输入的信息返回

8、文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明
`Document.getElementById 根据元素id查找元素`
`Document.getElementByName 根据元素name查找元素`
`Document.getElementTagName 根据指定的元素名查找元素`

9、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素： <br> <hr> <img> <input> <link> <meta>

鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

行内元素：

(1)设置宽高无效

(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

(3)不会自动进行换行

块状元素：

(1)能够识别宽高

(2)margin和padding的上下左右均对其有效

(3)可以自动换行

(4)多个块状元素标签写在一起，默认排列方式为从上至下

10、cookie，sessionStorage和localStorage的区别？

• Document.cookie

• Window.localstorage

• Window.sessionstorage

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

11、什么是Ajax和JSON，他们的优缺点？
Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量避免用户不断刷新或者跳转页面，提高用户体验缺点：对搜索引擎不友好要实现ajax下的前后退功能成本较大可能造成请求数的增加跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

11、什么是Ajax和JSON，他们的优缺点？

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：

可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

避免用户不断刷新或者跳转页面，提高用户体验

缺点：

对搜索引擎不友好

要实现ajax下的前后退功能成本较大

可能造成请求数的增加

跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

12、Web前端性能优化——如何提高页面加载速度
代码的精简代码的是最直接的方法，也是对于一个程序员编程能力的考验。对代码进行优化，以最少的代码来实现所需的功能，及减少了文件的体积，同时也减少了不必要的时间的浪费。同时不必要的空格、注释、换行等的减少，也可以减少文件的体积。
减少HTTP请求 80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。合并文件，合并图片
压缩组件 Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持
使用外部的JavaScript和CSS 内联脚本或者样式可以减少HTTP请求，按理来说可以提高页面加载的速度。然而在实际情况中，当脚本或者样式是从外部引入的文件，浏览器就有可能缓存它们，从而在以后加载的时候能够直接使用缓存，而HTML文档的大小减小，从而提高加载速度。
将样式表放在头部将脚本放在底部

优化图片

优化CSS（压缩合并css，如margin-top,margin-left…)

.网址后加斜杠（如www.campr.com/目录，会判断这个”目录是什么文件类型，或者是目录。）

标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

13、document.write和innerHTML的区别？
1.document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
2.innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
3.两者都可动态包含外部资源如JavaScript文件通过document.write插入<script></script>元素会自动执行其中的脚本；大多数浏览器中，通过innerHTML插入<script></script>元素并不会执行其中的脚本
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

14、foo = foo \|\| bar ,这行代码是什么意思？为什么要这样写？
foo和bar应该都是bool型变量，\|\|是表示或的意思，只要foo或者bar有一个为真，那么这个表达式的值就为真，并把它赋给foo

15、当一个dom节点被点击时，我们需要能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：”<div οnclick=”test()”>xx</div>” …
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
那么问题来了，Javascript的事件流模型都有什么？
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

16、js延迟加载的方式有哪些？
js的延迟加载有助与提高页面的加载速度，以下是延迟加载的几种方法：
1.使用setTimeout延迟方法的加载时间
延迟加载js代码，给网页加载留出更多时间
$(function (){ setTimeout(‘A()’, 1000); //延迟1秒 })
2、让js最后加载
例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

17、同步和异步的区别？
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
举个浏览器例子：普通B/S模式（同步）AJAX技术（异步）
同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

18、请解释一下什么是”语义化的 HTML”？

“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。

1：去掉或样式丢失的时候能让页面呈现清晰的结构：

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，

所以去掉或样式丢失的时候能让页面呈现清晰的结构不是的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来”读”你的网页.

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记, 而只注重语义标记.

6.便于团队开发和维护

语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此

19、怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性

20、浏览器的内核分别是什么?
IE: trident内核 Firefox：gecko内核 Safari：webkit内核 Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核 Chrome：Blink(基于webkit，Google与Opera Software共同开发)

21、数组(必考)

数组方法

concat()连接两个或更多的数组，并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素
sort()对数组的元素进行排序
splice()删除元素，并向数组添加新元素。
toSource()返回该对象的源代码
toString()把数组转换为字符串，并返回结果。
toLocaleString()把数组转换为本地数组，并返回结果。
unshift()向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()返回数组对象的原始值
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素
slice()从某个已有的数组返回选定的元素
sort()对数组的元素进行排序
splice()删除元素，并向数组添加新元素。
toSource()返回该对象的源代码
toString()把数组转换为字符串，并返回结果。
toLocaleString()把数组转换为本地数组，并返回结果。
unshift()向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()返回数组对象的原始值

一个数组 par 中存放有多个人员的信息，每个人员的信息由年龄 age 和姓名 name 组成，如{age: 2, name: 'xx'}。请写一段 JS 程序，对这个数组按年龄从小到大进行排序。
var par=[{name:'a',age:1},{name:'b',age:2},{name:'c',age:3}]; par.sort(function(arr1, arr2) { return arr2.age - arr1.age; }); console.log(par);

升序

（x,y表示数组中的任意两个元素，若return > 0,则y前x;若reutrn < 0 ,则x前y后;当x=y时存在浏览器兼容。简单来说：就是，x-y是按照从小到大排序，y-x是按照从大到小排序。）

 var array=[1,80,4,33,21,55];
    array.sort(function (x,y) {
      return x-y;
   });
console.log(array);

`降序`
`var array=[1,80,4,33,21,55]; array.sort(function (x,y) { return y-x; }); console.log(array);`

22、完成foo()函数的内容，要求能弹出对话框提示当前选中的是第几个单选框

<html>

<head>

</head>

<body>

function foo() {

};

</script>

<inputtype=”radio” name = “radioGroup”>

<inputtype=”radio” name = “radioGroup”>

</form>

</body>

</html>

var a=document.getElementsByTagName('input');
function foo() {
    for(var i=0;i<a.length;i++){
        if(a[i].checked){
            alert(i+1);
        }
    }
}

面试官如果要问：你有什么要问的吗？（你就问他上面的方法怎么用闭包的方式去实现）

请使用闭包的方式，写一段 JS 程序实现如下功能：函数每调用一次则该函数的返回值加 1
function creatSumFun(){ var s=0; return function(){ return ++s; } } var sumFun=creatSumFun(); sumFun();

23、正则表达式（点击打开链接）

有字符串 var = 'abc345efgabcab'，请写出 3 条 JS 语句分别实现如下 3 个功能：
1）去掉字符串中的a、b、c 字符，形成结果：'345efg'
2）将字符串中的数字用中括号括起来，形成结果：'abc3[5]efgabcab'

3）将字符串中的每个数字的值分别乘以 2，形成结果：'abc6810efgabcab'

// 1)
str.replace(/([a-c])/g, '');
// 2)
str.replace(/(\d)/g, '[$1]');
// 3)
str.replace(/(\d)/g, function(num) {return num*2;});

请写出一下正则表达式：
1）匹配一个全部是数字的字符串
2）提取一个 url 所使用的协议类型如 http、ftp 和 host 名称

var patt1= /^\d+$/
var patt2 = /^(\w+):\/\/w*\.?(\w+)\.\w+\/.*\.(\w+)/;

24、事件绑定和普通事件的区别

普通添加事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){
	alert(1);
}
btn.onclick = function(){
	alert(2);
}

执行上面的代码只会alert 2

事件绑定方式添加事件：

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);

执行上面的代码会先alert 1 再 alert 2

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

25、请写出一个简单的单例

var singleTon = {
m1: "memeber first ",
m2: "memeber second ",
f1: function ()
{
console.log("fun1 ");
}
};

其实就是字面量创建(做一个唯一判断，只能被实例化一个)

<button type="button" id="btn">按钮</button>

var createDiv=(function (){
     var div1;
     return function(){
         if(!div1){
             div1=document.createElement("div");
             div1.innerHTML="我是一个div";
             div1.style.display="none";;
             document.body.appendChild(div1);
         }
         return div1;
     }
 })();
document.getElementById("btn").onclick=function(){
    //点击后先产生一个div元素
    var win=createDiv();
    win.style.display="block";
}

26、常见浏览器兼容性问题与解决方案（点击打开链接）

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

27、列举你用过的设计模式及其场景
单例模式 \| 策略模式 \| 代理模式 \| 迭代器模式 \| 发布-订阅模式 \| 命令模式 \| 组合模式 \| 模板方法模式 \| 享元模式 \| 职责链模式 \| 中介者模式 \| 装饰者模 \| 状态模式 \| 适配模式

28、移动端有哪些原生触摸事件?
touch类: touchstart, touchmove, touchend, touchcanceltap类: tap, longTap, singleTap, doubleTapswipe类: swipe, swipeLeft, swipeRight, swipeUp, swipeDown

29、写出一个函数，实现对，对象的深拷贝（在原型和原型链的文章有介绍）

function deepCopy(p, c) {

　　　　var c = c || {};

　　　　for (var i in p) {

　　　　　　if (typeof p[i] === 'object') {

　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};

　　　　　　　　deepCopy(p[i], c[i]);

　　　　　　} else {

　　　　　　　　　c[i] = p[i];

　　　　　　}
　　　　}

　　　　return c;

　　}

var Doctor = deepCopy(Chinese);

Chinese.birthPlaces = ['北京','上海','香港'];

Doctor.birthPlaces.push('厦门');

jQuery库使用的就是这种继承方法。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

　　alert(Chinese.birthPlaces); //北京, 上海, 香港

30、写出一个函数，实现对，对象的浅拷贝

var Chinese = {
　　　　nation:'中国'

　　};

var Doctor ={
　　　　career:'医生'

　　}

这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。

除了使用"prototype链"以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。

function extendCopy(p) {

　　　　var c = {};

　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　}

　　　　c.uber = p;

　　　　return c;
　　}

var Doctor = extendCopy(Chinese);

　　Doctor.career = '医生';

　　alert(Doctor.nation); // 中国

这样的拷贝有一个问题。那就是，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

现在给Chinese添加一个"出生地"属性，它的值是一个数组

Chinese.birthPlaces = ['北京','上海','香港'];

通过extendCopy()函数，Doctor继承了Chinese。

var Doctor = extendCopy(Chinese);

我们为Doctor的"出生地"添加一个城市：

Doctor.birthPlaces.push('厦门');

Chinese的"出生地"也被改掉了！

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门

alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

31、写一段程序，实现在body里动态添加一个div标签节点

<button type="button" id="btn">按钮</button>

var createDiv=(function (){
     var div1=document.createElement("div");
     div1.innerHTML="我是一个div";
     div1.style.display="none";;
     document.body.appendChild(div1);
     return div1;
 });
document.getElementById("btn").onclick=function(){
    //点击后先产生一个div元素
    var win=createDiv();
    win.style.display="block";
}

32、请写出一个函数，入参是"a+b+c+d",出参是"abcd"字符串或者字符数组，类似于Array['a','b','c','d'];
aStr() var str='a+b+c+d'; function aStr(){ return console.log(str.split("+")); }

33、介绍一下position,并写出他们的不同点

绝对定位，相对定位，默认定位，固定定位

绝对定位 position: absolute;

1定位的块，脱离文档流不会独自占满一行

2不存在浮动一说

3如果父类有定位他是相对于父类的相对定位（只要是父类有定位，他都是相对于父类的定位）

如果父类没有定位，他就是相对于body

相对定位 position: relative;

1没有脱离文档流

2浮动是有效果的

3不管父类有没有定位,都是相对于父类的定位

固定定位

1脱离文档流

2不会出现滚动条

默认定位（静态定位）position: static;

存在自己的文档流中

数值越大层级越大

z-index: 2;

overflow: hidden;多余的部分隐藏

overflow: auto;当内容大于盒子高度的时候产生滚动条

overflow: scroll;始终都有滚动条

34、http状态码，并作解释说明

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。

404：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。

408：请求超时。客户端没有在服务器预备等待的时间内完成一个请求的发送。客户端可以随时再次提交这一请求而无需进行任何更改。

500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。

35、web安全要考虑的危险因素【2个就差不多了（点击打开链接）】

易受到SQL注入攻击

易受到跨站点脚本攻击

泄露敏感信息

36、var aArray=[1,[2,3],[2,[2,3,4,5]],[6,7],8]，多维数组转换一维数组

[1, 2, 3, 4, 5, 6, 7, 8]

;

var aArray=[1,[2,3],[2,[2,3,4,5]],[6,7],8];
var new_Array=[];
function isArray(aArray) {//判断是否为数组
    return aArray && ( typeof aArray === 'object') && (aArray.constructor == Array);
}
function recursion(aArray) {//递归
    if (isArray(aArray)) {
        for (var j = 0; j < aArray.length; j++) {
            if (!isArray(aArray[j])) {//如果不是数组，则往下执行
                new_Array.push(aArray[j]);
                continue;
            }
            recursion(aArray[j]);//是数组的话，继续调用该方法
        }
    }
}
var newArr = [];
function getArrNElementNum(aArray) {
    recursion(aArray);
    for(var i=0, len=new_Array.length; i<len; i++){//去重
        if(new_Array.indexOf(new_Array[i]) == i){
            newArr.push(new_Array[i]);
        }
    }
    newArr.sort(function(x,y){//升序排列
        return x-y;
    })
    return newArr;
}
console.log(getArrNElementNum(aArray));

var arr=[1,[2,3],[2,[2,3,4,5]],[6,7],8];
var new_Array=[];
function recursion(arr) {//递归
    if (arr instanceof Array) {
        for (var j = 0; j < arr.length; j++) {
            if (arr[j] instanceof Array) {//如果是数组，继续调用该方法
              recursion(arr[j])
            }else{
				new_Array.push(arr[j]);//不是的话，插入新的数组
            }
        }
    }
	return new_Array;
}
var newArr=recursion(aArray);
newArr=Array.from(new Set(newArr));//去重
newArr.sort(function(x,y){//从大到小排序
	return y-x;
})
console.log(newArr);//输出[]

37、ES6 十个新特性（点击打开链接）（阮一峰大神的ES6介绍）
默认参数模版表达式多行字符串拆包表达式改进的对象表达式箭头函数 `=&>` Promise 块级作用域的`let`和`const` 类模块化

38 变量提升 (变量和function都会提前声明，但是function会覆盖变量（在不赋值的前提下） )

1、function fn(a){
    console.log(a);  
    var a = 2;
    function a(){};
    console.log(a); 
}
fn(1);
//ƒ a(){}
//2

2、var b = 10;
(function b() {
   b = 20;
   console.log(b);
})();
// ƒ b() {
//      b = 20;
//      console.log(b);
//}

3、

var a = 18;
f1();
function f1(){
  var a;
  var b=9;
  console.log(a);
  console.log(b);
  var a = '123';
}
//undefied 9

解释：

1、function fn(a){
    window.a();//优先级高,调用下面的a 的函数（）
    var a;
    console.log(a);  
    var a = 2;
    function a(){};
    console.log(a); 
}
fn(1);

2、var b = 10;
window.b(）
(function b() {
   b = 20;
   console.log(b);
})();

3、var a = 18;
f1();
function f1(){
  var b=9;
  var a;
  console.log(a);
  console.log(b);
  var a = '123';
}
//undefied 9

39、var str='aaaabbccccddeffgh'获取str里出现次数最多的字母

var str='aaaabbccccddeffgh';
var json1={};
for(var i=0;i<str.length;i++){
    if(json1[str[i]]){
		json1[str[i]]++;
    }else{
		json1[str[i]]=1;
    }
}
var n=0;
var s='';
for(var name in json1){
    if(n<json1[name]){
	n=json1[name];
	s=name;
    }
}
console.log(s+'出现了'+n+'次');

40、邮箱正则表达式验证
`^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$`

41、jQuery的事件委托方法on、live、delegate之间有什么区别？

live 把事件委托交给了document（根节点），document 向下去寻找符合条件的元素（），不用等待document加载结束也可以生效。

delegate可指定事件委托对象，相比于live性能更优，直接锁定指定选择器；

on事件委托对象选填，如果不填，即给对象自身注册事件，填了作用和delegate一致。

band只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件，存在局限性。

Mr_Debugger

关注

7
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识笔记

1、引入CSS的方法有两种：一种是@Import,一种是link <link type="text/css" href="地址" rel="stylesheet"/> 现在绝大多数网站都采用后link方法，原因在于 @Import先加载html,再加载css link先加载css,再加载html 所以前者加载网页会出现令浏览者感觉到意外的格式，后者是带着格式去...
复制链接

扫一扫