<!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>
很不錯的 JS 面試題，供大家參考，提升自己的邏輯思維
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章