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

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

2022-11-10 124

版权

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

简介： 前端 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

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

01-数据类型

02-检测数据类型

2.1-type of

2.2-instanceof

2.3-toString

2.4-constructor

2.4-isArray

03-递减递增

04-作用域

4.1 作用域概述

4.2 全局作用域

4.3 局部作用域

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

01-数据类型

02-检测数据类型

2.1-type of

2.2-instanceof

2.3-toString

2.4-constructor

2.4-isArray

03-递减递增

04-作用域

4.1 作用域概述

4.2 全局作用域

4.3 局部作用域

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景