2.面试总结-CSDN博客

1.position的值有哪些？

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。&emsp;&emsp;
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
复制代码

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

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…

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.下面代码输出结果是什么？

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));
复制代码