JavaScript（五）

最新推荐文章于 2024-02-08 14:35:26 发布

苏喂苏喂苏喂su

最新推荐文章于 2024-02-08 14:35:26 发布

阅读量210

点赞数 1

分类专栏：考题

本文链接：https://blog.youkuaiyun.com/joyvonlee/article/details/98207481

版权

考题专栏收录该内容

17 篇文章

订阅专栏

1、如何优化前端页面加载速度？

将小的图片合并成一张Sprite图，可以减少HTTP请求。
使用缓存。
css文件放在头部head，脚本文件放在body的底部。
使用懒加载
使用内容分发网络（CDN）
压缩css和js文件
减少重定向，因为重定向会导致HTTP请求增加。

2、对该数组进行去重

let arr = [NaN, 1, 1, "2", "2", "hello", "hello", NaN]

该题有一个坑，就是NaN的存在，如果使用indexOf方法的话，结果不会是你想要的。如：

let arr = [NaN, 1, 1, "2", "2", "hello", "hello", NaN]
let arr2 = arr.filter((item, index, arr) => {
    return arr.indexOf(item) == index;
})
console.log(arr2)    // [1, "2", "hello"]

◀️◀️◀️◀️◀️ NaN不见了

原因是NaN有一个特性，它不等于任何值，包括它自身。所以，即使arr数组中有NaN这个元素，indexOf在进行查找的时候也无法匹配，没有办法，这个是NaN的特性！

填坑：推荐两个方法：

ES6的new Set

let arr = [NaN, 1, 1, "2", "2", "hello world", NaN];
let arr2 = new Set(arr);
console.log(arr3)

增加类型判断

let ar = [NaN, 1, 1, "2", "2", "hello world", NaN];
let obj = {};
let arr2 = [];
arr.forEach(function(item){
    let key = typeof item + item;
    if (!obj[key]) {
        arr2.push(item);
        obj[key] = true;
    }
})

console.log(arr2);

3、让一个div（不确定宽高），在页面上水平垂直居中的方法

使用弹性布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div {
            width: 100px;
            height: 100px;
            background: yellow;
        }
    
    </style>
</head>
<body>
    <div></div>
</body>
</html>

使用绝对定位 + transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        div {
            width: 100px;
            height: 100px;
            background: yellow;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4、生成10个10-100的随机数存到一个数组中，然后进行升序排序

let arr = [];
let length = 10
for(let i = 1; i <= length; i++) {
    let n = Math.floor(Math.random() * 100);
    if(n >= 10) {
        arr.push(n);
    }else {
        length ++
    }
}

arr.sort((a, b) => {
    return a - b
})

console.log(arr)

5、写一个sum方法，当使用下面的语法调用时它将正常工作

console.log(sum(2,3));       // Outputs 5
console.log(sum(2)(3));      // Outputs 5

function sum() {
    let arg = [...arguments];
    if(arg.length > 1) {
        return arg.reduce((a, b) => a + b)
    }else {
        return function f() {
            return [...arguments][0] + arg[0]
        }
    }
}

6、考虑下面的代码片段

for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); }); 
  document.body.appendChild(btn);
}

当用户点击“按钮4”时，什么被记录到控制台？为什么？

答：输出5，因为给button绑定事件的时候，函数是没有被运行的，当循环结束的时候，i 值为5，而函数里的 i 同样是5，实际上这个例子中，每个i的值都是5；

如果要让5个button分别输出0，1，2，3，4的话，有两种方法

1、for循环中的var改为let，这是最简单的方法，改为let之后for循环的i就是属于块级作用域的变量了，不会污染到后面的函数。

2、为绑定的函数定义一个立即执行函数，如下：

for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button ' + i));
  
    (function(x) {
        btn.addEventListener('click', function(){ console.log(x) })
    })(i)
   
    document.body.appendChild(btn);
}