欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

常见面试题(一)

程序员文章站 2022-06-09 20:40:35
...

1、div+css 的布局较 table 布局有什么优点?

table布局的优缺点

优点:

布局简单、快捷、兼容性好 容易上手

缺点:

改动不便,需要调整,工作量大

div+css布局的优缺点

优点:

布局更加灵活多样,能够通过样式选择来实现界面设计方面的更多要求

DIV精简了页面,提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套,从而大大提高页面加载速度,以及站点的可以维护性。

布局改版方便,不需要过多地变动页面内容,通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。

布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取,内容更便于搜索。

加快了页面的加载速度

缺点:

要考虑兼容版本浏览器

有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

2、有哪项方式可以对一个 dom设置它的 CSS 样式?

//第一种方式直接用style更改样式,这样添加的样式为行内样式
div.style.属性='属性值'
//第二种方法,先将样式写在一个类名中之后使用className将这个类名添加到元素上
     <style>
    div{
        width: 100px;
        height: 100px;
    }
    </style>
   document.querySelector('div').className = 'div'

// 第三种方法
   直接在标签内写样式,行内样式
// 第四种方法
   内部样式,将css样式写在style内,不在直接写进标签里
// 第五种方法
   外部样式,将css样式单独写进 一个css文件中,在引入这个css文件

3、行内元素和块级元素的具体区别是什么?

行内元素的 padding 和 margin 可 设置吗?

行内元素:

行内元素(内联元素):不占有独立的区域,仅仅依靠自己的字体大小或者是图像大小来支撑结构。 不可以设置宽高 常见的行内元素有:,,,,,等 宽高要靠元素内容撑开

行内元素的margin 和 padding 只有左右可以生效,上下无效 行内元素内不能放块元素等,只能放文本

块级元素:

块级元素不管内容大小都会独占一行,可以设置宽高,margin和padding都可以使用,块元素内可以放任何元素

常见的块元素:

~

,

,

,
  • ,
    1. ,

行内块元素

行内块元素包含了块元素和行内元素的特点,可以设置宽高并且不会独占一行,margin和paddig也都可以使用,行内块元素内可以放任何元素

4、BFC 是什么?

BFC是块级格式化环境

BFC是CSS中隐藏的一个属性,当给某个元素设置指定属性时,可以开启元素的BFC

开启BFC后的特点:(可以使用开启BFC解决以下问题)

1.不会被浮动元素覆盖

2.子元素和父元素的外边距不会重叠

3.可以包含浮动的子元素

通过以下方式开启元素的BFC

  1. float 的值不是 none
  2. position 的值不是static或者relative
  3. display的值是inline-blocktable-cellflextable-caption或者inline-flex
  4. overflow 的值不是 visible

总结来说BFC是一个隐藏的属性,可以通过给元素设置某些属性来解决一些问题,比如说1.浮动后父元素的高度塌陷问题,2.子盒子与父盒子的外边距重叠问题,3.当一个元素浮动后,下一个元素会自动往上排,导致浮动的元素覆盖了下面的元素的问题,这些都可以通过

使用以下方式可以直接解决父元素高度塌陷,和外边距重叠问题

  
        .box3::after,
        .box3::before {
            content: '';
            display: table;
            clear: both;
        }

5、谈谈你对javascript 的同源策略的理解

1.同源策略是一种约定。是浏览器最核心最基本的安全功能,避免其收到攻击,或被窃取数据

同源:协议 域名 端口

例:
http://www.test.com:8000/test.html

协议 子域名 主域名 端口 请求资源地址
只有协议 域名 端口一致才是同源

注意:即使两个不同的域名指向同一个ip地址,也是非同源

同源是浏览器的一种行为,当我们的请求发出去了,服务器也响应了,但是无法接收这就是非同源

6、编写一个数组去重的方法

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]; => [2,8,5,0,6,7]

// 先封装成一个函数
// 声明一个空数组接受去重之后的数组
// 用for循环先遍历去重之前的数组
// 让数组的每个元素都用indexof这个方法判断是否存在,如果不存在就是-1,就把这个数放进新数组的最后
// 如果不等于-1也就是存在相同的,就把相同的元素删除

function sum(arr) {
            var arr2 = []
            for (var n = 0; n < arr.length; n++) {
                if (arr2.indexOf(arr[n]) == -1) {
                    arr2.push(arr[n]);
                } else {
                    arr.splice(n, 1);
                    n--;
                }
            }
            return arr2
        }
        console.log(sum([2, 8, 5, 0, 5, 2, 6, 7, 2]));

7、当一个 DOM 节点被点击时候,我们希望能够执行一个函数,有几种方法实现,应该怎么做?

  <script>
      //注册DOM 0级事件
        // 第一种方法
        document.querySelector('div').onclick = function() {

            }

        // 第二种方法
        //注册DOM 2级事件
        document.querySelector('div').addEventListener('click', function() {

        })
    </script>

8、看下列代码输出结果是什么?解释原因。

var a; 
alert(typeof a); 
alert(b); 
b=10;
alert(typeof b);

1.首先a只是一个变量名,并没有值所以检测不到a是什么类型所以会弹出undefined

之后会出现一个报错,因为代码是从上到下执行的,alert(b)中的b在执行这行代码的时候在前面根本找不到这个b,所以会直接报错,报错之后的代码就不会在运行了,最后一个alert没有运行

9、输出今天的日期,以 YYYY-MM-DD 的方式,

比如今天是 2021年 4 月 8 日, 则输出 2021-04-08

 let daT = new Date()
        var FullYear = daT.getFullYear()
        console.log(FullYear);
        var Month = daT.getMonth() < 10 ? "0" + (daT.getMonth() + 1) : (daT.getMonth() + 1)
        console.log(Month);
        var date = daT.getDate() < 10 ? "0" + daT.getDate() : daT.getDate()
        console.log(date);
        document.documentElement.innerHTML = '今天是' + FullYear + '年-' + Month + '-' + date

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ojnzTXtU-1618402833480)(C:\Users\阎涛\AppData\Roaming\Typora\typora-user-images\image-20210408092424300.png)]

10、看下列代码,将会输出什么?为什么?

<script>
    var foo = 1;
    function f(){
        console.log(foo);
        var foo = 2;
        console.log(foo);
    }

    f();
</script>

输出的结果为undfinde和2

首先因为全局变量和局部变量都有foo的变量声明,这时调用f()这个函数,首先执行函数内的第一个console.log(foo)

但此时全局和局部都有foo这个变量,但是因为是在函数内部执行,所以它会首先去找函数内部声明的foo,找到了函数内部的foo,因为函数内部声明的foo在第一个console.log下面,函数内部的foo变量提升,但是只是变量提升,变量的值并没有提升,所以第一个console.log只找到了foo这个变量,并没有找到值,所以会包undefined

第二个console.log输出的是2,还是因为会先从函数内部寻找变量,此时第二个console.log在函数内部声明的foo下面,所以第二个console.log既可以找到foo也可以获取到它的值,所以就打印2

可以看成这样:

        
        var foo = 1;
        function f() {
            var foo;
            console.log(foo);
             foo = 2;
            console.log(foo);
        }
        f();

11、用 js 实现随机选取 10–100 之间的 10 个整数数字,存入一个数组,并排序

       var arr = []
        var j = 0
        for (var i = 1; i <= 10; i++) {
            arr[j] = parseInt(Math.random() * (100 - 10 + 1) + 10)
            j++
        }
        arr2 = arr.sort(function(a, b) {
            return a - b;
        })
        console.log(arr2);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KU1c98j2-1618402833486)(C:\Users\阎涛\AppData\Roaming\Typora\typora-user-images\image-20210408093644106.png)]

12、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法

并做简单说明

// 通过querySelector可以查找类名 id名 name 标签名  但都如果有相同的都是只能找到第一个
    document.querySelector('')
        // 通过querySelectorAll  可以查找到所有的相同的类名 id名 name 标签名的元素,会以数组的形式返回
    document.querySelectorAll('')
        // 通过Id查找
    document.getElementById('')
        // 通过元素的标签名直接获取,如果有多个相同元素标签名的属性会全部获取
        // 如果想要通过标签名指定获取一个元素,需要加下标
    document.getElementsByTagName('')[1];
    //  通过class属性获取
    // 如果有元素的clas值相同会返回他们的合集
    document.getElementsByClassName('');
    // 通过name获取元素
    // 返回name属性为指定值的元素对象的集合,一般用来获取表单元素节点
    // 如果有多个name的值相同,会返回他们的集合
    document.getElementsByName('');

13、谈谈 Cookie 的弊端

1.Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie,每个 cookie 长度不

能超过 4KB,否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了,那人就可以取得所有的 session 信息。即使加密

也与事无补,因为拦截者并不需要知道 cookie 的意义,他只要原样转发 cookie 就可以达到

目的了。

3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存

一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

14、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点。

查找节点

          // 通过querySelector可以查找类名 id名 name 标签名  但都如果有相同的都是只能找到第一个
        document.querySelector('')
            // 通过querySelectorAll  可以查找到所有的相同的类名 id名 name 标签名的元素,会以数组的形式返回
        document.querySelectorAll('')
            // 通过Id查找
        document.getElementById('')
            // 通过元素的标签名直接获取,如果有多个相同元素标签名的属性会全部获取
            // 如果想要通过标签名指定获取一个元素,需要加下标
        document.getElementsByTagName('')[1];
        //  通过class属性获取
        // 如果有元素的clas值相同会返回他们的合集
        document.getElementsByClassName('');
        // 通过name获取元素
        // 返回name属性为指定值的元素对象的集合,一般用来获取表单元素节点
        // 如果有多个name的值相同,会返回他们的集合
        document.getElementsByName('');

添加删除

        // 在指定元素前面添加
        // 前边是要添加的新元素,后边是要添加到谁的前边
         div.insertBefore(li, div.children[0])
        // 删除div里的第一个元素
       div.removeChild(div.children[0])

移动

        //  如果元素有定位直接更改left和top的值让元素移动
        document.querySelector('div').style.left = 1000 + 'px'
        document.querySelector('div').style.top = 1000 + 'px'

        // 通过scroll或者offset来控制元素移动
         document.querySelector('div').offsetLeft=100
         document.querySelector('div').scrollLeft=100

创建

 document.createElement('')

复制

    document.documentElement.innerHTML = document.cloneNode('')

15、判断一个字符串中出现次数最多的字符,统计这个次数

如:var str = ‘asdfssaaasasasasaa’;

打印结果:出现次数最多的是:a出现9次;

<script>
    var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
        if (!json[str.charAt(i)]) {
            json[str.charAt(i)] = 1;
        } else {
            json[str.charAt(i)]++;
        }
    };
    var iMax = 0;
    var iIndex = '';
    for (var i in json) {
        if (json[i] > iMax) {
            iMax = json[i];
            iIndex = i;
        }
    } 
    alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');
</script>

16、什么是闭包? 写一个简单的闭包

可以读取其他函数内部变量的函数就是闭包

function name(x) {
            var num = 10;
            return function() {
                console.log(num);
            }
        }
        var arr = name()
        arr()

17、BOM 对象有哪些,列举 window 对象?

1、window 对象 ,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的

属性;

2、document 对象,文档对象;

3、location 对象,浏览器当前 URL 信息;

4、navigator 对象,浏览器本身信息;

5、screen 对象,客户端屏幕信息;

6、history 对象,浏览器访问历史信息;

18、HTTP 协议中,GET 和 POST 有什么区别?分别适用什么场景

GET POST
缓存 能被缓存 不能缓存
历史 参数保留在浏览器历史中 参数不会保存在浏览器历史中
对数据长度的限制 当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度IE是 2048 个字符,chrome 最大长度8182个字符) 无限制
对数据类型的限制 只允许 ASCII 字符 没有限制,也允许二进制数据
安全性 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分 POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性 数据在 URL 中对所有人都是可见的 数据不会显示在 URL 中

适用场景:

post 一般用于表单提交

get 一般用于简单的数据查询,严格要求不是那么高的场景

19、用正则表达式,写出由字母开头,其余由数字、字母、下 划线组成的 6~30 的字符串

/^[a-zA-Z]\w{5,29}/

20、本地存储(Local Storage )和 cookies(储存在用户本地终端上的数据)之间的区别是什么

答: Cookies:服务器和客户端都可以访问;大小只有 4KB 左右;有有效期,过期后将会删除;

本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过 POST 或

者 GET 的通道发送到服务器;每个域 5MB;没有过期数据,它将保留知道用户从浏览器清除

或者使用 Javascript 代码移除

二、上机题(40分)

  • 共2题,每题20分

1、自己创建一个json文件,文件名test.json,内容不限,使用ajax请求,获取json文件内的数据(20分)

2、使用js手写一个视频播放器(20分)

打造个性的视频播放器需要用到的属性2-1:

controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)

打造个性的视频播放器需要用到的属性2-2

currentTime : 开始播放到现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音

视频播放器需要用到的方法和事件

play() : 媒体播放
pause() : 媒体暂停

webkitRequestFullScreen():全屏

timeupdate : 时间更新
canplay: 可以播放