原生JS的面试题1-30题（整理过的），关注收藏，持续更新

燕穗子博客

已于 2022-06-01 21:43:36 修改

阅读量5.3k

点赞数 10

分类专栏： IT面试文章标签： javascript 开发语言 vscode java 面试

于 2022-04-18 21:14:43 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124259329

版权

IT面试专栏收录该内容

96 篇文章 35 订阅

订阅专栏

1:javascript的typeof返回的数据类型有：

Undefined，string，boolean，number，Object，Function

2: 3种强制类型转换和 2 种隐式类型转换?

强制类型转换：

（parseInt，parseFloat，Number）

隐式类型转换：

==，

操作符：+*/-；

辑运算符：|| &&

一元运算符 + -

3. split() 、join() 的区别

(1):Split()方法是切割成数组的形式，

用于把一个字符串分割成字符串数组，stringObject.split(a,b)这是它的语法，a是必须的决定个从a这分割，b不是必须的，可选。

(2):Join()方法是将数组转换成字符串

用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔符方法join("#");其中#可以是任意.

4. 数组方法 pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

5. 事件绑定和普通事件有什么区别

(1):普通添加事件的方法：

btn.onclick = function(){}

(2:)事件绑定方式添加事件：

btn.addEventListener("click",function(){ }

:区别

A:普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

B: addEventListener 不兼容低版本 IE

C:普通事件无法取消

D:addEventLisntener 还支持事件冒泡+事件捕获

6:IE 和 DOM 事件流的区别

(1):事件流:从页面中接收事件的顺序

(2):事件流主要分为三种

事件冒泡流(IE事件流)：事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)

事件捕获流(Netscape事件流)：不太具体的节点最先接收到事件，而最具体的节点应该最后接收到事件(在事件到达预定目标之前捕获到)

DOM事件流：事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会；然后是实际的目标接收事件；最后是冒泡阶段，可以在这个阶段对事件做出响应。

body>

   <div>

     <button id = 'btn'>点击<button>

   </div>

</body>

三种事件流分别是：

冒泡型事件模型(IE事件流)： button->div->body

捕获型事件模型(Netscape事件流)： body->div->button

DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)

(4):IE 和 DOM 事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加 on

4.this 指向问题

7. IE 和标准下有哪些兼容性的写法

Var event = event || window.event

var clientWidth = document.documentElement.clientWidth||document.body.clientWidth

Var target = event.srcElement||event.target

8:JS中的call()和apply()方法和区别

(1)、方法定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

(2):call 与 apply 的相同点：

方法的含义是一样的，即方法功能是一样的；

第一个参数的作用是一样的；

(3):call 与 apply 的不同点：两者传入的列表形式不一样

call可以传入多个参数；

apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

(4):存在的意义：改变this指向，实现（多重）继承

9:b继承a的方法（五种）

//继承的第一种方式：对象冒充

function Parent(name){

    this.name=name

    this.hello=function(){

        console.log('say hello');

    }

}

function Child(name,age){

//第一种，以一个临时属性为过度

//1:this.method是作为一个临时的属性，并且指向Parent所指向的对象，

this.method=Parent

//2:执行this.method方法，即执行Parent所指向的对象函数

this.method(name)

//3:销毁this.method属性，此时Child就已经拥有了Parent的所有属性和方法

delete this.method

this.age=age 

}



//继承的第二种方式：call()方法方式

function Parent(name){

this.name=name

this.hello=function(){

console.log('say hello');

}

}



Parent.prototype.test=function(){

console.log('test');

}

function Child(name,age){

//当前Child的实例对象去调用Parent的方法，并传name参数

Parent.call(this,name)

this.age=age 

}



//继承的第三种方式：apply()方法方式

function Parent(name){

this.name=name

this.hello=function(){

console.log('say hello');

}

}

function Child(name,age){

//当前Child的实例对象去调用Parent的方法，并传name参数,参数是个数组对象

Parent.apply(this,new Array(name))

this.age=age 

}



//继承的第四种方式：原型链方法

function Parent(name){

this.name=name

this.hello=function(){

console.log('say hello');

}

}

Parent.prototype.test=function(){

console.log('test');

}



function Child(name,age){

this.age=age 

}

//1:创建父类型的对象赋值给子类型的原型,认贼作父

Child.prototype=new Parent()

// 2:认祖归宗

Child.prototype.constructor=Child



// 继承第五种方式：混合了call方式、原型链方式

function Parent(name){

this.name=name

this.test=function(){

console.log('test');

}

}

Parent.prototype.sayHello=function(){

console.log('say hello');

}



function Child(name,age){

Parent.call(this,name)//将父类的属性继承过来

this.age=age

}

Child.prototype=new Parent()//将父类的原型上的方法继承过来

// 认祖归宗，否则Child的原型指向会指向Parent

Child.prototype.constructor=Child

注意：对象冒充，call和apply方法，无法直接继承原型上的方法

10.如何阻止事件冒泡和默认事件

1.event.stopPropagation()方法[ˌprɒpəˈɡeɪʃn]
这是阻止事件的冒泡方法，不让事件向documen上蔓延

2.event.preventDefault()方法[di'f:lt]
这是阻止默认事件的方法

3.return false ；
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件

IE：

window.event.cancelBubble = true;//停止冒泡. 这种方式，其他浏览器也可以用

window.event.returnValue = false;//阻止事件的默认行为

11:js添加删除替换插入到某个接点的方法

obj.appendChild()//添加

obj.removeChild()//删除节点

obj.insertBefore（插入节点，被插节点）//插入（前插后）

obj.replaceChild（新节点,旧节点）//替换（前替换后）

12:JavaScript中本地对象、内置对象和宿主对象

(1):本地对象就是 ECMA-262 定义的类（引用类型）

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

(2):内置对象: Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。Global中有isNaN()、parseInt()和parseFloat()方法,

(3):宿主对象:浏览器提供的对象。BOM和DOM。

(4):自定义对象

顾名思义，就是开发人员自己定义的对象

13:window.onload 和 document ready 的区别

(1).执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

$(document).ready 要比 window.onload 先执行

(2).编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

14.”==”和“===”的不同

== 表示相等（值相等），会自动转换数据类型。
===表示恒等（类型和值都要相等），不会转换
js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是===类型和值必须都相等。

15.javascript 的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，同源指的是：同协议，同域名和同端口,由王景公司提出来的安全协议

16. JavaScript 是一门什么样的语言，它有哪些特点？

javaScript是一种轻量级直译式脚本型语言，是一种动态类型、弱类型、基于原型的语言，它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。
Javascript的特点：
1、简单性：它的变量类型是采用弱类型，并未使用严格的数据类型。
2、动态性：它可以直接对用户或客户输入做出响应，无须经过Web服务程序
3、跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关。
4、安全性：只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

17.JavaScript 的数据类型都有什么？

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

引用数据类型：对象(Object)、数组(Array)、函数(Function)、Array、Date、RegExp等

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

常用的类型检测方法有：typeof 、instanceof 、Array.isArray()

18. 设置一个DIV的html 内容为 xxxx，字体颜色设置为黑色

var dom = document.getElementById(“ID”);

dom.innerHTML = “xxxx”

dom.style.color = “#000”

19.看下列代码输出为何？解释原因。

var a;

alert(typeof a); // undefined

alert(b); // 报错

解释：Undefined 是一个只有一个值的数据类型，这个值就是“undefined”,

使用var 声明变量但并未对其赋值进行初始化时，这个变量的值就是 undefined。而 b 由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

20. 看下列代码,输出什么？ null和object的关系，解释原因。

var a = null;

alert(typeof a); //object

解释：null 是一个只有一个值的数据类型，这个值就是 null。表示一个空指针对象

null的类型返回是object，这是由于历史原因造成的:

1995年JavaScript语言的第一版，所有值都设计成32位，其中最低的3位用来表述数据类型，object对应的值是000。当时，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），

完全没考虑null，只把它当作object的一种特殊值，32位全部为0。

这是typeof null返回object的根本原因。

21. 看下列代码,输出什么？解释原因。

undefined == null; // true

undefined 与 null 相等，但不恒等（===）

1 == true; // true

2 == true; // false

0 == false; // true

0 == ''; // true

NaN == NaN; // false

[] == false; // true

[] == [];//false 不同的堆内存

[] == ![]; // true

！的优先级要大于==的，所以先运算右边，![]-->结果为false

过程：[]==![] --> []==false --> 0==0 -->//true

22. 看代码给答案。

var a = new Object();

a.value = 1;

b = a;

b.value = 2;

alert(a.value);//2

23：数组Alert结果为：”This is Baidu Campus”

var stringArray = ["this", "is", "Baidu", "Campus"]

alert(stringArray.join(" "))

24. 已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”getElementById”。

var stringArray = ["this", "is", "Baidu", "Campus"];

// Alert结果为：”This is Baidu Campus”

// alert(stringArray.join(" "));

var foo='get-element-by-id'

function combo(msg) {

var arr = msg.split("-")//拆分数组

for (var i = 1; i < arr.length; i++) {

//选中每个值的第一位，变大写，然后截取剩余字符串，再拼串

arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);

}

msg = arr.join("");

return msg;

}

combo(foo)

25:var numberArray = [3,6,2,4,1,5];

1) 实现对该数组的倒排，输出[5,1,4,2,6,3]

numberArray.reverse()

2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]

numberArray.sort(function(a,b){return b-a})

26.输出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2021 年 12月 29 日，则输出 2021-12-29

var d = new Date();

// 获取年，getFullYear()返回 4 位的数字

var year = d.getFullYear();

// 获取月，月份比较特殊，0 是 1 月，11 是 12 月

var month = d.getMonth() + 1;

// 变成两位

month = month < 10 ? "0" + month : month;

// 获取日

var day = d.getDate();

day = day < 10 ? "0" + day : day;

alert(year + "-" + month + "-" + day);

27. 将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的

{$id}替换成 10，{$name}替换成 Tony （使用正则表达式）

let str = "<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>";

str = str.replace(/{\$id}/g, "10").replace(/{\$name}/g, "Tony");

console.log(str);

28:为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数 escapeHtml，将<, >, &, “进行转义

function escapeHtml(str) {

return str.replace(/[<>”&]/g, function (match) {

switch (match) {

    case "<":

    return "<";

    case ">":

    return ">";

    case "&":

    return "&";

    case "\”":

    return """;

}

});

}

console.log( escapeHtml('1\”2'));

29. foo = foo||bar ，这行代码是什么意思？为什么要这样写？

答案：if(!foo){ foo = bar}; //如果 foo 存在，值不变，否则把 bar 的值赋给 foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。 “&&”像爱情，就看你的false，一方有false都不行“||”像亲情，就看你的true，只要一方有true就可以

30. 看下列代码，将会输出什么?(变量声明提升)

var foo = 1;

(function () {

console.log(foo);//undefined

var foo = 2;

console.log(foo);//2

})();

解析：函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。

整理不易，各位同伴们，点击关注，收藏，点赞哦

燕穗子博客

关注

10
点赞
踩
46

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS的面试题1-30题（整理过的），关注收藏，持续更新

1:javascript的typeof返回的数据类型有：Undefined，string，boolean，number，Object，Function2:3种强制类型转换和 2 种隐式类型转换? 强制类型转换：（parseInt，parseFloat，Number）隐式类型转换：==，操作符：+*/-；辑运算符：||&&一元运算符 + -3. split() 、join() 的区别 (1):Split()方法是切割成数组的形式，用...
复制链接

扫一扫