面试奇遇 -- 原生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

最新文章

热门文章