嘉兴网站建设运营,wordpress 学院主题,制作网页常用的软件有哪些,wordpress响应式模版#xff08;答案持续更新...#xff09; 1.简述同步和异步的区别js是一门单线程语言#xff0c;所谓单线程#xff0c;就是指一次只能完成一件任务。如果有多个任务#xff0c;就必须排队#xff0c;前面一个任务完成#xff0c;再执行后面一个任务#xf…答案持续更新... 1.简述同步和异步的区别 js是一门单线程语言所谓单线程就是指一次只能完成一件任务。如果有多个任务就必须排队前面一个任务完成再执行后面一个任务以此类推。如果一个任务耗时过长那么后面的任务就必须一直等待下去会拖延整个程序常见浏览器无反应可能就是一段代码死循环造成程序卡住在这个位置无法继续为了解决这个问题js的执行模式分为两种同步和异步。同步模式就是上一段的模式后一个任务等待前一个任务结束然后再执行程序的执行顺序与任务的排列顺序是一致的、同步的异步模式则完全不同每一个任务有一个或多个回调函数callback前一个任务结束后不是执行后一个任务而是执行回调函数后一个任务则是不等前一个任务结束就执行所以程序的执行顺序与任务的排列顺序是不一致的、异步的。具体来说异步运行机制如下
1所有同步任务都在主线程上执行形成一个执行栈execution context stack。
2主线程之外还存在一个任务队列task queue。只要异步任务有了运行结果就在任务队列之中放置一个事件。
3一旦执行栈中的所有同步任务执行完毕系统就会读取任务队列看看里面有哪些事件。那些对应的异步任务于是结束等待状态进入执行栈开始执行。
4主线程不断重复上面的第三步2.怎么添加、移除、复制、创建、和查找节点1创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点var paradocument.createElement(p); //创建新的 p 元素
var nodedocument.createTextNode(这是新段落。); //创建了一个文本节点
para.appendChild(node); //向 p 元素追加这个文本节点
var elementdocument.getElementById(div1);//向一个已有的元素追加这个新元素
element.appendChild(para); //向这个已有的元素追加新元素2添加、移除、替换、之前插入、之后插入、复制appendChild()、removeChild()、replaceChild()、insertBefore()、insertAfter()、cloneNode() 3查找document.getElementsByTagName() //通过标签名称document.getElementsByName() //通过元素的Name属性的值document.getElementById() //通过元素Id唯一性document.getElementsByClassName(); //通过类查找document.querySelector()3.实现一个函数clone 可以对Javascript中的五种主要数据类型Number、string、Object、Array、Boolean进行复制function clone(obj) {var o;switch (typeof obj) {case undefined:break;case string:o obj ;break;case number:o obj - 0;break;case boolean:o obj;break;case object: //object分为两种一种为Object一种为Arrayif (obj null) {o null} else {if (Object.prototype.toString.call(obj).slice(8, -1) Array) {o [];for (var i 0; i obj.length; i) {o.push(clone(obj[i]))}} else {o {};for (var k in obj) {o[k] clone(obj[k])}}}break;default:o obj;break;}return o;}4.如何消除一个数组里面重复的元素 // 方法一Array.prototype.clearRepeat function () {var arr []; //定义一个临时数组for (var i 0; i this.length; i) {//通过遍历判断当前数组下标为i的元素是否保存到临时数组中//如果保存则跳过否则保存到临时数组if (arr.indexOf(this[i]) -1) {arr.push(this[i]);}}return arr;};var test [1, 6, 8, 8, 9, 9, 9, a, a];test.clearRepeat(); //结果为[1, 6, 8, 9, a]// 方法二Array.prototype.clearRepeat function () {var arr [this[0]]; //直接定义结果数组for (var i 1; i this.length; i) { //从第二项开始遍历当前数组//对元素进行判断://如果当前数组元素在此数组中第一次出现的位置不是i//则第i项是重复的否则直接存入结果数组if (this.indexOf(this[i]) i) {arr.push(this[i]);}}return arr;};var test [1, 6, 8, 8, 9, 9, 9, a, a];test.clearRepeat(); //结果为[1, 6, 8, 9, a]
// 上面两种方法不推荐使用因为indexOf()这个函数在执行的时候每次都会遍历一次数组
//对性能影响比较大。比较适合小数据量的数组。//第三种使用的是hash表把已经出现过的元素通过下标形式写入一个Object中
//下标的引用要比数组的indexOf()方法搜索节省时间Array.prototype.clearRepeat function() {var h {}; //定义一个hash表var arr []; //定义一个临时数组for (var i 0; i this.length; i) {if (!h[this[i]]) {h[this[i]] true;arr.push(this[i]);}}return arr;};var test [1, 6, 8, 8, 9, 9, 9, 1, a];console.log(test.clearRepeat()) //结果为[1, 6, 8, 9, a]
//此方法有缺陷作为下标在转换后会变成字符串
//那么对于1和“1”这样不同类型的值会对应到同一个下标而被去重。例如obj[1]和obj[1],是相同的Array.prototype.clearRepeat function() {var h {}; //定义一个hash表var arr []; //定义一个临时数组for (var i 0; i this.length; i) {var type typeof this[i];if (!h[this[i] type]) {h[this[i] type] true;arr.push(this[i]);}}return arr;};//不用hash表的解决办法吗使用原始sort()排序后相邻两个数值进行比较Array.prototype.clearRepeat function() {this.sort(); //数组排序var arr [this[0]]; //定义结果数组for (var i 1; i this.length; i) { //从第二项开始遍历当前数组//判断两个相邻元素是否相等如果相等说明数据重复否则将元素写入结果数组if (this[i] ! arr[arr.length - 1]) {arr.push(this[i])}}return arr}var test [1, 6, 8, 8, 9, 9, 9, 1, a];
5.写一个返回闭包的函数1.闭包函数是指有权访问另一个函数作用域中的变量的函数
2.创建闭包函数最常见的方式是在一个函数内创建另一个函数通过另一个函数访问这个函数的局部变量
3.闭包的特点1函数嵌套函数2 函数内部可以引用外部的参数和变量 3 参数和变量不会被垃圾回收机制回收4.闭包的优点1 希望一个变量长期驻扎在内存中 * 2 避免全局变量的污染 * 3 私有变量存在5.闭包的实现 1函数嵌套函数 * 2 外层函数返回内层函数 * 3 外面有一全局变量接受外层函数6.缺点 闭包使用不当会造成内存污染正常无法被垃圾回收机制清掉IE低版本会造成内存泄漏function fun1() {var num 1;return function () {num;return num;}}var s fun1()// console.log(s());// // 自执行函数 的闭包var fun3 function () {var num 1;return {b: 6,sum: function () {return num this.b}}}();// console.log(fun3.sum());/** 把函数名当参数调用* 回调函数** */function a() {console.log(a);}function b() {console.log(b);}function c(fun) {fun()}// c(a), c(b)// 循环var num 0;function a(fun) {console.log(123);fun(fun)}function a2(fun) {num;console.log(num);if (num 10) return;fun(a2)}a(a2)
6.使用递归完成1到100的累加 function add(num) {if (num 1) {return num;} else {return num add(num - 1)}}console.log(add(100));7.Javascript有哪几种数据类型1基本类型字符串类型string数字类型number布尔类型boolean2复杂类型数组类型array对象类型object函数类型function正则类型regexp3空类型undefine 和 null8.如何判断数据类型1、typeoftypeof 123, //numbertypeof dsfsf, //stringtypeof false, //booleantypeof [1,2,3], //objecttypeof {a:1,b:2,c:3}, //objecttypeof function(){console.log(aaa);}, //functiontypeof undefined, //undefinedtypeof null, //objecttypeof new Date(), //objecttypeof /^[a-zA-Z]{5,20}$/, //objecttypeof new Error() //objectArrayObjectnullDateRegExpError这几个类型都被typeof判断为object所以如果想要判断这几种类型就不能使用typeof了。NumberStringBooleanFunctionundefined如果想判断这几种类型那就可以使用typeof。2、instanceof 123 instanceof Number, //falsedsfsf instanceof String, //falsefalse instanceof Boolean, //false[1,2,3] instanceof Array, //true{a:1,b:2,c:3} instanceof Object, //truefunction(){console.log(aaa);} instanceof Function, //trueundefined instanceof Object, //falsenull instanceof Object, //falsenew Date() instanceof Date, //true/^[a-zA-Z]{5,20}$/ instanceof RegExp, //truenew Error() instanceof Error //trueinstanceof运算符需要指定一个构造函数或者说指定一个特定的类型它用来判断这个构造函数的原型是否在给定对象的原型链上NumberStringBoolean没有检测出他们的类型但是如果使用下面的写法则可以检测出来var num new Number(123);
var str new String(dsfsf);
var boolean new Boolean(false);还需要注意null和undefined都返回了false这是因为它们的类型就是自己本身并不是Object创建出来它们所以返回了false。3、constructorconstructor是prototype对象上的属性指向构造函数。根据实例对象寻找属性的顺序若实例对象上没有实例属性或方法时就去原型链上寻找因此实例对象也是能使用constructor属性的。var num 123;
var str abcdef;
var bool true;
var arr [1, 2, 3, 4];
var json {name:wenzi, age:25};
var func function(){ console.log(this is function); }
var und undefined;
var nul null;
var date new Date();
var reg /^[a-zA-Z]{5,20}$/;
var error new Error();function Person(){}
var tom new Person();// undefined和null没有constructor属性
console.log(tom.constructorPerson,num.constructorNumber,str.constructorString,bool.constructorBoolean,arr.constructorArray,json.constructorObject,func.constructorFunction,date.constructorDate,reg.constructorRegExp,error.constructorError
);
//所有结果均为true除了undefined和null之外其他类型都可以通过constructor属性来判断类型。4、toString()可以通过toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用传递要检查的对象作为第一个参数称为thisArg。var toString Object.prototype.toString;toString.call(123); //[object Number]
toString.call(abcdef); //[object String]
toString.call(true); //[object Boolean]
toString.call([1, 2, 3, 4]); //[object Array]
toString.call({name:wenzi, age:25}); //[object Object]
toString.call(function(){ console.log(this is function); }); //[object Function]
toString.call(undefined); //[object Undefined]
toString.call(null); //[object Null]
toString.call(new Date()); //[object Date]
toString.call(/^[a-zA-Z]{5,20}$/); //[object RegExp]
toString.call(new Error()); //[object Error]
总结以上的案例封装个方法function gettype(obj) {var type typeof obj;if (type ! object) {return type;}//如果不是object类型的数据直接用typeof就能判断出来//如果是object类型数据准确判断类型必须使用Object.prototype.toString.call(obj)的方式才能判断return Object.prototype.toString.call(obj).replace(/^[object (S)]$/, $1);
}5、jQuery中判断的方法jQuery.isArray(object)
jQuery.isFunction(value)
jQuery.isNumeric(value)
jQuery.isEmptyObject(obj)
jQuery.isPlainObject(value)9.console.log(12)和console.log(1-2)的打印结果‘12’和-1第一个是因为是字符串拼接第二种减法运算将2强制转化为数值类型进行的运算10.Js的事件委托是什么原理是什么事件委托通俗来说就是将元素的事件委托给它的父级或者更外级元素处理。事件流包括三个阶段事件捕获和冒泡类似只不过事件的顺序相反。即是从上级节点传递到下级节点目标阶段事件冒泡当下级节点触发某个事件的时候该事件会逐级向上触发上级节点的同类事件事件委托就是利用事件冒泡机制实现的事件委托的优点只需要将同类元素的事件委托给父级或者更外级的元素不需要给所有元素都绑定事件减少内存空间占用提升性能使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件11.如何改变函数内部的this指针的指向常用变量取代: var _this thiscall()的用法var obj {text: 我的两个爱好
}function getHobby(a, b) {console.log(this.text a 和 b)
}getHobby.call(obj, 足球, 羽毛球)
// 我的两个爱好足球和羽毛球apply()的用法var obj {text: 我的两个爱好
}function getHobby(a, b) {console.log(this.text a 和 b)
}getHobby.apply(obj, [足球, 羽毛球])
// 我的两个爱好足球和羽毛球bind()的用法var obj {text: 我的两个爱好
}function getHobby(a, b) {console.log(this.text a 和 b)
}getHobby.bind(obj, 足球, 羽毛球)()
// 我的两个爱好足球和羽毛球对比getHobby.call(obj, 足球, 羽毛球)getHobby.apply(obj, [足球, 羽毛球])getHobby.bind(obj, 足球, 羽毛球)()12.列举几种解决跨域问题的方式且说明原理1.什么是同源策略及其限制内容同源策略是一种约定它是浏览器最核心也最基本的安全功能如果缺少了同源策略浏览器很容易受到XSS、CSRF等攻击。所谓同源是指协议域名端口三者相同即便两个不同的域名指向同一个ip地址也非同源。当协议、子域名、主域名、端口号中任意一个不相同时都算作不同域。不同域之间相互请求资源就算作“跨域”。常见跨域场景如下图所示特别说明两点第一如果是协议和端口造成的跨域问题“前台”是无能为力的。第二在跨域问题上仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。这里你或许有个疑问请求跨域了那么请求到底发出去没有跨域并不是请求发不出去请求能发出去服务端能收到请求并正常返回结果只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求为什么 Ajax 就不会?因为归根结底跨域是为了阻止用户读取到另一个域名下的内容Ajax 可以获取响应浏览器认为这不安全所以拦截了响应。但是表单并不会获取新的内容所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF因为请求毕竟是发出去了。2、跨域解决方案1.jsonp 2.cors 3.postMessage 4.websocket 5. Node中间件代理(两次跨域) 6.nginx反向代理 7.window.name iframe8.location.hash iframe9.document.domain iframewebpack解决跨域 // 后端没设置跨域时可使用webpack进行配置// devServer: {// // 代理// proxy: {// // 只要请求地址有api都会匹配上// /api: {// target: http://132.232.94.151:3005,// ws: true,// // 允许跨域// changeOrigin: true,// pathRewrite: {// ^/api: //通过pathRewrite重写地址将前缀/api转为/// }// }// }// }13.谈谈垃圾回收机制的方式及内存管理14.写一个function 清除字符串前后的空格function trim(str) {if (str typeof str string) {return str.replace(/(^s*)|(s*)$/g,); //去除前后空白符}
}15.js实现继承的方法有哪些16.判断一个变量是否是数组有哪些办法17.let const var 有什么区别一var声明变量存在变量提升let和const不存在变量提升console.log(a); // undefined a已声明还没赋值默认得到undefined值
var a 100;
console.log(b); // 报错b is not defined 找不到b这个变量
let b 10;
console.log(c); // 报错c is not defined 找不到c这个变量
const c 10;二let、const都是块级局部变量{let a 1
}
console.log(a) // undefinedconst 的特性和 let 完全一样不同的只是1声明时候必须赋值const a
控制台报错2只能进行一次赋值即声明后不能再修改const a1
a2
控制台报错3如果声明的是复合类型数据可以修改其属性18.箭头函数与普通函数有什么区别那么箭头函数有哪些特点更简洁的语法没有this不能使用new 构造函数不绑定arguments用rest参数...解决使用call()和apply()调用捕获其所在上下文的 this 值作为自己的 this 值箭头函数没有原型属性不能简单返回对象字面量箭头函数不能当做Generator函数,不能使用yield关键字箭头函数不能换行19.随机取1-10之间的整数script
document.write(parseInt(10*Math.random())); //输出010之间的随机整数
document.write(Math.floor(Math.random()*101)); //输出110之间的随机整数
function RndNum(n){
var rnd;
for(var i0;in;i)
rndMath.floor(Math.random()*10);
return rnd;
}
document.write(RndNum(4)); //输出指定位数的随机数的随机整数引用部分:
1. 从1开始 至 任意值parseInt(Math.random()*上限1);
2. 从任意值开始 至 任意值parseInt(Math.random()*(上限-下限1)下限); function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under1);
case 2: return parseInt(Math.random()*(over-under1) under);
default: return 0;
}
}
document.write(fRandomBy(1,100)); //输出指定范围内的随机数的随机整数
20.new操作符具体干了什么21.Ajax原理22.模块化开发怎么做23.异步加载Js的方式有哪些24.xml和 json的区别25.webpack如何实现打包的26.常见web安全及防护原理27.用过哪些设计模式28.为什么要同源限制29.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别30.javascript有哪些方法定义对象31.说说你对promise的了解32.谈谈你对AMD、CMD的理解33.web开发中会话跟踪的方法有哪些34.介绍js有哪些内置对象35.说几条写JavaScript的基本规范36.javascript创建对象的几种方式37.eval是做什么的38.nullundefined 的区别39.[“1”, “2”, “3”].map(parseInt) 答案是多少40.javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么41.js延迟加载的方式有哪些42.defer和async43.说说严格模式的限制44.attribute和property的区别是什么45.ECMAScript6 怎么写class么为什么会出现class这种东西?46.常见兼容性问题47.函数防抖节流的原理48.原始类型有哪几种null是对象吗49.为什么console.log(0.20.10.3) //false50.说一下JS中类型转换的规则51.深拷贝和浅拷贝的区别如何实现52.如何判断this箭头函数的this是什么53. 和 的区别54.什么是闭包55.JavaScript原型原型链 ? 有什么特点56.typeof()和instanceof()的用法区别57.什么是变量提升58.all、apply以及bind函数内部实现是怎么样的59.为什么会出现setTimeout倒计时误差如何减少60.谈谈你对JS执行上下文栈和作用域链的理解61.new的原理是什么通过new的方式创建对象和通过字面量创建有什么区别62.prototype 和 proto 区别是什么63.使用ES5实现一个继承64.取数组的最大值ES5、ES665.ES6新的特性有哪些66.promise 有几种状态, Promise 有什么优缺点 ?67.Promise构造函数是同步还是异步执行then呢 ?promise如何实现then处理 ?68.Promise和setTimeout的区别 ?69.如何实现 Promise.all ?70.如何实现 Promise.finally ?71.如何判断img加载完成72.如何阻止冒泡73.如何阻止默认事件74.ajax请求时如何解释json数据75.json和jsonp的区别?76.如何用原生js给一个按钮绑定两个onclick事件77.拖拽会用到哪些事件78.document.write和innerHTML的区别79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别80.浏览器是如何渲染页面的81.$(document).ready()方法和window.onload有什么区别82.jquery中.get()提交和post()提交有区别吗83.对前端路由的理解前后端路由的区别84.手写一个类的继承85.XMLHttpRequestXMLHttpRequest.readyState;状态码的意思
