js 面试题

1， 啥是盒模型？

盒模型的组成部分=content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

2， 语义化标签有哪些？

header--表示头部 footer--表示底部 nav--表示导航

3， Css选择器有哪些，他们的优先级是什么样的？

id>class>标签>通配符

4， Css中定位有哪些？分别有啥区别

1、**static** 默认值 相当于普通流；没有定位； 作用：可以用于取消元素之前的定位设置

2、**relative** 相对定位 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

3、**absolute** 绝对定位 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

4、**fixed** 固定定位 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

5、粘性定位 position：sticky；（css3新增属性，兼容性比较差） 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

5， Div如何实现垂直居中？

1.不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

2.绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

3.绝对定位方法：绝对定位下top left right bottom 都设置0

6， 清除浮动的方式有几种，分别说说！

1、在父标签结尾处，添加具有“clear:both”样式的空div标签；

2、父级div标签定义伪类“:after”和zoom属性；

3、父级div元素定义“overflow:hidden”样式。

7， 定义变量的方式有几种，分别有啥区别？

js中三种定义变量的方式：const， var， let。

1.const定义的变量不可以修改，而且必须初始化。

2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

8， 箭头函数和普通函数的区别是什么？

外形不同**：箭头函数使用箭头定义，普通函数中没有

箭头函数不能用于构造函数，不能使用new

箭头函数中this的指向不同 在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。 1.箭头函数本身不创建this 也可以说箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用。

9， 请简要说明，什么是原型，什么是原型链？

任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性proto指向它的构造函数的 prototype 指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有 prototype，只有方法才有 prototype。

原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。

10， 请说一下闭包和他的特点

一个函数作为另一个函数的返回值，返回的这个函数可以调用父函数内部的其他变量

特点：防止全局污染，保存外部活动变量

11， 请说说js的基本类型和引用类型

.基本类型：Underfined ,Null, Boolean,Number,String，Symbol

引用类型：Array，Function

12， 数组方法有哪些？

concat() 连接两个或更多的数组，并返回结果。 ​ includes() 判断一个数组是否包含一个指定的值。 ​ isArray() 判断对象是否为数组。 ​ join() 把数组的所有元素放入一个字符串。 ​ pop() 删除数组的最后一个元素并返回删除的元素。 ​ push() 向数组的末尾添加一个或更多元素，并返回新的长度。 ​ reverse() 反转数组 ​ shift() 删除第一元素 并返回删除的元素 ，原数组会改变 ​ slice(1,2) 数组截取 参数1 开始位置 参数2结束位置 但不包含结束下标元素 ​ sort 排序

every() 检测数值元素的每个元素是否都符合条件。只要有一个不符合就返回false 返回true/false ​ filter() 检测数值元素，并返回符合条件所有元素的数组。 ​ find() 返回符合传入测试（函数）条件的数组元素。 ​ findIndex() 返回符合传入测试（函数）条件的数组元素索引。 ​ forEach() 数组每个元素都执行一次回调函数。 ​ from() 通过给定的对象中创建一个数组。 ​ map() 通过指定函数处理数组的每个元素，并返回处理后的数组。 ​ reduce() 将数组元素计算为一个值（从左到右）。

13， 字符串方法有哪些？

charAt（位置）返回字符串指定位置处的字符

charCodeAt（位置）返回字符串指定位置处字符的

Unicode 编码值

indexOf（查找的字符串 [,StartIndex]）返回首次出现查找的字符串的位置

lastlndexOf（查找的字符串 [,StartIndex] ）返回要查找的字符串在

String 对象中最后一次出现的位置

match（正则表达式）在一个字符串中寻找与正则表达式匹配的字符串

replace（正则表达式, 新字符串）使用新字符串替换匹配正则表达式的字符串后作为新字符串返回

search（正则表达式）搜索与参数指定的正则表达式的匹配

split（分隔符 [,len]）根据参数指定的分隔符将字符串分隔为字符串数组

slice（索引值 i [, 索引值 j]）提取并返回字符串索引值 i 到索引值 j-1 之间的字符串

substring（索引值 i [, 索引值 j]）提取并返回字符串索引值 i 到索引值 j-1 之间的字符串

toLowerCase()将字符串中的字母全部转换为小写后作为新字符串返回

toUpperCase()将字符串中的字母全部转换为大写后作为新字符串返回

toString()返回字符串对象的原始字符串值。这是针对字符串对象的方法

valueOf()返回字符串对象的原始字符串值。这是针对字符串对象的方法

14， jQuery中的ajax 使用方法格式请写出来

$.ajax({
10 
11    type:"POST",
12 
13    url:"Handler.ashx",
14 
15    dataType:‘json’,
16 
17    data:{username:$("#name").val(),password:$("#pwd").val()},
18 
19    success:function(data){
20 
21      console.log(data);
22 
23    }
24 
25 }

15， 什么是事件冒泡，怎么阻止事件冒泡？

比如说在一个层层嵌套的HTML元素中，触发了最里面的那个HTML元素的某个事件，接下来会自里向外相继触发每一层HTML元素的相同事件，这就是事件冒泡

阻止事件冒泡: event.topPropagation()

16， Var a=NaN ,b =NaN 请问conse.log(a==b) 返回什么？

返回：false

17， Typeof( null ) 返回什么？

空对象

18， Ajax请求中的同步和异步怎么理解有啥区别？

1、同步中一个线程要等待上一个线程执行完才能开始执行，而异步中一个线程在执行中，下一个线程不必等待它执行完就可以开始执行；

2、同步是单线程操作，而异步是多线程操作；

3、异步的效率要高于同步。

19， 写一下冒泡排序

var arr=[1,8,7,3,5,4,9,40] ​ for(var i=0;i<arr.length;i++){ ​ for(var a=i+1;a<arr.length;a++){ ​ if(arr[i]>arr[a]){ ​ [arr[i],arr[a]]=[arr[a],arr[i]] ​ } ​ } } console.log(arr)(注意a=i+1 不是a=a+1,使用了解构赋值的写法)

20， 数组arr =[1,2,3,3,5,2,6] 请定义方法实现数组去重，得到【1,2,3,5,6】

// indexOf：去重第一种方法 var arr = [1, 5, 8, 9, 12, 26, 12, 5]; var newArr = []; for (let i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]); } } console.log(newArr);

    // 双重for循环 ：去重的第二种方法
    var arr = [1, 5, 8, 9, 12, 26, 12, 5];
    arr = arr.sort((a, b) => { return a - b })
    console.log(arr);
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(i, 1);
                j--;
            }
        }
    }
    console.log(arr);
 
    // es6新增set方法 ：去重的第三种方法
    var arr = [1, 5, 8, 9, 12, 26, 12, 5];
    var newArr = new Set(arr);
    console.log(newArr);
 
    function duplicates(arr) {
        var arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
        arr = arr.sort((a, b) => { return a - b })
        console.log(arr); // [1, 1, 2, 3, 3, 3, 4, 4, 5]
        let k = [];
        var flag = true;
        for (let i = 0; i < arr.length; i++) {
            for (let j = i + 1; j < arr.length; j++) {
                if (arr[i] === arr[j]) {
                    flag = false;
                    break;
                }
            }
            if (flag) {
                k.push(arr[i]);
            }
        }
        console.log(k);
        return k;
    }
    duplicates([1, 3, 4]);
    // console.log(duplicates([1, 3, 4]));