【前端面试分享】-2019“银十”面试题记录

（因为obj._proto_===obj.constructor.prototype,对象的隐式原型_proto_等于构造这个对象的函数的显示原型prototype）

Function.prototype.__proto__ === Object.prototype

obj.__proto__=== Object.prototype //Object.prototype

确是一个特例——它的__proto__指向的是null，切记切记！

function init() {
    var name = "Mozilla"; // name 是一个被 init 创建的局部变量
    function displayName() { // displayName() 是内部函数,一个闭包
        alert(name); // 使用了父函数中声明的变量
    }
    displayName();
}
init();

function a(){
    var i=0;
    function b(){
        alert(++i);
    }
    return b;
}
var c=a();
c();

let r=[]
for (let i=0;i<5;i++) {
	let index=i+1
	let res_all=vm.$apid.allService(100,1,index).then((val)=>{//allService(100,1,1) size,current,serviceType
		let res=val.data.data.records
		r[i] = res.map(item => {
			return {
				name: item.serviceName,
				key: item.serviceId,
				icon: vm.$store.state.myBaseUrl+vm.$store.state.devUrl+item.imgUrl,
				cat: index
			}
		})
		console.log(r)
	})
}//循环请求异步问题

<a>1</a><a>2</a><a>3</a>

var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');
};
// 这个代码是错误的，因为变量i从来就没被locked住
// 相反，当循环执行以后，我们在点击的时候i才获得数值
// 因为这个时候i操真正获得值
// 所以说无论点击那个连接，最终显示的都是I am link #3（如果有3个a元素的话）

解决1：用闭包解决
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener('click', (function (num) {
        return function(e){
             e.preventDefault();
            alert('I am link #' + num);
        }
    })(i), 'false');
};
//因为i相对匿名函数是外面的变量，就把循环绑定的时候，将i的值传入到匿名函数内，
就可以了。因此需要在匿名函数（事件函数）外包裹一个匿名函数, 并立即执行。

解决2：把var换成let
var elems = document.getElementsByTagName('a');
for (let i = 0; i < elems.length; i++) {
    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');
};
//var 命令的变量提升机制，var 命令实际只会执行一次。
//而 let 命令不存在变量提升，所以每次循环都会执行一次，声明一个新变量（但初始化的值不一样）。
//for 的每次循环都是不同的块级作用域，
//let 声明的变量是块级作用域的，所以也不存在重复声明的问题。

let生命变量的for循环里，每个匿名函数实际上引用的都是一个新的变量

解决3：没用到闭包解决
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
    elems[i].num = i;
    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + this.num);
    }, 'false');

};

(function(){
    console.log(a)//undefined
    var a=1;
})()
(function(){
    console.log(a)//报错： Cannot access 'a' before initialization
    let a=1;
})()
(function(){
    {let a=1}
    console.log(a)//报错：a is not defined
})()

Webpack 主要在打包中处理了下面这些问题：

1.从入口文件开始分析整个应用的依赖树
2.将每个依赖模块包装起来，并放到一个数组中等待调用
3.实现模块加载的方法，并提供到模块执行的环境中，使得模块间可以互相调用
4.将执行入口文件的逻辑放在一个立即执行函数表达式中

module.exports = {
// 配置打包选项  development开发环境
mode: 'development', // production 生产环境
// 指定入口文件：要打包的文件
entry: './src/js/index.js',
// 指定输出文件：打包之后的文件
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
},
// 配置资源的加载器 loader
module: {
    rules: [
    // 配置js的加载器（把ES6转化为ES3/5代码）
    {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        //打包除这个文件之外的文件
        exclude: path.join(__dirname, './node_modules'),
        //打包包括的文件
        include: path.join(__dirname, './src')
    },
    // 配置css的加载器
    {
        // 匹配.css结尾的文件
        test: /\.css$/,
        // 配置css文件的加载器,处理顺序：从右向左
        use: ['style-loader', 'css-loader']
    },
    // 配置less的加载器
    {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
    }
    ]
},
// 配置插件
plugins: [
    new CleanWebpackPlugin(),
    // 动态生成html
    new HtmlWebpackPlugin({
    title: '测试标题',
    template: 'index.html'
    })
],
// 配置实时预览环境 
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 5000
}
}

var webpack = require('webpack');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
 
module.exports = {
    // 配置入口
    entry: {
        about: './src/pages/about/about.js',
        contact: './src/pages/contact/contact.js'
    },
    // 配置出口
    output: {
        path: __dirname + "/dist/",
        filename: 'js/[name]-[hash:5].js',
        publicPath: '/',
    },
   
    module: {
        loaders: [
            //解析.js
            {   
                test: '/\.js$/',  
                loader: 'babel',  
                exclude: path.resolve(__dirname, 'node_modules'), 
                include: path.resolve(__dirname, 'src'),
                query: {
                    presets: ['env'] 
                }
            },
            // css处理
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader' 
               
            },
            // less处理
            { 
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            },
            // 图片处理
            { 
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
 
                query: {
                    name: 'assets/[name]-[hash:5].[ext]'
                },
            },{
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader'] 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin(__dirname + '/assert/css/common.less'),
        //  minify:{
        //     removeComments: true,//删除注释
        //     collapseWhitespace:true//删除空格
        // }
        new HtmlWebpackPlugin({
            filename: __dirname + '/dist/about.html',
            inject: 'head',
            template: 'html-withimg-loader!'+__dirname + "/src/pages/about/about.html",
            chunks: ['about'],
            inlineSource: '.(js|css)$'
        }),
        new HtmlWebpackPlugin({
            inject: 'head',
            filename: __dirname + '/dist/contact.html',
            template: __dirname + "/src/pages/contact/contact.html",
            chunks: ['contact'],
            inlineSource: '.(js|css)$'
        }),
        //设置每一次build之前先删除dist
        new CleanWebpackPlugin(
            ['dist/*', 'dist/*',],      //匹配删除的文件
            {
                root: __dirname,                 //根目录
                verbose: true,                  //开启在控制台输出信息
                dry: false                  //启用删除文件
            }
        )
    ],
    // 起本地服务，我起的dist目录
    devServer: {
        contentBase: "./dist/",
        historyApiFallback: true,
        inline: true,
        hot: true,
        host: '192.168.1.107',//我的局域网ip
    }
}

Object.defineProperty(obj, prop, descriptor)

obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。

//这段代码太重要了，请记住！
let hr={
    skill:'',
    experience:''
}
Object.defineProperty(hr, 'skill', {
    get(){
        console.log('必备技能：')
        return '不放鸽子'
    },
    set(newVal){
        console.log('经验要求：')
    }
})

//读：
console.log(hr.skill)
//写：
hr.skill='五年起步'

控制台打印

必备技能：
不放鸽子
经验要求：
"五年起步"

html{//750的屏幕
   font-size=10px；
   /*font-size=62.5% //这里就是10/16x100%=62.5% 也就是默认10px的字号*/
}
@media screen and (min-width: 640px){
  html{
    font-size: ？;
  }
}

问号里的值是多少？
解：
750/640=10/x

.wrapper{
    display:flex;
    flex-direction: column;  //竖轴方向
}
.body{
    flex:auto;      //自动铺满剩余空间
}

function binary_search(arr,target) {
    let min=0
    let max=arr.length-1
    while(min<=max){
    	let mid=Math.ceil((min+max)/2)
    	if(arr[mid]==target){
    		return mid
    	}else if(arr[mid]>target){
    		max=mid-1
    	}else if(arr[mid]<target){
    		min=mid+1
    	}
    }
	return "null"
}
console.log(binary_search([1,5,7,19,88],19))//3

    var arr=[10,20,50,100,40,200];
    for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-1-i;j++){
        if(arr[j]>arr[j+1]){
            var temp=arr[j]
            arr[j]=arr[j+1]
            arr[j+1]=temp
        }
    }
    }
    console.log(arr)

function distinct(arr) {
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }

    return result
}