前端每周学习分享--第3期

1.项目工具相关

1.1.浏览器小技巧

原文

• 网页长截图
  按 F12 弹出控制台，按 ctrl+shift+p 弹出输入框.
  输入full，选择 capture full size screenshot 然后点击就会对当前网页进图并生成下载一个图片。

2.阅读列表

• 在 Chrome DevTools 中调试 JavaScript 入门

• 你并不需要Underscore/Lodash

  Lodash 和 Underscore 是非常优秀的当代JavaScript的工具集合框架，它们被前端开发者广泛地使用。如今其中很多方法已经被ES6、ES7支持，我们可以根据需求来选择不适用Lodash或者Underscore。

• GitBook 从懵逼到入门

3.代码相关

3.1. (小程序)数据更新：父组件到子组件

情景：在父组件中异步获取了数据，获取的数据传递给子组件，在子组件的生命周期方法中使用获得的数据做计算，但取到的数据是父组件的初始数据。

通过打印可以看出先执行了子组件的生命周期方法再完成了父组件中的异步方法，而子组件没有监听父组件中数据的变化。

方案：

• 在父组件中控制子组件的渲染，wx:if=“{{数据不为初始数据}}”，这样子组件就会在数据准备好后再渲染，计算仍可放在生命周期方法中。（推荐）
• 所以不应该在子组件的生命周期方法中计算，此时数据还没准备好。这里使用observer来监听父组件的数据变化，判断数据准备好后再计算。

心得：处理异步与同步间的逻辑顺序。

3.2.console.log()打印引用数据动态更新的问题

var a = [{q:1}]

console.log(a) //[{"q":2,"w":2}]
var b = a.map(x=>{x.q=2;return x})
b[0].w=2
b.w=1

console.log(b) //[{"q":2,"w":2},w:1]

console.log(a) //[{"q":2,"w":2}]

解释：对象保存的是地址，引用同一片内存空间，后面发生改变，也会影响打印出来的值，可以转成字符串，打印在console执行的那一时刻的值

var a = [{q:1}]

console.log(JSON.stringify(a)) 
var b = a.map(x=>{x.q=2;return x})
b[0].w=2
b.w=1

console.log(JSON.stringify(b)) 
console.log(JSON.stringify(a))
打印：
[{"q":1}]
[{"q":2,"w":2}]
[{"q":2,"w":2}]

原文地址：<https://segmentfault.com/q/1010000010232676 >

心得：在代码中使用debugger设置断点来调试，而不是使用console.log（）

3.3.模板字面量

模板字面量 是允许嵌入表达式的字符串字面量。

模板字符串使用反引号 ( ) 来代替普通字符串中的用双引号和单引号。

模板字符串可以包含特定语法（${expression}）的占位符。

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

模板字符串中的换行、空格、缩进会被保留。

标签模板：可以用函数解析模板字符串。

var t1Closure = template${0}${1}${0}!;template是个函数，它会处理后面的模板字符串并返回。

3.4.代码优化

code review之后的一些优化：(后面部分参考自7 Useful JavaScript Tricks)

（1）获取对象部分内容

修改前：

let exp = this.data.exp,len = this.data.levelInfo.length;

修改后(解构赋值)：

const {exp, levelInfo, pointNum} = this.data

（2）寻找符合条件的array元素下标

修改前：

for(var index=0;index<len;index++){
        if(exp>=this.data.levelInfo[index].experience){
          level = this.data.levelInfo[index].level
          // console.log(level)
        }else{
          break;
        }
      }

修改后（Array.findIndex()）：

index = levelInfo.findIndex((item) => (item.experience > exp))

（3）给一组Object统一添加或去除字段
使用Array.map（）注：会返回新数组

points.map(item => ({
    ...item, active: level >= item.level,name:undefined
        })

（4）运算符号两侧留空格

（5）数组去重

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

（6）过滤数组中的非真值（0, undefined, null, false等等）

myArray.filter(Boolean);

（7）合并对象
const summary = {...person, ...tools, ...attributes};

3.4. vue引用组件

引用组件有3步：import导入，vue components{}挂载，使用

<template>

  <div>

​      <img src="@/assets/logo.png">

​      <HelloWorld></HelloWorld>	//使用

​      <Catalog></Catalog>

  </div>

</template>

<script>

import HelloWorld from '../components/HelloWorld'  //导入

import Catalog from "../components/Catalog"

export default {

  name: 'Home',

  components:{	//挂载

​        HelloWorld,

​        Catalog

​    },

}

</script>

<style>

</style>

4.概念思想

4.1. 惰性求值

惰性求值（Lazy Evaluation），又译为惰性计算、懒惰求值，也称为传需求调用（call-by-need），是计算机编程中的一个概念，它的目的是要最小化计算机要做的工作。 惰性求值中的参数直到需要时才会进行计算。这种程序实际上是从末尾开始反向执行的。它会判断自己需要返回什么，并继续向后执行来确定要这样做需要哪些值。

惰性计算的特点：

• 延迟计算，把要做的计算先缓存，不执行
• 数据管道，逐个数据通过“裁决”方法，在这个类似安检的过程中，进行过关的操作，最后只留下符合要求的数据
• 触发时机，方法缓存，那么就需要一个方法来触发执行。

原文：惰性求值——lodash源码解读