前端知识点总结——数组的reduce函数 / 数组扁平化 / 插槽 / 水平、垂直、水平垂直居中 / 防抖和节流 / 行内元素和块元素

数组的reduce函数

reduce方法没有独有的特点，它的功能for循环就可以实现，但是它的写法可能更加便捷。

arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

1. reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。回调函数接收四个参数，初始值 / 上一次函数的返回值，当前元素值，当前元素索引，调用reduce的数组
2. initialValue：如果没有initialValue时，prev为数组第一个元素，cur从数组第二个元素开始

initialValue为空：

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

结果为：reduce函数循环三次

1 2 1
3 3 2
6 4 3
[ 1, 2, 3, 4 ] 10

initialValue有初始值：

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0)
console.log(arr, sum);

结果为：reduce函数循环四次

0 1 0
1 2 1
3 3 2
6 4 3
[ 1, 2, 3, 4 ] 10

如果数组为空且initialValue没有初始值，程序报错

var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
//报错：TypeError: Reduce of empty array with no initial value

数组扁平化

利用reduce方法可以实现数组扁平化

1. 二维数组：

let arr = [[1,2,3],[4,5,6],[7,8,9]]
let newArr = arr => {
  return arr.reduce((pre,cur) => {
    return pre.concat(cur)
  })
}
console.log(newArr(arr)); // [1, 2, 3, 4, 5,  6, 7, 8, 9]

2. 多维数组

let arr = [[1,2,3],[4,5,[6,7,[8,9]]]]
let newArr = arr => {
  return arr.reduce((pre,cur) => {
    return pre.concat(Array.isArray(cur) ? newArr(cur):cur)
  },[])
}
console.log(newArr(arr));// [1, 2, 3, 4, 5,  6, 7, 8, 9]

插槽

1. 父组件需要在子组件中插入内容

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot></slot> //slot 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> {{ parent }}</ebutton>
  </div>
</template>

new Vue({
  el:'.app',
  data:{
    parent:'父组件'
  }
})

可以添加父组件内的任何值，但是不能使用子组件中的数据，父组件和子组件编译的作用域不相同。

2. 具名插槽

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one'> 这就是默认值1</slot>
      <slot name='two'> 这就是默认值2 </slot>
      <slot name='three'> 这就是默认值3 </slot>
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 
        <template v-slot:one> 这是插入到one插槽的内容 </template>
        <template v-slot:two> 这是插入到two插槽的内容 </template>
        <template v-slot:three> 这是插入到three插槽的内容 </template>
     </ebutton>
  </div>
</template>

3. 使用插槽实现子组件向父组件传参

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 
        <template v-slot:one = 'slotone'>  
           {{ slotone.value1 }}    // 通过v-slot的语法 将子组件的value1值赋值给slotone 
        </template>
        <template v-slot:default = 'slottwo'> 
           {{ slottwo.value2 }}  // 同上，由于子组件没有给slot命名，默认值就为default
        </template>
     </ebutton>
  </div>
</template>

实现方法：

• 在子组件的slot绑定一个value，value中为子组件的data
• 在父组件中通过v-slot定义一个变量来接受子组件传递的data
• 最后通过{{value.key}}的方式进行使用

水平居中

1. 父元素块级元素，子元素为行内元素

//给父元素设置：
text-align: center; 

2. 固定宽度的块级元素

//子元素设置
margin: 0 auto; 

3. 使用定位属性

//父元素
position:relative;
//子元素
position:absolute;
left:50%;
transform:translateX(-50%);

4. 使用flex布局

//父元素
display:flex;
justify-content:center;

垂直居中

1. 单行的行内元素

//子元素设置为和父元素一样的高度
line-height:100px

2. 多行的行内元素

//父元素
display:table-cell;
vertical-align:middle;

3. 使用定位

//父元素
position:relative;
//子元素
position:absolute;
top:50%;
transform:translateY(-50%)

4. 使用flex

//父元素
display:flex;
align-items:center;

水平垂直居中

1. 使用定位

//父元素
display:relative;
//子元素
display:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

2. 使用定位

//父元素
display:relative;
//子元素
display:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);

3. 使用flex

//父元素
display:flex;
justify-content:center;
align-items:center;

防抖和节流

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

应用场景：

1. 搜索框输入，只在最后一次输入完成后发送请求
2. 手机号、邮箱输入验证
3. 调整窗口大小，在调整完成后进行渲染

节流：每隔一段时间，只执行一次函数。

应用场景：

1. 防止表单重复提交
2. 谷歌搜索框实时显示搜索推荐

行内元素和块元素

行内元素：

1. 和其他元素都在同一行上
2. 高，行高及外边距和内边距不可改变
3. 宽度就是它的文字或图片的宽度，不可改变
4. 行内元素只能容纳文本或者其他行内元素
5. 设置行内元素，需要注意如下
   （1）设置宽度 width 无效。
   （2）设置高度 height 无效，但可以通过 line-height 来设置。
   （3）设置 margin 只有 左右有效，上下无效。
   （4）设置 padding 只有 左右有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

块级元素

1. 总是在新一行开始
2. 高度，行高以及外边距和内边距都可改变
3. 若宽度没有设置，则默认宽度为容器的100%，除非设定一个宽度
4. 块级元素可以容纳行内元素和其他块级元素