Leo`s TechStack
FrontEnd Categories
# JS Generator
# 概念
Generator 函数是 ES6 提供的一种异步编程解决方案。它既是一个生成器，也是一个状态机，内部拥有值及相关的状态，生成器返回一个迭代器 Iterator 对象，我们可以通过这个迭代器，手动地遍历相关的值、状态，保证正确的执行顺序。
# 特征
function 关键字与函数名之间有一个星号（ES6 没有规定，function 关键字与函数名之间的星号，写在哪个位置）。函数体内部使用 yield 表达式，定义不同的内部状态。调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）
function* gen() {
yield 1
yield 2
return 3
yield 4
}
let g = gen();
console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 2, done: false}
console.log(g.next()) // {value: 3, done: true}
console.log(g.next()) // {value: undefined, done: true}
2
3
4
5
6
7
8
9
10
11
12
# new的模拟实现
# new
一句话介绍 new:
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一
也许有点难懂，我们在模拟 new 之前，先看看 new 实现了哪些功能。
举个例子：
// Otaku 御宅族，简称宅
function Otaku (name, age) {
this.name = name;
this.age = age;
this.habit = 'Games';
}
// 因为缺乏锻炼的缘故，身体强度让人担忧
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
console.log('I am ' + this.name);
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60
person.sayYourName(); // I am Kevin
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# JS 数组去重
# 双层循环
也许我们首先想到的是使用 indexOf 来循环判断一遍，但在这个方法之前，让我们先看看最原始的方法：
var array = [1, 1, '1', '1'];
function unique(array) {
// res用来存储结果
var res = [];
for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
for (var j = 0, resLen = res.length; j < resLen; j++ ) {
if (array[i] === res[j]) {
break;
}
}
// 如果array[i]是唯一的，那么执行完循环，j等于resLen
if (j === resLen) {
res.push(array[i])
}
}
return res;
}
console.log(unique(array)); // [1, "1"]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
在这个方法中，我们使用循环嵌套，最外层循环 array，里面循环 res，如果 array[i] 的值跟 res[j] 的值相等，就跳出循环，如果都不等于，说明元素是唯一的，这时候 j 的值就会等于 res 的长度，根据这个特点进行判断，将值添加进 res。
看起来很简单吧，之所以要讲一讲这个方法，是因为——————兼容性好！
# JavaScript 深浅拷贝
# 数组的浅拷贝
如果是数组，我们可以利用数组的一些方法比如：slice、concat 返回一个新数组的特性来实现拷贝。
比如：
var arr = ['old', 1, true, null, undefined];
var new_arr = arr.concat();
new_arr[0] = 'new';
console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr) // ["new", 1, true, null, undefined]
2
3
4
5
6
7
8
# js检测数据类型四种办法
# typeof
1 console.log(typeof "");
2 console.log(typeof 1);
3 console.log(typeof true);
4 console.log(typeof null);
5 console.log(typeof undefined);
6 console.log(typeof []);
7 console.log(typeof function(){});
8 console.log(typeof {});
2
3
4
5
6
7
8
看看控制台输出什么
可以看到，typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用的。
# Vuex 原理解析
Vuex 是专门为 Vuejs 应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
# Vuex 的构成
由上图，我们可以看出Vuex有以下几个部分构成：
# Vuex
使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。
如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
# State
state即Vuex中的基本数据！
# 单一状态树
Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。
# 混入 — Vue.js
# 基础
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
例子：
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 防抖
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
# 工作流
Redux 中 只有一个
state树，存在以唯一的一个store。
# 核心概念
# store
store 是状态数用来保存数据，它的常用的三个属性及方法 dispatch ,getState ,subscribe。
dispatch(action) 方法接收一个 action 用来作为处理数据的类型，它返回传入的 action ，初始化时会自动执行一次。
getState() 方法返回状态数据。
subscribe(func)=>fun 方法接收一个函数，当数据更新后，传入的函数就会被自动执行。此函数返回一个 unsubscribe 函数，他用来解绑传入的函数，此后数据更新，一开始传入的函数将不再执行。