八股 JS

aPurpleBerry

已于 2024-09-27 20:25:35 修改

阅读量1.1k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： JavaScript 练习题文章标签： javascript

于 2024-09-02 21:22:15 首次发布

本文链接：https://blog.youkuaiyun.com/yavlgloss/article/details/141824062

JavaScript 同时被 2 个专栏收录

30 篇文章

订阅专栏

练习题

2 篇文章

订阅专栏

JavaScript 数据类型

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

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

数据类型判断 instanceof 和 typeof 的区别

typeof
优点：能够快速区分基本数据类型
缺点：不能将Object、Array和Null区分，都返回object
instanceof
优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象
缺点：Number，Boolean，String基本数据类型不能判断
Object.prototype.toString.call()
优点：精准判断数据类型
缺点：写法繁琐不容易记，推荐进行封装后使用

var toString = Object.prototype.toString;
console.log(toString.call(1));      //[object Number]
console.log(toString.call(true));   //[object Boolean]
console.log(toString.call('mc'));   //[object String]
console.log(toString.call([]));     //[object Array]
console.log(toString.call({}));     //[object Object]
console.log(toString.call(function(){})); //[object Function]
console.log(toString.call(undefined));  //[object Undefined]
console.log(toString.call(null)); //[object Null]

var, const, let 三者之间的区别

ES6之前创建变量用的是var,之后创建变量用的是let/const

var 存在变量提升，而const和let不存在变量提升；
let 不能重复定义；关键字允许值的修改；
const 不能重复定义；关键字不允许的修改；

深拷贝浅拷贝的区别

【浅拷贝】：如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址
① Object.assign
② Array.prototype.slice(), Array.prototype.concat()
③ 使用拓展运算符实现的复制
【深拷贝】：深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性
常见的深拷贝方式有：
① _.cloneDeep()
② jQuery.extend()
③ JSON.stringify()
④ 手写循环递归

JS 中 this 的情况

1、普通函数调用：通过函数名()直接调用：this指向全局对象window（注意let定义的变量不是window属性，只有window.xxx定义的才是。即let a =’aaa’; this.a是undefined）

2、构造函数调用：函数作为构造函数，用new关键字调用时：this指向新new出的对象

3、对象函数调用：通过对象.函数名()调用的：this指向这个对象

4、箭头函数调用：箭头函数里面没有 this ，所以永远是上层作用域this（上下文）

5、apply和call调用：函数体内 this 的指向的是 call/apply 方法第一个参数，若为空默认是指向全局对象window。

6、函数作为数组的一个元素，通过数组下标调用的：this指向这个数组

7、函数作为window内置函数的回调函数调用：this指向window（如setInterval setTimeout 等）

列举 ES6 的新特性

let 和 const
Promise
Class
箭头函数
函数参数默认值
模版字符串
解构赋值
展开语法
构造数组，调用函数时，将数组表达式或 string 在语法层面展开
对象属性缩写
键名和键值相同
函数省略 function
模块化

GC 垃圾回收机制

项目中，如果存在大量不被释放的内存（堆/栈/上下文），页面性能会变得很慢。造成内存泄漏。我们尽可能减少使用闭包，因为它会消耗内存。常见的内存泄露:全局变量、闭包、DOM 元素的引用、定时器。

Javascript 具有自动垃圾回收机制 (GC:Garbage Collecation)，垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

① 标记清除:当变量进入执行环境时，被标记为“进入环境”，当变量离开执行环境时，会被标记为“离开环境”。垃圾回收器会销毁那些带标记的值并回收它们所占用的内存空间。

② 谷歌浏览器：“查找引用”，浏览器不定时去查找当前内存的引用，如果没有被占用了，浏览器会回收它；如果被占用，就不能回收。

③ IE 浏览器：“引用计数法”，当前内存被占用一次，计数累加1次，移除占用就减1，减到0时，浏览器就回收它。

常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
IE6 双边距 bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline; 将其转化为行内属性。
设置较小高度标签（一般小于 10 px），在 IE6，IE7 中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden; 或者设置行高 line-height 小于你设置的高度。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover 和 active 了。解决方法是改变 CSS 属性的排列顺序 :L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}