每日一题

1：下面的代码输出什么

var y = 1;

if (function f(){}) {

    y += typeof f;

}

console.log(y); // 1undefined

/*

function f(){}) 是函数定义并没有执行 所以会被转化为对象 而对象在if判断中结果为 true 

在js中直接使用为声明的变量会报错 但是在 typeof 这会直接返回undefinde

*/

2:webpack loader和plugin的区别
Loader：
用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。
loader的使用很简单：在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。
loader是运行在NodeJS中，可以用options对象进行配置。plugin可以为loader带来更多特性。loader可以进行压缩，打包，语言翻译等等。
loader从模板路径解析，npm install node_modules。也可以自定义loader，命名XXX-loader。
语言类的处理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何开发技术栈都可以使用webpack。

Plugin：
目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。
webpack功能强大，难点在于它的配置文件，webpack4默认不需要配置文件，可以通过mode选项为webpack指定了一些默认的配置，mode分为：development/production，默认是production。
插件可以携带参数，所以在plugins属性传入new实例。

3:填空题
输出对象中大于2的key的数组

let data = {a:1,b:2,c:3,d:4}
Object.keys(data).filter((x)=>{return ? ;})

/*
let data = {a:1,b:2,c:3,d:4}
Object.keys(data).filter((x)=>{return data[x] > 2;})
Object.keys 会获取对象中的key并生成一个数组 
得到key的数组后使用filter遍历每个值
通过动态的key从data中查找对应的value进行运算即可
*/

4:vue v-model的原理是什么
vue的过程中发现v-model的双向数据绑定很好用，v-model不过是一个语法糖

<input v-model="sth">

其实他相当于下面这个：

<input v-bind:value="sth" v-on:input="sth=$event.target.value">

自从html5开始input每次输入都会触发oninput事件，所以输入时input的内容会绑定到sth中，于是sth的值就被改变

5: a,b输出的值是什么

let a = {n:1}
let b = a 
a.x = a = {n:2}
console.log(a.x) 
console.log(b.x)

/*
 console.log(a.x)  //undefined
 console.log(b.x) //{n: 2}
*/

分析:
1:b = a 是浅拷贝，所以在堆栈中引用的是一个对象地址。

2:let a=1，b=2，c=3；
a = b = c；
输出的a，b，c结果都为3。 因为赋值运算从右向左执行。
而我们这道题 a.x = a = {n: 2}
. 的运算优先级大于赋值运算的优先级。
所以先计算a.x var a=1，b=2，c=3；
a = b = c；
输出的a，b，c结果都为3。 因为赋值运算从右向左执行。
而我们这道题 a.x = a = {n: 2}
. 的运算优先级大于赋值运算的优先级。
所以先计算a.x

1805046-20191021104427402-174552681.png

再计算 a = {n:2}

1805046-20191021104529513-969233437.png

所以截止到现在
a的输出值：{ n:2 };
b的输出值：{ n:1 , x={n:2} }

6: 手写一个闭包
let foo =()=>{
let a = 20
let bar =()=>{
a = a*2
return a
}
return bar
}

let b = foo()
let b2 = foo()
console.log('222',b()) //40
console.log('222',b()) //80
console.log('222',b()) //160
console.log('222',b2()) //40