很不错的 JS 面试题,供大家参考,提升自己的逻辑思维

14 篇文章 0 订阅
<!DOCTYPE html>
<html>
<head>
	<title>面试题</title>
	<style type="text/css">
		.item {
			margin: 10px;
			padding: 20px;
			background: #e0e0e0;
		}
		.btn {
			margin: 20px 0;
			padding: 5px 20px;
			color: #fff;
		    cursor: pointer;
		    border-radius: 0 4px 4px 0;
		    background-color: #2F94F8;
	</style>
</head>
<body>

<h1>前端js面试题</h1>
<div class="item">
	<div>
		<h3>1、数组去重并排序</h3>
	</div>
	<div>
		<span>输入:let inputs = ['c', 'a', 'b', 'a'];</span>
	</div>
	<button onclick="removalAndSort()" class="btn">执行(F12 查看)</button>
</div>

<div class="item">
	<div>
		<h3>2、对象转换</h3>
	</div>
	<div><span>输入:let input = "Prod_id,prod_Name,prod_dEsc"</span></div>
	<button onclick="ObjectToChange()" class="btn">执行(F12 查看)</button>
</div>

<div class="item">
	<div>
		<h3>3、二维数组转换成树结构</h3>
	</div>
	<div><span>输入:let input = [
    ["新闻", "体育", "网球", "国外"],
    ["新闻", "体育", "网球", "国内"],
    ["产品", "互联网", "金融"],
    ["新闻", "房产", "深圳"],
    ["新闻", "房产", "上海"],
    ["新闻", "体育", "羽毛球"],
    ["产品", "互联网", "保险"]
]</span></div>
	<button onclick="arrToTree()" class="btn">执行(F12 查看)</button>
</div>

<div class="item">
	<div>
		<h3>4、坐标计算  圆心o  半径r  圆弧n等分,取得坐标数组</h3>
	</div>
	<div><span>输入:let input = {
    o: [100, 100],
    r: 100,
    n: 5
}</span></div>
	<button onclick="computeCoordinate()" class="btn">执行(F12 查看)</button>
</div>

<div class="item">
	<div>
		<h3>5、根据单词表切分单词</h3>
	</div>
	<div><span>输入:let words=['my','home','welcome','this'] <br/>
let input="hellothisismyhomewelcometomyhome"
</span></div>
	<button onclick="splitWord()" class="btn">执行(F12 查看)</button>
</div>

<script type="text/javascript">
	window.onload = function (argument) {
		// body...
		console.log(333)
	}



	/**
	 * 	1、 数组去重并排序
	 **/

	function removalAndSort () {
	    /** 输入 **/
	    let inputs = ['c', 'a', 'b', 'a'];
	    /** 计算 **/
	       // 方法一 (ES6 Set 去重) 
	       		let inputs2 = [...new Set(inputs)];
	       		console.log(inputs2.sort());
		       	 

	       // 方法二 (数组索引去重)
		        /**  let inputs2 = [];
			        for (let i = 0; i < inputs.length; i++) {
			        		let e = inputs[i];
			        		if (inputs2.indexOf(e) == -1) {
			        			inputs2.push(e);
			        		}
			        }
		        	console.log(inputs2.sort());
				**/
			// 方法三 (对象去重)
				/**let inputs2 = {};
					for (let i = 0; i < inputs.length; i++) {
						let e = inputs[i];
						inputs2[e] = e
					}
					console.log(Object.keys(inputs2).sort());
				**/
    }

    /**
	 * 	2、 对象转换
	 **/
	 function ObjectToChange () {
	 	/** 输入 **/
	 	let input = "Prod_id,prod_Name,prod_dEsc"
	 	/** 计算 **/
	 	let new_input = input.split(',')
	 	let output = []
	 	for (let i = 0; i < new_input.length; i++) {
	 		let e = new_input[i];
	 		let lower_e = e.toLowerCase();
	 		let lower_e_index = lower_e.indexOf('_')
	 		let common = lower_e.substr(0, lower_e_index) + lower_e.slice(lower_e_index, lower_e_index + 2).toUpperCase() + lower_e.substr(lower_e_index + 2);
	 		let key = common.replace('_', '');

	 		let centerLabel = common.replace('_', ' ')
	 		let label = centerLabel[0].toUpperCase() + centerLabel.slice(1);

	 		let item = {
	 			key,
	 			label,
	 			index: i + 1
	 		}
	 		output.push(item)
	 	}
	 	console.log(output)
	 }

	 /**
	 * 	3、 二维数组转换成树结构
	 **/
	 function arrToTree () {
	 	/** 输入 **/
		 	let input = [
			    ["新闻", "体育", "网球", "国外"],
			    ["新闻", "体育", "网球", "国内"],
			    ["产品", "互联网", "金融"],
			    ["新闻", "房产", "深圳"],
			    ["新闻", "房产", "上海"],
			    ["新闻", "体育", "羽毛球"],
			    ["产品", "互联网", "保险"]
			];
		/** 计算 **/
			let output1 = [];
			for (let i = 0; i < input.length; i++) {
				let e_arr = input[i];
				for (let j = 0; j < e_arr.length; j++) {
					let pre = e_arr[j - 1] || ''
					let e = e_arr[j];
					let temp = {
						name: e,
						pre_name: pre,
					};
					// 去重
					let hasObj = output1.findIndex((val, index, arr) => {
						return val.name == temp.name && val.pre_name == temp.pre_name;
					})
					if (hasObj == -1) {
						output1.push(temp);
					}	
				}
			}

			let treeMapList = output1.reduce((arr, cur) => {
				arr[cur['name']] = cur;
				return arr;
			}, {})
			// console.log(treeMapList)
			let result = output1.reduce((arr, cur) => {
				let pre_name = cur.pre_name;
				let parent = treeMapList[pre_name];
				if (parent) {
					parent.children? parent.children.push(cur): parent.children = [cur];
				} else if (pre_name == '') {
					arr.push(cur);
				}
				return arr;
			}, [])
			console.log('result--->', result)

	 }

	 /**
	 * 	4、 坐标计算  圆心o  半径r  圆弧n等分,取得坐标数组。
	 **/
	 function computeCoordinate() {
	 	/** 输入 **/
		 	let input = {
			    o: [100, 100],
			    r: 100,
			    n: 5
			}
		/** 计算 **/
			let n_rad = 360 / input.n * (Math.PI / 180);
			let results = [];
			for (let i = 0; i < input.n; i++) {
				let item_rad = n_rad * i;
				let n_x = Math.cos(item_rad) * input.r + input.o[0];
				let n_y = Math.sin(item_rad) * input.r + input.o[1];
				results.push([n_x, n_y]);
			}
			console.log('results', results);	
	 }
	 /**
	 * 	5、 根据单词表切分单词 
	 **/
	 function splitWord() {
	 	/** 输入 **/
			let words=['my','home','welcome','this']
			let input="hellothisismyhomewelcometomyhome"
		/** 计算 **/
			for (let i = 0; i < words.length; i++) {
				let e = words[i];
				let re = new RegExp(e, 'g');
				input = input.replace(re, '_' + e + '_');
			}

			// 替换的时候最多会有连着两个“_”;
			// 先判断是否含有两个“_”
			let reg = /(_){2}/g;
			let twoInsert = input.match(reg);
			if (twoInsert.length > 0) {
				input = input.replace(/__/g, '_');
			}
			// 去掉末尾 和头部 的 "_"
			input = input.replace(/^_|_$/g, "");
			let results = input.split('_');
			console.log(results)
	 }

</script>
</body>
</html>
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值