自定义标签&JSON数据处理
最近几日去参加一些面试，多多少少有一些收获。
现将遇到的一些面试题，做一下分析和总结。
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>
自定义标签&JSON数据处理的更多相关文章
- jsp的三种自定义标签 写法示例
1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...
- JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解
这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...
- HTML自定义标签与标签自定义属性
大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当. 自定义HTML标签 在firefox.chrome这种现代浏览器里,自定义标签很简单,就 ...
- SpringMVC和Freemarker整合,带自定义标签的使用方法
SpringMVC和Freemarker整合,带自定义标签的使用方法. [参考来源:http://www.360doc.com/content/14/1225/14/1007797_435663342 ...
- 【转】Jsp自定义标签详解
一.前言 原本是打算研究EXtremeComponents这个jsp标签插件,因为这个是自定义的标签,且自身对jsp的自定义标签并不是非常熟悉,所以就打算继续进行扫盲,开始学习并且整理Jsp自定义标签 ...
- Django 六——自定义标签、图片验证码、发送邮件、评论树、组合搜索
1.自定义标签 2.图片验证码 3.生成邮箱验证码.发送邮件 4.评论树实现 5.组合搜索(Q) 1.自定义标签 配置: a.在app中新建文件夹 templatetags,里面新建 xx.py文 ...
- [JSP]自定义标签库taglib
自定义标签的步骤 自定义标签的步骤大概有三步: 1.继承javax.servlet.jsp.tagext.*下提供的几个标签类,如Tag.TagSupport.BodyTagSupport.Simpl ...
- [Java] JSP笔记 - 自定义标签
自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...
- thinkphp自定义标签库
thinkphp ~ php中 的类, 的成员变量, 本身是没有类型说明的, 那么我怎么知道它的类型呢? 或初始值呢? 通常在类定义中, 如果能给一个初始值的(对于已知简单类型的),最好给一个初始值, ...
随机推荐
- 2019 大众书网Java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.大众书网等公司offer,岗位是Java后端开发,因为发展原因最终选择去了大众书网,入职一年时间了,也成为了面 ...
- idea中Entity实体中报错：cannot resolve column/table/...解决办法。
idea中Entity实体中报错:cannot resolve column/table/...解决办法. 若idea中Entity实体中报错: cannot resolve column.... c ...
- js中数组的迭代方法
1.forEach 让数组的每一项做一件事 var arr = [1,2,3,4,5] arr.forEach(function(item,index){ console.log(item) }) 2 ...
- 【转】PHP利用Apache、Nginx的特性实现免杀Webshell
转载备忘: get_defined_vars().getallheaders()是两个特性函数,我们可以通过这两个函数来构造我们的webshell. 前几天看到的,一直忘记写,填坑. 环境 函数 用法 ...
- APS中生产计划排程模块的基本原理
高级计划系统(APS)作为ERP和MES的补充,用于协调物流.开发瓶颈资源和保证交货日期. APS包括需求和供应计划.运输和生产计划排程等各种供应链计划模块,本文主要介绍APS中生产计划排程模块的基本 ...
- 7.redis 集群模式的工作原理能说一下么？在集群模式下，redis 的 key 是如何寻址的？分布式寻址都有哪些算法？了解一致性 hash 算法吗？
作者:中华石杉 面试题 redis 集群模式的工作原理能说一下么?在集群模式下,redis 的 key 是如何寻址的?分布式寻址都有哪些算法?了解一致性 hash 算法吗? 面试官心理分析 在前几年, ...
- Apache Flink流式处理
花了四小时,看完Flink的内容,基本了解了原理. 挖个坑,待总结后填一下. 2019-06-02 01:22:57等欧冠决赛中,填坑. 一.概述 storm最大的特点是快,它的实时性非常好(毫秒级延 ...
- scikit-learn 中的 KMeans
语法 sklearn.cluster.KMeans(n_clusters=8, # 簇的个数, 默认为 8 init='k-means++', # 初始簇中心的获取方法 n_init=10, # 初始 ...
- Activiti6 查询由某人发起的流程请求 设置流程发起人
发起流程时,配置activiti:initiator属性,并且在代码中: Authentication.setAuthenticatedUserId(userId); 其中,userId对应流程发起人 ...
- ArrayList与String[]
不逼自己一把,你永远不知道什么是绝望. 今天被初学java的朋友问到了String[]跟ArrayList是不是有关系呢? 猜测是名称之间的联想,记此篇解惑. Array英语单词里是数组.阵列的意思, ...