Leo`s TechStack

前端开发 ....

Http 缓存

Galloping_Leo 2021-04-25 零散笔记

axios 原理

Galloping_Leo 2021-04-25 零散笔记

CDN 缓存

Galloping_Leo 2021-04-25 零散笔记

JS Generator

# 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}

1
2
3
4
5
6
7
8
9
10
11
12

Galloping_Leo 2021-04-18 JavaScript

JS new的模拟实现

# 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Galloping_Leo 2021-04-18 JavaScript

JS 数组去重

# 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"]

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。

看起来很简单吧，之所以要讲一讲这个方法，是因为——————兼容性好！

Galloping_Leo 2021-04-18 JavaScript

JavaScript 深浅拷贝

# 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]

1
2
3
4
5
6
7
8

Galloping_Leo 2021-04-18 JavaScript

JS 检测数据类型四种办法

# 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 {});

1
2
3
4
5
6
7
8

看看控制台输出什么

可以看到，typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用的。

Galloping_Leo 2021-04-18 JavaScript

websocket

# websocket

websocket 是一种网络协议，允许客户端服务端全双工进行网络通讯，客户端服务端可以互相发消息。一旦建立连接就不会中断，性能高、比 ajax 轮询效率高且实时

Galloping_Leo 2021-04-18 零散笔记

Vue 源码解析之模板引擎 mustache 原理

# mustache

# Mustache 基础语法

let domString = Mustache.render(tempalte, data)

domString 是把 data 和 tempalte 整合而成的 HTML 字符串。

Galloping_Leo 2021-04-17 零散笔记

1234567 下一页跳转至前往

Galloping_Leo

132

文章

34

友情链接

关大洲 - 少年游

00:00

02:53

Leo`s TechStack

Leo`s TechStack

Choose mode

# JS Generator

# 概念

# 特征

# new的模拟实现

# new

# JS 数组去重

# 双层循环

# JavaScript 深浅拷贝

# 数组的浅拷贝

# js检测数据类型四种办法

# typeof

# websocket

# mustache

# Mustache 基础语法

Galloping_Leo

132

文章

34

标签

分类

标签

友情链接

Leo`s TechStack

Leo`s TechStack

# JS Generator

# 概念

# 特征

# new的模拟实现

# new

# JS 数组去重

# 双层循环

# JavaScript 深浅拷贝

# 数组的浅拷贝

# js检测数据类型四种办法

# typeof

# websocket

# mustache

# Mustache 基础语法

Galloping_Leo

132

文章

34

标签

分类

标签

友情链接

react-spring

docschina

TypeScript中文网

velocity.js

Create React App 中文文档

Create React App Original

Emotion

Reach Router

冴羽 segmentfault