面试题【Day13】

本篇绪论

1，undefined、null

2，深度(穿透)选择器

3, 解构赋值

4，vue之$emit用法

1, undefined、null

undefined

对声明但未赋值的变量返回类型为 undefined 表示值未定义

let a
console.log(a)  // undefined

null

null用于定义一个空对象，即如果变量要用来保存引用类型，可以在初始化的时候将其设置为null

var a = null
console.log(typeof a)  // object

2，深度(穿透)选择器

/deep/、>>>、::v-deep

3，解构赋值

解构赋值是一种js表达式，通过解构赋值可以把属性/值从对象或数组中取出，赋值给其他变量

let a, b, rest;
[a, b, ...rest] = [10, 20, 30, 40, 50, 60]
console.log(a) // 10
console.log(b) // 20
console.log(rest) // [30, 40, 50, 60]
// ... 扩展运算符，数组的扩展，将一个数组变为参数序列

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40})
console.log(a) // 10
console.log(b)  // 20
console.log(rest)  // {c: 30, d: 40}

let a = [1,2,3,4,5,6]
let [b, c] = a
console.log(b) // 1
console.log(c) // 2

// 默认值
let a, b;
[a = 10, b = 20] = [1]
console.log(a)  // 1
console.log(b)  // 20

// 变量交互
let a = 10;
let b = 20;
[a, b] = [b, a]
console.log(a)  // 20
console.log(b)  // 10

// 解构一个从函数返回的数组
function fn() {
  return [10, 20]
}
let a, b;
[a, b] = fn()
console.log(a)  // 10
console.log(b)  // 20

let o = {a: 10, b: 20}
let {a, b} = o
console.log(a)  // 10
console.log(b)  // 20

// 无声明赋值
let a, b;
({a, b} = {a: 10, b: 20})
console.log(a)   // 10
console.log(b)   // 20
// 圆括号()在使用对象字面量无声明解构赋值的时候是必须的。{a, b} = {a: 10, b: 20}不是有效的独立语句，因为左边的{a, b}被认为是一个块而不是一个对象字面量。
// ({a, b} = {a: 10, b: 20})是有效的，正如let {a, b} = {a: 10, b: 20}

// 给新的变量名赋值
let o = {a: 10, b: 20}
let {a: x, b: y} = o
console.log(x) // 10
console.log(y)  // 20

let {a: aa = 10, b: bb = 20} = {a: 30}
console.log(aa)  // 30
console.log(bb)  // 20

// For of迭代和解构
let people = [
  {
    name: 'one',
    family: {
      sister: 'xiaoA'
    }
  },
  {
    name: 'two',
    family: {
      sister: 'xiaoB'
    }
  },
  {
    name: 'three',
    family: {
      sister: 'xiaoC'
    }
  }
]
for (let {name: n, family: {sister: s}} of people) {
  console.log(n) // one two three
  console.log(s) // xiaoA xiaoB xiaoC
}

4，vue之$emit用法

父组件可以通过 props 把数据传给子组件，子组件可以使用 $emit 触发父组件的自定义事件

this.$emit(event, args)
this.$on(event, fn)

父组件：

<template>
  <div>
    <Son :sendData="string" @success="getSonData"/>
  </div>
</template>
<script>
import Son from '@/views/son.vue'
export default {
  components: {Son},
  data () {
    return {
      string: 'parent string'
    }
  },
  methods: {
    getSonData(v) {
      console.log(v)
    }
  }
  
}
</script>

子组件：

<template>
  <div>
    {{sendData}}
    <div @click="sendParentData" type="primary">按钮</div>
  </div>
</template>
<script>
export default {
  props: ['sendData'],
  data () {
    return {
    }
  },
  methods: {
    sendParentData() {
      let obj = {name: 'xiaowang'}
      this.$emit('success', obj)
    }
  }
}
</script>