作者：小鹤

JS 收官测试题

4个月前 ⋅ 0

选择：
1.     组成BOM的对象中不包含（C）
A.    History       历史记录对象：前后网页跳转
B. Screen              屏幕对象：屏幕分辨率，横屏竖屏的监控
C. Document
D. Location        地址对象：获取 url 地址

需要获取实例对象
var btn = document.querySelector('button');
        btn.onclick = function () {
      console.log(window.location)
        };

2.     Location上的哪个属性更改不会刷新页面(D)
A. href
B. search
C. host   主机地址   需要联网
D. hash   锚点   例如：网址后面加#abc

var btn = document.querySelector('button');
        btn.onclick = function () {
            // location.href=location.href;
            // location.search=location.search;
            // location.host=location.host;
            location.hash = location.hash;
        };

3.     以下哪个方法没有对数组进行遍历操作(D )
A.    Reduce   所有数据里面的函数进行遍历   加三   然后返回新的数组
B. Map     依托于旧的数组创建一个新的数组
C. Sort
D. Pop   干掉数组最后面的一个值并返回

4. userAgent属性不包含下列哪种信息(B)
A．浏览器渲染引擎
B.设备分辨率
C.操作系统
D.浏览器版本

//Navigator     浏览器信息对象（用户代理对象）             //火狐                系统                          64位                                         为后面的谷歌和苹果做兼容            86版本
        console.log(window.navigator.userAgent);    //Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4238.0 Safari/537.36

在js中获取div标签对应的Dom对象oDiv, 执行oDiv.class = ‘duyi’，div标签上或出现（ B）
A．class = ‘duyi’
B. className =’duyi’
C.空
D. class=’’
```
var div = document.querySelector('div');
    div.class = 'duyi';
class是保留字   
```
填空：
1. DOM中文名称为浏览器对象模型，是js操作文档的中介，BOM中文名称为_浏览器对象模型_，是js操作浏览器的中介。
2. History可以通过___方法进行页面回退2步操作。
```
展开History属性，里面有一个go()方法
console.dir(History);   //dir展开 
    go(-2)  //-2回退俩步，+1下一页
```
3. Label标签通过__for_属性和其他标签进行关联。
4. 数组ForEach和普通的for循环哪个遍历效率更高forEach。
```
严谨点时分情况的：遍历方式，便利的数据，都会影响
简单模式下是for快
```
5. 模拟重力场的课中是通过_窗口高度-div高度=div.top___公式判断该物体正好运动到浏览器底部。
```
第一种方法：
窗口高度-div高度=div.top_
第二种方法
obj.getBoundingClientRect() 返回盒模型的信息    实时性不好
        {
            width:,
            height:,
            left:,
            top:,
            right:, 盒子右边到墙壁左边的距离
            bottom, 盒子底部到墙壁上方的距离
        }
```

大题：
1.定义数组：var arr = [{name: ‘cst’, age: ‘18’}, {name: ‘jc’, age: ‘20’}, {name: ‘dxm’, age: ‘50’} , {name: ‘dcg’, age: ‘30’}]。利用filter和map对数组进行操作：留下name中包含c的，并且让他们的年龄都加上自身大小。

var arr = [{ name: 'cst', age: '18' }, { name: 'jc', age: '20' }, { name: 'dxm', age: '50' }, { name: 'dcg', age: '30' }];
        var arr2 = arr.filter(function (ele) {
            //filter让每个数组都调用这个function，并把这个函数返回true的数据拿出来组成一个新数组
            return ele.name.indexOf('c') != -1; //return后的结果为true，表示该数组通过测试，保留该元素，false 则不保留
        }).map(function (ele) {     //链式操作
            //map为创建一个新数组，新数组里的内容为原数组里每个数据都被调用函数后的返回结果
            ele.age *= 2;   //age的值是字符串类型的，加上自身需要隐式类型转换，×会忽略隐式类型转换
            return ele;
        });
        console.log(arr2);

2.用你能想到较好的，且通用方式把浏览器输入框上的网址（如：https://www.baidu.com/s?ie=utf-8&f=8）按协议：https 主机：www.baidu.com 路径：/s 参数：ie=utf-8&f=8划分并创建对象。此对象属性和属性值形式如右：

{
protocol:  'https',  
host：'www.baidu.com', 
path: '/s',  
earch: {ie:’utf-8’,f:’8’}
}

答案：

//把地址变成一个对象
        var url = new URL('https://www.baidu.com/s?ie=utf-8&f=8');
        // console.log(url);
        function urlToObj() {
            var result = {
                protocol: url.protocol, //协议
                host: url.hostname, //主机名   因为不包括端口号：8080，所以加name
                path: url.pathname, //路径，从域名最后的/开始到域名里的问号前结束，包括/
                search: {}
            }

            //search    从？开始到#前，包括？

      第一种方法
            /* var str = url.search.substr(1);  //ie=utf-8&f=8
            var params = str.split('&');    //["ie=utf-8", "f=8"]

            params.reduce(function (pre, cur) {
                //把数组里的数据都执行函数，最后把所有的结  果合并并返回
                var items = cur.split('='); //['ie','utf-8'],['f','8']
                pre[items[0]] = items[1];
                return pre;
            }, result.search);  //esult.search={}

            console.log(result); */

      第二种方法 兼容性不太好
            //searchParams是URL对象身上的一个属性，用来获取URL中GET查询参数。
            console.log(url.searchParams);
            for (var params of url.searchParams) {
                //这个对象身上有一个Symbol.iterator，它可以使用for...of（用来遍历具有遍历器接口的数据）
                result.search[params[0]] = params[1];
            }
            console.log(result);
        }
        urlToObj();

实现一个getDom(str)函数，可以根据参数（str形式如：‘#id’、’.Class’、‘tag’）的不同选择对应选择不同的dom。注：1.‘#id’此参数为根据id名称选择dom，.Class此参数为根据类名选择dom，‘tag’此参数为根据标签名称获取dom。2.不能使用原生的getElementsByClassName方法

//$ jquery

    /* var p=document.querySelector('.color');
    var p=document.querySelector('#color');
    var p=document.querySelector('p');

    $('.color');
    $('#color');
    $('p'); */

    function $(selector) {
        if (selector.indexOf('.') != -1) {
            var dom = getByClass(selector.substr(1));
        } else if (selector.indexOf('#') != -1) {
            var dom = document.getElementById(selector.substr(1));
        } else {
            var dom = document.getElementsByTagName(selector);
        }

        return dom;
    }
    function getByClass(classname) {
        var allDoms = document.body.querySelectorAll('*');  //取到body里的所有标签，NodeList对象，是一个类数组，不能使用数组里的方法
        var allDoms = [].slice.call(document.body.querySelectorAll('*'));
        var allDoms = Array.from(document.body.querySelectorAll('*'));  //把参数转成数组

        console.log(allDoms);
        return allDoms.filter(function (ele) {
            //ele.classList 返回的是一个class列表（集合对象），不是数组    ['color','active']
            //includes()    在数组里找传的参数有没有
            return Array.from(ele.classList).includes(classname);
        });
    }

    $('.color').forEach(function (ele) {
        ele.innerHTML = 'class选中的';
    });

    $('#color').innerHTML = 'id选中的';

    var ps = $('p');
    for (var i = 0; i < ps.length; i++) {
        ps[i].style.background = 'green';       //剩余标签变色
    }

4. 请尝试写出缓冲运动的效果。


<style>
    .move {
        width: 200px;
        height: 200px;
        background: pink;
        position: absolute;
        left: 0;
        top: 200px;
    }
</style>

<div class="move"></div>

startMove($('.move')[0], 800); function startMove(obj, target) { clearInterval(obj.timer); var speed = null;

        obj.timer = setInterval(function () {
            speed = (target - obj.offsetLeft) / 7;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
            } else {
                obj.style.left = obj.offsetLeft + speed + 'px';
            }
        }, 30);
    }


5.     请用伪代码（用中文分步描述逻辑）写出轮播图的制作思路。

1.  5张图片，匀速运动
2. 布局：大框相对定位，图片绝对定位，图片弹性盒模型
3. 运动：索引值，运动一下-1（向左边移动）
4. 图片全部展示完，回到第一个图片
5. 按钮：左边不超过0，右边不超过4，点击一次加1块的距离
6. 圆点：对应相对的索引值，第5个和第一个绑定的是一个小圆点