【前端面试】变量和类型计算

今天药忘吃喽~ 2022-04-10 11:17 217阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

# 1.题目 #

*  1.JS使用typeof能得到哪些类型
 *  === 和 == 的选择
 *  JS中有哪些内置函数
 *  JS变量按存储方式分为哪些类型，并描述其特点
 *  如何理解JSON

# 2.知识点 #

## 2.1 值类型和引用类型 ##

值类型（boolean,string,number,null,undefined）

var a = 10;
    var b = a;
    a = 20;
    console.log(b); //10

引用类型（对象，数组，函数）

var a = {x:10}
    var b = a;
    a.x = 20;
    console.log(b); //20

值类型直接把值存储在堆中，把a赋值给b在内存中是又给b开辟了一块新的空间，存储了同样的值。

引用类型分两块存储，先在堆中存储一个实际的值，再在栈中存储一个堆中值的引用地址，指向堆中的对象。把a赋值给b是在栈中重新开辟一块空间存储的还是相同对象的引用地址，a和b存储的地址相同，指向的对象也相同。当对象值发生改变时，两者会同时改变。

引用类型的值一般都比较大，采用此种存储方式可以节省内存空间。

## 2.2 typeof运算符 ##

typeof 'abc' //string
    typeof 123  //number
    typeof true  //boolean
    typeof undefined  //undefined
    typeof null  //object
    typeof {a:10}  //object
    typeof [1,2,3]  //object
    typeof console.log()  //function

## 2.3 类型转换 ##

强类型转换：通过String（），Number（），Boolean（），parseInt（）函数强制转换

可能发生隐式类型转换的场景

*  字符串拼接
 *  使用==
 *  if语句
 *  逻辑循环

一、首先看双等号前后有没有NaN，如果存在NaN，一律返回false。

二、再看双等号前后有没有布尔，有布尔就将布尔转换为数字。（false是0，true是1）

三、接着看双等号前后有没有字符串, 有三种情况：

1、对方是对象，对象使用toString()或者valueOf()进行转换；  
2、对方是数字，字符串转数字；（前面已经举例）  
3、对方是字符串，直接比较；  
4、其他返回false  
四、如果是数字，对方是对象，对象取valueOf()或者toString()进行比较, 其他一律返回false

五、null, undefined不会进行类型转换, 但它们俩相等

上面的转换顺序一定要牢记，面试的时候，经常会出现类型的问题。

'100'==100  //转换成字符串
    ''==0  //转换成false
    undefined == null; // true
    1 == true; // true
    2 == true; // false
    0 == false; // true
    0 == ' '; // true
    NaN == NaN; // false
    [] == false; // true
    [] == ![]; // true

//在if中转换成false的：
    null
    undefined
    ''
    NaN
    0
    false

10 && 0  //0  10转换成true
    '' || 'abc' //abc   ''转换成false
    !window.abc  //true

## 2.4 null和undefined的区别 ##

null：是被赋值过的对象，刻意把一个对象赋值为null，故意表示其为空，不应有值，所以对象为null是正常的，typeof null 返回 'object' ，null可以转换为0

undefined 表示“缺少值”，即此处应有一个值，但还没有定义；转为数值时为NaN(非数字值的特殊值) typeof undefined 返回 'undefined'

# 3.题目解答 #

## 3.1 JS使用typeof能得到哪些类型 ##

## 3.2 === 和 == 的选择 ##

jquery源码中的写法：

除了以下方式其他全部使用 ===

if(obj.a == null){
       //相当于 obj.a === undefined || obj.a === null
    }

## 3.3 JS中有哪些内置函数 ##

单纯作为语言来说，不考虑node和浏览器web

*  Object
 *  Array
 *  Boolean
 *  Number
 *  String
 *  Function
 *  Date
 *  RegExp
 *  Error

内置对象：Math,JSON

## 3.4 JS变量按存储方式分为哪些类型，并描述其特点 ##

值类型何引用类型

## 3.5 如何理解JSON ##

JSON是JS中的一个内置对象

区别

*  JS对象 \{x:10\}
 *  JSON对象 \{'x':10\}
 *  JSON串 "\{'x':10\}"

//将JS对象转换成json串
    JSON.stringify({x:10});
    //将json字符串转换成json对象
    JSON.parse("{'x':10}");

# 3.6 严格模式 #

目的

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;  
　  
消除代码运行的一些不安全之处，保证代码运行的安全；

提高编译器效率，增加运行速度；

为未来新版本的Javascript做好铺垫。

特性

"use strict";

可以选择放在一个函数中或自定义作用域中。

**禁止this指向全局对象**

function f(){
    　　　　return !this;
    　　} 
    　　// 返回false，因为"this"指向全局对象，"!this"就是false
    　　function f(){ 
    　　　　"use strict";
    　　　　return !this;
    　　} 
    　　// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

**创设eval作用域**

正常模式下，Javascript语言有两种变量作用域（scope）：全局作用域和函数作用域。严格模式创设了第三种作用域：eval作用域。  
正常模式下，eval语句的作用域，取决于它处于全局作用域，还是处于函数作用域。严格模式下，eval语句本身就是一个作用域，不再能够生成全局变量了，它所生成的变量只能用于eval内部。

"use strict";
    　　var x = 2;
    　　console.info(eval("var x = 5; x")); // 5
    　　console.info(x); // 2

**全局变量显式声明**

v = 1; // 报错，v未声明
    　　for(i = 0; i < 2; i++) { // 报错，i未声明
    　　}

**禁止删除变量**

严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。

"use strict";
    　　var x;
    　　delete x; // 语法错误
    　　var o = Object.create(null, {'x': {
    　　　　　　value: 1,
    　　　　　　configurable: true
    　　}});
    　　delete o.x; // 删除成功

**函数不能有重名的参数**

**保留字**

为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。  
使用这些词作为变量名将会报错。

function package(protected) { // 语法错误
    　　　　"use strict";
    　　　　var implements; // 语法错误
    　　}

## 3.7 eval ##

1.没有必须使用的应用场景

2.不容易调试，可读性不好

3.在旧的浏览器中如果你使用了eval，性能会下降10倍。

4.容易xss

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、[金山软件][Link 1]、[百姓网][Link 2]等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://www.baidu.com/s?wd=%E9%87%91%E5%B1%B1%E8%BD%AF%E4%BB%B6&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[Link 2]: https://www.baidu.com/s?wd=%E7%99%BE%E5%A7%93%E7%BD%91&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[2018121912254161]: /images/20220331/b6cf0cef918f40ebba92d32ec1e471ab.png