前端 javascript 基础常见面试题（一）-阿里云开发者社区

前端 javascript 基础常见面试题（一）

2022-11-10 102

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端 javascript 基础常见面试题

01-数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

02-检测数据类型

2.1-type of

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const num = 1
    const str = 'hello'
    const bool = true
    const nu = null
    const un = undefined
    const sym = Symbol('hello')
    const arr =[]
    const obj = {}
    const fn = function () {}
    const date = new Date()
    const reg = new RegExp()
    console.log(typeof num)
    console.log(typeof str)
    console.log(typeof bool)
    console.log(typeof nu)
    console.log(typeof un)
    console.log(typeof sym)
    console.log(typeof arr)
    console.log(typeof obj)
    console.log(typeof fn)
    console.log(typeof date)
    console.log(typeof reg)
  </script>
</body>
</html>

typeof可以正常检测出：number、boolean、string、object、function、undefined、symbol、bigint

检测基本数据类型，null会检测object，因为null是一个空的引用对象
检测复杂数据类型，除function外，均为object

2.2-instanceof

instanceof运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function Animal(name) {
      this.name = name
    }
    const dog = new Animal('大黄')
    console.log(dog instanceof Animal)
  </script>
</body>
</html>

检测数据类型：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function Animal(name) {
      this.name = name
    }
    const dog = new Animal('大黄')
    console.log(dog instanceof Object)
  </script>
</body>
</html>

注意：只能检测复杂数据类型

2.3-toString

toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。

对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。

Object.prototype.toString.call('') ;              // [object String]
Object.prototype.toString.call(1) ;               // [object Number]
Object.prototype.toString.call(true) ;            // [object Boolean]
Object.prototype.toString.call(Symbol());         // [object Symbol]
Object.prototype.toString.call(undefined) ;       // [object Undefined]
Object.prototype.toString.call(null) ;            // [object Null]
Object.prototype.toString.call(new Function()) ;  // [object Function]
Object.prototype.toString.call(new Date()) ;      // [object Date]
Object.prototype.toString.call([]) ;              // [object Array]
Object.prototype.toString.call(new RegExp()) ;    // [object RegExp]
Object.prototype.toString.call(new Error()) ;     // [object Error]
Object.prototype.toString.call(document) ;        // [object HTMLDocument]
Object.prototype.toString.call(window) ;          // [object global] window 是全局对象 global 的引用

2.4-constructor

constructor代表获取由哪个构造函数创建而出，可以检测出字面量方式创建的对象类型，因为字面方式创建，实际由对应类创建而出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const arr = []
    console.log(arr.constructor === Array)
  </script>
</body>
</html>

不是字面量的方式只会获取到构造函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function Animal(name) {
      this.name = name
    }
    const dog = new Animal('大黄')
    console.log(dog.constructor === Object) // false
    console.log(dog.constructor === Animal) // true
  </script>
</body>
</html>

2.4-isArray

isArray可以检测出是否为数组

const arr = []
Array.isArray(arr)

03-递减递增

后置递增，先返回后自加

let a = 1
a = a+++1
console.log(a)

前置递增，先自加后返回

let a = 1
a = ++a+1
console.log(a)

04-作用域

4.1 作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的作用：

提高了程序逻辑的局部性。
增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：

全局作用域
局部作用域（函数作用域）

4.2 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

4.3 局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

4.4 JS没有块级作用域(Es6之前)

块作用域由 { } 包括。
在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：

ava有块级作用域：

if(true){
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 报错

以上java代码会报错，是因为代码中 { } 即一块作用域，其中声明的变量 num，在 “{ }” 之外不能使用；

而与之类似的JavaScript代码，则不会报错：

Js中没有块级作用域（在ES6之前）

if(true){
var num = 123;
console.log(123); //123
}
console.log(num);   //123