js基础和面试题

2021-07-16 09:34:31 阅读：111 来源： 互联网

标签：面试题浏览器 DOM 对象基础 js 文档 var document

js 基础代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

</head>
<body>
	<div>
	</div>
	<script>
		// alert("弹窗")
		// confirm("待确认弹窗")
		// prompt("待输入弹窗")
		var myName1="声明变量赋值"
		var myName2="声明变量"+"拼接"
		var arr=[1,3,5] //var保存数组
		var anull=''		//var保存空值
		var number=2.4	//var保存浮点数
		arr.push(4,7,8) //将元素输出到数组
		arr.push([2,3]) //将数组作为元素输出到数组
		var array1=[3,4,6,7]
		array1.pop()//pop将末尾元素出栈
		// debugger
		array1=array1.shift()	//移除第一个元素
		array1=[2,4,6,8,10,12,14,16]
		array2=array1.unshift('12') //将一个元素 作为第一位入栈
		// js函数构建
		// function+defName+((形参),(形参))+{} 函数构建语法
		// defName() 函数调用语法
		var myGlobel = "cats"
		debugger
		function myFunction(){
			var myGlobel="dogs"
			var value = myGlobel
			return value
		}
		myFunction()
		/*
		switch(变量){
		 case 变量值1:
		  console.log("a");  //若变量与变量值1相同则执行该处代码
		  break;
		 case 变量值2:
		   console.log("b"); //若变量与变量值2相同则执行该处代码
		   break;
		 case 变量值3:
		   console.log("c"); //若变量与变量值3相同则执行该处代码
		   break;  
		 default:
		 console.log("d");  //若变量与所有的变量值不同，则执行该处的代码
		}
		*/
	   
	   // break为跳出当前语句，若没写break，后面的语句都会执行
	   
	   switch(2){
	    case 1:
	     console.log("a"); 
	    case 2:
	      console.log("b"); 
	    case 3:
	      console.log("c");  
	    default:
	    console.log("d");  
	   }
	   
	   //这里bcd都会输出
	   switch(2){
	    case 1: case 2: case 3:
	      console.log("c"); //当变量值为1，2，3中的任何一个时，都会在控制台打印出c
	      break;  
	    default:
	    console.log("d");  
	   }
	   //控制台打印出c
	   // 只要满足其中一个值则会输出
	</script>
</body>
</html>

面试题

js中let和const的区别

在现代js中，let＆const是创建变量的不同方式。在早期的js中，咱们使用var关键字来创建变量。 let＆const关键字是在ES6版本中引入的，其目的是在js中创建两种不同类型的变量，一种是不可变的，另一种是可变的。

const:它用于创建一个不可变变量。不可变变量是指其值在程序的整个生命周期[1]中永不改变的变量。

let: let用于创建一个可变变量，可变变量是像var这样的普通变量，可以任意次数地更改。

有关js生命周期[1]

我们通常定义的客户端生命周期起始于浏览器开始装载某个请求的特定数据，结束于浏览器发起一个新的请求（通常意味着页面的跳转或刷新）。客户端的javascript则作用于这个完整的生命周期过程中。

如果进一步细分，我们可以将客户端生命周期划分为从页面数据被装载到页面数据装载完毕的初始化阶段以及页面数据装载完毕一直到新的请求被发起之前的运行阶段。

在前一个阶段里，javascript代码被浏览器解析，运行环境被初始化，函数和闭包被建立，而那些可以被立即执行的指令被执行并实时地得到结果。

在后一阶段里，完成初始化的程序环境进入一个缺省的等待消息的循环，捕获用户操作引发的事件并作出正确响应，这种模式同经典的事件驱动模型非常接近。在这一阶段里，javascrip代码真正扮演一个界面交互行为处理者的角色。

DOM 简介

DOM 是 W3C（万维网联盟）的推荐标准。

DOM 定义了访问诸如 XML 和 XHTML 文档的标准。

“W3C 文档对象模型（DOM）是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。”

W3C DOM 被分为 3 个不同的部分/级别（parts / levels）：

核心 DOM

用于任何结构化文档的标准模型
XML DOM

用于 XML 文档的标准模型
HTML DOM

用于 HTML 文档的标准模型

DOM 定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。

您可以在我们的 W3C 教程中获得更多有关 W3C DOM 规范/级别的信息。

DOM在html中可以被粗浅的解释为一个从头至尾的树

HTML DOM Node Tree

DOM是一个标准，提供了一个模型，这个模型在es6中被广泛使用

一般js中称DOM操作，其实是对于树内的各标签的操作

比如添加，提取，获得数据

对于不同的DOM进行操作，有不同的提取手法

分别用不同的函数加以调用

操作DOM标签的各种JS方法

首先，我们可以从window.对象里访问到整个网页里的所有元素

，其次，document[2]是window的下级，可通过 window.document 属性对其进行访问。

Document 对象集合[2]

集合	描述
[all]	提供对文档中所有 HTML 元素的访问。
[anchors]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
[forms]	返回对文档中所有 Form 对象引用。
[images]	返回对文档中所有 Image 对象引用。
[links]	返回对文档中所有 Area 和 Link 对象引用。

语法：

createElement(tagName):通过DOM创建一个标签对象

例子：

创建一个input ，给他添加属性， type定义为text ， value定义为abc

var input = document.createElement(‘input’)

input.setAttribute(‘type’,‘text’)

input.setAttribute(‘value’,‘abc’)

语法：

appendChild(tagName):在父级标签内添加一个子标签对象

例子：

在div中添加一个input框,把创建的标签渲染到页面上

交互环境下

根据id选择器获取外层的div，然后可以输入div查看能否获取到

var div = document.getElementByid(“create”)

把input传入到div

div.appendChild(input)

常用语法：

insertAdjacentHTML(where,tagStr):父级标签内添加一个字标签字符串

beforeBegin :插入到获取到的标签的前方

afterEnd：插入到获取到的标签的后方

afterBegin: 插入到获取到的标签的子标签的前方

beforeEnd:插入到获取到的标签的子标签的后方

用字符串创建标签

定义一个变量，赋值

var str = ‘’

通过id选择到div元素

var div = document.getElementByid(“create”)

在div后边添加标签

div.insertAdjaventHTML(‘beforeEnd’,str)

获取当前浏览器的url，刷新

location.href :获取当前的url

location.href = “” ：重定向

location.reload() 刷新

location.href = location.href 刷新

JS 中的主要有哪几类错误

JS有三类的错误:

加载时错误：加载web页面时出现的错误(如语法错误)称为加载时错误，它会动态生成错误。

运行时错误：由于滥用html语言中的命令而导致的错误。

逻辑错误：这些错误是由于对具有不同操作的函数执行了错误的逻辑而导致的

如何通过类别名获取 dom 元素

在 JS 中使用document.getElementsByClassName() 方法来获取具有类名的元素。

JS的作用域链是什么及其作用

一般情况下，变量取值到创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

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

1、对于string,number等基础类型，==和===有区别

1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等。
2）同类型比较，直接进行“值”比较，两者结果一样。

2、对于Array,Object等高级类型，==和===没有区别

进行“指针地址”比较。

3、基础类型与高级类型，==和===有区别

1）对于==，将高级转化为基础类型，进行“值”比较。
2）因为类型不同，===结果为false。

===：全等 ==：值等

JS中的匿名函数是什么？

匿名函数：就是没有函数名的函数，如：

(function(x, y){
    alert(x + y);  
})(2, 3);

这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。

是否可以在JS中执行301重定向？

JS完全运行在客户端上。301是服务器作为响应发送的响应代码。因此，在JS中不可能执行301重定向

解释一下 “use strict” ?

“use strict”是Es5中引入的js指令。使用“use strict”指令的目的是强制执行严格模式下的代码。在严格模式下，咱们不能在不声明变量的情况下使用变量。早期版本的js忽略了“use strict”。

BOM 和 DOM 的关系

BOM全称Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。

DOM全称Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。

JS是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

象模型，是 HTML 和XML 的应用程序接口（API），遵循W3C 的标准，所有浏览器公共遵守的标准。