【面试题】作用域面试题_前端作用域面试题(1)

3. 块级变量 （）{} 只能在{}生效

函数作用域作用

• 隔离变量，不同作用域下同名变量不会有冲突
• 变量有一个坑，特殊情况
• 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

function fn(){
   num = 10
}
console.log(num)// 10
// 函数里面的形参是局部变量

作用域链：就近原则

//具名函数: 
function fn(){
   // fn 是函数名
    }  
//匿名函数 
let sum = function(){
   // sum 不是函数名，只是一个变量
   } 

立即执行函数

立即执行，无需调用 避免全局变量之间的污染

//写法一：
function(形参){
   })(实参)   
function fn(形参){
  //可写函数名，可不写 
   })(实参)
//写法二：
(function(形参){
   }(实参))

多个立即执行函数必须加结束符，否则报错

(function(){
   console.log(111)
   })()；
(function(){
   console.log(222)
  })()；

当函数没有设置形参，而调用时传递了实参，会在函数内默认用arguments这个伪数组来存储实参，说他是伪数组是因为没有 pop push等方法，但是有length属性

原生js

document.querySelector('css选择器')返回匹配的第一个元素 得到的都是一个DOM对象 document.querySelectorAll('css选择器')返回所有匹配的元素，放在一个伪数组里

let box = document.querySelector('div')
box.className = 'active' 
// 原生js增加类，active 是类名但是会覆盖之前的类，当要修改很多样式时，可以将之前的类也写在=‘’里面

通过classList操作类控制CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名语法:

1. 追加一个类 元素. classList.add('类名')
2. 删除一个类 元素.classList.remove('类名')
3. 切换一个类 元素. classList.toggle('类名')

定时器–间歇函数

• 返回值 intervalID 是一个非零数值，用来标识通过setInterval()创建的定时器，这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。
• 一般let 一个变量来存储返回值，方便后续清除定时器 // clearInterval（存储返回值的变量）

开启定时器

//写法一：函数代码写在里面
setInterval（function（）{
console.log('你好啊')
}，1000）//每间隔1s ,就会调用这个函数一次

//写法二：在外面定义一个函数，在setInterval（函数名，1000），只写函数名，不写（），因为一写就是调用，会立即执行，定时器就失去作用
function show（）{
   console.log('你好啊')
}
setInterval（show，1000）

定时器–延迟函数

let qq  = setTimeout（function（
    console.log(111)
）{
}10000） // 会在10s后调用这个函数，只会执行一次  

//清除延时 
clearTimeout（qq）

实例化时间对象

new Date()
//获取当前本地时间
let operateTime = new Date().toLocaleString()

时间格式化

<div> {{item.date | format('yyyy-MM-dd hh-mm-ss')}} </div>

Vue.filter('format',function(value,arg){
  function dateFormat(date,format){
    if(typeof date === "string"){
       var mts = date.match(/(\/Date\((\d+)\)\/)/);
       if(mts && mts.length >= 3){
             date = parseInt(mts[2]);
           }
      }
      date = new Date(date);
      if(!date || date.toUTCString() == "Tnvalid Date") {
          return "";
       }
       var map = {
           "M":date.getMonth() + 1,  // 月份
          “d”：date.getDate(),  // 日
            “h”：date.getHours(),  // 小时
             “m”：date.getMinutes(),  // 分
            “s”：date.getSeconds(),  // 秒
            “q”：Math.floor((date.getMonth() + 3) / 3),  // 季度
              “S”：date.getMilliseconds(),  // 毫秒
        }；
       format = format.replace(/([yMdhmsqS])+/g,function(all,t){
          var v = map[t];
          if(v !== undefined) {
                if(all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                 }
                 return v;
           }else if (t == 'y'){
                return (date.getFullYear() + ' ').substr(4 - all.length);
           }
           return all;
        });
       return format;
   }
})

判断类型

instanceof

• 只能判断对象的具体类型（判断对象里面的属性和方法）
• 其中instance 是实例 例子的意思
• 能用===判断类型的只有两种 null undefined ，因为这两个类型只有一个值

typeof

• 返回数据类型的字符串表达式
• typeof 判断不了null 与 object ，object与array
• 可以判断undefined /字符串/数值/Boolean/function
• null 和undefined 没有toString()方法
• undefined是变量定义了但未赋值
• null 是var a = null 定义赋值了，值为null
• 初始赋值为 null，表明将要赋值为变量
• 结束前，赋值为null,是为了让对象成为垃圾对象，被垃圾回收器回收

console.log(typeof null)   // 'object'

• 数据类型分为 基本类型 和 对象类型
• 变量类型分为 基本类型和引用类型（变量内存值的类型）
• 基本类型：保存的就是基本类型的数据
• 引用类型：保存的是地址值

var c = {},c 保存的是这个对象的地址值，c准确的说是引用类型，{}这个数据，也是对象c

正则表达式

1. 设定规则
2. 进行检测匹配

let reg = /前端/
let str = '我要学前端'

检测方法一：reg.test(str)

• 判断是否有符合规则的字符串

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】