每日一题

第一题: ['1', '2', '3'].map(parseInt) 解析

执行结果:[1, NaN, NaN],此题需要注意以下两点

  • array.map(function(currentValue,index,arr), thisValue),map函数的第一个参数callback接收三个参数,第一个参数是当前被处理的元素,第二个参数是该元素的索引,第三个参数是数组本身
  • parseInt(string, radix)
    接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。当只使用一个参数时,我们都知道是将其转为整数;radix 取值为 2~36,表示当前数是几进制,并将这个数转成十进制,当不在这个范围时,会输出NaN,radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理

第二题:函数

var f = function g(){
  return 23;
}
typeof g()

Error, 函数表达式中后方的函数声明g并不会被定义

第三题:this的初级使用

var out = 25
var inner = {
  out: 20,
  func: function () {
    var out = 30
    console.log(this.out)
  }
  demo: () => {
    var out = 30
    console.log(this.out)
  }
}
a: (inner.func, inner.func)() // 25
b: inner.func() // 20
c: (inner.func)() // 20
d: (inner.func = inner.func)() // 25

上述全部调用demo,全输出25
  • a: 逗号运算符运算前一段表达式返回后一段表达式结果,唯一个函数指向windows
  • b和c: 作用域都是inner,也就是他们执行的其实是inner.func()
  • d: 等号运算inner.func = inner.func返回的是运算的结果,即函数inner.func,a相同

第四题: 下列代码输出什么

var a = 10;
(function () {
    console.log(a)
    a = 5
    console.log(window.a)
    var a = 20;
    console.log(a)
})()
// 依次输出:undefined -> 10 -> 20

第五题: vuex数据双向绑定实现
1、拆开v-model

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

2、使用带有 setter 的双向绑定计算属性

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

第六题:

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

console.log(a.x) // undefined
console.log(b.x) // {n: 2}
  • 优先级。.的优先级高于=,所以先执行a.x,堆内存中的{n: 1}就会变成{n: 1, x: undefined},改变之后相应的b.x也变化了,因为指向的是同一个对象。
  • 赋值操作是从右到左,所以先执行a = {n: 2},a的引用就被改变了,然后这个返回值又赋值给了a.x,需要注意的是这时候a.x是第一步中的{n: 1, x: undefined}那个对象,其实就是b.x,相当于b.x = {n: 2}

第七题:执行的结果并解释为什么

var obj = {
    '2': 3,
    '3': 4,
    'length': 2,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

结果:

Object(4) [empty × 2, 1, 2, splice: ƒ, push: ƒ]---->
[
  2: 1,
  3: 2,
  length: 4,
  push: ƒ push(),
  splice: ƒ splice()
]

变种

var obj = {
    '2': 3,
    '3': 4,
    'length': 0,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

结果:

Object(2) [1, 2, 2: 3, 3: 4, splice: ƒ, push: ƒ]---->
[
  0: 1,
  1: 2,
  2: 3,
  3: 4,
  length: 2,
  push: ƒ push(),
  splice: ƒ splice()
]

文章作者: 徐辉波
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 徐辉波 !
评论
 上一篇
React基础知识点 React基础知识点
react是三大前端主流框架之一。它有着庞大多生态体系,几乎所有开发需求都有成熟的解决方案;它上手简单,可在几小时内上手React技术,但知识很广,需要更多时间才能完全驾驭;它社区强大,使用人群多,可以很容易的找到志同道合的人一起学习
2019年05月18日
下一篇 
vue的实用技巧 vue的实用技巧
1.善用watch的immediate属性 通常在项目中有的需求是这样子的,项目初始化的时候执行一次,然后监听它的变化,在执行 created (){ this.fetchPostList() }, watch: { searchI
2019年04月21日
  目录