JS
1.意外的全局变量
以下代码，输出是什么
function foo() {
let a = b = 0
a++
return a
}
foo()
typeof a // ...
typeof b // ...
答案
看第二行，let a = b = 0 确实声明了一个局部变量 a,同时声明一个全局变量 b
b是偶然创建的全局变量 b = 0被JS解释为window.b = 0
在浏览器中，上述代码相当于
function foo() {
let a
window.b = 0
a = window.b
a++
return a
}
foo()
typeof a // undefined
typeof b // number
2.空语句
看numbers输出什么
const length = 4
let numbers = []
for (let i = 0; i < length; i++); {
numbers.push(i + 1)
}
numbers // ?
注意 { 前面有个 ; 它创建了一个空语句，是不做任何事情的语句
上述代码相当于
const length = 4
let numbers = []
for (let i = 0; i < length; i++) {
// do nothing
}
{
// a simple block
numbers.push(i + 1)
}
numbers // [5]
3.递增输出1， 2， 3
let创建块级作用域
for (let i = 0; i <= 3; i++) {
setTimeout(() => {
console.log(i)
}, 1000)
}
IIFE解决闭包造成的问题
for (let i = 0; i <= 3; i++) {
(function (j) {
setTimeout(() => {
console.log(j)
}, 1000 * j)
})(i)
}
按值传递
function output(i) {
setTimeout(() => {
console.log(i)
}, 1000)
}
for (let i = 0; i <= 3; i++) {
output(i)
}
4.ES6新增属性
.find() | .findIndex()
.find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
.findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
let data = [
{ id: 1, price: 1 }, { id: 2, price: 2 }, { id: 3, price: 3 }, { id: 4, price: 4 }
]
let res_find = data.find(obj => obj.id === 4)
let res_findIndex = data.findIndex(obj => obj.id === 4)
res_find // {id: 4, price: 4}
res_findIndex // 3
5.复合题
Vue
1.Vue深度面试题
2. Props是单向绑定
Vue官方文档指出 Prop 是单向数据流的,是单向绑定的：
当父组件属性变化时，会将变化传给子组件，但是不会反过来（其实会出现反过来情况）。这是为了防止子组件无意中修改父组件状态。
如果父组件的一个数据对象被多个子组件同时引用，其中一个子组件修改了这个prop，这个prop的变化又会牵扯到其他子组件，非常危险。
- 当
prop为基本类型时，子组件修改prop控制台会报错
- 当
prop为引用类型时，子组件修改父组件传入prop不会报错
为了规范，子组件请使用局部data属性或者computed属性
通常有两种改变 prop 的情况：
- 1.prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
// 定义一个局部data属性，并将prop的初始值作为局部数据的初始值
props: ['initialCounter'],
data () {
return { counter: this.initialCounter }
}
- 2.prop 作为需要被转变的原始值传入.
// 定义一个computed属性，此属性从props的值计算得出
props: ['size'],
computed: {
normalizedSize () {
return this.size.trim().toLowerCase()
}
}
