常见前端面试题（持续整理）

最新推荐文章于 2023-06-08 08:58:50 发布

√3-√2

最新推荐文章于 2023-06-08 08:58:50 发布

阅读量128

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_36001325/article/details/107207695

版权

随机生成20个150-250之间的整数然后排序

function random(min,max) {
	return Math.floor(Math.random()*(max-min)+min)
}
let arr = Array.from({length:20},()=>random(150,250))
let obj={}
for (let i=0;i<arr.length;i++){
	obj[arr[i]] = arr[i]
}
console.log(Object.values(obj))

算法题求数组 arr_list中哪两个数据想加等于target 用一个循环实现
输出的结果是
`

a[0]+a[1]=5
a[2]+a[5]=5
a[3]+a[7]=5`

let arr_list = [3, 2, 0, 1 , 7, 5, 9, 4, -6];
let target = 5 ;
sum(arr_list,target)
function sum (arr,target){
	var str=''
	for (let i=0;i<arr.length;i++) {
		
		let k = arr.indexOf(target-arr[i])
		if (k>-1 && k>=i){
			str+=`a[${i}]+a[${k}]=5\n`
		}
	}
	console.log(str)
}

vue双向数据绑定

var obj={}
Object.defineProperties(obj,'txt',{
	get:function(){
		return obj
	},
	set:function(newVal){
		document.getElementById('txt').innerHTML=newVal;
		document.getElementById('input').value=newVal;
	}
})
window.addEventListener('keyup',function(e){
	obj.txt = e.target.value;
})

经典面试题左侧固定右侧自适应两栏布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>博客</title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			/* 第一种 弹性盒子布局 */
			/* .container{
				display: flex;
				justify-content: flex-start;
				width: 100%;
				height: 100%;
			}
			.box1 {
				width: 200px;
				background: yellow;
			}
			.box2 {
				flex: 1;
				background: #ccc;
			} */
			
			/* 第二种 定位的方法 */
			/* .container{
				height: 100%;
				width:100%;
				position: relative;
			}
			.box1{
				position: absolute;
				left: 0;
				width: 200px;
				height: 100%;
				background: yellow;
			}
			.box2{
				position: absolute;
				left: 200px;
				width: 100%;
				height: 100%;
				background: #ccc;
			} */
			
			/* 第三种： 浮动的方法 左侧浮动 右侧不浮动右侧用margin来控制 右侧不要设置宽度*/
			/* .container{
				width: 100%;
				height: 100%;
			}
			.box1{
				width: 200px;
				float: left;
				height: 100%;
				background: yellow;
				
			}
			.box2{
				margin-left: 200px;
				height: 100%;
				background: #ccc
			} */
			/* 剩余两种参考三栏布局 
			父级设置 display:table
			子级设置 diaplay:table-cell;
			在移动端列表左侧图片 右侧文字介绍 非常适合

			另外一种 父级设置 display:grid；grid-template-columns: 100px auto ;
			左设置固定100px 中间自动 可以看我写的一篇关于grid的文章 [grid总结](https://blog.csdn.net/qq_36001325/article/details/107338910)
			*/
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
	</body>
	</html>

经典三栏布局左右固定中间自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>左右固定 中间自适应</title>
		<style type="text/css">
			html,
			body,
			.container {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}

			/* 第一种  */
			/* .container {
				display: flex;
				justify-content: space-around;
			}
			.box1,.box3{
				width: 100px;
				height: 100%;
				background: yellow;
			}
			.box2{
				flex: 1;
			} */
			/* 第二种 该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定
			        不按照这个顺序的设置html 会出现最后一栏不在同一水平线上*/
			/* .box1{
					float: left;
					height: 100%;
				}
				.box1,.box3{
					width: 100px;
					background: yellow;
					height: 100%;
				}
				.box2{
					margin-left: 100px;
					margin-right: 100px;
					background: #ccc;
					height: 100%;
				}
				.box3{
					float: right;
				} */

			/* 第三种 绝对定位法 该方法html 布局 可以正常设置*/
			/* .box1 {
				width: 200px;
				height: 300px;
				background-color: #DC698A;

				position: absolute;
				left: 0;
				top: 0;
			}

			.box2 {
				height: 300px;
				background-color: #8CB08B;
				margin: 0 200px;
			}

			.box3 {
				width: 200px;
				height: 300px;
				background-color: #3EACDD;

				position: absolute;
				right: 0;
				top: 0;
			} */

			/* 第四种 table布局 */
			/* .container {
				display: table;
				width:100%
			}
			.container>div{
				display:table-cell
			}
			.box1{
				width: 100px;
				background: yellow;
			}
			.box3{
				width: 100px;
				background: yellow;
			} */
			/* 第五种 网格布局 */

			.container {
				display: grid;
				width: 100%;
				grid-template-rows: 100%; 
				/* 
				补充知识点：grid 常用属性 和
				grid-template-rows :横向排列 设置高度 ；
				grid-template-columns: 设置纵向排列 设置宽度（可以设置每列的宽度，例如grid-template-rows: 300px 300px 200px;表示三列 最后一列表示宽度 200px 前两列300px）  
				grid-gap: 10px 20px :上下间隔10px，左右间隔20px
				justify-items: 表示水平方向 start:表示网格的内容居左对齐 end 表示网格内容距右对齐 center 表示网格内网居中对齐
				align-items： 表示垂直方向的 同水平一样三个参数 
				*/
				grid-template-columns: 100px auto 100px;
			}
			.box1{
				background: yellow;
			}
			.box3{
				background: yellow;
			} 
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box1">box1</div>
			<div class="box2">box2</div>
			<div class="box3">box3</div>
		</div>
	</body>
</html>

5.实现类似后台管理系统框架结构主要用到的弹性盒子布局水平分布和垂直分布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				width: 100%;
				min-height: 100%;
			}
			.container{
				width: 100%;
				min-height: 100%;
				display: flex;
			}
			.container .left-box {
				width: 100px;
				border: 2px solid #F00;
			}
			.container .right-box{
				flex: 1;
				display: flex;
				flex-direction: column;
				border: 2px solid #FFFF00;
			}
			.container .right-box .top-box{
				height: 100px;
				border-bottom: 2px solid aqua;
			}
			.content-box {
				display: flex;
				height: 100%;
				justify-content: flex-end;
				
			}
			.content-box .content-right-box {
				width: 100px;
				border-left: 2px solid antiquewhite;
				
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left-box">
				此处为整体左侧导航 宽度 100px
				
			</div>
			<div class="right-box">
				<div class="top-box">
					此处为头部 高度100px
				</div>
				<div class="content-box">
					<div class="content-left-box">
						此处为内容部分左侧
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						<br/><br/><br/><br/><br/><br/><br/><br/>
						chachule
					</div>
					<div class="content-right-box">
						此处为内容部分右侧 宽度 100px
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

6.window.location.href 与 window.open 区别

window.location.href 在当前页面打开
window.open 是新打开一个tab页面

7.js动态设置对象的key

let colum = "abc"
let arr = []
 
arr.push({[colum]:{name:"xxx",id:123}})

√3-√2

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见前端面试题（持续整理）

function random(min,max) { return Math.floor(Math.random()*(max-min)+min)}let arr = Array.from({length:20},()=>random(150,250))let obj={}for (let i=0;i<arr.length;i++){ obj[arr[i]] = arr[i]}console.log(Object.values(obj))
复制链接

扫一扫