面试奇遇 -- 原生JS
最近几日去参加一些面试，多多少少有一些收获。
现将遇到的一些面试题，做一下分析和总结。
1、使用原生JS，不能使用递归，查找dom中所有以“<com-”开头的自定义标签tagName。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DOM获取自定义标签</title>
</head>
<body>
<con-1>con11</con-1>
<con-2>con22</con-2>
<con-3>con33</con-3>
<p>p11</p>
<p>p12</p>
<p>p13</p>
<p>p14</p>
<com-1>com11</com-1>
<com-2>com12</com-2>
<com-3>com13</com-3>
<script type="text/javascript">
//获取body下的所有内容，结果为字符串
var str = document.getElementsByTagName('*')[0].innerHTML;
console.log(str);
//使用正则表达式，用于匹配字符串中对自定义标签
var reg = /<com-.*>.*<\/com-.*/g;
//利用字符串对象的match()方法并结合正则，获取字符串str中匹配的正则子串，结果为数组
var res = str.match(reg);
console.log(res);
/*
输出的结果：
<com-1>com11</com-1>
<com-2>com12</com-2>
<com-3>com13</com-3>
*/
</script>
</body>
</html>
2、将一个多维对象转换为二维对象：
// 封装一个函数，使得对象obj转换后的结果为objTo的形式
var obj = {
"data": {
"err": 1,
"msg": "错误"
},
"list": ["a", "b"],
"request_id": "geo5-esd1-efor-veuq"
};
var objTo = {
"data.err": 1,
"list.0": "a",
"list.1": "b",
"reuqest_id": "geo5-esd1-efor-veuq"
};
js代码如下：
<script type="text/javascript">
var obj = {
"data": {
"err": 1,
"msg": "错误"
},
"list": ["a", "b"],
"request_id": "geo5-esd1-efor-veuq"
};
var objTo = {
"data.err": 1,
"list.0": "a",
"list.1": "b",
"reuqest_id": "geo5-esd1-efor-veuq"
};
//封装函数
function toObj(obj) {
var newObj = {};
for(let pro in obj) {
if(obj[pro].push != undefined) {
for(let i = 0; i < obj[pro].length; i++) {
newObj[pro + '.' + i] = obj[pro][i];
}
} else if(typeof obj[pro] == 'object') {
for(let j in obj[pro]) {
if(obj[pro][j] == '错误') {
} else {
newObj[pro + '.' + j] = obj[pro][j];
}
}
} else {
newObj[pro] = obj[pro];
}
}
return newObj;
}
console.log(toObj(obj));
</script>
3、写一种方法：将一个维度比较高的对象转换为GET参数模式（URL地址拼接的带有参数的字符串）
该方法写的有点乱，如果有哪位大神有更优的解决方法，希望共勉！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对象转换为URL参数</title>
</head>
<body>
<script type="text/javascript">
var obj = {
"openid": "123456",
"userinfo": {
"name": "小明",
"sex": "男",
"tags": ["读书", "游戏", "旅行"],
"settings": {
"theme": "white",
"signature": "好好学习天天向上",
"size": 16
}
},
"status": 200
};
//封装函数
function toURL(obj) {
var str = '?';
for(var key in obj) {
if(key == 'status') {
} else {
//判断数据类型
var type = typeof(obj[key]);
//基本类型数据拼接
if(type == 'string' || type == 'number' || type == 'boolean') {
str += key + '=' + encodeURIComponent(obj[key]) + '&';
} else if(type == 'object') {
//对象类型判断
for(var pro in obj[key]) {
var type2 = typeof(obj[key][pro]);
if(type2 == 'string' || type2 == 'number' || type2 == 'boolean') {
str += key + '.' + pro + '=' + encodeURIComponent(obj[key][pro]) + '&';
} else if(type2 == 'object') {
//判断对象数据是否为数组
if(obj[key][pro] instanceof Array) {
var arr = obj[key][pro];
var strs = '';
for(var k = 0; k < arr.length; k++) {
strs += encodeURIComponent(strArr[k]);
}
str += strs;
} else {
for(var pros in obj[key]) {
str += 'obj' + '.' + key + '=' + encodeURIComponent(obj[key][pro]) + '&';
}
}
}
}
}
}
}
//处理字符串末尾的&字符
str = str.substring(0, str.length - 1);
console.log(str);
}
toURL(obj);
</script>
</body>
</html>
面试奇遇 -- 原生JS的更多相关文章
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
- 原生JS实现jquery的链式编程。
这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...
- 原生JS面试题
面试中遇到的原生js题总结 1.js 去重1) indexOf Array.prototype.unique = function(){ var result = []; var len = th ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
随机推荐
- HDU 6092:Rikka with Subset(dp)
分析 很多个较小的数字可以随机组合成较大的数字,所以B数组从小到大开始遍历,除了空集,最小的那个存在的个数对应的数字必然是a数组中的数字. 每求出这一部分之后,更新后续的B序列. 分析完后,主要的难点 ...
- bzoj 2882: 工艺【SAM】
看上去比较SA,但是在学SAM所以就用SAM来做-- 把串复制一遍接在后面,对这个新串求SAM(这里的儿子节点要用map转移),然后从根节点每次都向最小的转移走,这样走n次转移的串就是答案 #incl ...
- Luogu P2326 AKN's PPAP【按位贪心】
题目描述 “I have a pen,I have an apple.Eh,Apple-Pen!. I have a pen,I have pineapple.En,Pineapple-Pen! Ap ...
- 转：从《The C Programming Language》中学到的那些编程风格和设计思想
这儿有一篇写的很好的读后感:http://www.cnblogs.com/xkfz007/articles/2566424.html 读书不是目的,关键在于思考. 很早就在水木上看到有人推荐& ...
- 166 Fraction to Recurring Decimal 分数到小数
给定两个整数,分别表示分数的分子和分母,返回字符串格式的小数.如果小数部分为循环小数,则将重复部分括在括号内.例如, 给出 分子 = 1, 分母 = 2,返回 "0.5". ...
- RHEL 6.5---SVN服务实现过程
主机名 IP地址 master 192.168.30.130 slave 192.168.30.131 安装 [root@master ~]# yum install -y subversion h ...
- P2658 汽车拉力比赛
题目描述 博艾市将要举行一场汽车拉力比赛. 赛场凹凸不平,所以被描述为M*N的网格来表示海拔高度(1≤ M,N ≤500),每个单元格的海拔范围在0到10^9之间. 其中一些单元格被定义为路标.组织者 ...
- 第一个 swift 项目
今天 学习了 一丢丢 swift,特此记录一下 ! 原来创建的时候 ,只要把 语言 由以前的Object-C改为Swift,变创建好了自己的swift工程 第一个简单的swift demo 上代码 i ...
- html/css实现聊天布局
效果图 项目结构 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
- 责任链模式和php实现
职责链模式(又叫责任链模式): 包含了一些命令对象和一些处理对象,每个处理对象决定它能处理那些命令对象,它也知道应该把自己不能处理的命令对象交下一个处理对象,该模式还描述了往该链添加新的处理对象的方法 ...