2.面试总结

时间  2019-12-04
标签 面试 总结 栏目 快乐工作 繁體版
原文   原文链接

1.position的值有哪些？html

一、static（静态定位）：默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
二、relative（相对定位）：生成相对定位的元素，经过top,bottom,left,right的设置相对于其正常（原先自己）位置进行定位。可经过z-index进行层次分级。  
三、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。可经过z-index进行层次分级。
四、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。可经过z-index进行层次分级。
复制代码

2.请选择结果为真的表达式？(B)es6

A.null installceof Object
B.null === undefined
C.null == undefined
D.NaN == NaN
null不具备任何对象的特性
复制代码

详解：blog.csdn.net/weixin_4204…跨域

3.var arr = [],typeof arr的结果是？数组

是对象，typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."咱们可使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)由于若是a不存在（未声明）则会出错，对于Array,Null等特殊对象使用typeof一概返回object，这正是typeof的局限性。
复制代码

4.["1","2","3"].map(parseInt);浏览器

为何 ["1","2","3"].map(parseInt) 却返回 [1,NaN,NaN]？parseInt 须要 2 个参数 (val, radix)， 而 map 传递了 3 个参数 (element, index, array)。
['1','2','3'].map(parseInt)
//  parseInt('1', 0) -> 1   //radix=0,以10为基数解析 1*10^1+0*10^0=10
//  parseInt('2', 1) -> NaN //radix=1<2,返回NaN
//  parseInt('3', 2) -> NaN //3没法转成二进制

//即遍历后结果为 [1,NaN,NaN]
复制代码

详解：juejin.im/post/5b7298…bash

5.js存储方式有哪几种方式？它们之间的区别是什么？

6.http状态码？经常使用的有哪些？ 

状态码表示了响应的一个状态，可让咱们清晰的了解到这一次请求是成功仍是失败，若是失败的话，是什么缘由致使的，固然状态码也是用于传达语义的。若是胡乱使用状态码，那么它存在的意义就没有了。

2XX 成功
200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，可是与 204 响应不一样在于要求请求方重置内容
206 Partial Content，进行范围请求

3XX 重定向
301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另外一个 URL，应使用 GET 方法获取资源
304 not modified，表示服务器容许访问资源，但因发生请求未知足条件的状况
307 temporary redirect，临时重定向，和302含义相似，可是指望客户端保持请求方法不变向新的地址发出请求

4XX 客户端错误
400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求须要有经过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源

5XX 服务器错误
500 internal sever error，表示服务器端在执行请求时发生了错误
501 Not Implemented，表示服务器不支持当前请求所须要的某个功能
503 service unavailable，代表服务器暂时处于超负载或正在停机维护，没法处理请求
复制代码

7.什么状况下会碰到跨域问题？有哪些解决方法？服务器

详解：juejin.im/post/5c6a27…闭包

8.下面代码输出结果是什么？frontend

setTimeout(function () {
    console.log(1);
})

new Promise(function(resolve,reject) {
  console.log(2);
  resolv(3)
}).then(function(val) {
    console.log(val);
})
console.log(4);

2,4,3,1
复制代码

详解：yuchengkai.cn/docs/fronte…函数

9.下面这个ul，请写出代码，让点击每一列的时候alert其index？

<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
    <li>这是第四条</li>
    <li>这是第五条</li>
</ul>

<script>
    //第一种方式，加入index属性
    // window.onload = function() {
    //     var test = document.getElementById('test');
    //     var list = test.getElementsByTagName('li');
    //     for(var i=0; i<list.length; i++){
    //         list[i].setAttribute('index',i);
    //         list[i].addEventListener("click", function(){
    //           console.log(this.getAttribute('index'), 'index');
    //         })
    //     }
    // };
    // 第二种方式，用let申明变量
    // window.onload = function() {
    //     const test = document.getElementById('test');
    //     const list = test.getElementsByTagName('li');
    //     for(let i=0; i<list.length; i++){
    //         list[i].addEventListener("click", function(){
    //           console.log(i, 'let');
    //         })
    //     }
    // };
    //方法3，使用闭包的方式
    // window.onload = function() {
    //     var test = document.getElementById('test');
    //     var list = test.getElementsByTagName('li');
    //     for(var i=0; i<list.length; i++) {
    //         list[i].addEventListener("click", function(num) {
    //             return function() {
    //                 console.log(num);
    //             }
    //         }(i))
    //     }
    // }
    // 方法4
    // window.onload = function() {
    //     var test = document.getElementById('test');
    //     var list = test.getElementsByTagName('li');
    //     for(var i=0; i<list.length; i++){
    //         list[i].index=i
    //         list[i].addEventListener("click", function(e){
    //           console.log(e.target.index);
    //         })
    //     }
    // };
</script>
复制代码

10.数组和数组对象去重

  • 方法1：利用对象访问属性的方法，判断对象中是否存在key、value
const arr = [
    {
        key: "1",
        value: "西瓜"
    },
    {
        key: "1",
        value: "苹果"
    },
    {
        key: "3",
        value: "桃子"
    }
];
const list = [
    {
        key: "1",
        value: "哈密瓜"
    },
    {
        key: "2",
        value: "黄瓜"
    },
    {
        key: "3",
        value: "黄瓜"
    }
];


function  unique (obj1,obj2,targe) {
    const data = []; // 建立一个新数组
    const obj = {}; // 建立一个新对象
    const list = obj1.concat(obj2);
    for (let i=0; i< list.length; i++) {
        if (!obj[list[i][targe]]) { // 判断对象不存在key、value
            data.push(list[i]);
            obj[list[i][targe]] = true;
        }
    }
    return data;
}        
console.log( unique(arr, list, "value"));
复制代码
  • 方法2：利用reduce方法遍历数组,reduce第一个参数是遍历须要执行的函数，第二个参数是item的初始值
const arr = [
    {
        key: "1",
        value: "西瓜"
    },
    {
        key: "1",
        value: "苹果"
    },
    {
        key: "3",
        value: "桃子"
    }
];
const list = [
    {
        key: "1",
        value: "哈密瓜"
    },
    {
        key: "2",
        value: "黄瓜"
    },
    {
        key: "3",
        value: "黄瓜"
    }
];

function  unique (obj1,obj2,targe) {
    const obj = {}; // 建立一个新对象
    const list = obj1.concat(obj2);
    const data = list.reduce(function(item,next) {
        if (!obj[next[targe]]) {
            item.push(next)
            obj[next[targe]] = true;
        }
        return item;
    }, []);
    return data;
}        
console.log(unique(arr, list, "value"));
复制代码
  • 方法3：利用Map的特性去重
const arr = [
    {
        key: "1",
        value: "西瓜"
    },
    {
        key: "1",
        value: "苹果"
    },
    {
        key: "3",
        value: "桃子"
    }
];
const list = [
    {
        key: "1",
        value: "哈密瓜"
    },
    {
        key: "2",
        value: "黄瓜"
    },
    {
        key: "3",
        value: "黄瓜"
    }
];

function unique(obj1,obj2,targe) {
    const data = [...obj1, ...obj2];
    const res = new Map();
    return data.filter((value) => {
       return !res.has(value[targe]) && res.set(value[targe], 1)
    } )
}          
console.log(unique(arr, list, "value"));
复制代码
  • 利用es6新增数据类型Set实现的方式
var arr = [1,2,3,4,5,2,3];
if((new Set(arr)).size != arr.length){
    alert("数组有重复值")
}
复制代码
  • 简单的去重方法
// 最简单数组去重法
/*
* 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
* IE8如下不支持数组的indexOf方法
* */
function uniq(array){
    var temp = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));
复制代码
  • 对象键值法去重
/*
* 速度最快， 占空间最多（空间换时间）
*
* 该方法执行的速度比其余任何方法都快， 就是占用的内存大一些。
* 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，
* 不是的话给对象新增该键并放入新数组。
* 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，
* 不一样的键可能会被误认为同样，例如n[val]-- n[1]、n["1"]；
* 解决上述问题仍是得调用“indexOf”。*/
function uniq(array){
    var temp = {}, r = [], len = array.length, val, type;
    for (var i = 0; i < len; i++) {
        val = array[i];
        type = typeof val;
        if (!temp[val]) {
            temp[val] = [type];
            r.push(val);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            r.push(val);
        }
    }
    return r;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
复制代码
  • 排序后相邻去除法
/*
* 给传入数组排序，排序后相同值相邻，
* 而后遍历时,新数组只加入不与前一值重复的值。
* 会打乱原来数组的顺序
* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
复制代码
  • 数组下标法
/*
*
* 仍是得调用“indexOf”性能跟方法1差很少，
* 实现思路：若是当前数组的第i项在当前数组中第一次出现的位置不是i，
* 那么表示第i项是重复的，忽略掉。不然存入结果数组。
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //若是当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；不然表明是重复的
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
复制代码
  • 优化遍历数组法
// 思路：获取没重复的最右一值放入新数组
/*
* 推荐的方法
*
* 方法的实现代码至关酷炫，
* 实现思路：获取没重复的最右一值放入新数组。
* （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/
function uniq(array){
    var temp = [];
    var index = [];
    var l = array.length;
    for(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            if (array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    console.log(index);
    return temp;
}

var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程