javascript面试题

目录

一、基础模块

1.js类型判断

2.js数组方法（谨记哪些能改变，哪些不能改变原数组）

3.JS 中 == 和 === 区别是什么？

4. JS中的Array.splice()和Array.slice()方法有什么区别

5. JS中的for···in和for···of的区别

6、js防抖和节流

一、基础模块

1.js类型判断

基本数据类型：Undefined、Null、Boolean、Number、String，Symbol
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

typeof

 	//验证简单数据类型,返回值是 类型所对应的 小写字母
    console.log(typeof false);
    console.log(typeof 100);
    console.log(typeof 'String');
    console.log(typeof undefined);
    //
    //验证复杂数据的类型
    console.log(typeof {});
    console.log(typeof null);  //打印出的是 object
    console.log(typeof function () { });
 		
  typeof 基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。
 另：用typeof检测构造函数创建的Number，String，Boolean都返回object
 基本数据类型中：null ,引用数据类型中的：Array，Object，Date，RegExp。不可以用typeof检测。都会返回小写的object

instanceof

 				console.log(bool instanceof Boolean);// false
 				console.log(num instanceof Number);// false
 				console.log(str instanceof String);// false
 				console.log(und instanceof Object);// false
 				console.log(nul instanceof Object);// false
 				console.log(arr instanceof Array);// true
 				console.log(obj instanceof Object);// true
 				console.log(fun instanceof Function);// true
 				console.log(s1 instanceof Symbol);// false
 
   instanceof运算符需要指定一个构造函数，或者说指定一个特定的类型，它用来判断这个构造函数的原型是否在给定对象的原型链上。
   返回值是 布尔类型的

constructor

 				console.log(bool.constructor === Boolean);// true
 				console.log(num.constructor === Number);// true
 				console.log(str.constructor === String);// true
 				console.log(arr.constructor === Array);// true
 				console.log(obj.constructor === Object);// true
 				console.log(fun.constructor === Function);// true
 				console.log(s1.constructor === Symbol);//true
 				
  constructor是prototype对象上的属性，指向构造函数。根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，
  就去原型链上寻找，因此，实例对象也是能使用constructor属性的
  

Object.prototype.toString.call

 		console.log(Object.prototype.toString.call(bool));//[object Boolean]
 		console.log(Object.prototype.toString.call(num));//[object Number]
 		console.log(Object.prototype.toString.call(str));//[object String]
 		console.log(Object.prototype.toString.call(und));//[object Undefined]
 		console.log(Object.prototype.toString.call(nul));//[object Null]
 		console.log(Object.prototype.toString.call(arr));//[object Array]
 		console.log(Object.prototype.toString.call(obj));//[object Object]
 		console.log(Object.prototype.toString.call(fun));//[object Function]
 		console.log(Object.prototype.toString.call(s1)); //[object Symbol]
 		
  Object.prototype.toString.call() 通过toString() 来获取每个对象的类型。
  为了每个对象都能通过 Object.prototype.toString() 来检测，
  需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用，
  传递要检查的对象作为第一个参数，称为thisArg。

Symbol是干嘛的：

Symbol是 ES6 引入了一种新的原始数据类型 ; Symbol不是直接存储数据的, 而是, 作为一个独一无二的key, 放置数据的, 防止数据因为重复, 无法存进数据对象中,例如: obj中,存入key为1和‘1’的值, 后面的会把前面的覆盖掉.

2.js数组方法（谨记哪些能改变，哪些不能改变原数组）

a）不会改变原数组哦：
concat()—连接两个或更多的数组，并返回结果。

every()—检测数组元素的每个元素是否都符合条件。

some()—检测数组元素中是否有元素符合指定条件。

filter()—检测数组元素，并返回符合条件所有元素的数组。

indexOf()—搜索数组中的元素，并返回它所在的位置。

join()—把数组的所有元素放入一个字符串。

toString()—把数组转换为字符串，并返回结果。

lastIndexOf()—返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map()—通过指定函数处理数组的每个元素，并返回处理后的数组。

slice()—选取数组的的一部分，并返回一个新数组。

valueOf()—返回数组对象的原始值。

b）会改变原数组哦：
pop()—删除数组的最后一个元素并返回删除的元素。

push()—向数组的末尾添加一个或更多元素，并返回新的长度。

shift()—删除并返回数组的第一个元素。

unshift()—向数组的开头添加一个或更多元素，并返回新的长度。

reverse()—反转数组的元素顺序。

sort()—对数组的元素进行排序。

splice()—用于插入、删除或替换数组的元素。

fill()—方法用于将一个固定值替换数组的元素

注意：修改数组，这就导致元素移动，下标也会改变

3.JS 中 == 和 === 区别是什么？

 let a = 1
 let b = '1'
 console.log(a==b)//true  不同类型间比较，转化成同一类型后的值”看“值”是否相等，
 console.log(a===b)//false  因为类型不同，=== 结果为false。
 注意：对于Array,Object等高级类型，==和===没有区别

4. JS中的Array.splice()和Array.slice()方法有什么区别

var arr=[0,1,2,3,4,5,6,7,8,9];//设置一个数组
console.log(arr.slice(2,7));//2,3,4,5,6
console.log(arr.splice(2,7));//2,3,4,5,6,7,8
//由此我们简单推测数量两个函数参数的意义,
slice(start,end)第一个参数表示开始位置,第二个表示截取到的位置(不包含该位置)
splice(start,length)第一个参数开始位置,第二个参数截取长度

5. JS中的for···in和for···of的区别

1、推荐在循环对象属性的时候，使用for…in,在遍历数组的时候使用for…of。
2、for…in 循环出的是 key，for…of 循环出的是 value
3、for…of 不能循环普通的对象，需要通过Object.keys()来强制使用

6、js防抖和节流

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

防抖 如果你在监听滚动事件，假设两秒以内用户在不断的平凡的触发onScroll事件，只有用户暂停滚动后，才会去执行响应的操作
 

// 函数防抖
var timer = false;
document.getElementById("xxxx").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};

// 节流throttle代码（定时器）：
var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

二、进阶模块

1.JS哪些操作会造成内存泄露
a. 意外的全局变量引起的内存泄露
b . 闭包引起的内存泄露.
c. 没有清理的DOM元素引用
d. 被遗忘的定时器或者回调
e. 子元素存在引起的内存泄露
2.是否可以在JS中执行301重定向？
JS完全运行在客户端上。301是服务器作为响应发送的响应代码。因此，在JS中不可能执行301重定向。
3.JS中的宿主对象与原生对象有何不同？
宿主对象:这些是运行环境提供的对象。这意味着它们在不同的环境下是不同的。例如，浏览器包含像windows这样的对象，但是Node.js环境提供像Node List这样的对象。

原生对象:这些是JS中的内置对象。它们也被称为全局对象，因为如果使用JS，内置对象不受是运行环境影响。

4、window的onload事件和domcontentloaded
window.onload：
当一个资源及其依赖资源已完成加载时，将触发onload事件。

document.onDOMContentLoaded：
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载。
区别：
①onload事件是DOM事件，onDOMContentLoaded是HTML5事件。
②onload事件会被样式表、图像和子框架阻塞，而onDOMContentLoaded不会。
③当加载的脚本内容并不包含立即执行DOM操作时，使用onDOMContentLoaded事件是个更好的选择，会比onload事件执行时间更早。