前端面试笔试题总结

1.取出两个数组的不同元素

let a1 = [1, 3, 5, 6];
let a2 = [2, 3, 4, 6];


            let arr = a1.concat(a2).filter((v, i, arr) => {
                　　return arr.indexOf(v) === arr.lastIndexOf(v);
            });
            console.log(arr);  //[1, 5, 2, 4]

2.取出两个数组的相同元素

// 方法一
let a1 = [1, 3, 5, 6];
let a2 = [2, 3, 4, 6];

let arr = a1.concat(a2).filter((v, i, arr) => {
    return arr.indexOf(v) !== arr.lastIndexOf(v);
});
arr = [...new Set(arr)];
console.log(arr);    // [3, 6]

// 方法二
let arr = [];
a1.forEach(v => {
    if (a2.includes(v)) {
        arr.push(v);
    }
});
console.log(arr);   // [3, 6]

3.创建数组[0, 1, 2, 3, 4, 6, 7, 8, 9]

let arr = Array.from(new Array(10), (v, i) => i);
[...new Array(10).keys()];

 4.webpack中loader和plugins区别

loader:

　　loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。

1. 处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行。
2. 第一个执行的loader接收源文件内容作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行的loader会返回此模块的JavaScript源码。

插件(plugins)

　　插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

　　插件目的在于解决 loader 无法实现的其他事。

webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。

class MyPlugin{
    constructor(options){
        console.log("MyPlugin constructor:", options);
    }
    apply(compiler){
        compiler.plugin("compilation", compilation => {
            console.log("MyPlugin");
        });
    }
}
module.exports = MyPlugin;
 
 
webpack.config.js配置：
module.exports = {
    ...
    plugins: [
        new MyPlugin({param: "my plugin"})
    ]

使用该plugin后，执行的顺序：

1. webpack启动后，在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例。
2. 在初始化compiler对象后，就会通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件。
3. 并且可以通过compiler对象去操作webpack。

区别：

1 .文档定义loader为在模块加载时的预处理文件，故loader运行在打包文件之前。
2 . plugins的定义为处理loader无法处理的事物，例如loader只能在打包之前运行，但是plugins在整个编译周期都起作用。