JavaScript面试核心考点

发布时间:2019年07月10日 阅读:112 次

JavaScript面试核心考点

Javascript是前端面试的重点,本文重点梳理下 Javascript 中的常考基础知识点,然后就一些容易出现的题目进行解析。限于文章的篇幅,无法将知识点讲解的面面俱到,本文只罗列了一些重难点。

 

变量类型

 

1.JS 的数据类型分类

根据 JavaScript 中的变量类型传递方式,分为基本数据类型和引用数据类型。其中基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增,表示独一无二的值),而引用数据类型统称为Object对象,主要包括对象、数组和函数。

 

在参数传递方式上,有所不同:

函数的参数如果是简单类型,会将一个值类型的数值副本传到函数内部,函数内部不影响函数外部传递的参数变量

 

如果是一个参数是引用类型,会将引用类型的地址值复制给传入函数的参数,函数内部修改会影响传递参数的引用对象。

 

题目:基本类型和引用类型的区别

基本类型和引用类型存储于内存的位置不同,基本类型直接存储在栈中,而引用类型的对象存储在堆中,与此同时,在栈中存储了指针,而这个指针指向正是堆中实体的起始位置。下面通过一个小题目,来看下两者的主要区别:

 image.png

// 基本类型

var a = 10

var b = a

b = 20

console.log(a) // 10

console.log(b) // 20

上述代码中,a b都是值类型,两者分别修改赋值,相互之间没有任何影响。再看引用类型的例子:

 

// 引用类型

var a = {x: 10, y: 20}

var b = a

b.x = 100

b.y = 200

console.log(a) // {x: 100, y: 200}

console.log(b) // {x: 100, y: 200}

上述代码中,a b都是引用类型。在执行了b = a之后,修改b的属性值,a的也跟着变化。因为a和b都是引用类型,指向了同一个内存地址,即两者引用的是同一个值,因此b修改属性时,a的值随之改动

 

2.数据类型的判断

1)typeof

typeof返回一个表示数据类型的字符串,返回结果包括:number、boolean、string、symbol、object、undefined、function等7种数据类型,但不能判断null、array等

 

typeof Symbol(); // symbol 有效

typeof ''; // string 有效

typeof 1; // number 有效

typeof true; //boolean 有效

typeof undefined; //undefined 有效

typeof new Function(); // function 有效

typeof null; //object 无效

typeof [] ; //object 无效

typeof new Date(); //object 无效

typeof new RegExp(); //object 无效

2)instanceof

instanceof 是用来判断A是否为B的实例,表达式为:A instanceof B,如果A是B的实例,则返回true,否则返回false。instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性,但它不能检测null 和 undefined

 image.png

[] instanceof Array; //true

{} instanceof Object;//true

new Date() instanceof Date;//true

new RegExp() instanceof RegExp//true

null instanceof Null//报错

undefined instanceof undefined//报错

3)constructor

constructor作用和instanceof非常相似。但constructor检测 Object与instanceof不一样,还可以处理基本数据类型的检测。不过函数的 constructor 是不稳定的,这个主要体现在把类的原型进行重写,在重写的过程中很有可能出现把之前的constructor给覆盖了,这样检测出来的结果就是不准确的。

 

4)Object.prototype.toString.call()

Object.prototype.toString.call() 是最准确最常用的方式,也是JavaScript面试核心考点的变量类型的基本知识

 

Object.prototype.toString.call('') ; // [object String]

Object.prototype.toString.call(1) ; // [object Number]

Object.prototype.toString.call(true) ; // [object Boolean]

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]

3.浅拷贝与深拷贝

浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。

 

浅拷贝的实现方式(详见https://github.com/ljianshu/Blog/issues/5):

 

Object.assign():需注意的是目标对象只有一层的时候,是深拷贝

 

Object.assign(target, ...sources);target:目标对象,sources:一个或多个源对象

 

注:Object.assign 可以把 n 个源对象拷贝到目标对象中去,如下

let m ={name: {asd: '123'}};

let n = Object.assign({}, m);

console.log(n);//{name: {asd: '123'}}

那到底是深拷贝还是浅拷贝呢,答案是修改第一级属性深拷贝,以后级别属性浅拷贝 。大家看下面两段代码

 

let s ={name: {asd: '123'}};

let d = Object.assign({}, s);

d.name.asd = '123456789';

console.log(d, s);//{name:{asd: "123456789"}},{name:{asd: "123456789"}}

let o ={name: {asd: '123'}};

let p = Object.assign({}, o);

p.name = '123456789';

console.log(p, o);//{name: "123456789"},{name: {asd: "123"}}

Array.prototype.concat()

 

Array.prototype.slice()

 image.png

深拷贝就是在拷贝数据的时候,将数据的所有引用结构都拷贝一份。简单的说就是,在内存中存在两个数据结构完全相同又相互独立的数据,将引用型类型进行复制,而不是只复制其引用关系。

 

深拷贝的实现方式:

 

热门的函数库lodash,也有提供_.cloneDeep用来做深拷贝

 

jquery 提供一个$.extend可以用来做深拷贝

 

JSON.parse(JSON.stringify())

 

手写递归方法

 

递归实现深拷贝的原理:要拷贝一个数据,我们肯定要去遍历它的属性,如果这个对象的属性仍是对象,继续使用这个方法,如此往复。

 

//定义检测数据类型的功能函数

function checkedType(target) {

return Object.prototype.toString.call(target).slice(8, -1)

}

//实现深度克隆---对象/数组

function clone(target) {

//判断拷贝的数据类型

//初始化变量result 成为最终克隆的数据

let result,

targetType = checkedType(target)

if (targetType === 'Object') {

result = {}

} else if (targetType === 'Array') {

result = []

} else {

return target

}

//遍历目标数据

for (let i in target) {

//获取遍历数据结构的每一项值。

let value = target[i]

//判断目标结构里的每一值是否存在对象/数组

if (checkedType(value) === 'Object' || checkedType(value) === 'Array') {

//对象/数组里嵌套了对象/数组

//继续遍历获取到value值

result[i] = clone(value)

} else {

//获取到value值是基本的数据类型或者是函数。

result[i] = value

}

}

return result

以上就是JavaScript面试核心考点的变量类型的基本知识,希望这篇文章对您有所帮助!

http://www.javascriptedu.com


Tag:JavaScript面试核心考点 js面试题知识点全解
相关文章

发表评论: