自定义标签&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中 的类, 的成员变量, 本身是没有类型说明的, 那么我怎么知道它的类型呢? 或初始值呢? 通常在类定义中, 如果能给一个初始值的(对于已知简单类型的),最好给一个初始值, ...
随机推荐
- because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checkin
1 前言 浏览器报错误(chrome和firefox都会):because its MIME type ('text/html') is not a supported stylesheet MIME ...
- Servlet处理（jQuery）Ajax请求
1. jQuery jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...
- disable_function绕过--利用LD_PRELOAD
0x00 前言 有时候直接执行命令的函数被ban了,那么有几种思路可以bypass 1.使用php本身自带的能够调用外部程序的函数 2.使用第三方插件入(如imagick) 但是这两种无非就是利用ph ...
- ffmpeg 基本数据结构和对象（一）： AVPacket、AVPicture、AVFrame
来源:http://blog.csdn.net/chance_yin/article/details/16817957 一.AVPacket /** * AVPacket 作为解码器的输入 或 编码器 ...
- django rest_framework vue 实现用户登录
django rest_framework vue 实现用户登录 后端代码就不介绍了,可以参考 django rest_framework 实现用户登录认证 这里介绍一下前端代码,和前后端的联调过程 ...
- Linux小知识点
磁盘 Linux的磁盘类型有IDE和SCSI两种. IDE的命名方式是采用/dev/hdx(x代表磁盘块),其下的分区则是/dev/hdxy(y代表该磁盘上的分区号) SCSI则是采用/dev/sdx ...
- Ninja使用Visual Studio(cl.exe)构建
目录 Ninja基本步骤 Ninja在VS2015下的问题和解决 Ninja命令行参数 Ninja错误的调用了gcc Ninja基本步骤 Ninja的作用是加速构建,最初目的是替代make,现在Win ...
- Apache Flink流式处理
花了四小时,看完Flink的内容,基本了解了原理. 挖个坑,待总结后填一下. 2019-06-02 01:22:57等欧冠决赛中,填坑. 一.概述 storm最大的特点是快,它的实时性非常好(毫秒级延 ...
- MySol序
1.mysql是基于C/S端的服务器软件 mysql服务端: server端开启,对文件的增删改查 , musql客户端::连接S端, 发送指令 isnert into t1 values(1); 2 ...
- HashMap、HashTable 区别
区别项 HashMap HashTable 继承和实现 public class HashMap<K,V> extends AbstractMap<K,V> implement ...