JavaScript学习笔记:你必须要懂的原生JS,一

1、原始类型有哪几种?null是对象吗?原始数据类型和复杂数据类型存储有什么区别?

  • 原始类型有6种,分别是undefined,null,bool,string,number,symbol(ES6新增)

  • 虽然typeof null返回的值是object,但是null不是对象,而是基本数据类型的一种

  • 原始数据类型存储在栈内存,存储的是值

  • 复杂数据类型的地址存储在栈内存,指向存储在堆内存的值。当我们把对象赋值给另外一个变量的时候,复制的是地址,指向同一块内存空间,当其中一个对象改变时,另一个对象也会变化

2、typeof能否正确判断类型?instanceof呢?instanceof的实现原理是什么?

首先typeof能够正确地判断基本数据类型,但是除了null,typeof null输出的是对象

但是对对象来说,typeof不能正确地判断其类型,typeof一个函数可以输出'function',而除此之外,输出的全是object,这种情况下,我们无法准确的知道对象的类型

instanceof可以准确地判断复杂数据类型,但是不能正确判断基本数据类型。

instanceof是通过原型链判断的,A instanceof B,在A的原型链中层层查找,是否有原型等于B.prototype,如果一直找到A的原型链的顶端(null;即Object.prototype.proto),仍然不等于B.prototype,那么返回false,否则返回true

instanceof的实现代码:

// L instanceof R
function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
var O = R.prototype;// 取 R 的显式原型
L = L.__proto__; // 取 L 的隐式原型
while (true) {
if (L === null) // 已经找到顶层
return false;
if (O === L) // 当 O 严格等于 L 时,返回 true
return true;
L = L.__proto__; // 继续向上一层原型链查找
}
}

3、for of,for in和foreach,map的区别

  • for...of循环:具有iterator接口,就可以用for...of循环遍历它的成员(属性值)。for...of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象、Generator对象,以及字符串。for...of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。对于普通的对象,for...of结构不能直接使用,会报错,必须部署了Iterator接口后才能使用。可以中断循环

  • for...in循环:遍历对象自身的和继承的科枚举的属性,不能直接获取属性值。可以中断循环

  • forEach:只能遍历数组,不能中断,没有返回值(或认为返回值是undefined)

  • map:只能遍历数组,不能中断,返回值是修改后的数组

4、如何判断一个变量是不是数组?

  • 使用Array.isArray判断,如果返回true,说明是数组;

  • 使用instanceof Array判断,如果返回true,说明是数组;

  • 使用Object.prototype.toString.call判断,如果值是[object Array],说明是数组;

  • 通过constructor来判断,如果是数组,那么arr.constructor === Array(不准确,因为可以指定obj.constructor = Array)

5、类数组和数组的区别是什么?

类数组:

  1. 拥有length属性,其他属性(索引)为非负整数(对象中的索引会被当做字符串来处理)

  2. 不具有数组所具有的方法

类数组是一个普通对象,而真实的数组是Array类型

常见的类数组有:函数的参数arguments,DOM对象列表(比如通过document.querySelectorAll得到的列表),jQuery对象(比如$("div"))

类数组可以转换为数组

// 第一种方法
Array.prototype.slice.call(arrayLike, start);
// 第二种方法
[...arrayLike];
// 第三种方法:
Array.from(arrayLike);

任何定义了遍历器接口的对象,都可以用扩展运算符转为真正的数组

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象

6、== 和 === 有什么区别?

===不需要进行类型转换,只有类型相同并且值相等时,才返回true

==如果两者类型不同,首先需要进行类型转换。具体流程如下:

  1. 首先判断两者类型是否相同,如果相等,判断值是否相等;

  2. 如果类型不同,进行类型转换;

  3. 判断比较的是否是null或者是undefined,如果是,返回true;

  4. 判断两者类型是否为string和number,如果是,将字符串转换成number;

  5. 判断其中一方是否为boolean,如果是,将boolean转为number再进行判断;

  6. 判断其中一方是否为object且另一方为string、number或者symbol,如果是,将object转为原始类型再进行判断。

注意复杂数据类型,===比较的是引用地址

7、ES6中的class和ES5中的类有什么区别?

  1. ES6 class 内部所有定义的方法都是不可枚举的;

  2. ES6 class 必须使用new调用;

  3. ES6 class 不存在变量提升;

  4. ES6 class 默认即是严格模式;

  5. ES6 class 子类必须在父类的构造函数中调用super(),这样才有this对象;ES5中类继承的关系是相反的,现有子类的this,然后用父类的方法应用在this上。

8、数组的哪些API会改变原数组?

修改原数组的API有:splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原数组的API有:slice/map/forEach/every/filter/reduce/entry/entries/find

注:数组的每一项是简单数据类型,且未直接操作数组的情况下。

9、let、const以及var的区别是什么?

  • let和const定义的变量不会出现变量提升,而var定义的变量会提升;

  • let和const是JS中的块级作用域;

  • let和const不允许重复声明;

  • let和const定义的变量在定义语句之前,如果使用会抛出错误,而var不会;

10、在JS中什么是变量提升?什么是暂时性死区?

变量提升就是变量在声明之前就可以使用,值为undefined

在代码块内,使用let/const命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区“。暂时性死区也意味着typeof不再是一个百分百安全的操作

typeof x;//ReferenceError(暂时性死区,抛错)

let x;

typeof y;//值是undefined,不会报错

暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量