实例题
- for(var i=1;i<3;i++){
- setTimeout(function(){
- console.log(i);
- },0);
- };// 打印两次 3
- for(var i=1;i<=3;i++){
- setTimeout(function(){
- console.log(i);
- },0);
- };// 打印三次 4
- for(var i=0;i<=3;i++){
- setTimeout(function(){
- console.log(i);
- },0);
- };// 打印四次 4
- for(var i=0;i<3;i++){
- setTimeout(function(){
- console.log(i);
- },0);
- };// 打印三次 3
JavaScript 事件处理器在线程空闲之前不会运行
- for(var i=1;i<=3;i++){
- setTimeout((function(a){
- // 改成立即执行函数
- console.log(a);
- })(i),0);
- };//1,2,3
数组去重
- var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
- function deRepeat(){
- var newArr=[];
- var obj={};
- var index=0;
- var l=arr.length;
- for(var i=0;i<l;i++){
- if(obj[arr[i]]==undefined)
- {
- obj[arr[i]]=1;
- newArr[index++]=arr[i];
- }
- else if(obj[arr[i]]==1)
- continue;
- }
- return newArr;
- }
- var newArr2=deRepeat(arr);
- alert(newArr2);
下面 Ul, 如何点击每一列的时候 alert 其 index?(闭包)
- <ul id=test>
- <li > 这是第一条</li>
- <li > 这是第二条</li>
<li > 这是第三条</li
- </ul>
- // 方法 1:
- var lis = document.getElementsByTagName('li')
- for (var i=0;i<3;i++){
- lis[i].index=i;
- lis[i].onclick=function(){
- alert(this.index)
- }
- }
- // 方法 2:
- var lis = document.getElementsByTagName('li')
- for(var i=0;i<3;i++){
- lis[i].index=i;
- lis[i].onclick=(function(a){
- return function(){
- alert(a)
- }
- })(i)
- }
对作用域上下文和 this 的理解
- var User ={
- count:1,
- getCount:functon(){
- return this.count;
- }
- }
- console.log(User.getCount)//1
- var func = User.getCount;
- console.log(func())//undefined
func 是在 window 的上下文中被在执行的, 所有访问不到 count 属性
### 快速排序
1. 在数据集之中, 找到一个基准点
2. 建立两个数组, 分别存储左边和右边的数组
3. 利用递归进行比较
- function quickSort(arr){
- if(arr.length<=1){
- return arr;// 如果数组只有一个数, 就直接返回;
- }
- var num = Math.floor(arr.length/2);// 找到中间数的索引值, 如果是浮点数, 则向下取整
- var numValue = arr.splice(num,1);// 找到中间数的值
- var left = [];
- var right = [];
- for(var i=0;i<arr.length;i++){
- if(arr[i]<numValue){
- left.push(arr[i]);// 基准点的左边的数传到左边数组
- }
- else{
- right.push(arr[i]);// 基准点的右边的数传到右边数组
- }
- }
- return quickSort(left).concat([numValue],quickSort(right));// 递归不断重复比较
- }
- alert(quickSort([32,45,37,16,2,87]));
this 对象的理解
this 是 js 的一个关键字, 随着函数使用场合不同, this 的值会发生变化
this 指的是调用函数的对象
this 一般指全局对象 global
如何改变 this 对象?
使用局部变量来代替 this 指针
- var name = "zhar";
- var obj = {
- name : "zhar",
- say : function(){
- var _this = this;// 使用一个变量指向 this
- setTimeout(function(){
- console.log(_this.name);
- },0);
- }
- }
- obj.say();// 非常常用的方法
使用 call 或 apply 方法
caller 和 callee 的作用?
caller 是返回一个对函数的引用, 该函数调用了当前函数;
callee 是返回正在被执行的 function 函数, 也就是所指定的 function 对象的正文
如果一对兔子每月生一对兔子; 一对新生兔, 从第二个月起就开始生兔子; 假定每对兔子都是一雌一雄, 试问一对兔子, 第 n 个月能繁殖成多少对兔子?(使用 callee 完成)
- var result=[];
- function fn(n){ // 典型的斐波那契数列
- if(n==1){
- return 1;
- }else if(n==2){
- return 1;
- }else{
- if(result[n]){
- return result[n];
- }else{
- //argument.callee()表示 fn()
- result[n]=arguments.callee(n-1)+arguments.callee(n-2);
- return result[n];
- }
- }
- }
1. 数组去重: 有一个数组包含 n 个元素, 可能重复, 请写一个算法去重该数组中的重复元素
- let arr =[1,2,2,3,5,5,5]
- let resultarr = [...new Set(arr)]
- console.log(resultarr)
- //[1,2,3]
2. 什么是 javascript?
JavaScript 是客户端和服务器端脚本语言, 可以插入到 html 页面中 JavaScript 也是面向对象编程语言
3. 什么是未声明和未定的变量?
未声明的变量是程序中不存在且未声明的变量
未定义的变量在程序中声明但尚未给出任何值的变量
4. 什么是全局变量? 这些变量如何声明, 使用全局变量有哪些问题?
全局变量是整个代码长度可用的变量也就是说这些变量没有任何作用域 var 关键字用于声明局部变量或对象如果省略 var 关键字, 则声明一个全局变量使用全局变量所面临的问题是本地和全局变量名称的冲突此外, 很难调试和测试依赖于全局变量的代码
5. 解释 JavaScript 中定时器的工作? 缺点?
定时器用于在设定的时间执行一段代码, 或者在给定的时间间隔内重复该代码通过 setTimeout,setInterval 和 claerInterval 来完成
setTimeout(function,delay)函数用于启动在所述延迟之后调用特定功能的定时器
setInterval(function delay)函数用于在提到的延迟中重复执行给定的功能, 只有在取消时才停止
clearInterval(ID)函数指示定时器停止
定时器在一个线程内运行, 因此事件可能需要排队等待执行
6.view 和 seeionState 有什么区别?
view 特定于会话中的页面
seeionState 特定于可在 web 应用程序中的所有页面上访问的用户特定数据
7.=== 运算符?
=== 被称为最严格等式运算符, 当两个操作数据具有相同的值而没有热河类型转换时, 该运算符返回 true
8. 如何使用 JavaScript 提交表单?
document.form[0].submit();
9.== 和 === 之间的区别?
== 仅检查值相等
=== 是一个更严格的等式判断, 如果两个变量的值或类型不同, 则返回 false
10.JavaScript 中有哪些类型的弹出框?
alertconfirm andprompt
11.void(0)怎么用?
void(0)用于防止页面刷新, 并在调用时传递参数 zero".
void(0)用于调用另一种方法而不刷新页面
12. 如何强制加载 JavaScript 中的其他页面?
- <script language="JavaScript" type="text/javascript">
- <!--location.href="http://newhost/newpath/newfile.html";//--></script>
13. 什么是 JavaScript cookie?
cookie 是用来存储计算机中的小型测试文件, 当用户访问网站以存储他们需要的信息是, 它将被创建
14. 解释 JavaScript 中闭包? 什么时候使用?
一个函数可以访问外部函数变量
15. 一个值如何附加到数组?
arr.[arr.length] = value;
16. 描述 JavaScript 中的匿名函数?
被声明为没有任何命名标识符的函数被称为匿名函数一般来说, 匿名函数在声明后无法访问
17.call()和. apply()之间区别?
函数 call()和. apply()在使用上非常相似, 只是有一点区别当程序员知道函数参数的编号后, 使用. call(), 因为他们必须在调用语句中被提及为参数另一方面, 当不知道数字时使用. apply(), 函数. apply()期望参数为数组
.call()和. apply()之间的基本区别在于将参数传递给函数
18. 定义事件冒泡?
JavaScript 允许 DOM 元素嵌套在一起在这种情况下, 如果单击子级的处理程序, 父级的处理程序也将执行同样的工作
19.JavaScript 中如何使用事件处理程序?
事件是由用户生成活动 (例如单击链接或填写表单) 导致的操作需要一个事件处理程序来管理所有这些事件的正确执行事件处理程序是对象的额外属性此属性包括事件的名称以及事件发生时采取的操作
20. 事件冒泡: 事件开始由最具体的元素接受, 然后逐级向上转播
事件捕捉: 事件由最不具体的节点先接收, 然后逐级向下, 一直到最具体的
DOM 事件流: 事件捕捉, 目标阶段, 事件冒泡
21. 什么是 ajax 和 json, 他们的优缺点?
ajax 是异步 JavaScript 和 XML, 用于在 web 页面中实现异步数据交互
优点: 可以使得页面不重载全部内容的情况下加载局部内容, 降低数据传输量
避免用户不断刷新或者跳转页面, 提高用户体验
缺点: 对搜索引擎不友好
要实现 ajax 下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
json 是一种轻量级的数据交换格式, ECMA 的一个子集
优点: 轻量级易于人的阅读和编写便于机器解析, 支持复合数据类型
22. 添加移除移动复制创建
creatDocumentFragment()创建 Dom 片段
creatElement()创建一个具体元素
createTextNode()创建一个文本节点
- appendChild() // 添加
- removeChild()// 移除
- replaceChild()// 替换
- insetBefore()// 插入
23. 想实现一个对页面某个节点的拖拽?
1. 给需要拖拽的节点绑定 mousedown,mousemove,mouseup 事件
2.mousedown 事件触发后, 开始拖拽
3.mousemove 时, 需要通过 eventclientX 和 clientYY 获取拖拽位置, 并实时更新位置
4.mouseup 时, 拖拽结束
5. 需要注意边界情况
- ### 24. 如何解决跨域问题
- JSONP:
原理: 动态插入 script 标签, 通过 script 标签引入一个 js 文件, 文件载入成功后悔执行 URL 参数中指定的函数, 并且会把我们需要的 json 数据作为参数传入
由于同源策略的限制, XmlHttpRequest 只允许请求当前源 (域名协议端口) 的资源, 为了实现跨域请求, 可以通过 script 标签实现跨域请求, 然后在服务端输出 json 数据并执行回调函数, 从而解决跨域的数据请求
优点: 兼容性好, 简单易用, 支持浏览器与服务器双向通信
缺点: 只支持 GET 请求
H5 中新引进 window.postMessage 方法来跨域传送数据
### 25. 谈谈你对 webpack 的看法
webpack 是一个模块打包工具, 可以使用 webpack 管理你的模块依赖, 并编译输出模块们所需的静态文件它能够很好的管理打包 web 开发中所用到的 HTMLJavaScriptCSS 以及各种静态文件(图片字体等), 让开发过程更加高效对于不同类型的资源, webpack 有对应的模块加载器, webpack 模块打包器会分析模块间的依赖关系, 最后生成了优化且合并后的静态资源
webpack 的两大特色:
1.code splitting(可以自动完成)
2.loader 可以处理各种类型的静态文件, 并且支持串联 操作
webpack 是以 commonJS 的形式来书写脚本, 但对 AMD//CMD 的支持也很全面, 方便旧项目进行代码迁移
webpack 具有 requireJS 和 borwserify 的功能, 但仍有自己的新特性
1. 对 commonJSAMDES6 的语法做了兼容
2. 对 jsCSS 图片等资源文件支持打包
3. 串联式模块加载器以及插件机制, 让其具有更好的灵活性和扩展性, 例如提供对 coffeesri;
4. 有独立的配置文件 webpack.config.js
5. 可以将代码切割成不同的块, 实现按需加载, 降低初始化时间
6. 支持 sourceUrls 和 sourceMaps, 易于调试
7. 具有强大的 plugin(插件)接口, 大多是内部插件, 使用起来灵活
8.webpack 使用异步 IO, 并具有多级缓存, 这使得 webpack 很快且在增量编译上更加快
### 26 创建 ajax 过程
(1)创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象.
(2)创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法 URL 及验证信息.
(3)设置响应 HTTP 请求状态变化的函数.
(4)发送 HTTP 请求.
(5)获取异步调用返回的数据.
(6)使用 JavaScript 和 DOM 实现局部刷新.
### 27 用过哪些设计模式
工厂模式:
构造函数模式: 使用构造函数方法, 解决了重复实例化的问题, 也解决了对象识别的问题,
1. 构造函数方法没有显示的创建对象
2. 直接将属性和方法赋值给 this 对象
3. 没有 return 语句
### 28 对闭包的理解
使用闭包主要是为了设计私有方法和变量
闭包的优点: 是可以避免全局变量的污染,
缺点: 闭包会常驻内存, 增大内存使用量, 容易造成内存泄露, 在 js 中, 函数就是闭包, 只有函数才会产生作用域的概念
闭包的三个特性:
1. 函数嵌套函数
2. 函数内部可以引用外部的参数和 变量
3. 参数和变量不会被垃圾回收机制回收
### 29 浏览器本地缓存
在较高版本的浏览器中, Js 提供了 seeionStorage 和 globalStorage. 在 H5 中提供了 localStorage 来取代 globalStorage.
H5 中的 web Storage 包括了两种存储方式:
sessionStorage 和 localStorage.
sessionStorage 用于本地存储的一个会话数据, 这些数据只有在同一个会话中的页面才能访问并且会话结束后数据也随之销毁因此 seeionStorage 不是一种持久化的储存, 仅仅是会话级别的存储
而 localStorage 用于持久化的本地存储, 除非主动删除数据, 否则数据是用于不会过期的
### 30 web storage 和 cookie 的区别
web storage 的概念和 cookie 相似, 区别是 它为了更大容量存储设计的 cookie 的大小是受限的(不能超过 4K, 最多只有 20 条), 并且每次你请求一个新的页面时, cookie 都会被发送过去, 这样无形中浪费了带宽, 另外 cookie 还需要指定作用域, 不可以跨域调用
除此之外, Web Storage 拥有 setItem,getItem,removeItem,clear 等方法, 不像 cookie 需要前端开发者自己封装 setCookie,getCookie
但是 cookie 也是不可以或缺的: cookie 的作用是与服务器进行交互, 作为 HTTP 规范的一部分而存在 , 而 Web Storage 仅仅是为了在本地存储数据而生
浏览器的支持除了 IE7及以下不支持外, 其他标准浏览器都完全支持(ie 及 FF 需在 web 服务器里运行), 值得一提的是 IE 总是办好事, 例如 IE7IE6 中的 userData 其实就是 javascript 本地存储的解决方案通过简单的代码封装可以统一到所有的浏览器都支持 web storage
localStorage 和 sessionStorage 都具有相同的操作方法, 例如 setItemgetItem 和 removeItem 等
- ### JavaScript 中如何检测一个变量是一个 string 类型? 写出函数实现
- typeof(obj) ==="string"
- typeof obj ==="string"
- obj.constructor ==="string"
- ### 用 js 去除字符串空格?
方法一: 使用 replace 正则匹配的方法
去除所有空格:
str =str.replace(\/s*/g,"")
去除两头空格:
str=str.repalce(/^\s*/\*$/g,"")
去除做空格:
str = str.replace( /^\s*/, );
去除右空格:
str = str.replace(/(\s*$)/g, "");
str 为要去除空格的字符串, 实例如下:
- var str = "23 23";
- var str2 = str.replace(/\s*/g,"");
- console.log(str2); // 2323
方法二: 使用 str.trim()方法
str.trim()局限性: 无法去除中间的空格,
- var str = "xiao ming";
- var str2 = str.trim();
- console.log(str2); //xiao ming
同理, str.trimLeft(),str.trimRight()分别用于去除字符串左右空格
方法三: 使用 jquery.$.trim(str)方法
$.trim(str)局限性: 无法去除中间的空格,
- var str = "xiao ming";
- var str2 = $.trim(str)
- console.log(str2); // xiao ming
- ### 如何获取浏览器 URL 中查询字符串中的参数?
- 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
- ### 写出 3 个使用 this 的典型应用
1. 在 HTML 元素事件属性中使用
<input type=button"onclick="showInfo(this);"value=" 点击一下>
2. 构造函数
- function Animal(name,color){
- this.name = name;
- this.color =color
- }
来源: https://blog.csdn.net/weixin_41384423/article/details/79713357