原生js的一些题

Posted 2022-12-08 Lumbago～

1. V js组成

ECMAScript（js语法），DOM（页面文档对象模型），BOM（浏览器对象模型）

2.Js输出语句

alert弹出警示框

console.Log(输出的);浏览器控制台打印输出信息

prompt（）浏览器弹出输入框，用户可以输入

document.write() 在网页中输出内容

3.变量的命名规范

1 不能以数字开头

2 严格区分大小写

3 不能是关键字和保留字

4 变量要有意义

5 驼峰式命名法

4.Js数据类型分类类

1简单数据类型

其中包含number，string，Boolean，undefined，null

2复杂数据类型

其中包含Object

5.请写出转为字符串的方法？请写出转为数字型的方法？

toString 转为字符串

String 转为字符串（强制转换）

parseInt（string） 将字符串类型转换为数值型

parseFloat（string）讲字符串转换为浮点数值型

Number强制类型转换 强制转换为数值型

6.什么是标识符？规范是什么？

标识符：开发人员为变量，属性，函数，参数取的名字

规范：

1 是有字母，数字，下划线_，美元符$

2 不能以数字开头

3 不能是js里的关键字和保留字

4 驼峰式命名法

7.请写出逻辑运算符以及他们的运算规则

&& 逻辑与

两边都是true，才返回true，否则返回false

|| 逻辑或

两边只要有一个是true，就返回true，否则返回false

！ 逻辑非

用来取一个布尔值相反的值

8.请写出If双分支语句语法以及三元运算符语法？

If双分支语句语法：

语法：

If（条件表达式）

//条件成立执行的代码   如果

else   

//条件不成立执行的代码  否则

三元运算符语法：

语法：表达式1 ？ 表达式2 ： 表达式3；

执行流程：如果表达式1返回true，执行表达式2，如果返回false，执行表达式3

9.请写出switch分支流程语法以及执行流程

语法：

Switch（表达式）

Case value1：

//表达式 等于 value1 时执行的代码

Break；

Case value2：

//表达式 等于 value2 时执行的代码

Break；

Case value3：

//表达式 等于 value3 时执行的代码

Break；

Default：

//表达式不等于任何一个value时执行的代码

执行流程：

Switch表达式的值会与结构中的case的值做比较

如果匹配，则与该case关联的代码块会被执行，遇到break时停止，整个switch语句结束。

如果都不匹配，则执行default里的代码

10.Switch语句和if else if 语句的区别

1 一般情况下，他们可以互相替换

2 switch … case 通常处理case比较确定值的情况，而if else语句相比更加灵活，常用于范围判断

3 switch语句进行条件判断4，效率更高。而if else语句有几种条件就要判断几种

4 当分支比较少时，if else语句的执行效率比switch高

5 当分支比较多的时候，switch的执行效率比较高，而且结构更清晰

11.循环的目的是什么？写出for循环的语法以及执行思路？

目的：可以重复执行某些代码

语法：

For（初始化变量；条件表达式；操作表达式）

循环体

执行思路：

初始化变量：初始化一个计数器，记录次数

条件表达式：确定每一次循环是否能被执行，如果结构是true就继续循环，否则就退出循环。

操作表达式：每次循环最后执行的代码，通常用来为计数器变量更新

12.写出while循环的语法以及执行思路？

语法：

While（条件表达式）

//循环体

执行思路：

1 先执行条件表达式，如果返回true，就执行循环体，如果返回false，就退出循环，执行后面的代码

2 执行循环体

3 循环体执行完毕，继续判断条件表达式，如果条件仍然为true，继续执行循环体，直到条件为false，整个循环过程才结束

13.写出do while循环的语法以及执行思路？

语法：

Do

循环体代码

while（条件表达式）；

执行思路：

1 先执行一次循环体

2 在执行条件表达式，如果为true，继续执行循环体代码，如果为false，退出循环，执行下面的代码

14.arguments的使用

当不确定有多少参数传递的时候，用arguments来获取

arguments其实是当前函数的一个内置对象

arguments对象中存储了传递的所有实参

Arguments的展示形式是一个伪数组，可以遍历

伪数组有以下特点

1 具有length属性

2 按照索引的方式存储数据

3 不具有数组的push，pop等方法

15，return，break，continue的区别

return：不仅可以退出循环，还能返回return语句中的值，同时还可以结束当前函数体内的代码

break：结束当前的循环体（for，while，do while）

continue：结束本次循环，继续下一次循环（for，while，do while）

16， 全局变量和局部变量的区别

- 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

- 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

17，作用域链

只要是代码都一个作用域中，写在函数内部的局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

18，构造函数的注意事项

1. 构造函数约定首字母大写。

2. 函数内的属性和方法前面需要添加this，表示当前对象的属性和方法。

3. 构造函数中不需要 return 返回结果。

4. 当我们创建对象的时候，必须用 new 来调用构造函数。

19，new关键字的作用

1. 在构造函数代码开始执行之前，创建一个空对象；

2. 修改this的指向，把this指向创建出来的空对象；

3. 执行函数的代码

4. 在函数完成之后，返回this---即创建出来的对象

20，事件三要素

事件源（谁）：触发事件的元素

事件类型（什么事件）： 例如 click 点击事件

事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

21，常见的鼠标事件

onmouseover 移入、onclick 点击、onmouseout 移出、onmousemove 移动

onmouseup 抬起、onmousedown按下 onfocus 获取焦点 onblur 丧失焦点

22，innerText和innerhtml的区别

获取内容时的区别：

​ innerText会去除空格和换行，而innerHTML会保留空格和换行

设置内容时的区别：

innerText不会识别html，而innerHTML会识别

23，DOM元素的创建，增删改查和属性操作

创建：document.wirte、innerHTML、createElement

增加 appendChild insertBefore

删除 removeChild

改 修改元素的属性：src、href、title等

修改普通元素内容：innerHTML、innerText

修改表单元素：value、type、disabled、checked等

修改元素样式：style、className

查

DOM提供的API方法：getElementById、getElementsByTagName

H5新增的方法：querySelector、querySelectorAll

利用节点操作获取元素：

父 parentNode子 children 、

兄 弟 nextElementSibling\\previousElementSibling

属性操作

setAttribute：设置dom的属性值

getAttribute：得到dom的属性值

removeAttribute移除属性

24，DOM流的三个阶段以及使用方式和流程

三个阶段

捕获阶段

当前目标阶段

冒泡阶段

使用方式

事件：onclick 只能执行冒泡阶段 想要执行捕获阶段

可以使用addEventListener 如果把事件监听的第三个参数设置为true，将会是事件捕获

流程

事件捕获的一个过程，比如：document-->html-->body->father->son

冒泡阶段的过程，比如：son-->father->body->html->document

25，什么是事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象

26，事件委托的原理和作用

原理：给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

作用：

我们只操作了一次 DOM ，提高了程序的性能。

动态新创建的子元素，也拥有事件。

27，什么是BOM，BOM的主要组成有哪些

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

组成部分：

Document、location、navigation、screen、history

28，this的指向问题

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

方法调用中谁调用this指向谁

构造函数中this指向构造函数的实例

29，声明定时器和销毁定时器，两者之间的区别是什么

声明定时器：setTimeout() 、setInterval()  

销毁定时器：clearTimeout()、clearInterval()

setTimeout（）是延迟时间到了之后，就回去回调函数，只会调用1次，就结束这个定时器

setInterval() 每隔一段延迟时间，就会去调用回调函数，会持续的去调用

30,offset、client、scroll的用法

offset系列 经常用于获得元素位置 offsetLeft  offsetTop

client经常用于获取元素大小  clientWidth clientHeight

scroll 经常用于获取滚动距离 scrollTop  scrollLeft