前端面试题（2）

6. 前端去重的方法

• 利用ES6 Set去重（ES6中最常用）

function unique (arr) {
    //Set数据结构，它类似于数组，其成员的值都是唯一的
    return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}
var arr = [1, '1', 1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, undefined,  null, null, 'undefined', 'null', 'undefined', 'null'];
//[1, '1', NaN, 'NaN', {a: 1}, '{a: 1}', {a: 1}, undefined, null, 'undefined', 'null']

不考虑兼容性，这种去重的方法代码最少，但是无法去掉"{a: 1}"对象

• 利用for嵌套for，然后splice去重（ES5中最常用）

function unique(arr){            
    for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
            if(arr[i]===arr[j]){         //第一个等同于第二个，splice方法删除第二个
                arr.splice(j,1);
                j--;
            }
        }
    }
return arr;
}
var arr = [1, '1', 1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, undefined,  null, null, 'undefined', 'null', 'undefined', 'null'];
//[1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, null, 'undefined', 'null']

无法去除NaN和{a: 1}对象，因为NaN === NaN和{a: 1} === {a: 1} 不成立

• 利用indexOf去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array.indexOf(arr[i]) === -1) {
           array.push(arr[i]);
        }
    }
    return array;
}
var arr = [1, '1', 1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, undefined,  null, null, 'undefined', 'null', 'undefined', 'null'];
//[1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, null, 'undefined', 'null']

无法去除NaN和{a: 1}对象

• 利用includes去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error')
        return
    }
    var array = [];
    for (var i = 1; i < arr.length; i++) {
        if (!array.includes(arr[i])) {
           array.push(arr[i]);
        }
    }
    return array;
}
var arr = [1, '1', 1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, undefined,  null, null, 'undefined', 'null', 'undefined', 'null'];
//[1, '1', NaN, 'NaN', {a: 1}, '{a: 1}', {a: 1}, undefined, null, 'undefined', 'null']

没有去除{a: 1}

• 利用reduce + includes

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1, '1', 1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, undefined,  null, null, 'undefined', 'null', 'undefined', 'null'];
//[1, '1', NaN, 'NaN', {a: 1}, '{a: 1}', {a: 1}, undefined, null, 'undefined', 'null']

没有去除{a: 1}

• 利用hasOwnProperty

function unique(arr){
    var obj = {};
    return arr.filter(item => obj.hasOwnProperty(typeof item + item) ? false : obj[typeof item + item] = true);
}
var arr = [1, '1', 1, '1', NaN, 'NaN', NaN, {a: 1}, '{a: 1}', {a: 1}, undefined, undefined,  null, null, 'undefined', 'null', 'undefined', 'null'];
//[1, '1', NaN, 'NaN', {a: 1}, '{a: 1}', {a: 1}, undefined, null, 'undefined', 'null']

完美解决。当还有更多的办法来解决这个问题，大家自己选择适合场景的即可

7.求该数组[1, 0, 3445, 87, 1209, 4, 7, 9]可形成的最大整数

function toInt(arr) {
    let newArr=arr.sort((a,b)=>{
        a =""+a;
        b = ""+b;
        let aLen=a.length;
        let bLen=b.length;
        let aIndex=0;
        let bIndex=0;

        while (aIndex<aLen && bIndex<bLen){
            let flag=false;
            if (a[aIndex]==b[bIndex]){
                aIndex+1<aLen && (aIndex++,flag=true);
                bIndex+1<bLen && (bIndex++,flag=true);
            }else{
                break;
            }
            if (!flag){
                break;
            }
        }
        if (a[aIndex]>b[bIndex]){
            return -1;
        }else{
            return 1;
        }
    });
    return newArr.join("");
}
const array = [1, 0, 3445, 87, 1209, 4, 7, 9]; 
const intNum=toInt(array);
//987743445120910

• 将数组中所有数字转为字符串，按照首字母大小进行整体排序。
• 如果首字母相同，就通过while循环向后比较。
• 如果相比较的两个字符串长度不一样，先被循环完的字符串将始终用最后一位字母进行后续比较，比如1209和1进行比较时，前一位相同，1209的2就和1中的最后一位1进行比较，以此类推。

8. cookie的属性和作用
   cookie如图：

   
   
   

   一个域名下面可能存在着很多个cookie对象。
   Name：一个cookie的名称
   Value：一个cookie的值
   Domain：cookie的域。如果设成.test.com，那么子域名a.test.com和b.test.com，都可以使用.test.com的cookie
   Path：可以访问此cookie的页面路径，一般设置成/即可
   Expires/Max-Age：cookie过期时间。不设置，则为Session会话期，关闭页面，cookie失效。若设置其值为一个时间，那么当到达此时间后，此cookie失效
   Size：此cookie大小。
   HttpOnly：若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
   Secure：标记为Secure的cookie，只能通过https请求发送
   SameSite：用来防止 CSRF 攻击和用户追踪。有3个值：Strict/Lax/None。Strict: 最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie，仅允许发送同站点请求的的cookie；Lax: 允许部分第三方请求携带cookie，即导航到目标网址的get请求。包括超链接<a href='...' />，预加载<link rel="prerender" />和get表单<form method="GET" />三种形式发送cookie；None: 设置为None，任意发送cookie，需要同时设置Secure，意味着网站必须采用https，若同时支持http和https，可以将http用307跳转到https
   Priority：优先级，chrome的提案，定义了三种优先级，Low/Medium/High，当cookie数量超出时，低优先级的cookie会被优先清除

9. 说一下浏览器缓存
   浏览器缓存分为强缓存和协商缓存，强缓存会直接从浏览器里面拿数据，协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据
   控制强缓存的字段有：Expires和Cache-Control
   ，若同时设置了Cache-Control和Expires，Cache-Control的优先级高于Expires。
   控制协商缓存的字段有：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高，因为它被认为更准确。

10. 常见跨域的解决方案
    可以参考这篇文章
    https://juejin.im/post/6844903767226351623