FrankKai

### 源码分析 对于this.b = 2，vue跳过evaluate阶段，直接得到返回值this.a，是如何优化的呢？ 下面我们来看源码： 源码地址：[state.js](https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js) computed相关的有三个非常重要的函数： - createComputedGetter（脏检查，依赖收集） - 关键的watcher.js（Watcher） - 关键的dep.js（依赖） 先来看看最最核心的代码 ```js // 脏检查, 执行计算 if (watcher.dirty) { watcher.evaluate() } // Dep更新依赖 if (Dep.target) { watcher.depend()...

### 基于源码分析拆解执行表现 - 初始化a,b,c均为1时，foo()如何计算？ - 如果此时this.a = 0，foo()如何计算？ - 如果此时this.b = 2，foo()如何计算？ - 如果a的初始值为-1，执行this.a = 1，foo()如何计算？ ```js computed : { foo() { if(this.a>0){ return this.a} else { return this.b +...

### 一句话总结 **一个computed属性中，每个类似this.foo的调用，都会在get()中重新收集依赖。 当依赖收集大于一次（不是一个）时，视为脏（dirty）计算属性，需要重新 evaluate再取值。 对于干净的计算属性，不需重新执行evaluate，vue直接取值即可。**

### rest parameters #### rest parameters语法 **rest parameter语法允许我们将不确定的arguments当作数组。** ```js function sum(...theArgs) { return theArgs.reduce((acc, cur)=> acc+cur)) } console.log(sum(1, 2, 3)); // 6 ``` 语法：`function f(a, b, ...theArgs){ //... }` 函数的最后一个形参可以使用...前缀把剩余的arguments存储在一个标准的js数组中。...

### Spread syntax #### 几种spread场景 - function calls 展开arguments `myFunction(...iterableObj);` - array or strings literals 展开元素 `[...iterableObj, '4', 'five', 6];` - object literals 展开key-value对 es2018 `let objClone = { ...obj...

### ...操作符实践 #### 通过...操作符克隆出的数组和对象，是浅拷贝还是深拷贝？ 亲测。**浅拷贝**。 数组验证： ```js var foo = [1,2,3,{hi:'es5'}]; var bar = [...foo]; bar[3].hi = 'es6'; bar; // [1,2,3,{hi:'es6'}] foo; // [1,2,3,{hi:'es6'}] 注意这里，由于...是浅拷贝，所以foo也跟着变成es6了 ``` 对象验证： ```js var foo...

### 总结与思考 - rest parameter是收集剩余，快捷转换arguments为数组 - spread syntax是展开组合，替代apply，向new构造器传值，快捷复制和重组数组和对象 - 二者都是以...的形式存在，无须过于关注其区别，关注如何简化代码，关注如何使得代码更优雅

### 只出现一次的数字 ```js 给定一个非空整数数组，除了某个元素只出现一次以外，其余每个元素均出现两次。找出那个只出现了一次的元素。 示例 1: 输入: [2,2,1] 输出: 1 示例 2: 输入: [4,1,2,1,2] 输出: 4 ``` 答案 ```js /** * @param {number[]} nums * @return {number} */ var singleNumber...

### 汇总区间 ```js 给定一个乱序整形数组[0,1,7,13,15,16,2,4,5]，找出其中连续出现的数字区间为如下：["0->2", "4->5", "7", "13", "15->16"] ``` 答案 ```js function continuous(arr) { arr.sort((a, b) => a - b); let stack = []; let result = []; for (let...

### 实现红绿灯效果 ```js 实现红绿灯效果，使用console 输出 “红”、“绿”、“黄”示意，等待时间分别为 3s、2s、1s ``` 答案 ```js function trafficCtrl() { // timeline 红0~2 绿3~4 黄5 const borders = { red: 3, green: 5, yellow: 6 }; let...