Javascript 面试题合集~~~

151 阅读7分钟

一. for循环与forEach之间的区别?

- for循环介绍: 执行效率最高

  1. for循环本质上执行的是for循环本身跟数组的循环没有任何关系;
  2. for循环本质上不是真的在循环遍历数组的每一项,只是通过for循环生成数组中对应得索引下标;
  3. for循环可以通过修改循环变量的数值 控制循环进程;
  4. for循环可以通过break来终止循环进程;
<script>
    var arr = [100,200,300,400,500,600,700,800,900];
    for( var i = 0 ; i <= arr.length-1 ; i++ ){
    
    if( i === 3 ) break;
    console.log( arr[i] );//100 200 300
    
        }
</script>

- forEach介绍: 执行效率最低.一般用于循环遍历标签对象伪元素

  1. 语法: 数组.forEach( function(value,index,origin){ } )
  2. forEach 执行的是指针操作(指针指向谁,程序就操作谁)
  3. forEach 不能控制循环进程
  4. forEach 不能定义 break 关键词 ;
  5. forEach 的循环不能终止;
指针操作执行步骤简述:
首先:每次循环指针先判断当前指向的内容是不是数组的合法单元;
其次:如果是数组的合法元素
                  获取 当前单元的 数据数值 存储到参数1中;
                  获取 当前单元的 索引下标 存储到参数2中;
                  获取 当前单元的 原始数组 存储到参数3中;
最后执行 {} 中的 函数程序
函数程序执行结束 指针向右移动一个单位;
<script>
     var arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
     arr.forEach( function( value , index ){
     
     console.log( value , index );

        })
</script>

- 两者之间的区别:

  1. for循环可以使用break跳出循环,但forEach不能。
  2. for循环可以控制循环起点(i初始化的数字决定循环的起点),forEach只能默认从索引0开始。
  3. for循环过程中支持修改索引(修改 i),但forEach做不到(底层控制index自增,无法左右它)。

二. for...in 和 for...of 循环的区别 ?

- for...in 循环介绍: 经常用于循环遍历对象的函数

  1. JavaScript自动从数组的第一个单元循环至数组的最后一个单元;
  2. 每次循环将当前循环单元的索引下标 以[字符串形式] 存储到变量中;
  3. 循环进程不可控 不可改变;
  4. 可以通过 'break 终止循环进程;
语法:
    for( var 变量 in 数组 ){
            //变量 ->存储的是数组单元的索引下标;
            //数组[变量] -> 存储的是数组单元的数据数值
                    }
案例:
 <script>
     var arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
     for (var index in arr) {
         if (index === '3') break;
         
         console.log(index, arr[index]);

        }
 </script>

- for...of 循环介绍: 用于遍历迭代操作

  1. 每次循环将当前循环单元的数据数值存储到变量中;
  2. 循环进程不可控不可改变;
  3. 可以通过 break 终止循环;
  4. 同for...in 循环执行相似;
语法:
   for( var 变量 of 数组 ){
          //变量 存储的是数组单元的数据数值;
                        
                    }
案例:
    var arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    for (var value of arr) {
      if (value === 300) break;

       console.log( value );

        }

- 两者之间的区别:

  1. for in 用于遍历对象的键(key),for in会遍历所有自身的和原型链上的可枚举属性。如果是数组,for in会将数组的索引(index)当做对象的key来遍历,其他的object也是一样的。
  2. for ofes6引入的语法,用于遍历 所有迭代器iterator,其中包括HTMLCollection,NodeList,ArrayMapSetStringTypedArrayarguments等 对象的值(item)。

数组方法 forEach 和 map 的区别 ?

- 两者之间的区别:

  1. forEachmap 都是循环遍历数组中的每一项。forEach( )map( ) 里面每一次执行匿名函数都支持3个参数:数组中的当前项 item,当前项的索引 index,原始数组 input。匿名函数中的this都是指Window。只能遍历数组。
  2. 他们的区别是:forEach没有返回值,但map中要有返回值,返回处理后的所有新元素组成的数组。

二.window.localStorage 和 cookie 的区别 :

区别:
1. cookie的执行:必须要通过服务器;
2. localStorage的执行 本地运行就可以;

1. cookie有时效性,超过时效时间自动删除;
2. localStorage 没有时效性 除非执行删除操作才能删除;

1. cookie有路径 符合路径的文件才能访问;
2. localStorage 路径不能修改,默认设定的是根目录;

1. cookie 只能存储普通字符串,不能存储对象 数组 函数 json字符串;
2. localStorage 可以存储 json字符串,也就是  localStorage可以将数组对象转化为 json字符串存储;

1. cookie: 一般存储数据量都比较小,一般浏览器存储4K左右;
2. localStorage: 一般存储量比较大,一般浏览器存储 4M左右;

1. cookie: 前段程序 后端程序都可以操作;
2. localStorage: 只能JavaScript操作;

1. cookie: 一般存储简单的数据片段;
2. localStorage: 一般存储复杂数据的json字符串;

1. cookie:有JS的时候就存在了;
2. localStorage: H5出现以后才有;

1. cookie: 在前后端交互中,会跟随页面的请求自动携带;
2. localStorage: 在前后端交互中,不会跟随请求自动携带;

1. cookie: 默认是会话级别,可以手动设置过期时间;
2. localStorage: 不能手动设置时间;


最后:cookie 和 localStorage都是本地存储数据,数据的安全性都比较低,不会存储敏感数据;

localStorage 和 sessionStorage的区别:

区别:

过期时间:
1. localStorage: 永久存储,除非手动删除;
2. sessionStorage: 临时存储;

跨页面通讯:
1. localStorage: 直接跨页面通讯;
2. sessionStorage: 只能是当前窗口 (页面)跳转的页面才能通讯;

共同点:
localStorage 和 sessionStorage 只能存储字符串,不能存储复杂数据类型;

说说你对作用域链的理解?

  • 作用域链的作用是: 保证执行环境里有权访问的变量和函数是有序的;作用域链的变量只能向上访问,变量访问到window 对象即被终止,作用域链向下访问变量是不被允许的;
  • 简单的说: 作用域链就是变量与函数的可访问范围,即作用域控制这变量和函数的可见性和生命周期;

函数的执行原理是什么?

  • 函数的封装过程:
  1. 在 堆内存 中开辟一个独立存储空间,用来准备存储 引用数据类型;
     操作系统会自动给这个存储空间分配一个内存地址;
   
  2. 在存储空间中 以字符串形式存储函数程序代码;
  
  3. 在栈内存中存储函数名称
     函数名称中存储函数存储空间的内存地址;
  • 函数的调用:
  1. 解析栈内存中变量名称中存储的内存地址
     找到堆内存中对应的存储空间
     读取存储空间中存储的函数程序;
     
  2. 形参赋值实参;
  
  3. 预解析/预解释/预编译
  
  4. 执行函数程序;

什么是执行空间?

  • 在函数的存储空间中再开辟一个独立的内存空间,专门用来存储函数中局部作用域变量,也就是函数中的变量和形参;当函数执行结束,这个空间就会被销毁/释放.这个空间中存储的函数的局部作用域变量/形参也就会被销毁/释放;这个空间称为执行空间;

JavaScript程序内存回收机制是什么?

  • 工作原理:是当变量进入环境时,将这个变量标记为“进入环境”。当变量离开环境时,则将其标记为“离开环境”。标记“离开环境”的就回收内存;
  • 工作流程:
  1. 函数执行时: 函数内部的局部作用域变量需要参与程序的执行,在运行的时候会给储存在内存中所有变量都加上标记;
  2. 函数执行结束: 函数内部的局部作用域变量就不再参与程序的执行.变量离开环境时,则将其标记为“离开环境”。
  • 工作目的: 触发执行计算机程序的内存回收机制,释放函数执行空间;释放函数执行空间中存储的局部作用域变量;减少内存占用,提高程序的执行效率;