前端基础面试题

该博客涵盖前端面试常考知识点,包括JavaScript数据类型、null与undefined区别、面向对象继承方法、各类运算符区别,还有CSS设置屏幕自适应、冒泡排序、去重等操作,以及ES6、H5、CSS3新特性,和localStorage等存储方式区别、闭包理解等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.js中有哪些数据类型,并解释清楚原始数据类型和引用数据类型

js中共有null、undefined、string、number、Boolean、object六种数据类型
			原始数据类型:null、undefined、string、number、Boolean
			引用数据类型:object
		引用数据类型和原始数据类型的区别:
			a. 值存储方式不同:
				原始数据类型:将变量名和值都存储在栈内存中
				引用数据类型:将变量名存储在栈内存中,将值存储在堆内存中,并在栈内存中存储值的地址,该地址指向堆内存中的值
			b. 赋值方式不同:
				当给b赋值另一个a的值
					若a为原始数据类型:直接在栈内存中生成b值,两个变量以后进行值改变不会相互影响
					若a为引用数据类型:赋予b变量的是值地址,通过这个地址。两者指向的其实是堆内存中的同一个值,所以以后a,b任一变量对值进行改变,会直接影响另一个变量的值

2.null 与 undefined 的区别

		null 表示空对象指针;null表示一个标识被赋值了,且该标识赋值为“空值”
		undefined表示声明了标识,但没有给标识赋值

3.JavaScript 面向对象中实现继承的方法

		面向对象的基本特征有:封闭、继承、多态
		实现继承的方法:1)原型链
									 2)call()/apply()
									 3)混合方式(原型和call()/apply()结合)
									 4)  对象冒充

4.两个等号与 ‘===’ 区别

		==:不会考虑数据类型,值相等就返回true
		===:数据类型和值都要相等
  1.  for(var i = 0; i < 2; i++) {
     		setTimeout(function(){
     			console.log(i)   // 2  2
     		})
     	}
    

6.javascript 的 typeof 返回哪些数据类型

		1.返回数据类型
  			undefined
	  		string
	  		boolean
	  		number
	  		symbol(ES6)
	  		Object
	  		Function
	  2.强制类型转换
				Number(参数)把任何类型转换成数值类型
				parseInt(参数1,参数2)将字符串转换成整数
				parseFloat()将字符串转换成浮点数字
				string(参数):可以将任何类型转换成字符串
				Boolean()可以将任何类型的值转换成布尔值
			3.隐式类型转换

7.设置div高度和手机屏幕自适应

		body,html  { height: 100%;}
		div { height: 100%}

8.冒泡排序

		var arr = [3,2,1,6,5,4]
		for(var i = 0; i < arr.length - 1; i++) {
			for(var j = 0; j < arr.length - 1 - i; j++) {
				if(arr[j] > arr[j+1]) {
					var temp = arr[j];
					arr[j] = arr[j+1];
					arr[j+1] = temp;
				}
			}
		}
		console.log(arr);

9.去重

		var arr = [1,1,2,2,2,3,3,4,4,];
        var newArr = [];
        for(var i = 0; i < arr.length; i++) {
            for(var j = 0; j < newArr.length; j++) {
                if(newArr[j] == arr[i] ) {
                    break;
                }
            }
            if(j === newArr.length) {
                newArr[j] = arr[i];
            }
        }
        console.log(newArr); 

10.去除图片下面默认的空隙有两种方法:

1.display:block

2.vertical-align: middle

11.visiblity:hidden 和 display:none

display:none :隐藏后 在页面不占位置,各种属性值都消失,不占空间

visiblity:hidden:隐藏后再在页面还占位置,仅仅是在视觉上看不见,它占据的空间位置仍然存在

相同点:dom元素还都存在

12.ES6新语法:

let和const命令:

	let: 用来声明变量,let更规范化

		没有变量提升  (先赋值,后定义,会报错)

		有块级作用域 (大括号内定义的变量,在大括号外不能使用)

		不能重复声明变量 (标识符 a 已经声明过,就不能再声明  例如let a = 20; let a = 30)

	const:常量,一旦赋值就不能改变的量

		没有常量提升

		有块级作用域

		必须初始化值(声明的时候必须赋值)

	let 和const 区别:const速度更快

解构赋值:

	正常解构方式

		要解构的是对象,前面就是对象,要解构的是数组,前面就是数组,不能交叉使用。

		解构对象时,变量名一定要和对象的属性名相等const {name, type} = {name:'贾克斯',type:'战士'};

	(对象)有别名时解构:

		设置了别名,原来的变量名就会失效

	变量数量和对象单元不对等时:

		变量名少:正常赋值   从前往后赋值

		变量名多:多出来的赋值为undefined

	数组中的不对等:使用...方式

		数组项多的时候,前面的数组中最后一个使用...c   多余的值就会以数组形式保存在...c中

模板字符串(``):

	字符串中可以忽略单双引的嵌套问题

	在模板字符串中要输出变量可以使用${变量名}的形式

	不用担心换行问题

判断字符串是否包含子字符串:

	includes():返回布尔值,判断字符串中是否包含参数字符串

	startsWith():返回布尔值,判断参数字符串是否在源字符串的头部

	endsWith():返回布尔值,判断参数字符串是否在源字符串的尾部

	这三个方法与indexof和lastindexof的区别:

		①  想要知道参数字符串的位置还要使用indexof和lastindexof

		②  这三个方法不能传入正则表达式,indexof和lastindexof可以把正则表达式转换为字符串并搜索

	 str.padStart(8, '-'): 在str字符串前,使用'-'将str补充为8位长度

	 str.padEnd(10, 'md'): 在str字符串结尾,使用'md'将str补充为10位长度

数组扩展:

	includes:判断一个数组中是否包含另一个值

	find:返回满足条件的第一个值

	findIndex:返回满足条件的第一个值的索引

函数的扩展:

	函数参数的扩展:

		默认参数:函数调用时,没有设置参数,则会使用默认值

				函数调用时,设置了参数,则使用实参值

			function add (x=1,y=2) {

					return x + y;

			}

		rest参数(可变参数)

			function f(...values){

					console.log(values.length);

			}

			f(1,2);      //2

			f(1,2,3,4);  //4

箭头函数:

	() => {} //匿名箭头函数

	* 特点:

	* 1.不能作为构造函数

	* 2.没有arguments,动态参数要使用rest方式

	* 3.没有this对象,this对象是函数外层的对象

	* 4.如果函数体只有一行,可以省略return 和大括号

	* 5.如果只有一个参数,则不需要写小括号

定义对象的简洁方式

	在声明对象时,值的变量名和属性名相同时, 可以只写属性而不写值

新增的数据类型:symbol,表示独一无二的值,用来定义对象的唯一属性名

13.H5新特性:

用于绘画的canvas元素

用于媒介回放的video和audio元素

本地离线存储localStorage,sessionstorage

语义化标签:article、header、nav、footer、section

表单控件:calendar、date、time、email、url、search

14.CSS3新特性:

属性选择器

多背景

rgba()

在CSS3中唯一引入的伪元素是 ::selection

阴影 box-shadow

文字加特效 text-shadow,强制文本换行word-wrap , 线性渐变 linear-gradient

圆角border-radius

边框图片border-image

渐变

过渡 旋转,缩放,定位,倾斜:transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)

动画

媒体查询(@media),多栏布局(flex)

15.localStorage、sessionStorage和cookie的区别:

sessionStorage 用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储,而localStorage用于持久化的本地存储,除非主动删除,否则数据永远不会过期

webstorage 的概念和cookie 相似,区别是cookie的大小是受限的,而且每次请求一个新的页面cookie就会被发送过去,这样就浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用

除此之外,Web Storage 拥有 setItem,getItem,removeItem,clear 等方法,不像 cookie需要前端开发者自己封装 setCookie,getCookie。但是 Cookie 也是不可以或缺的:Cookie的作用是与服务器进行交互,作为 HTTP 规范的一部分而存在 ,而 Web Storage 仅仅是为了在本地“存储”数据而生。
cookie的弊端:
	每个特定的域名下最多生成20个cookie    IE620  IE750

16.说说对闭包的理解:

使用闭包主要是为了设计私有的方法和变量,闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄漏

闭包的三大特性:

	函数嵌套函数、函数内部可以引用外部的参数和变量、参数和变量不会被垃圾回收机制回收
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值