js将list某个属性组装成数组_前端⾯试：JS编程题⽬总结
（⼀）
前端⾯试中，⼿撕代码环节除了⼒扣上的算法题⽬之外，还有⼀些针对前端知识点的题⽬，⼤致有以下⼏类：算法类
原理类
应⽤类
算法类
1. ⼿写快排、冒泡、选择排序
快速排序：
/**
* --- 测试⽤例 ---
*
* 输⼊：[1, 34, 5, 76, 8, 6, 9, 7, 6, 3]
* 输出：[1, 3, 5, 6, 6, 7, 8, 9, 34, 76]
*
* --- 说明 ---
*
* 思考：快速排序是稳定的吗？
* 解答：base 的每次选择，会导致快排是不稳定排序。
*/
const quickSort = (nums) => {
if (nums.length 2) {
return nums;
js arguments
} else {
var left = [];
var right = [];
var pivot = Math.floor(nums.length / 2); // Math.floor 向下取整
var base = nums.splice(pivot, 1)[0];
for (let i = 0; i            if (nums[i]                left.push(nums[i]);
} else {
right.push(nums[i]);
}
}
}
return quickSort(left).concat([base], quickSort(right));
}
冒泡排序：
* 输⼊：[5, 2, 4, 7, 9, 8, 3, 6, 3, 8, 3]
* 输出：[2, 3, 3, 3, 4, 5, 6, 7, 8, 8, 9]
*
* --- 说明 ---
*
* 思考：冒泡排序是稳定的吗？
* 解答：不稳定，因为出现了交换。
*/
const bubbleSort = (nums) => {
for (var i = 0; i 1; i++) {
for (var j = 0; j 1 - i; j++) {
if (nums[j] > nums[j + 1]) {
let tmp = nums[j];
nums[j] = nums[j + 1];
nums[j + 1] = tmp;
}
}
}
return nums;
}
选择排序：
/**
* --- 测试⽤例 ---
*
* 输⼊：[6, 45, 3, 2, 5, 6, 8, 4, 3, 4, 56, 67, 5]
* 输出：[2, 3, 3, 4, 4, 5, 5, 6, 6, 8, 45, 56, 67]
*
* --- 说明 ---
*
* 思考：选择排序是稳定的吗？
* 解答：要看代码是如何实现的，在本例中由于有交换，所以是不稳定排序。
*/
const selectSort = (nums) => {
var idx; // 最⼩值的索引
for (var i = 0; i 1; i++) {
idx = i;
for (var j = i + 1; j            if (nums[j]                idx = j;
}
}
if (nums[i] > nums[idx]) {
let tmp = nums[idx];
nums[idx] = nums[i];
nums[i] = tmp;
}
}
return nums;
}
2. URL 拆解问题
题⽬⼀：
* 实现⼀个函数，可以对 url 中的 query 部分做拆解，返回⼀个 key: value 形式的 object  *
* --- 实例 ---
*
* 输⼊：'sample/?a=1&e&b=2&c=xx&d#hash'
* 输出：{a: 1, b: 2, c: 'xx', d: ''}
*/
function getQueryObj(url) {
// TODO
let arr = url.split('?')[1].split('#')[0].split('&');
const res = {};
arr.forEach(e => {
const [key, value] = e.split('=');
if (!value) {
res[key] = '';
} else {
res[key] = value;
}
})
return res;
}
题⽬⼆：
* 实现⼀个 parseParem 函数，将 url 转化为指定结果
*
* --- 测试⽤例 ---
*
* 输⼊：url = 'www.domain/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled' * 输出：
{
user:'anonymous',
id:[123,456],// 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
city:'北京',// 中⽂需解码
enabled: true // 未指定值的 key 与约定为 true
}
*/
const parseParem = (url) => {
const arr = url.split('?')[1].split('&');
const res = {};
arr.forEach((e) => {
let key = e.split('=')[0], value = e.split('=')[1];
if (value === undefined) {
res[key] = true;
} else {
if (key in res) {
res[key] = [res[key]];
res[key].push(value)
} else {
res[key] = decodeURI(value)
}
}
})
return res;
}
3. 将 HTTP header 转换成 js 对象
* 实现⼀个⽅法，把 HTTP ⽂本形式(字符串)的 header 转换成 JS 对象。
*
* --- 测试⽤例 ---
*
* 输⼊：
* `Accept-Ranges: bytes
* Cache-Control: max-age=6000, public
* Connection: keep-alive
* Content-Type: application/javascript`
* 输出：
* {
*  "Accept-Ranges": "bytes",
*  "Cache-Control": "max-age=6000, public",
*  Connection: "keep-alive",
*  "Content-Type": "application/javascript"
* }
*
* --- 解题思路 ---
*
* 1. ⾸先将每⾏数据作为数组的⼀个元素
* 2. 将每个元素使⽤冒号分割，前⾯为 `key`，后⾯为 `value`。
*/
const solution = (s) => {
let res = {};
let arr = s.split("\n");
arr.forEach((e) => {
let tmp = e.split(": ");
res[tmp[0]] = tmp[1];
})
return res;
}
注意到
`xxxxxx
xxxxx
xxxx`
这样的输⼊格式叫做 模板字符串。
输出如下：
{
'Accept-Ranges': 'bytes',
'Cache-Control': 'max-age=6000, public',
Connection: 'keep-alive',
'Content-Type': 'application/javascript'
}
注意到上⾯的输出结果中，Connection 没有带引号，这是为什么呢？
4. 将数组转化为树形结构

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。