• RESTful API
• REST

知识点：前端 - SegmentFault 思否

1.$(document).ready 与 window.onload 的区别

• $(document).ready 和 window.onload 都是在都是在页面加载完执行的函数，大多数情况下差别不大。
• $(document).ready:是 DOM 结构绘制完毕后就执行，不必等到加载完毕。 意思就是 DOM 树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。
• window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。

2.获取电脑IP

C:\Users\admin>ipconfigWindows IP 配置以太网适配器 以太网:媒体状态  . . . . . . . . . . . . : 媒体已断开连接连接特定的 DNS 后缀 . . . . . . . :无线局域网适配器 WLAN:连接特定的 DNS 后缀 . . . . . . . :本地链接 IPv6 地址. . . . . . . . : fe80::f535:91de:752d:c619%11IPv4 地址 . . . . . . . . . . . . : 192.168.1.147子网掩码  . . . . . . . . . . . . : 255.255.255.0默认网关. . . . . . . . . . . . . : 192.168.1.1

3.常见的状态码

1XX：信息状态码100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

4. Ajax的基本概念

思考：我们访问一个普通网站时，当浏览器加载完HTML、CSS、JS以后，网站就固定了，如果网站内容发生改变，必须刷新网页后，才能看到更新内容。Ajax概念：在浏览器中，我们能够不刷新页面，通过Ajax的方式去获取一些新的内容。Ajax 不是一门的新的语言，而是对现有技术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
核心是通过浏览器端的js帮我们预定义的一个异步对象XMLHttpRequest来完成的
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。优点：页面无刷新，用户体验好；
异步通信，更加快的响应能力；
减少冗余请求，减轻了服务器负担；
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序
缺点：浏览器对XMLHttpRequest对象的支持度不足，存在兼容性；
Ajax干掉了back按钮，即对浏览器后退机制的破坏；
对搜索引擎的支持比较弱；
存在一定的安全问题；
无法用URL直接访问；
开发调试工具的缺乏。
Ajax应用场景：场景1 数据验证
场景2 按需取数据
场景3 自动更新页面Ajax 包含以下五个部分：Ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
使用CSS和XHTML来表示。
使用DOM模型来交互和动态显示。
数据互换和操作技术，使用XML与XSLT
使用XMLHttpRequest来和服务器进行异步通信。
使用javascript来绑定和调用。

5.JSON标准格式

JSON对象：{"person":["jobs",60]
}
JSON数组：{  "array": [  {  "name": "jobs"  },  {  "name": "bill",  "age": 60  },  {  "product": "war3",  "type": "game",  "popular": true,  "price": 60  }  ]  }将json字符串，转换成一个对象：JSON.parse(jsonStr);// 注意，json字符串里面的属性必须是双引号包裹，单引号包裹会报错
var jsonStr = '{"name":"Levi","age":18,"skill":"帅"}';
var obj = JSON.parse(jsonStr);
console.log(obj); // 打印对象 {name: "Levi", age: 18, skill: "帅"}将对象转换成json格式的字符串：JSON.stringify;var obj = {name: "Levi",age: "18",skill: "帅"
};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); //打印{"name":"Levi","age":"18","skill":"帅"}

6. jQuery中的Ajax操作

方法      作用
url        请求的地址
type       请求的方式
dataType   告诉服务器，我要想返回什么类型的数据，默认json
contentType 告诉服务器，我要发送什么类型的数据 ;可设置的编码类型为："application/json; charset=utf-8"
data       数据
async      是否异步,默认为true,异步请求
cache      Boolean值,设置为false将不会从浏览器缓存中加载请求信息。
success    请求成功的回调函数
error      请求失败的回调函数
beforeSend 请求发送之前调用的函数
complete   不论请求是成功还是失败的，只要请求完成就会调用
timeout    设置请求超时注意:Content-type:浏览器通过content-type所指定的格式来解析你返回的内容，呈现给用户详细介绍:
jquery中的ajax方法参数总是记不住，这里记录一下。
1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。function(XMLHttpRequest){this;   //调用本次ajax请求时传递的options参数}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。function(XMLHttpRequest, textStatus){this;    //调用本次ajax请求时传递的options参数}10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。(1)由服务器返回，并根据dataType参数进行处理后的数据。(2)描述状态的字符串。function(data, textStatus){//data可能是xmlDoc、jsonObj、html、text等等this;  //调用本次ajax请求时传递的options参数}11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：function(XMLHttpRequest, textStatus, errorThrown){//通常情况下textStatus和errorThrown只有其中一个包含信息this;   //调用本次ajax请求时传递的options参数}12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。当发送的数据格式为json时，设置的编码类型为："application/json; charset=utf-8" 14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。function(data, type){//返回处理后的数据return data;}15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
示例代码：
$.ajax({// 请求的地址url: "04-data.php",// 请求的方式type: "get",// 告诉jQuery，需要按照什么格式对服务器返回的数据进行解析，默认jsondataType: "json",// 数据data: {msg: "我是来请求数据的"},// 请求成功的回调函数success: function(data) {console.log(data);},// 请求失败的回调函数error: function() {console.log("失败了");},// 请求发送之前调用的函数beforeSend: function() {console.log("请求发送之前调用的函数");// 如果返回一个false，那么就会阻止整个请求的发送// return false;// 用法：可以用作表单验证，当表单内容符合规范的时候发送ajax请求，当不符合的时候就不发送ajax请求},// 不论请求是成功还是失败的，只要请求完成就会调用complete: function() {console.log("请求完成了");},// 设置请求超时时间(单位:ms)，超过这个时间后，就不会请求了timeout:2000
});

7.如何获取浏览器URL中各部分的内容,比如:查询?字符串中的参数？

http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23实例如下：
function showWindowHref(){var sHref = window.location.href;var args = sHref.split('?');if(args[0] == sHref){return "";}var arr = args[1].split('&');var obj = {};for(var i = 0;i< arr.length;i++){var arg = arr[i].split('=');obj[arg[0]] = arg[1];}return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming/* url 为 https://docs.qq.com/doc/DU0lkYVJhWUNmV1p1?opendocxfrom=admin#demo */
//其他方法:
//1.获取或设置整个url,为字符串类型的
window.location.href   // "https://docs.qq.com/doc/DU0lkYVJhWUNmV1p1?opendocxfrom=admin"//2.获取 或 设置 url中主机部分
window.location.host   // "docs.qq.com"//3.获取 或 设置 url中协议的部分
window.location.protocol // "https:"//4.获取 或 设置 与url关联的端口号
window.loction.port  // 一般默认查出来为空字符串//5.获取 或 设置 url的路径部分(文件地址)
window.location.pathname  // "/doc/DU0lkYVJhWUNmV1p1" 即主机部分和?中间的部分 //6.获取 或 设置 url的?后面的部分
window.location.search   // "?opendocxfrom=admin"     包含?//7.获取 或 设置 url中#后面的东西 (页面中的某个位置)
window.location.hash    //  "#demo"                   包含#

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage  数据在当前浏览器窗口关闭后自动删除。cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

番外：获取cookie中的对应值、获取localStroage、sessionStorage对应值

获取cookie值：
//方法1
var user_cookie = getCookie2('userName');  //调用 注意：cookie名要加引号才行$('#userName').val(user_cookie)  //赋值function getCookie2(name){var strcookie = document.cookie;//获取cookie字符串var arrcookie = strcookie.replace(/\s+/g,'').split(";");//分割//遍历匹配for ( var i = 0; i < arrcookie.length; i++) {var arr = arrcookie[i].split("=");if (arr[0] == name){return arr[1];}}return "";}
//方法2
function getCookie2(name){//可以搜索RegExp和match进行学习var arr,reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");if (arr = document.cookie.match(reg)) {return unescape(arr[2]);} else {return null;}
}========================================
获取localStorage 中的值：JS下的操作方法特点：是对Cookie的优化没有时间限制的数据存储在隐私模式下不可读取大小限制在500万字符左右，各个浏览器不一致在所有同源窗口中都是共享的本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存）不能被爬虫爬取，不要用它完全取代URL传参IE７及以下不支持外，其他标准浏览器都完全支持获取键值：localStorage.getItem(“key”)设置键值：localStorage.setItem(“key”,”value”)清除键值：localStorage.removeItem(“key”)清除所有键值：localStorage.clear()获取键值2：localStorage.keyName设置键值2：localStorage.keyName = “value”==========================================
sessionStorage(会话cookie):特点：针对一个 session 的数据存储大小限制在5M左右，各个浏览器不一致仅在当前浏览器窗口关闭前有效（适合会话验证）不在不同的浏览器窗口中共享，即使是同一个页面存储数据：sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值sessionStorage['testKey'] = '这是一个测试的value值'读取数据：sessionStorage.getItem('testKey'); // => 返回testKey对应的值sessionStorage['testKey']; // => 这是一个测试的value值cookie和session的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上
2、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑*到安全应当使用session
3、session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4、单个cookie保存的数*据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
5、建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
6、session保存在服务器，客户端不知道其中的信心；cookie保存在客户端，服务器能够知道其中的信息
7、session中保存的是对象，cookie中保存的是字符串
8、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的*

8.js怎样添加、移除、移动、复制、创建和查找节点？ 查找节点方式及 详解

1）创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2）添加、移除、替换、插入、克隆appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入ele.insertBefore(父级,子集)原生js：var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象 var clonedNode = sourceNode.cloneNode(true); // 克隆节点 克隆元素node.cloneNode(boolean)参数：唯一参数 Booleantrue  深复制 连子节点一块复制false 浅复制 只复制自身返回值：克隆的元素jQuery:$("p").clone(boolean) //true 则包括元素的事件3）查找通过ID获取（getElementById）//通过元素Id，唯一性通过name属性（getElementsByName） //通过元素的Name属性的值通过标签名（getElementsByTagName） //通过标签名称通过类名（getElementsByClassName） 获取html的方法（document.documentElement）获取body的方法（document.body）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorAll）

9.节点操作，js与jq对比

10.兼容IE浏览器和高级浏览器获取父节点所有的子节点的解决办法

function getChildNodes (dom) {var arr = [];for (var i = 0; i < dom.childNodes.length; i++) {if (dom.childNodes[i].nodeType === 3) {var reg = /^\s+$/;if (reg.test(dom.childNodes[i].data)) {}else {arr.push(dom.childNodes[i])}}else{arr.push(dom.childNodes[i])}}return arr;
}
---------------------

11.获取滚动条的top和left

//完整版封装函数： [34-scroll系列-scrollTop&scrollLeft兼容性封装.html]function getScroll() {// 返回的是一个对象，调用的时候 getScroll().top 获取页面被卷去的头部的距离return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0}
}//返回值是一个对象，需要获得卷去头部的距离，只需要调用getScroll.top即可。

12.字符串方法,用于时间位数补全 及 字符串的复制,一般用于模拟数据

//ES6 引入了字符串补全长度的功能，如果某个字符串不够指定长度，会在头部活尾部补全。
//padStart 和 padEnd 一共接受2个参数，第一个是用来指定字符串的最小长度，第二个参数是用来补全长度的字符串。
//1.padStart() 用于头部补全；'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'//2.padEnd() 用于尾部补全。'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
//3.padStart() 另一个常用的是提示字符串格式。'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"//4.vue全局过滤器中使用字符串方法
Vue.filter('dateFormat', function (date, flag) {var dt = new Date(date);var y = dt.getFullYear();var m = (dt.getMonth() + 1).toString().padStart(2, '0')var d = dt.getDate().toString().padStart(2, '0');if (flag) {var hh = dt.getHours().toString().padStart(2, '0');var mm = dt.getMinutes().toString().padStart(2, '0');var ss = dt.getSeconds().toString().padStart(2, '0');return `${y}-${m}-${d} ${hh}:${mm}:${ss}`} else {return `${y}-${m}-${d}`}})//字符串ES5 和ES6的方法总结:var str = 'abcdefg';//1.charAt:返回指定索引处的字符串var a = str.charAt(0);console.log(a)  // 'a'//2. charCodeAt()返回指定索引处的unicode字符str.charCodeAt(0) //97  为 'a' 的unicode码! //3.indexOf()判断一个字符串第一次出现在某个字符串的索引,如果包含,则返回它的索引,若不存在就返            回-1str.indexOf(b) // 1  存在返回索引str.indexOf(w) //-1  不存在w//4.lastIndexOf() 判断一个字符最后一次出现在某字符串中的索引,如果包含,则返回它的索引,若不包 含则返回-1str.lastIndexOf(b) // 1str.lastIndexOf(w) //-1//5.concat()拼接2个字符串,并返回新的字符串      不改变元字符串var str1 = 'qqq';var str2 = str.concat(str1);//6.substr(n,m)从索引n开始,截取m长度的字符,将截取的字符返回   不改变原字符串var b = str.substr(1,2);  // bcvar b = str.substr(2,-1); // ''   长度为负值,返回空字符串//7.substring(n,m)  从索引n(包含n)开始,到索引m(不包含)结束.   不改变原有字符串var str1 = str.substring(1,2);  // 'b'//8.split(',')  用指定字符分割字符串，返回一个数组.对原字符串没有任何改变。var a=str.split('');console.log(a);  //["a", "b", "c", "d"] ;var bb = '1,2,3,4,5,6,7';console.log(bb.split(',')) //['1','2','3','4','5','6','7'];//9.replace('a',1);  替换指定字符，返回替换后新的字符串，对原有字符串有改变。(第一个参数可 以是正则表达式) 只能替换一次 ，配合正则模式修饰符g使用var str='aaaaee';var reg=/a/g;str.replace(reg,1);   //"1111ee"str.replace(reg,'');  //"ee"  相当于删除  //10.match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。把找到的字符放在数                组里，返回一个数组。var str='aaaa3ed33';var reg=/a/g;str.match(reg);  //["a", "a", "a", "a"]// es6新增方法// 1.includes()：返回布尔值，表示是否找到了参数字符串。这三个方法都支持第二个参数，表示开始搜 索的位置。// 2.startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。这三个方法都支持第二个参 数,表示开始搜索的位置。// 3.endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。这三个方法都支持第二个参数， 表示开始搜索的位置。var s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false//4.repeat()  方法返回一个新字符串，表示将原字符串重复n次。'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // "" //5.padStart()，padEnd()字符串补全长度的功能// padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补 全的字符串。'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'//如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'//如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。'abc'.padStart(10, '0123456789')//如果省略第二个参数，默认使用空格补全长度。'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '      

13.jQuery中attr和prop的区别

 <select id="sec" style="width:200px"><option value="">请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><!-- $('#sec option').eq(3).attr('selected')undefined$('#sec option').eq(3).prop('selected')false -->
//如果当前input，select中初始化未定义checked,selected属性，则不管当前是否选中，$(“#selectAll”).attr(“checked”)都会返回undefined；
//简单来说:就是attr 一般获取或设置 自定义属性(且获取时,要有该属性,否则返回undefined)
// prop一般获取或设置 元素本身自带的固有属性,即使标签上没写,也会返回值false,而非undefined;

14数组的方法总结(包含新方法):数组总结~~~~~~

//JavaScript中创建数组的两种方式:
//1.使用构造函数:
var arr1 = new Array(); // []
var arr2 = new Array(20); //当只有一个数字类型,表示数组的长度,且均为空数组(empty*20)
var arr3 = new Array('a','b','c'); //直接填数据打印:  ["a", "b", "c"]
//2.使用字面量:
var a1 = [];  // []
var a2 = [20]; //[20]
var a3 = [1,2,3]; //[1,2,3]数组原型方法:
$.inArray()  //参数2(数组)是否包含参数1(局部)
join()
push()和pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf() （ES5新增）
reduce()和 reduceRight() （ES5新增）forEach() （ES5新增）
map() （ES5新增）
filter() （ES5新增）
every() （ES5新增）
some() （ES5新增）数组的新方法:
扩展运算符...
Array.from()
Array.of()
数组find()和findindex()
copyEithin()
数组fill()
数组entries()/keys()/values()
数组indludes()    比较是实用的方法:
$.inArray(2,[1,2,3,4,5]);  // 1
$.inArray('2',[1,2,3,4,5]);  // -1
var arr = [1,2,3,4,5];
$.inArray(2,arr) // 1   // 返回对应索引位置,若无则返回-1;   重点：srr.splice($.inArray(2,arr),1); //在未知索引，但已知数组元素时，删除对应数组元素！！！//原型方法介绍:
1.join(type):将数组中的元素变成字符串,以type参数为分隔符,省略参数默认以逗号隔开,只接收一个参数
var arr = [1,2,3];
arr.join(); //字符串 "1,2,3"
通过join()方法可以实现重复字符串,类似于字符串方法repeat(num):
function repeatString(str,n){return new Array(n+1).join(str)
}
console.log(repeatString('abc',2))  // "abcabc"
console.log(repeatString('q',5)) //"qqqqq"2.push() 和 pop()
push():可以接收任意数量的参数,把它们添到数组的末尾,并返回修改后数组的长度;
pop(): 删除数组末尾的一项,改变数组长度,并返回被删除的项;
var arr = [1,2,3];
var add = arr.push([4,5]);  // 4
var del = arr.pop();   //  [4,5]3.unshift: 将参数添加到原数组的开头,并返回数组的长度shift: 删除原数组的的第一项,并返回删除元素的值,如果数组为空,就返回 undefined var arr = [2,3,4];var add = arr.unshift('1');  // 4var del = arr.shift();  // "1"4.sort():按照升序排列数组:最小的在最前面
在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串!为此比较大小时:
var arr = [23,12,25,34,11];
从小到大: arr.sort((a,b)=>{return a-b});  //[11, 12, 23, 25, 34]
从大到小: arr.sort((a,b)=>{return b-a});  //[34, 25, 23, 12, 11]5.reverse()：反转数组项的顺序。
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)6.concat():将参数添加到原数组中.这个方法会先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新创建的数组,若无参数,则是复制当前数组并返回副本.
特别注意:concat()只能去除一层数组,二维数组的里面不能去除,三维同理.
var arr = [1,2,3,4,5];
var arrCopy = arr.concat(9,[1,12]);   // [1,2,3,4,5,9,1,12];
var arrCopy1 = arr.concat(9,[2,3,[34]])  // [1, 2, 3, 4, 5, 9, 2, 3, Array(1)]7.slice():剪切数组(不改变元数组)
slice(startIndex,endIndex)  返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组(返回新数组，不改变原数组)
var a = [1,2,3,4,5,6];
var w = a.slice(1)  // 一个正参数:表示从当前索引一直到最后 [3, 4, 5, 6]
var b = a.splice(0,1) //[1]
var c = a.slice()   // 无参数: 原数组
var d = a.slice(-3) // 一个负的参数:倒数对应数字位置到最后  [4, 5, 6]
var e = a.slice(-3,-1)    //存在负数,则该数字便不是索引,是位置(即自然数从1开始)[4, 5]
var f = a.slice(-5,-2)    // 负数时可认为不是索引,但第二个参数仍不包含   [2, 3, 4]
var e = a.slice(-3,4)      // [4, 5]
//特别:
//全正值或全负值,参数1 > 参数2 ,则为空;
var cc = a.slice(-3,-4);
var cc1 = a.slice(4,3);
//当一正一负 时,在从前数 和从后数 为同一个值时,则包含参数2位置的值 var dd = a.slice(-3,3) // [4] 8.splice() 修该删除
splice(index,length,心增元素1,新增元素2,...);表示从index开始删除length个元素,并从index索引位置,并从index开始新增元素1~N,返回被剪切的的元素组成的数组 (改变原来数组)
var a = [1,2,3,4];
(1).
var bb = a.splice(1,1)  // [2]
console.log(a)// [1,3,4]
(2).
var cc = a.splice(1,2)  // [2,3]
console.log(a)   // [1,4]
(3).var dd = a.splice(1,2,4,[7,6,5]); // [2, 3]
console.log(a)  // [1, "a", Array(3), 4]9. indexOf()和lastIndexOf()  (不改变原数组)
a.indexOf(元素值);(想要判定的某个元素,若有,则返回从左往右查的第一次出现的索引,否则返回-1)
a.lastIndexOf(元素值); (和indexOf)查询位置相反
var arr = [1,2,4,5,2,3]
a.indexOf(2); // 1 (索引位置)
a.lastIndexOf(2); // 4(索引位置)
//注意:若不使用下标，则一般通过includes()方法代替indexOf()
arr.includes(2); // Boolean值true或者false;10.reduce()方法和reduceRight()方法 reduce(或reduceRight)(function(){},initValue)
//reduce()方法接收一个函数callback和一个初始值,数组中的每个值(从左往右)开始合并,最终求和
//reduceRight()方法接收回调函数和初始参数,reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。reduce(function(){preVal,curVal,index,arr}{preVal:上一次调用返回的值,或者时提供的初始值(initVal);curVal:数组中当前正在被处理的数组项;index:当前被处理的数组项的对应索引;arr: 当前所处理的整个数组项;initVal:初值,非必写项;},[initVal])
//回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值，curValue等于数组中的第二个值。
//https://www.cnblogs.com/huenchao/p/6091313.html数组的循环遍历方法:$.each()/$().each()
arr.forEach() 遍历数组(不改变原数组)
arr.map(callback) 使用一个数组, 利用某规则映射得到一个新数组(不改变原数组)
arr.filter(callback)  找出符合条件的元素(不改变原数组)
arr.every(callback) 判断数组中的所有元素是否都符合某种条件(不改变原数组)
arr.some()   判断数组中是否含有符合条件的元素(不改变原数组)(1)$.each(arr,function(index,elem,arr){});
(2)$(selector).each(function(index,element){})(3)arr.forEach((val,i,arr)=>{})  //遍历数组,无return
arr.forEach((v, i) => {
console.log(v, i);
});(4)arr.map((val.i,arr)=>{})    //(改变原数组),有return;利用某规则映射得到一个新数组,返回一个新的数组arr.map((v, i) => {return v * v;});(5)arr.filter((i,val,arr)=>{}) //过滤数组，返回一个满足要求的数组
找出数组中的偶数:arr.filter((v, i) => v % 2 == 0);  (6)arr.every((i,val,arr)=>{})  //依据判断条件，数组的元素是否全满足，若满足则返回ture
arr.every((v, i) => v % 2 == 0) // 所有的结果都为true, 结果为true, 有一个false, 结果为false(7)arr.some((i,val,arr)=>{})   //依据判断,数组的元素是否有一个满足,若有一个,则返回true
arr.some(v => v > 2) // 只要有一个true, 结果为true=======================================
ES6新增方法:1.扩展运算符(...)
console.log([1,...[2,3,4,5,6]])  // [1,2,3,4,5,6]
与解构赋值结合:
const [aa,...bb] = [[1,2],3,2,4,5,6,5]; //aa:[1,2] bb:[3,2,4,5,6,5]
可将字符串转化为数组:
[...'hello'] // ["h","e","l","l","o"]2.Array.from()
// Array.from方法用于将两类对象转为真正的数组:类似数组的对象 和 可遍历的对象
var arrLike = {
'0':'a',
'1':'b',
'2':'c',
length:'3'
}//这里必须包含有所需的对象和length
var arr = Array.from(arrLike);  //['a','b','c']3.Array.of():用于将一组值，转换为数组。
Array.of(1,2,3,4,5) // [1,2,3,4,5]
//此方法的主要目的在于:是弥补了数组构造函数Array()的不足.因为参数个数不同,会导致结果有差异
Array()  // []
Array(3) // [,,,]
Array(1,2) // [1,2]4.copyWithin(target,start,end)
//在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组;(改变了原数组)
target:要被替换的起始位置;start:准备去做替换内容的起始位置,end:准备去做替换内容的终止位置(不包括)
var arr = [1,2,3,4,5];
arr.copyWithin(0,3,4);   // [4,2,3,4,5]
arr.copyWithin(0,2);  // [3,4,5,4,5]
arr.copyWithin(0,2,4) // [3,4,3,4,5]
//由上例子可以看出:参数2和参数3之间不管有几个,都会从参数1的位置开始,一直覆盖到所选取的内容的全部5.数组find()和findIndex():接受三个参数，依次为当前的值、当前的位置和原数组
数组实例的find方法，用于找出(第一个符合条件)的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
findIndex()方法则是在满足对应条件时,返回的是对应的索引值
var arr = [1,2,3,4,5,6];
arr.find(function(curVal,curIndex,arr){//curVal :当前值;curIndex:当前索引,arr:当前整个数组return curVal>3  //4 只打印第一个满足的值
});
arr.findIndex(function(curVal,curIndex,arr){return curVal === 3 ; //2 索引位置
});6.fill():使用给定的值,填充数组内容
//fill方法接收第一个参数(要填充的内容),还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
["a","r","c"].fill(7)  // [7,7,7]
['a','b','c'].fill(Math.random(),1,2)  //["a", 0.8563910543783992, "c"]7.includes():方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

iframe有那些缺点？

*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

HTML5的form如何关闭自动完成功能？

  给不想要提示的 form 或某个 input 设置为 autocomplete=off。

网页验证码是干嘛的，是为了解决什么安全问题。

  区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

title与h1的区别、b与strong的区别、i与em的区别？

  title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。i内容展示为斜体，em表示强调的文本；Physical Style Elements -- 自然样式标签b, i, u, s, preSemantic Style Elements -- 语义样式标签strong, em, ins, del, code应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

为什么要初始化CSS样式。

  - 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）淘宝的样式初始化代码：body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

用纯CSS创建一个三角形的原理是什么？

  把上、左、右三条边隐藏掉（颜色设为 transparent）#demo {width: 0;height: 0;border-width: 20px;border-style: solid;border-color: transparent transparent red transparent;}

position的值relative和absolute定位原点是？

    absolute生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。relative生成相对定位的元素，相对于其正常位置进行定位。static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。inherit规定从父元素继承 position 属性的值。

display有哪些值？说明他们的作用?

    block        块类型。默认宽度为父元素宽度，可设置宽高，换行显示。none            元素不显示，并从文档流中移除。inline        行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。inline-block  默认宽度为内容宽度，可以设置宽高，同行显示。list-item      象块类型元素一样显示，并添加样式列表标记。table           此元素会作为块级表格来显示。inherit       规定应该从父元素继承 display 属性的值。

盒子水平垂直居中

水平居中：给div设置一个宽度，然后添加margin:0 auto属性div{width:200px;margin:0 auto;}1.让绝对定位的div居中div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;background-color: pink;   /* 方便看效果 */}水平垂直居中一确定容器的宽高 宽500 高 300 的层设置层的外边距div {position: relative;     /* 相对定位或绝对定位均可 */width:500px;height:300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;         /* 外边距为自身宽高的一半 */background-color: pink;        /* 方便看效果 */}水平垂直居中二未知容器的宽高，利用 `transform` 属性div {position: absolute;     /* 相对定位或绝对定位均可 */width:500px;  // 宽度不定height:300px;  // 高度不定top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: pink;     /* 方便看效果 */}水平垂直居中三利用 flex 布局实际使用时应考虑兼容性.container {display: flex;align-items: center;      /* 垂直居中 */justify-content: center;  /* 水平居中 */}.container div {width: 100px;height: 100px;background-color: pink;       /* 方便看效果 */}  

简述一下你对HTML语义化的理解？

  1.用正确的标签做正确的事情。2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

浏览器内核:

  Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

2019年10月29日：（答案已附）

1.这段代码运行的结果是什么？var name = 'World!';
(function () {if (typeof name === 'undefined') {var name = 'Jack';console.log('Goodbye ' + name);} else {console.log('Hello ' + name);}
})();// Goodbye Jackresult(答案)：
在匿名函数中，我们符合了第一个if条件判断，也就是：typeof name === 'undefined'为true，有人就问了，为什么变量name明明在函数外部第一行就定义赋值了，是一个string字符串类型，为什么进来匿名函数里面，就变了样呢。
原因就在于，匿名函数内部也有一个自己的变量name。并且代码的顺序是先使用，后定义赋值。
这里就会出现一个变量提升的问题（注：在面试题11节讲过），所以此时我们函数内部的变量是先置顶声明，未赋值，也就是相当于在匿名函数的内部第一行增加一句代码，var name；这个时候用typeof判断类型，得到的值为‘undefined’。
顾答案选A

2.下面这道题，运行的结果是什么？["1", "2", "3"].map(parseInt);result(答案)：
首先，我们了解了数组中map的作用，map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。也就是map会把数组["1", "2", "3"]遍历一遍，并传入parseInt函数中去进行处理。那么很多人就觉得，把数组中的"1","2","3"进行parseInt处理之后，不就是得到数字1,2,3了吗？但我们忽略了，map给处理函数传的参数不是简单地把数组的每个元素传进去，实际上它会传3个参数(value,index,array)。分别是数组的元素，索引和整个数组。如果忽略了这一点，就很容易答错这道题。了解了上面这点，那下面的问题是parseInt函数返回的结果是什么了？需要注意的是：在这里，parseInt(value,index,array)接收了三个参数，实际起作用的只有前2个。实际上是parseInt('1',0)和parseInt('2',1)和parseInt('3',2);得到的结果是[1,NaN,NaN]。为什么是这个结果，因为第二个参数作为解析的数字的基数。该值介于 2 ~ 36 之间，如果参数为 0，则数字将以 10 为基础来解析。所以第一次遍历得到1，如果该参数小于 3 或者大于 36，则 parseInt() 将返回 NaN。总结：parseIn（string,redix）第二个参数 为0 按十进制解析为3-36按对应数字为基数来解析其余的返回均为NAN

3.看下面这段很短的代码，运行的结果是什么？[typeof null, null instanceof Object]// ["object", false]result(答案)：

4.请看下面这道题，运行的结果是什么？var a = [0];
if ([0]) {console.log(a == true);
} else {console.log("wut");
}   // "wut"result(答案)：

5. 下列代码结果是什么？(function(){var x = y = 1;
})();
console.log(y);
console.log(x);result(答案)：

6.看下面这道题，运行的结果是什么？var a = [1, 2, 3],b = [1, 2, 3],c = [1, 2, 4];
console.log(a == b);
console.log(a === b);
console.log(a > c);
console.log(a < c);result(答案):

7.请看下面这道题，运行的结果是什么？var two   = 0.2;
var one   = 0.1;
var eight = 0.8;
var six   = 0.6;
[two - one == one, eight - six == two]result:

8.请看下面这道题，运行的结果是什么？'5' + 3
'5' - 3result:

9.请看下面这道题，运行的结果是什么？function foo() { }
var oldName = foo.name;
foo.name = "bar";
[oldName, foo.name]result:
划重点：函数实例会有一个内置的name属性，因为在开发中很少用到，所以很多小伙伴并不知道这个东西的存在。
这个属性是只读的，不可修改，所以不管怎么赋值都是无效的。最终运行的结果是：["foo","foo"]。

10.看看下面的题目：var ary = Array(3);
ary[0]=2;
ary.map(function(elem) {return '1';
});result:

11.题目，非常简短，只有一行代码：[1 < 2 < 3, 3 < 2 < 1]result:

12.题目，求a+b的值多少：var a = 111111111111111110000,b = 1111;
a + b;result:

13.看看今天的题目：var val = 'c';
var str = 'Value is' + (val === 'c') ? 'a':'b';
console.log(str);result:

14.题目：var a = /123/, b = /123/;
console.log(a == b);
console.log(a === b);result:

15.题目：var lowerCase =  /^[a-z]+$/;
[lowerCase.test(null), lowerCase.test()]result:

16.题目很简单：var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;
});

17.题目很简短：function effect(ary) {ary[0] = ary[2];
}
function run(a,b,c) {c = 10;effect(arguments);return a + b + c;
}
run(1,1,1);result:

18.题目很简短：var min = Math.min();
var max = Math.max();
min < maxresult:

19.今天的题目，题目很简短：function foo(a) {var a;return a;
}
function bar(a) {var a = 'bye';return a;
}
[foo('hello'), bar('hello')]result:

20.今天的题目，题目很简短：function f() {}
var a = f.prototype;  {constructor: f}   //  指向该函数的原型对象
var b = Object.getPrototypeOf(f);    //
a === bresult:

21.var a = {value:2,toString:function(){return ++this.value;}
};if(a == 3 && a == 4){console.log('amazing');
}else{console.log('nothing');
}result:判断时，a很明显是一个对象，之后对象要和数值比较，就要先转化为字符串，
使用toString属性，而我们这里对该属性改写了，每次调用会在原始value上加 1 ；
第一次比较： Number('3') == 3  >>>   true
第二次比较： Number('4') == 4  >>>   true即满足要求，输出 ： amazing其他人的解释：

22.function showCase(value) {switch(value) {case 'A':console.log('Case A');break;case 'B':console.log('Case B');break;case undefined:console.log('undefined');break;default:console.log('Do not know!');}
}
showCase(new String('A'));result： 'Do not know!'这里说明下：new String('A') String('A')和'A'的区别：
（注意switch条件和'==='等价，即要全等才满足条件）
1.new String('A') 为一个对象，所有条件均不满足，
2.String('A') 和 'A' 全等，输出均为字符串A
3.new String('A') == String('A') | 'A'   truenew String('A') === String('A') | 'A'  false

23.var out = 25,inner = {out: 20,func: function () {var out = 30;return this.out;}};inner.func();(inner.func = inner.func)();result:
注意：inner.func = inner.func  输出：ƒ () {var out = 30;return this.out;}
1. 关于this，简单理解就是 函数有谁调用，this指向谁
2.inner.func() 明显调用者为inner，所以输出 this.out为20
3.下面的最终相当于(function(){var out = 30;return this.out})(),匿名自执行函数，调用者为Window,输出即为25

24.if (!("b" in window)) {var b = 1;
}
alert(b);result:1.这里var声明，因为var声明没函数作用域，存在变量提升的能力，故：
var b;  // 提升至最上面，这里相当于在全局已声明，存在b这个变量、
"b" in window >>> 为true
所以条件为false;
b >>> undefined

25.function a(x) {return x * 2;
}
var a;
alert(a);result:

26.var a = 1;
var b = function a(x) {x && a(--x);
};
alert(a);result: 1当外部有对应声明时,不论放前放后都会弹出该值; 当只有b这个变量时,即便调用 打印a,都为 not a function
也就是第二个函数声明,那个a其实没什么用的;

27.函数声明方式:1. 函数(变量)声明的方式: var fn = function(){};
2. 函数表达式的方式: function fn(){}两者区别在于:函数声明的方式调用该函数必须在声明该函数之后调用;函数表达式的方式调用时相当于在该函数上面或者下面都可以 =======================typeof  后的类型==========================
原始类型：
number string  null undefined boolean symbol
typeof结果：会返回数据的字符串类型，共6种：
数字类型： number
true|flase : boolean
字符串类型： string
声明未赋值的类型： undefined
对于函数的类型：function （typeof f() > 判断函数调用，则判断的是输出的值类型）
[]|{}|null 类型： object  （这里的arguments是伪数组,属于object队列）

28.function b(x, y, a) {// 'use strict'    使用严格模式arguments[2] = 10;alert(a);
}
b(1, 2, 3);result:当一般模式:函数内部会被改掉,输出为 10;
当加了严格模式:函数内的参数只会和传入的实参有关,通过arguments数组不能改动输入的值; 输出为 3;
但是,直接赋值,会被改掉的;  例如: arguments[2] = 10 改为 a = 10 结果就为10

29.function a() {alert(this);
}
a.call(null);result:call 和 apply 均为 Function原型上的方法,区别时,call第二个参数为字符串,apply的为数组结果:this指向window全局[,node中全局为global];  [object Window]

30.今天的题目：
(function(){var a = b = 3;
})();console.log(typeof b);
console.log(typeof a);result:
相当于：(function(){b=3;var a =b;})()结果： number   undefined

31.(function() {console.log(1);setTimeout(function(){console.log(2)}, 1000);setTimeout(function(){console.log(3)}, 0);console.log(4);
})();result:未加定时器的优先打印，其次加定时器的时间从小到大依次打印，即便是0，也算在定时器中；结果： 1，4，3，2

32.(function() {return typeof arguments;
})();result:即检测函数内部的参数属性的类型：它是 object 类型；Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]

33.var f = function g(){return 23;
};
typeof g();result: // g is not undefined   报错上面已经说明了，函数声明只有两种方式：第一：直接声明 function a(){} 第二种：表达式声明：var a = function(){}该函数属于第二种，即使看着像两者混合，
但是这里只有f() 才能调用；
在函数内部可以g()，但是会有无限调用的危险

34. 今天的题目：
(function(x){delete x; return x;
})(1);result:  1 delete 操作符，
1.一般来删除对象的属性或方法，或者没有被 var、let、const声明的变量；
2.无法删除的是函数、函数里面的参数变量（前提函数里面没有参数，在里面删除也可成功，例子如下）用var、let、const声明的变量，无法删除时返回false|成功则返回true
(function(){x = 2;delete x; return x;
})();   // x is not defined
注意：
里面变量被人为改动的，并未使用声明符来声明，结果即被删除成功；

1.[html] 怎样去除html标签之间换行产生的空格？

一、简单粗爆不换行
写代码的时候不要换行，input等在一行输写，那么将解决该问题。但是代码就变得不再那么容易好看。二、设置父级块的字体大小为0
这样也能解决问题，代码也好看，但是当你设置了父级的字体大小为0时，你里面又要其它字体要显示，可能就得加span等标签去包裹它，并且重新设置字体大小。三：设置margin-left为-3象素
使得该元素基于原来的位置向左偏移三个象素，也就看不出有空隙了。
缺点是如果用到js拼接字符串时样式会乱四：个人总结：float：left|right 浮动也可消除元素之间的空格（记得清楚浮动）

2.[css] Reset CSS和Normalize CSS的区别是什么？   其他介绍

1. Normalize.css 保护了有价值的默认值，reset.css 将所有默认值全部重置2. Normalize.css 修复了浏览器的bug 问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。 3. Normalize.css 不会让你的调试工具变的杂乱。 使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，就是后代选择器过多或者过长，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。4. Normalize.css 是模块化的，被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。5.Normalize.css 拥有详细的文档Normalize.css的代码基于详细而全面的跨浏览器研究与测试。

3.[js] 分别写出防抖和节流的两个函数，并描述它们分别有什么运用场景？

函数防抖(debounce)：
//在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。函数节流(throttle)
//规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。总结
函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。结合应用场景
debounce 防抖
// search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
// window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
throttle 节流
// 鼠标不断点击触发，mousedown(单位时间内只触发一次)
// 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

4.[软技能] 说下你是如何从PS切出图的，有什么技巧？

5. RESTful API

REST，即 Representational State Transfer 的缩写。意思是"表现层状态转化"; URL定位资源，用HTTP动词（GET,POST,DELETE,DETC）描述操作。

简单来说：url地址中只包含名词表示资源，使用http动词（方法名）表示动作进行操作资源;GET /blog/getArticles --> GET /blog/Articles  获取所有文章GET /blog/addArticles --> POST /blog/Articles  添加一篇文章GET /blog/editArticles --> PUT /blog/Articles  修改一篇文章 GET /rest/api/deleteArticles?id=1 --> DELETE /blog/Articles/1  删除一篇文章

什么是BFC

定义：BFC直译为“块级格式化上下文”。它是独立的渲染区域，只有块元素参与。它规定了内部块级盒子如何分布，并且与这个区域外部毫不相干。

 哪些元素会生成BFC？

- 根元素（:root选择器所找到的对应元素，比如html中页面根元素是html）- float属性不为none- position为absolute或fixed- overflow不为visible( hidden,scroll,auto, )- display为 flex, inline-block, table-cell, table-caption, inline-flex

布局规则如下：

1. 内部的Box会在垂直方向，一个接一个地放置
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

6. 什么是根元素

css中的根元素是指 :root 所匹配到的元素，也就是文档中最顶层结构的元素;

在不同场景下具体的根元素不同：
在HTML中是<html>元素，但是在其他情况下，就不是<html>元素了

前端知识 分享总结（实时更新......)相关推荐

1. css前端知识分享—页面布局分析

   今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...

2. 前端知识分享——SheetJS 用法体验

   使用SheetJS导出 Excel 表格 使用SheetJS导出 Excel 表格 使用方法 安装 引入 使用 优化 修改表头 复用 使用SheetJS导出 Excel 表格 Write and sh ...

3. HTML5前端知识分享：Vue入门

   Vue 是渐进式框架,自底向上增量开发,是构建数据驱动的web界面,他通过尽可能简单的API实现响应的数据绑定和组合的视图组件,与angularjs,相比它小巧,运行快数据绑定都使用{{}} ,与re ...

4. 云栖大会上，阿里巴巴重磅发布前端知识图谱！

   大家好,我是若川,点此加我微信进源码群,一起学习源码.同时可以进群免费看Vue专场直播,有尤雨溪分享「Vue3 生态现状以及展望」 阿里巴巴前端知识图谱,由大阿里众多前端技术专家团历经1年时间精心整理 ...

5. 现代软件工程_团队项目_阿尔法阶段_前端知识共享_2017.11.21

   现代软件工程_团队项目_阿尔法阶段_前端知识分享 更加舒适浏览格式 http://blog.csdn.net/bowean HTML基础(一) 本文参考了[http://www.w3school.co ...

6. react render没更新_web前端教程分享React学习笔记（一）

   web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...

7. 好程序员分享Web前端知识之HTML

   今天好程序员分享Web前端知识之HTML.Web前端技术由HTML.CSS和Javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者 ...

8. 怎么使用 JavaScript 将网站后台（后端）的数据变化（图片）实时更新到前端？

   引用文章:怎么使用 JavaScript 将网站后台的数据变化实时更新到前端? - 李宏训的回答 - 知乎

9. 好程序员web前端教程分享web前端入门基础知识

   好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...

最新文章

1. 致研究生：一定要从这3个方面审视你的研究方向
2. pyharm虚拟环境_手把手教你如何在Pycharm中加载和使用虚拟环境
3. linux中DNS的介绍及DNS的高速缓存
4. jvm(11)-晚期（运行期）优化
5. 01-复杂度1 最大子列和问题 （20 分)
6. PLSQL的表窗口开启（不小心把PLSQL的表窗口关了，在哪里打开）
7. 帮写python代码_10个工具，帮你写出更好的Python代码
8. 学习日常笔记day12jsp基础
9. 《JS权威指南学习总结--3.4null和undefined》
10. java传智播客答案_传智播客_java基础入门习题答案.docx
11. android app反解工具,安卓反编译逆向工具：Apktool + dex2jar 教程
12. pytorch框架--简单模型预测
13. 2.20 锤子剪刀布
14. android华为获取相册,解决华为手机获取相册图片路径为null
15. 【金猿产品展】诸葛用户数据分析平台（Insight）——聚焦业务场景数据应用价值挖掘，赋能精细化运营...
16. import引入json文件_在React组件中导入Json文件
17. 涉密信息系统集成资质申请单位提交材料清单
18. js 截取 指定 字符前面或者后面的字符串
19. LSM303AGR开发中遇到的问题
20. 基于Xware搭建树莓派远程下载服务

热门文章

1. 《云计算和大数据时代网络技术揭秘》读后感
2. 史上最猛“员工”，疯狂吐槽亿万富翁老板小扎：那么有钱，还总穿着同样的衣服！
3. 关于印发《测绘地理信息质量管理办法》的通知
4. notepad++ 联想输入 如何关掉
5. 硬链接与软连接的区别_(转)
6. CSU-ACM2017暑期训练5-三分 D - Toxophily HDU - 2298
7. 读书一定要掌握正确的阅读方法：读书10
8. 关于思科C2950交换机console清除密码，恢复初始配置的方法
9. 二进制1010.0101转换为十进制
10. linux版qq怎么创建桌面快捷方式,Linux_ubuntu系统怎么把网页版QQ添加到程序列表？，新手教程：ubuntu网页QQ快捷方 - phpStudy...