类型转换

Posted on 2020-12-29 In javascript , 前端基础

类型转换

引用类型

在ECMAScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。

我们通常所说的对象，就是某个特定引用类型的实例。

在ECMAScript关于类型的定义中，只给出了Object类型，实际上，我们平时使用的很多引用类型的变量，并不是由Object构造的，但是它们原型链的终点都是Object，这些类型都属于引用类型。

Array 数组
Date 日期
RegExp 正则
Function 函数

6.1 包装类型

为了便于操作基本类型值，ECMAScript还提供了几个特殊的引用类型，他们是基本类型的包装类型：

Boolean
Number
String

注意包装类型和原始类型的区别：

true === new Boolean(true); // false
123 === new Number(123); // false
'ConardLi' === new String('ConardLi'); // false
console.log(typeof new String('ConardLi')); // object
console.log(typeof 'ConardLi'); // string

引用类型和包装类型的主要区别就是对象的生存期，使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中，而自基本类型则只存在于一行代码的执行瞬间，然后立即被销毁，这意味着我们不能在运行时为基本类型添加属性和方法。

1
2
3

var name = 'ConardLi'
name.color = 'red';
console.log(name.color); // undefined

6.2 装箱和拆箱

装箱转换：把基本类型转换为对应的包装类型
拆箱操作：把引用类型转换为基本类型

既然原始类型不能扩展属性和方法，那么我们是如何使用原始类型调用方法的呢？

每当我们操作一个基础类型时，后台就会自动创建一个包装类型的对象，从而让我们能够调用一些方法和属性，例如下面的代码：

1 2	var name = "ConardLi"; var name2 = name.substring(2);

实际上发生了以下几个过程：

创建一个String的包装类型实例
在实例上调用substring方法
销毁实例

也就是说，我们使用基本类型调用方法，就会自动进行装箱和拆箱操作，相同的，我们使用Number和Boolean类型时，也会发生这个过程。

从引用类型到基本类型的转换，也就是拆箱的过程中，会遵循ECMAScript规范规定的toPrimitive原则，一般会调用引用类型的valueOf和toString方法，你也可以直接重写toPeimitive方法。一般转换成不同类型的值遵循的原则不同，例如：

引用类型转换为Number类型，先调用valueOf，再调用toString
引用类型转换为String类型，先调用toString，再调用valueOf

若valueOf和toString都不存在，或者没有返回基本类型，则抛出TypeError异常。

const obj = {
  valueOf: () => { console.log('valueOf'); return 123; },
  toString: () => { console.log('toString'); return 'ConardLi'; },
};
console.log(obj - 1);   // valueOf   122
console.log(`${obj}ConardLi`); // toString  ConardLiConardLi

const obj2 = {
  [Symbol.toPrimitive]: () => { console.log('toPrimitive'); return 123; },
};
console.log(obj2 - 1);   // valueOf   122

const obj3 = {
  valueOf: () => { console.log('valueOf'); return {}; },
  toString: () => { console.log('toString'); return {}; },
};
console.log(obj3 - 1);
// valueOf
// toString
// TypeError

除了程序中的自动拆箱和自动装箱，我们还可以手动进行拆箱和装箱操作。我们可以直接调用包装类型的valueOf或toString，实现拆箱操作：

1
2
3

var num =new Number("123");
console.log( typeof num.valueOf() ); //number
console.log( typeof num.toString() ); //string

七、类型转换

因为JavaScript是弱类型的语言，所以类型转换发生非常频繁，上面我们说的装箱和拆箱其实就是一种类型转换。

类型转换分为两种，隐式转换即程序自动进行的类型转换，强制转换即我们手动进行的类型转换。

强制转换这里就不再多提及了，下面我们来看看让人头疼的可能发生隐式类型转换的几个场景，以及如何转换：

7.1 类型转换规则

如果发生了隐式转换，那么各种类型互转符合下面的规则：

7.2 if语句和逻辑语句

在if语句和逻辑语句中，如果只有单个变量，会先将变量转换为Boolean值，只有下面几种情况会转换成false，其余被转换成true：

null
undefined
''
NaN
0
false

7.3 各种运数学算符

我们在对各种非Number类型运用数学运算符(- * /)时，会先将非Number类型转换为Number类型;

1 - true // 0
1 - null //  1
1 * undefined //  NaN
2 * ['5'] //  10

注意+是个例外，执行+操作符时：

1.当一侧为String类型，被识别为字符串拼接，并会优先将另一侧转换为字符串类型。
2.当一侧为Number类型，另一侧为原始类型，则将原始类型转换为Number类型。
3.当一侧为Number类型，另一侧为引用类型，将引用类型和Number类型转换成字符串后拼接。

123 + '123' // 123123   （规则1）
123 + null  // 123    （规则2）
123 + true // 124    （规则2）
123 + {}  // 123[object Object]    （规则3）

7.4 ==

使用==时，若两侧类型相同，则比较结果和===相同，否则会发生隐式转换，使用==时发生的转换可以分为几种不同的情况（只考虑两侧类型不同）：

1.NaN

NaN和其他任何类型比较永远返回false(包括和他自己)。

1	NaN == NaN // false

2.Boolean

Boolean和其他任何类型比较，Boolean首先被转换为Number类型。

true == 1  // true
true == '2'  // false
true == ['1']  // true
true == ['2']  // false

这里注意一个可能会弄混的点：undefined、null和Boolean比较，虽然undefined、null和false都很容易被想象成假值，但是他们比较结果是false，原因是false首先被转换成0：

1 2	undefined == false // false null == false // false

3.String和Number

String和Number比较，先将String转换为Number类型。

1 2	123 == '123' // true '' == 0 // true

4.null和undefined

null == undefined比较结果是true，除此之外，null、undefined和其他任何结果的比较值都为false。

null == undefined // true
null == '' // false
null == 0 // false
null == false // false
undefined == '' // false
undefined == 0 // false
undefined == false // false

5.原始类型和引用类型

当原始类型和引用类型做比较时，对象类型会依照ToPrimitive规则转换为原始类型:

1 2	'[object Object]' == {} // true '1,2,3' == [1, 2, 3] // true

来看看下面这个比较：

1	[] == ![] // true

!的优先级高于==，![]首先会被转换为false，然后根据上面第三点，false转换成Number类型0，左侧[]转换为0，两侧比较相等。

1 2	[null] == false // true [undefined] == false // true

根据数组的ToPrimitive规则，数组元素为null或undefined时，该元素被当做空字符串处理，所以[null]、[undefined]都会被转换为0。

所以，说了这么多，推荐使用===来判断两个值是否相等…

7.5 一道有意思的面试题

一道经典的面试题，如何让：a == 1 && a == 2 && a == 3。

根据上面的拆箱转换，以及==的隐式转换，我们可以轻松写出答案：

const a = {
   value:[3,2,1],
   valueOf: function () {return this.value.pop(); },
}

八、判断JavaScript数据类型的方式

8.1 typeof

适用场景

typeof操作符可以准确判断一个变量是否为下面几个原始类型：

typeof 'ConardLi'  // string
typeof 123  // number
typeof true  // boolean
typeof Symbol()  // symbol
typeof undefined  // undefined

你还可以用它来判断函数类型：

1	typeof function(){} // function

不适用场景

当你用typeof来判断引用类型时似乎显得有些乏力了：

typeof [] // object
typeof {} // object
typeof new Date() // object
typeof /^\d*$/; // object

除函数外所有的引用类型都会被判定为object。

另外typeof null === 'object'也会让人感到头痛，这是在JavaScript初版就流传下来的bug，后面由于修改会造成大量的兼容问题就一直没有被修复…

8.2 instanceof

instanceof操作符可以帮助我们判断引用类型具体是什么类型的对象：

1
2
3

[] instanceof Array // true
new Date() instanceof Date // true
new RegExp() instanceof RegExp // true

我们先来回顾下原型链的几条规则：

1.所有引用类型都具有对象特性，即可以自由扩展属性
2.所有引用类型都具有一个__proto__（隐式原型）属性，是一个普通对象
3.所有的函数都具有prototype（显式原型）属性，也是一个普通对象
4.所有引用类型__proto__值指向它构造函数的prototype
5.当试图得到一个对象的属性时，如果变量本身没有这个属性，则会去他的__proto__中去找

[] instanceof Array实际上是判断Array.prototype是否在[]的原型链上。

所以，使用instanceof来检测数据类型，不会很准确，这不是它设计的初衷：

1 2	[] instanceof Object // true function(){} instanceof Object // true

另外，使用instanceof也不能检测基本数据类型，所以instanceof并不是一个很好的选择。

8.3 toString

上面我们在拆箱操作中提到了toString函数，我们可以调用它实现从引用类型的转换。

每一个引用类型都有toString方法，默认情况下，toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 "[object type]"，其中type是对象的类型。

1 2	const obj = {}; obj.toString() // [object Object]

注意，上面提到了如果此方法在自定义对象中未被覆盖，toString才会达到预想的效果，事实上，大部分引用类型比如Array、Date、RegExp等都重写了toString方法。

我们可以直接调用Object原型上未被覆盖的toString()方法，使用call来改变this指向来达到我们想要的效果。

8.4 jquery

我们来看看jquery源码中如何进行类型判断：

var class2type = {};
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
function( i, name ) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
} );

type: function( obj ) {
	if ( obj == null ) {
		return obj + "";
	}
	return typeof obj === "object" || typeof obj === "function" ?
		class2type[Object.prototype.toString.call(obj) ] || "object" :
		typeof obj;
}

isFunction: function( obj ) {
		return jQuery.type(obj) === "function";
}

原始类型直接使用typeof，引用类型使用Object.prototype.toString.call取得类型，借助一个class2type对象将字符串多余的代码过滤掉，例如[object function]将得到array，然后在后面的类型判断，如isFunction直接可以使用jQuery.type(obj) === "function"这样的判断。

参考

小结

希望你阅读本篇文章后可以达到以下几点：

了解JavaScript中的变量在内存中的具体存储形式，可对应实际场景
搞懂小数计算不精确的底层原因
了解可能发生隐式类型转换的场景以及转换原则
掌握判断JavaScript数据类型的方式和底层原理

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注。

#学习/前端

Hooks 已经到来

前言

Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Redux 的作者 Dan Abramov 在 2018 年的 ReactConf 向大家首次介绍了 React Hooks。React Hooks 是为了解决 Class Component 的一些问题而引入的。

Vue 的作者尤雨溪在 VueConf China 2019 也给 Vue 3.0 引入了一个叫 Functional-based API 的概念，它是受 React Hooks 启发而增加的新 API。由于 Vue 2.0 组件组合的模式是对象字面量形式，所以 Functional-based API 可以作为 Mixins 的替代，配合新的响应式 API 作为新的组件组合模式。React 和 Vue 对于降低前端开发复杂度这一问题都不约而同地选择了 Hooks 这一方案，这到底是为什么呢？

为什么要用 Hooks

React Hooks 是为了解决 Class Component 的一些问题而引入的

类组件间的逻辑难以复用。因为 JavaScript 不像 Go 或 C++ 一样，Class 可以多重继承，类的逻辑的复用就成了一个问题；
类组件经常会在生命周期做一些数据获取事件监听的副作用函数，这样的情况下我们就很难把组件拆分为更小的力度；
类组件 this 指向问题令人迷惑。很多新手应该会被 Class 组件绑定事件的 this 迷惑过，绑定事件可以用 bind，可以直接写箭头函数，也可以写类属性函数，但到底哪种方法才是最好的呢？

Hooks 可以使我们模块化开发的粒度更细，更函数式。组件的功能变成了由 Hooks 一点点地装配起来。这样的特性，也解决了上面提到的痛点：代码复用、组件树过深、类组件问题。

对于代码逻辑复用，React 和 Vue 都提出过各自的解决方案，其中比较常用的逻辑复用方案是 mixins、HOC。这两种方案都可以实现逻辑上的复用，但是都有一些额外的问题:

mixins 的问题：
- 首先是命名空间耦合，如果多个对象同名参数，这些参数就会耦合在一起;
- 由于 mixins 必须是运行时才能知道具体有什么参数，所以是 TypeScript 是无法做静态检查的
- 组件参数不清晰，在 mixins 中组件的 props 和其他参数没什么两样，很容易被其它的 mixins 覆盖掉
HOC 高阶组件的问题：
- 需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，让调试变得困难；
- 每多用一次高阶组件，都会多出一个组件实例
- 在不遵守约定的情况下 props 还是有可能会在高阶组件中被更改

Hooks 的出现很好的解决了上面的问题。因为 Hooks 跑在一个普通函数式组件里，所以他没有命名空间的问题，同时 TypeScript 也能对普通函数做很好的静态检查，而且 Hooks 也不能更改组件的 Props，传入的是啥最后可用的就是啥；最后 Hooks 基于函数式编程，不会产生多个组件实例。

Vue Hooks 与 React Hooks 的差异

简单语法的差异

// React hooks 的基本使用

function Demo() {
  // 初始化 firstName 状态变量
  const [firstName, setFirstName] = useState('Billie');

  // 持久化 name 数据的副作用
  useEffect(function persist() {
    if(name.value !== '') {
      localStorage.setItem('nameData', name);
    }
  });
  
  // 初始化 lastName 状态变量
  const [lastName, setLastName] = useState('Eilish');

  // 更新 title 的副作用
  useEffect(function updateTitle() {
    document.title = `${firstName} ${lastName}`;
  });

  // ...
}

// Vue hooks 的基本使用
import {ref, watch} from 'Vue';
export default {
  setup() {
    // 使用 firstName 状态变量
    const firstName = ref("Billie");
    // 使用一个 watcher 以持久化数据
    if(name.value !== '') {
      watch(function persist() => {
        localStorage.setItem('nameData', name.value);
      });
    }
   // 使用 lastName 状态变量
   const lastName = ref("Eilish");
   // 使用一个 watcher 以更新 title
   watch(function updateTitle() {
     document.title = `${firstName.value} ${lastName.value}`;
   });
  }
}

Vue 中的 setup 仅执行一遍，而 React Function Component 每次渲染都会执行。

对 React Hooks 而言，调用必须放在最前面，而且不能被包含在条件语句里，这是因为 React Hooks 采用下标方式寻找状态，一旦位置不对或者 Hooks 放在了条件中，就无法正确找到对应位置的值。

而 Vue Function API 中的 Hooks 可以放在任意位置、任意命名、被条件语句任意包裹的，因为其并不会触发 setup 的更新，只在需要的时候更新自己的引用值即可，利用 Proxy 监听机制，可以做到 setup 函数不重新执行，但 Template 重新渲染的效果

自定义 hooks 的差异

// React 中使用 hooks 
import React, { useState, useEffect } from 'react';

// 自定义hook useMouse
const useMouse = () => {
    // 使用hookuseState初始化一个state
    const [postion, setPostion] = useState({ x: 0, y: 0 });
    function handleMove(e) {
        setPostion({ x: e.clientX, y: e.clientY });
    }

    useEffect(() => {
        window.addEventListener('mousemove', handleMove);
        return () => {
            window.removeEventListener('mousemove', handleMove);
        };
    }, [postion]);
    return postion;
};

export default function App() {
    const { x, y } = useMouse(); // 内部维护自己的postion相关的逻辑
    return (
        <div>
            current position x: {x}, y: {y}
        </div>
    );
}

// Vue 中使用 hooks
import { value, computed, watch, onMounted } from 'vue'

function useMouse() {
  const x = value(0)
  const y = value(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

// 在组件中使用该函数
const Component = {
  setup() {
    const { x, y } = useMouse()
  
    return { x, y }
  },
  template: `<div>{{ x }} {{ y }} </div>`
}

通过上面的代码我们可以看到很多使用上的相同之处，都是把可以复用的一些单独的逻辑抽离到一个单独的函数中去，同时返回组件中需要用到的数据，并且内部会自我维护数据的更新，从而触发视图的更新。

不过在 React 中，useMouse 如果修改了 x 的值，那么使用 useMouse 的函数就会被重新执行，以此拿到最新的 x，而在 Vue 中利用 Proxy 监听机制，可以做到 setup 函数不重新执行，但 Template 重新渲染的效果。

总结

Hooks 的应用前景还是挺好的，解决了目前前端开发中的诸多痛点。不过 React Hooks 生态还不够完善，而 Vue 只有个 Hooks POC，Vue3.0 很可能会加上，但需要再等等。
本篇文章着重解释一下我对 Hooks 的理解，以及 Hooks API 在 Vue 和 React 框架中的不同。也说明一下 Hooks 是个中立的概念，可以在任何框架中使用。

初始化 Mac 环境

Posted on 2020-12-29 In Mac

笔者使用的电脑是 Mac.拿到一台新 Mac 需要装各种环境 & 软件。这篇文章主要做一个记录，减少初始化一台新 Mac 的时间，记录给自己用的，每个人的工作环境都不一样，没有参考性

初始化终端

先安装 macOS Command Line Tools xcode-select --install
安装 homebrew (Mac 包管理工具)
使用 Homebrew Bundler 初始化系统
安装 Iterm 2
安装 oh-my-zshell

1	sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

把 zsh 设置成默认 shell

# 把 zsh 加入 shell 列表
sudo sh -c 'echo /usr/local/bin/zsh >> /etc/shells'
# 设置 zsh 为默认 shell
chsh -s $(which zsh)

配置终端主题 & 字体 (我使用 powerlevel10k)
编辑器 VS code 增加终端快捷方式

1	sudo ln -s /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code ~/Applications/code

初始化编辑器

编辑器配置都通过 code-settings-sync 保存在 gist,直接下载配置使用即可

1	code --install-extension Shan.code-settings-sync

其他

配置 overWall 环境
按需安装应用

JS数组方法整理

Posted on 2020-12-29 In Javascript

创建一个数组

//字面量方式
var arr = [1, 3, "9"]; //[1,3,'9']
//构造器方法
var a = Array(); //[]
var a = Array(3); //[,,]
var a = Array(1, 3, "9"); //[1,3,'9']
//ES6 Array.of()返回由所有参数值组成的数组
let a = Array.of(1, 3, "9"); //[1,3,'9']
let a = Array.of(); //[]
let a = Array.of(3); //[3]
//ES6 Array.from()将类数组对象转成真正的数组（不改变原对象，返回新数组）
//参数：
//- 第一个（必需）：要转化为真正数组的对象
//- 第二个（可选）：类似数组的map方法，对每个元素进行处理，将处理结果放入返回的新数组中
//- 第三个（可选）：用来绑定this
let obj = { 0: "a", 1: "b", 2: "c", length: 3 };
let arr = Array.from(obj); //['a','b','c']
let arr = Array.from("hello"); //['h','e','l','l','o']
let arr = Array.from(new Set(["a", "b"]));
["a", "b"];

原型方法

改变原数组的方法（9 个）

let a = [1, 2, 3];
//ES5
a.splice();
a.sort();
a.pop();
a.push();
a.shift();
a.unshift();
a.revese();

//ES6
a.copyWithin();
a.fill();

不改变原数组的方法（8 个）

let a = [1, 2, 3];
a.slice(begin, end); //浅拷贝数组元素
a.join(); //数组转字符串
a.toLocaleString();
a.toString();
a.concat();
a.indexOf(); //查找数组是否存在某个元素，返回下标
a.lastIndexOf();
//定义: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）

//ES6 扩展运算符 ... 合并数组；
let a = [2, 3, 4, 5];
let b = [4, ...a, 4, 4]; //[4,2,3,4,5,4,4]

//ES7 includes() 查找数组是否包含某个元素 返回布尔值
a.includes(searchElement, (fromIndex = 0));

遍历方法（12 个）

array.forEach(function(currentValue, index, arr), thisValue);
array.every(function(currentValue, index, arr), thisValue);
array.some(function(currentValue, index, arr), thisValue);
arr.filter(function(currentValue, index, arr), thisArg);
arr.map(function(currentValue, index, arr), thisArg);
array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
array.reduceRight()
//ES6
arr.find(function(currentValue, index, arr), thisArg)
arr.findIndex(function(currentValue, index, arr), thisArg)
array.keys();
array.values();
array.entries();

前端类型判断方法整理

Posted on 2020-12-29 In Javascript

Javascript 类型

基本类型： String、Number、Boolean、Symbol、Undefined、Null
引用类型： Object

typeof

typeof ""; //string 有效
typeof 1; //number 有效
typeof Symbol(); //symbol 有效
typeof undefinded; //undefinded 有效
typeof null; //object 无效
typeof []; //object 无效
typeof new Function(); //function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

对于基本类型，除null以外，均可以返回正确的结果
对于引用类型，除了 function 以外，一律返回 object 类型
对于 null ，返回 object 类型
对于 function 返回 function 类型

instanceof

instanceof 只能用来判断两个对象是否属于实例关系，而不能判断一个对象实例具体属于哪种类型。

[] instanceof Array; //true
{} instanceof Object; //true
new Date() instanceof Date; //true

function Person(){};
new Person() instanceof Person; //true

[] instanceof Object; //true
new Date() instanceof Object; //true
new Person() instanceof Object; //true

constructor

"".constructor == String; //true
new Number(1).constructor == Number; //true
true.constructor == Boolean; //true
new Function().constructor == Function; //true
new Date().constructor == Date; //true
new Error().constructor == Error; //true
[].constructor == Array; //true
document.constructor == HTMLDocument; //true
window.constructor == Window; //true

null 和 undefinde 是无效的对象，没有 constructor
函数的 constructor 是不稳定的，自定义对象，重写 prototype 后，原来的 constructor 引用丢失， constructor 会默认 Object

funciotn F(){}
F.prototype = {a:'xxxx'}
var f = new F();
f.constructor == F; //false
f.constructor == Object // true

toString

toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。

Object.toString(); //[object Object]
Object.prototype.toString.call(""); //[object String]
Object.prototype.toString.call(1); //[object Number]
Object.prototype.toString.call(true); //[object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefinded); // [object Undefinde]
Object.prototype.toString.call(null); //[object Null]
Object.prototype.toString.call(new Function()); //[object Function]
Object.prototype.toString.call(new Date()); //[object Date]
Object.prototype.toString.call([]); //[object Array]
Object.prototype.toString.call(new RegExp()); //[object RegExp]
Object.prototype.toString.call(new Error()); //[object Error]
Object.prototype.toString.call(document); //[object HTMLDocument]
Object.prototype.toString.call(window); //[object Window]

数据类型

Posted on 2020-12-29 In javascript

一、JavaScript数据类型

ECMAScript标准规定了7种数据类型，其把这7种数据类型又分为两种：原始类型和对象类型。

原始类型

Null：只包含一个值：null
Undefined：只包含一个值：undefined
Boolean：包含两个值：true和false
Number：整数或浮点数，还有一些特殊值（-Infinity、+Infinity、NaN）
String：一串表示文本值的字符序列
Symbol：一种实例是唯一且不可改变的数据类型

(在es10中加入了第七种原始类型BigInt，现已被最新Chrome支持)

对象类型

Object：自己分一类丝毫不过分，除了常用的Object，Array、Function等都属于特殊的对象

二、为什么区分原始类型和对象类型

2.1 不可变性

上面所提到的原始类型，在ECMAScript标准中，它们被定义为primitive values，即原始值，代表值本身是不可被改变的。

以字符串为例，我们在调用操作字符串的方法时，没有任何方法是可以直接改变字符串的：

var str = 'ConardLi';
str.slice(1);
str.substr(1);
str.trim(1);
str.toLowerCase(1);
str[0] = 1;
console.log(str);  // ConardLi

在上面的代码中我们对str调用了几个方法，无一例外，这些方法都在原字符串的基础上产生了一个新字符串，而非直接去改变str，这就印证了字符串的不可变性。

那么，当我们继续调用下面的代码：

1 2	str += '6' console.log(str); // ConardLi6

你会发现，str的值被改变了，这不就打脸了字符串的不可变性么？其实不然，我们从内存上来理解：

在JavaScript中，每一个变量在内存中都需要一个空间来存储。

内存空间又被分为两种，栈内存与堆内存。

栈内存：

存储的值大小固定
空间较小
可以直接操作其保存的变量，运行效率高
由系统自动分配存储空间

JavaScript中的原始类型的值被直接存储在栈中，在变量定义时，栈就为其分配好了内存空间。

由于栈中的内存空间的大小是固定的，那么注定了存储在栈中的变量就是不可变的。

在上面的代码中，我们执行了str += '6'的操作，实际上是在栈中又开辟了一块内存空间用于存储'ConardLi6'，然后将变量str指向这块空间，所以这并不违背不可变性的特点。

2.2 引用类型

堆内存：

存储的值大小不定，可动态调整
空间较大，运行效率低
无法直接操作其内部存储，使用引用地址读取
通过代码进行分配空间

相对于上面具有不可变性的原始类型，我习惯把对象称为引用类型，引用类型的值实际存储在堆内存中，它在栈中只存储了一个固定长度的地址，这个地址指向堆内存中的值。

var obj1 = {name:"ConardLi"}
var obj2 = {age:18}
var obj3 = function(){...}
var obj4 = [1,2,3,4,5,6,7,8,9]

由于内存是有限的，这些变量不可能一直在内存中占用资源，这里推荐下这篇文章JavaScript中的垃圾回收和内存泄漏，这里告诉你JavaScript是如何进行垃圾回收以及可能会发生内存泄漏的一些场景。

当然，引用类型就不再具有不可变性了，我们可以轻易的改变它们：

obj1.name = "ConardLi6";
obj2.age = 19;
obj4.length = 0;
console.log(obj1); //{name:"ConardLi6"}
console.log(obj2); // {age:19}
console.log(obj4); // []

以数组为例，它的很多方法都可以改变它自身。

pop() 删除数组最后一个元素，如果数组为空，则不改变数组，返回undefined，改变原数组，返回被删除的元素
push()向数组末尾添加一个或多个元素，改变原数组，返回新数组的长度
shift()把数组的第一个元素删除，若空数组，不进行任何操作，返回undefined,改变原数组，返回第一个元素的值
unshift()向数组的开头添加一个或多个元素，改变原数组，返回新数组的长度
reverse()颠倒数组中元素的顺序，改变原数组，返回该数组
sort()对数组元素进行排序，改变原数组，返回该数组
splice()从数组中添加/删除项目，改变原数组，返回被删除的元素

下面我们通过几个操作来对比一下原始类型和引用类型的区别：

2.3 复制

当我们把一个变量的值复制到另一个变量上时，原始类型和引用类型的表现是不一样的，先来看看原始类型：

var name = 'ConardLi';
var name2 = name;
name2 = 'code秘密花园';
console.log(name); // ConardLi;

内存中有一个变量name，值为ConardLi。我们从变量name复制出一个变量name2，此时在内存中创建了一个块新的空间用于存储ConardLi，虽然两者值是相同的，但是两者指向的内存空间完全不同，这两个变量参与任何操作都互不影响。

复制一个引用类型：

var obj = {name:'ConardLi'};
var obj2 = obj;
obj2.name = 'code秘密花园';
console.log(obj.name); // code秘密花园

当我们复制引用类型的变量时，实际上复制的是栈中存储的地址，所以复制出来的obj2实际上和obj指向的堆中同一个对象。因此，我们改变其中任何一个变量的值，另一个变量都会受到影响，这就是为什么会有深拷贝和浅拷贝的原因。

2.4 比较

当我们在对两个变量进行比较时，不同类型的变量的表现是不同的：

var name = 'ConardLi';
var name2 = 'ConardLi';
console.log(name === name2); // true
var obj = {name:'ConardLi'};
var obj2 = {name:'ConardLi'};
console.log(obj === obj2); // false

对于原始类型，比较时会直接比较它们的值，如果值相等，即返回true。

对于引用类型，比较时会比较它们的引用地址，虽然两个变量在堆中存储的对象具有的属性值都是相等的，但是它们被存储在了不同的存储空间，因此比较值为false。

2.5 值传递和引用传递

借助下面的例子，我们先来看一看什么是值传递，什么是引用传递：

let name = 'ConardLi';
function changeValue(name){
  name = 'code秘密花园';
}
changeValue(name);
console.log(name);

执行上面的代码，如果最终打印出来的name是'ConardLi'，没有改变，说明函数参数传递的是变量的值，即值传递。如果最终打印的是'code秘密花园'，函数内部的操作可以改变传入的变量，那么说明函数参数传递的是引用，即引用传递。

很明显，上面的执行结果是'ConardLi'，即函数参数仅仅是被传入变量复制给了的一个局部变量，改变这个局部变量不会对外部变量产生影响。

let obj = {name:'ConardLi'};
function changeValue(obj){
  obj.name = 'code秘密花园';
}
changeValue(obj);
console.log(obj.name); // code秘密花园

上面的代码可能让你产生疑惑，是不是参数是引用类型就是引用传递呢？

首先明确一点，ECMAScript中所有的函数的参数都是按值传递的。

同样的，当函数参数是引用类型时，我们同样将参数复制了一个副本到局部变量，只不过复制的这个副本是指向堆内存中的地址而已，我们在函数内部对对象的属性进行操作，实际上和外部变量指向堆内存中的值相同，但是这并不代表着引用传递，下面我们再按一个例子：

let obj = {};
function changeValue(obj){
  obj.name = 'ConardLi';
  obj = {name:'code秘密花园'};
}
changeValue(obj);
console.log(obj.name); // ConardLi

可见，函数参数传递的并不是变量的引用，而是变量拷贝的副本，当变量是原始类型时，这个副本就是值本身，当变量是引用类型时，这个副本是指向堆内存的地址。所以，再次记住：

ECMAScript中所有的函数的参数都是按值传递的。

三、分不清的null和undefined

在原始类型中，有两个类型Null和Undefined，他们都有且仅有一个值，null和undefined，并且他们都代表无和空，我一般这样区分它们：

null

表示被赋值过的对象，刻意把一个对象赋值为null，故意表示其为空，不应有值。

所以对象的某个属性值为null是正常的，null转换为数值时值为0。

undefined

表示“缺少值”，即此处应有一个值，但还没有定义，

如果一个对象的某个属性值为undefined，这是不正常的，如obj.name=undefined，我们不应该这样写，应该直接delete obj.name。

undefined转为数值时为NaN(非数字值的特殊值)

JavaScript是一门动态类型语言，成员除了表示存在的空值外，还有可能根本就不存在（因为存不存在只在运行期才知道），这就是undefined的意义所在。对于JAVA这种强类型语言，如果有"undefined"这种情况，就会直接编译失败，所以在它不需要一个这样的类型。

四、不太熟的Symbol类型

Symbol类型是ES6中新加入的一种原始类型。

每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。

下面来看看Symbol类型具有哪些特性。

4.1 Symbol的特性

1.独一无二

直接使用Symbol()创建新的symbol变量，可选用一个字符串用于描述。当参数为对象时，将调用对象的toString()方法。

var sym1 = Symbol();  // Symbol()
var sym2 = Symbol('ConardLi');  // Symbol(ConardLi)
var sym3 = Symbol('ConardLi');  // Symbol(ConardLi)
var sym4 = Symbol({name:'ConardLi'}); // Symbol([object Object])
console.log(sym2 === sym3);  // false

我们用两个相同的字符串创建两个Symbol变量，它们是不相等的，可见每个Symbol变量都是独一无二的。

如果我们想创造两个相等的Symbol变量，可以使用Symbol.for(key)。

使用给定的key搜索现有的symbol，如果找到则返回该symbol。否则将使用给定的key在全局symbol注册表中创建一个新的symbol。

1
2
3

var sym1 = Symbol.for('ConardLi');
var sym2 = Symbol.for('ConardLi');
console.log(sym1 === sym2); // true

2.原始类型

注意是使用Symbol()函数创建symbol变量，并非使用构造函数，使用new操作符会直接报错。

1	new Symbol(); // Uncaught TypeError: Symbol is not a constructor

我们可以使用typeof运算符判断一个Symbol类型：

1 2	typeof Symbol() === 'symbol' typeof Symbol('ConardLi') === 'symbol'

3.不可枚举

当使用Symbol作为对象属性时，可以保证对象不会出现重名属性，调用for...in不能将其枚举出来，另外调用Object.getOwnPropertyNames、Object.keys()也不能获取Symbol属性。

可以调用Object.getOwnPropertySymbols()用于专门获取Symbol属性。

var obj = {
  name:'ConardLi',
  [Symbol('name2')]:'code秘密花园'
}
Object.getOwnPropertyNames(obj); // ["name"]
Object.keys(obj); // ["name"]
for (var i in obj) {
   console.log(i); // name
}
Object.getOwnPropertySymbols(obj) // [Symbol(name)]

4.2 Symbol的应用场景

下面是几个Symbol在程序中的应用场景。

应用一：防止XSS

在React的ReactElement对象中，有一个$$typeof属性，它是一个Symbol类型的变量：

1
2
3

var REACT_ELEMENT_TYPE =
  (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
  0xeac7;

ReactElement.isValidElement函数用来判断一个React组件是否是有效的，下面是它的具体实现。

1
2
3

ReactElement.isValidElement = function (object) {
  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
};

可见React渲染时会把没有$$typeof标识，以及规则校验不通过的组件过滤掉。

如果你的服务器有一个漏洞，允许用户存储任意JSON对象，而客户端代码需要一个字符串，这可能会成为一个问题：

// JSON
let expectedTextButGotJSON = {
  type: 'div',
  props: {
    dangerouslySetInnerHTML: {
      __html: '/* put your exploit here */'
    },
  },
};
let message = { text: expectedTextButGotJSON };
<p>
  {message.text}
</p>

而JSON中不能存储Symbol类型的变量，这就是防止XSS的一种手段。

应用二：私有属性

借助Symbol类型的不可枚举，我们可以在类中模拟私有属性，控制变量读写：

const privateField = Symbol();
class myClass {
  constructor(){
    this[privateField] = 'ConardLi';
  }
  getField(){
    return this[privateField];
  }
  setField(val){
    this[privateField] = val;
  }
}

应用三：防止属性污染

在某些情况下，我们可能要为对象添加一个属性，此时就有可能造成属性覆盖，用Symbol作为对象属性可以保证永远不会出现同名属性。

例如下面的场景，我们模拟实现一个call方法：

Function.prototype.myCall = function (context) {
  if (typeof this !== 'function') {
    return undefined; // 用于防止 Function.prototype.myCall() 直接调用
  }
  context = context || window;
  const fn = Symbol();
  context[fn] = this;
  const args = [...arguments].slice(1);
  const result = context[fn](...args);
  delete context[fn];
  return result;
}

我们需要在某个对象上临时调用一个方法，又不能造成属性污染，Symbol是一个很好的选择。

五、不老实的Number类型

为什么说Number类型不老实呢，相信大家都多多少少的在开发中遇到过小数计算不精确的问题，比如0.1+0.2!==0.3，下面我们来追本溯源，看看为什么会出现这种现象，以及该如何避免。

下面是我实现的一个简单的函数，用于判断两个小数进行加法运算是否精确：

function judgeFloat(n, m) {
  const binaryN = n.toString(2);
  const binaryM = m.toString(2);
  console.log(`${n}的二进制是    ${binaryN}`);
  console.log(`${m}的二进制是    ${binaryM}`);
  const MN = m + n;
  const accuracyMN = (m * 100 + n * 100) / 100;
  const binaryMN = MN.toString(2);
  const accuracyBinaryMN = accuracyMN.toString(2);
  console.log(`${n}+${m}的二进制是${binaryMN}`);
  console.log(`${accuracyMN}的二进制是    ${accuracyBinaryMN}`);
  console.log(`${n}+${m}的二进制再转成十进制是${to10(binaryMN)}`);
  console.log(`${accuracyMN}的二进制是再转成十进制是${to10(accuracyBinaryMN)}`);
  console.log(`${n}+${m}在js中计算是${(to10(binaryMN) === to10(accuracyBinaryMN)) ? '' : '不'}准确的`);
}
function to10(n) {
  const pre = (n.split('.')[0] - 0).toString(2);
  const arr = n.split('.')[1].split('');
  let i = 0;
  let result = 0;
  while (i < arr.length) {
    result += arr[i] * Math.pow(2, -(i + 1));
    i++;
  }
  return result;
}
judgeFloat(0.1, 0.2);
judgeFloat(0.6, 0.7);

5.1 精度丢失

计算机中所有的数据都是以二进制存储的，所以在计算时计算机要把数据先转换成二进制进行计算，然后在把计算结果转换成十进制。

由上面的代码不难看出，在计算0.1+0.2时，二进制计算发生了精度丢失，导致再转换成十进制后和预计的结果不符。

5.2 对结果的分析—更多的问题

0.1和0.2的二进制都是以1100无限循环的小数，下面逐个来看JS帮我们计算所得的结果：

0.1的二进制：

1	0.0001100110011001100110011001100110011001100110011001101

0.2的二进制：

1	0.001100110011001100110011001100110011001100110011001101

理论上讲，由上面的结果相加应该：：

1	0.0100110011001100110011001100110011001100110011001100111

实际JS计算得到的0.1+0.2的二进制

1	0.0100110011001100110011001100110011001100110011001101

看到这里你可能会产生更多的问题：

为什么 js计算出的 0.1的二进制是这么多位而不是更多位？？？

为什么 js计算的（0.1+0.2）的二进制和我们自己计算的（0.1+0.2）的二进制结果不一样呢？？？

为什么 0.1的二进制 + 0.2的二进制 != 0.3的二进制？？？

5.3 js对二进制小数的存储方式

小数的二进制大多数都是无限循环的，JavaScript是怎么来存储他们的呢？

在ECMAScript®语言规范中可以看到，ECMAScript中的Number类型遵循IEEE 754标准。使用64位固定长度来表示。

事实上有很多语言的数字类型都遵循这个标准，例如JAVA,所以很多语言同样有着上面同样的问题。

所以下次遇到这种问题不要上来就喷JavaScript…

有兴趣可以看看下这个网站http://0.30000000000000004.com/，是的，你没看错，就是http://0.30000000000000004.com/！！！

5.4 IEEE 754

IEEE754标准包含一组实数的二进制表示法。它有三部分组成：

符号位
指数位
尾数位

三种精度的浮点数各个部分位数如下：

JavaScript使用的是64位双精度浮点数编码，所以它的符号位占1位，指数位占11位，尾数位占52位。

下面我们在理解下什么是符号位、指数位、尾数位，以0.1为例：

它的二进制为：0.0001100110011001100...

为了节省存储空间，在计算机中它是以科学计数法表示的，也就是

1.100110011001100... X 2^-4

如果这里不好理解可以想一下十进制的数：

1100的科学计数法为11 X 10²

所以：

符号位就是标识正负的，1表示负，0表示正；

指数位存储科学计数法的指数；

尾数位存储科学计数法后的有效数字；

所以我们通常看到的二进制，其实是计算机实际存储的尾数位。

5.5 js中的toString(2)

由于尾数位只能存储52个数字，这就能解释toString(2)的执行结果了：

如果计算机没有存储空间的限制，那么0.1的二进制应该是：

1	0.00011001100110011001100110011001100110011001100110011001...

科学计数法尾数位

1	1.1001100110011001100110011001100110011001100110011001...

但是由于限制，有效数字第53位及以后的数字是不能存储的，它遵循，如果是1就向前一位进1，如果是0就舍弃的原则。

0.1的二进制科学计数法第53位是1，所以就有了下面的结果：

1	0.0001100110011001100110011001100110011001100110011001101

0.2有着同样的问题，其实正是由于这样的存储，在这里有了精度丢失，导致了0.1+0.2!=0.3。

事实上有着同样精度问题的计算还有很多，我们无法把他们都记下来，所以当程序中有数字计算时，我们最好用工具库来帮助我们解决，下面是两个推荐使用的开源库：

5.6 JavaScript能表示的最大数字

由与IEEE 754双精度64位规范的限制：

指数位能表示的最大数字：1023(十进制)

尾数位能表达的最大数字即尾数位都位1的情况

所以JavaScript能表示的最大数字即位

1.111...X 2¹⁰²³ 这个结果转换成十进制是1.7976931348623157e+308,这个结果即为Number.MAX_VALUE。

5.7 最大安全数字

JavaScript中Number.MAX_SAFE_INTEGER表示最大安全数字,计算结果是9007199254740991，即在这个数范围内不会出现精度丢失（小数除外）,这个数实际上是1.111...X 2⁵²。

我们同样可以用一些开源库来处理大整数：

其实官方也考虑到了这个问题，bigInt类型在es10中被提出，现在Chrome中已经可以使用，使用bigInt可以操作超过最大安全数字的数字。

文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，欢迎点赞和关注。

#学习/前端

使React hooks 重构你的应用

Posted on 2020-12-29 In React

什么是 Hooks

React 一直都提倡使用函数组件，但是有时候需要使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有
Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks

为什么要使用 Hooks

1. 类组件的不足

状态逻辑难复用：在组件之间复用状态逻辑很难，可能要用到 render props （渲染属性）或者 HOC（高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余
类组件中到处都是对状态的访问和处理，导致组件难以拆分成更小的组件
this 指向问题：父组件给子组件传递函数时，必须绑定 this

class App extends React.Component<any, any> {
    handleClick2;

    constructor(props) {
        super(props);
        this.state = {
            num: 1,
            title: ' react study'
        };
        this.handleClick2 = this.handleClick1.bind(this);
    }

    handleClick1() {
        this.setState({
            num: this.state.num + 1,
        })
    }

    handleClick3 = () => {
        this.setState({
            num: this.state.num + 1,
        })
    };

    render() {
        return (<div>
            <h2>Ann, {this.state.num}</h2>
            <button onClick={this.handleClick2}>btn1</button>
            <button onClick={this.handleClick1.bind(this)}>btn2</button>
            <button onClick={() => this.handleClick1()}>btn3</button>
            <button onClick={this.handleClick3}>btn4</button>
        </div>)
    }
}

以上代码是 react 中的组件四种绑定 this 方法的区别
- 第一种是在构造函数中绑定 this：那么每次父组件刷新的时候，如果传递给子组件其他的 props 值不变，那么子组件就不会刷新；
- 第二种是在 render() 函数里面绑定 this：因为 bind 函数会返回一个新的函数，所以每次父组件刷新时，都会重新生成一个函数，即使父组件传递给子组件其他的 props 值不变，子组件每次都会刷新；
- 第三种是使用箭头函数：父组件刷新的时候，即使两个箭头函数的函数体是一样的，都会生成一个新的箭头函数，所以子组件每次都会刷新；
- 第四种是使用类的静态属性：原理和第一种方法差不多，比第一种更简洁

2. Hooks 优势

能优化类组件的三大问题
能在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）
能将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
副作用的关注点分离：副作用指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。

使用Hooks重构应用

使用 initialState 函数处理状态初始值

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = { token: null }
    if (this.props.token) {
      this.state.token = this.props.token
    } else {
      token = window.localStorage.getItem('app-token');
      if (token) {
        this.state.token = token
      }
    }
  }
}

function MyComponent(props) {
   const initState = () => {
     if(props.token) {
       return props.token 
     } else {
       tokenLocal = window.localStorage.getItem('app-token');
       if (tokenLocal) {
         return tokenLocal
       }
     }
   };

   const [token, setToken] = useState(initState)
}

使用 useEffect 代替生命周期 return 值清除 effect 操作

function Counter(){
    let [number,setNumber] = useState(0);
    let [text,setText] = useState('');
    // 相当于componentDidMount 和 componentDidUpdate
    useEffect(()=>{
        console.log('开启一个新的定时器')
        let $timer = setInterval(()=>{
            setNumber(number=>number+1);
        },1000);
        // useEffect 如果返回一个函数的话，该函数会在组件卸载和更新时调用
        // useEffect 在执行副作用函数之前，会先调用上一次返回的函数
        // 如果要清除副作用，要么返回一个清除副作用的函数
       /*  return ()=>{
            console.log('destroy effect');
            clearInterval($timer);
        } */
    });
    // },[]);//要么在这里传入一个空的依赖项数组，这样就不会去重复执行
    return (
        <>
          <input value={text} onChange={(event)=>setText(event.target.value)}/>
          <p>{number}</p>
          <button>+</button>
        </>
    )
}

使用 useReducer 简化代码

1 2	const [state, dispatch] = useReducer(reducer) const [state, dispatch] = useReducer((state, action) => newState)

如果你之前使用过redux ，那你就知道action 必须接收一个带有type属性的对象。然而，在useReducer 中，reducer 函数可以接收一个 state 以及多个 action ,然后返回一个新的state对象。

function AppHooks() {
  const initialState = {
    data: null,
    error: null,
    loaded: false,
    fetching: false,
  }
  const [data,setData] = useState();
  ...
  const reducer = (state, newState) => ({ ...state, ...newState })
  const [state, setState] = useReducer(reducer, initialState);

  async function fetchData() {
    const response = await fetch(API_URL);
    const { data, status } = {
      data: await response.json(),
      status: response.status
    }

    if (status !== 200) {
      return setState({
        data,
        error: true,
        loaded: true,
        fetching: false,
      })
    }

    setState({
      data,
      error: null,
      loaded: true,
      fetching: false,
    })
  }

  useEffect(() => {
    fetchData()
  }, [])


  const { error, data } = state
  return error ? <div> Sorry, 网络异常 :( </div> :
    <pre>{JSON.stringify(data, null, ' ')}</pre>
}

使用 useMemo 优化 useEffect中对象的比较

function RandomNumberGenerator() {
  // look here 👇
  const name = {firstName: "name"}
	
  useEffect(() => {
    console.log("Effect has been run!")
  }, [name])

  const [randomNumber, setRandomNumber] = useState(0);    
  
  return <div>
    <h1> {randomNumber} </h1>
    <button onClick={() => { setRandomNumber(Math.random()) }}>Generate random number!</button>
  </div>
}

function RandomNumberGenerator() {
  // look here 👇
  const name = useMemo(() => ({
    firstName: "name"
  }), [])
  
  useEffect(() => {
      console.log("Effect has been run!")
  }, [name])


  const [randomNumber, setRandomNumber] = useState(0)

  return <div>
    <h1>{randomNumber}</h1>
    <button onClick={() => { setRandomNumber(Math.random()) }}>
      Generate random number!</button>
  </div>
}

在 React 中使用计算属性

Posted on 2020-12-29 In React

在 React 中使用计算属性

前言

初次见到计算属性一词是在 Vue 官方文档-计算属性和侦听器一节中。

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

回想我们编写的 React 代码，是否也在 JSX（render 函数）中放入了太多的逻辑导致 render 函数过于庞大,难以维护？

React 中的计算属性

在 Vue 中计算属性有以下两点主要特性

计算属性以声明的方式创建依赖关系,依赖的 data 或 props 变更会触发重新计算并自动更新；
计算属性是基于它们的响应式依赖进行缓存的；

其实在 React 中计算属性随处可见，相信各位使用过 React 的读者都写过类似的代码

import React, { Fragment, Component } from 'react';

class Example extends Component {
  state = {
    firstName: '',
    lastName: '',
  };

  render() {
    // 在 render 函数中处理逻辑
    const { firstName, lastName } = this.state;
    const fullName = `${firstName} ${lastName}`;
    return <Fragment>{fullName}</Fragment>;
  }
}

在上面的代码里，render 函数里面的fullName 依赖了props 中的firstName和lastName 。firstName 或lastName 变更之后变量 fullName 都会自动更新。其实现原理是props 以及 state 的变化会导致 render 函数调用，进而重新计算衍生值。

但是现在我们还是把计算逻辑放入了 render 函数中，更好的做法是把计算逻辑抽出来，简化 render 函数逻辑。

class Example extends Component {
  state = {
    firstName: '',
    lastName: '',
  };

  // 把 render 中的逻辑抽成函数,减少render函数的臃肿
  renderFullName() {
    const { firstName, lastName } = this.state;
    return `${firstName} ${lastName}`;
  }

  render() {
    const fullName = this.renderFullName();
    return <Fragment>{fullName}</Fragment>;
  }
}

如果你了解 Vue 的话，那么你知道其中的 computed 计算属性，它的底层是使用了getter，只不过是对象的 getter，那么在 React 中我们也可以使用类的 getter 来实现计算属性。

class Example extends Component {
  state = {
    firstName: '',
    lastName: '',
  };

  // 通过getter而不是函数形式，减少变量
  get fullName() {
    const { firstName, lastName } = this.state;
    return `${firstName} ${lastName}`;
  }

  render() {
    return <Fragment>{this.fullName}</Fragment>;
  }
}

使用 memoization 优化计算属性

上文有提到在 Vue 中计算属性对比函数执行：会有缓存，减少计算，因为计算属性只有在它的相关依赖发生改变时才会重新求值。

这就意味着只要 firstName 和 lastName 还没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数。

那么是否 React 的 getter 也有缓存这个优势？？？ 答案是：没有，react 中的 getter 并没有做缓存优化！

不过我们可以使用记忆化技术（memoization）来优化我们的计算属性，实现和 Vue 中计算属性一样的效果，我们需要在项目中引入 memoize-one 库，实现代码如下：

import memoize from 'memoize-one';
import React, { Fragment, Component } from 'react';

class Example extends Component {
  state = {
    firstName: '',
    lastName: '',
  };

  // 如果和上次参数一样，`memoize-one` 会重复使用上一次的值。
  getFullName = memoize((firstName, lastName) => `${firstName} ${lastName}`);

  get fullName() {
    return this.getFullName(this.state.firstName, this.state.lastName);
  }

  render() {
    return <Fragment>{this.fullName}</Fragment>;
  }
}

使用 React hooks 优化计算属性

上文在 React 中使用了 memoize-one 库实现了类似 Vue 计算属性（computed）的效果 —— 基于依赖缓存计算结果。得益于React 16.8 新推出的Hooks特性，我们可以对逻辑进行更优雅的封装。

首先，我们来介绍一下useMemo：

官方对useMemo的介绍在这里，简而言之，就是我们传入一个回调函数和一个依赖列表，React会在依赖列表中的值变化时，调用这个回调函数，并将回调函数返回的结果进行缓存。

import React, { useState, useMemo } from 'react';

function Example(props) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  // 使用 useMemo 函数缓存计算过程
  const renderFullName = useMemo(() => `${firstName} ${lastName}`, [
    firstName,
    lastName,
  ]);

  return <div>{renderFullName}</div>;
}

总结

本文介绍了在 React 中如何实现计算属性，在 React 中实现了类似 Vue 计算属性（computed）的效果 —— 基于依赖缓存计算结果，实现逻辑计算与视图渲染的解耦，降低 render 函数的复杂度。

从业务开发角度来讲，Vue 提供的 API 极大地提高了开发效率。

React 官方虽然某些场景没有原生的 API 支持，但得益于活跃的社区，工作中遇到的问题总能找到解决方案，并且在摸索这些解决方案的同时，我们能够学习到诸多经典的编程思想，从而更加合理的运用框架、技术解决业务问题。

如何使用 npm 管理包

Posted on 2019-03-30 Edited on 2020-12-29

分布标签（dist-tags）补充语义版本控制（例如，v0.12）。使用它们来组织和标记不同版本的包。除了比 semver 编号更具人性可读性之外，标签还允许发布者更有效地分发他们的包。

添加标签

要将标记添加到包的特定版本，请使用：

npm dist-tag add <pkg>@<version> [<tag>]
npm dist-tag rm <pkg> <tag>
npm dist-tag ls [<pkg>]

aliases: dist-tags

使用标签发布

默认情况下，npm publish会使用标记标记您的包latest。如果使用该--tag标志，则可以指定要使用的另一个标记。例如，以下内容将使用beta标记发布您的包：

1	npm publish --tag beta

使用标签安装

默认npm install <pkg>会使用latest标签。要覆盖此行为，请使用npm install <pkg>@<tag>。以下示例将安装somepkg已标记的版本beta。

1	npm install somepkg@beta

注意事项

因为dist-tag与semver共享相同的名称空间，所以请避免使用可能导致冲突的标记名称。最佳做法是避免使用以数字或字母v开头的标签。

使用 `npm version`

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

'npm [-v | --version]' to print npm version
'npm view <pkg> version' to view a package's published version
'npm ls' to inspect current package/dependency versions

`npm version` 的`hooks`

"scripts": {
  "preversion": "npm test",
  "version": "npm run build && git add -A dist",
  "postversion": "git push && git push --tags && rm -rf build/temp"
}

TCP/IP 协议栈及 OSI 参考模型

Posted on 2019-01-04 Edited on 2020-12-29

OSI 参考模型

OSI 参考模型（Open System Interconnection Reference Model，开放式系统互联通信参考模型），是 ISO （国际标准化组织）组织在 1985 年研究的网络互联模型。该体系结构标准定义了网络互连的七层框架（物理层、数据链路层、网络层、传输层、会话层、表示层和应用层），在这一框架下进一步详细规定了每一层的功能，以实现开放系统环境中的互连性、互操作性和应用的可移植性。

ISO 通信功能七个层次的划分原则是：

网路中各节点都有相同的层次；
不同节点的同等层具有相同的功能；
同一节点内相邻层之间通过接口通信；
每一层使用下层提供的服务，并向其上层提供服务；
不同节点的同等层按照协议实现对等层之间的通信。

OSI 参考模型具有以下优点：

简化了相关的网络操作；
提供设备间的兼容性和标准接口；
促进标准化工作；
结构上可以分隔，各层可以独立修改或者扩充；
易于实现和维护；
有利于大家学习、理解数据通讯网络。

各层功能详述如下

物理层 (Physical Layer)：物理层是 OSI 参考模型的最低层，它利用传输介质为数据链路层提供物理连接。它主要关心的是通过物理链路从一个节点向另一个节点传送比特流，物理链路可能是铜线、卫星、微波或其他的通讯媒介。它关心的问题有：多少伏电压代表 1 ？多少伏电压代表 0 ？时钟速率是多少？采用全双工还是半双工传输？总的来说物理层关心的是链路的机械、电气、功能和规程特性。
数据链路层 (Data Link Layer)：数据链路层是为网络层提供服务的，解决两个相邻结点之间的通信问题，传送的协议数据单元称为数据帧。数据帧中包含物理地址（又称 MAC 地址）、控制码、数据及校验码等信息。该层的主要作用是通过校验、确认和反馈重发等手段，将不可靠的物理链路转换成对网络层来说无差错的数据链路。此外，数据链路层还要协调收发双方的数据传输速率，即进行流量控制，以防止接收方因来不及处理发送方来的高速数据而导致缓冲器溢出及线路阻塞。
网络层 (Network Layer)：网络层是为传输层提供服务的，传送的协议数据单元称为数据包（分组）。该层的主要作用是解决如何使数据包通过各结点传送的问题，即通过路径选择算法（路由）将数据包送到目的地。另外，为避免通信子网中出现过多的数据包而造成网络阻塞，需要对流入的数据包数量进行控制（拥塞控制）。当数据包要跨越多个通信子网才能到达目的地时，还要解决网际互连的问题。
传输层 (Transport Layer)：传输层的作用是为上层协议提供端到端的可靠和透明的数据传输服务，包括处理差错控制和流量控制等问题，传输层传送的协议数据单元称为数据段（报文）。该层向高层屏蔽了下层数据通信的细节，使高层用户看到的只是在两个传输实体间的一条主机到主机的、可由用户控制和设定的、可靠的数据通路。
会话层 (Session Layer)：会话层主要功能是管理和协调不同主机上各种进程之间的通信（对话），即负责建立、管理和终止应用程序之间的会话。会话层得名的原因是它很类似于两个实体间的会话概念。例如，一个交互的用户会话以登录到计算机开始，以注销结束。
表示层 (Presentation Layer)：表示层处理流经结点的数据编码的表示方式问题，以保证一个系统应用层发出的信息可被另一系统的应用层读出。如果必要，该层可提供一种标准表示形式，用于将计算机内部的多种数据表示格式转换成网络通信中采用的标准表示形式。数据压缩和加密也是表示层可提供的转换功能之一。
应用层 (Application Layer)：应用层是 OSI 参考模型的最高层，是用户与网络的接口。该层通过应用程序来完成网络用户的应用需求，如文件传输、收发电子邮件等。

TCP/IP 参考模型

通常人们认为 OSI 模型的最上面三层（应用层、表示层和会话层）在 TCP/IP 组中是一个应用层。由于 TCP/IP 有一个相对较弱的会话层，由 TCP 和 RTP 下的打开和关闭连接组成，并且在 TCP 和 UDP 下的各种应用提供不同的端口号，这些功能能够被单个的应用程序（或者那些应用程序所使用的库）增加。与此相似的是，IP 是按照将它下面的网络当作一个黑盒子的思想设计的，这样在讨论 TCP/IP 的时候就可以把它当作一个独立的层。

应用层

该层包括所有和应用程序协同工作，利用基础网络交换应用程序专用的数据的协议。应用层是大多数普通与网络相关的程序为了通过网络与其他程序通信所使用的层。这个层的处理过程是应用特有的；数据从网络相关的程序以这种应用内部使用的格式进行传送，然后被编码成标准协议的格式。

一些特定的程序被认为运行在这个层上。它们提供服务直接支持用户应用。这些程序和它们对应的协议包括 HTTP（万维网服务）、FTP（文件传输）、SMTP（电子邮件）、SSH（安全远程登陆）、DNS（名称<-> IP 地址寻找）以及许多其他协议。一旦从应用程序来的数据被编码成一个标准的应用层协议，它将被传送到 IP 栈的下一层。

在传输层，应用程序最常用的是 TCP 或者 UDP，并且服务器应用程序经常与一个公开的端口号相联系。服务器应用程序的端口由互联网号码分配局（IANA）正式地分配，但是现今一些新协议的开发者经常选择它们自己的端口号。由于在同一个系统上很少超过少数几个的服务器应用，端口冲突引起的问题很少。应用软件通常也允许用户强制性地指定端口号作为运行参数。

链接外部的客户端程序通常使用系统分配的一个随机端口号。监听一个端口并且通过服务器将那个端口发送到应用的另外一个副本以创建对等链接（如 IRC 上的 dcc 文件传输）的应用也可以使用一个随机端口，但是应用程序通常允许定义一个特定的端口范围的规范以允许端口能够通过实现网络地址转换（NAT）的路由器映射到内部。

每一个应用层（TCP/IP 参考模型的最高层）协议一般都会使用到两个传输层协议之一：面向连接的 TCP 传输控制协议和无连接的包传输的 UDP 用户数据报文协议。常用的应用层协议有：

运行在 TCP 协议上的协议：
- HTTP（Hypertext Transfer Protocol，超文本传输协议），主要用于普通浏览。
- HTTPS（Hypertext Transfer Protocol over Secure Socket Layer, or HTTP over SSL，安全超文本传输协议）,HTTP 协议的安全版本。
- FTP（File Transfer Protocol，文件传输协议），由名知义，用于文件传输。
- POP3（Post Office Protocol, version 3，邮局协议），收邮件用。
- SMTP（Simple Mail Transfer Protocol，简单邮件传输协议），用来发送电子邮件。
- TELNET（Teletype over the Network，网络电传），通过一个终端（terminal）登陆到网络。
- SSH（Secure Shell，用于替代安全性差的 TELNET），用于加密安全登陆用。
运行在 UDP 协议上的协议：
- BOOTP（Boot Protocol，启动协议），应用于无盘设备。
- NTP（Network Time Protocol，网络时间协议），用于网络同步。
- DHCP（Dynamic Host Configuration Protocol，动态主机配置协议），动态配置 IP 地址。
其他：
- DNS（Domain Name Service，域名服务），用于完成地址查找，邮件转发等工作（运行在 TCP 和 UDP 协议上）。
- ECHO（Echo Protocol，回绕协议），用于查错及测量应答时间（运行在 TCP 和 UDP 协议上）。
- SNMP（Simple Network Management Protocol，简单网络管理协议），用于网络信息的收集和网络管理。
- ARP（Address Resolution Protocol，地址解析协议），用于动态解析以太网硬件的地址。

传输层

传输层（transport layer）的协议，能够解决诸如端到端可靠性（“数据是否已经到达目的地？”）和保证数据按照正确的顺序到达这样的问题。在 TCP/IP 协议组中，传输协议也包括所给数据应该送给哪个应用程序。在 TCP/IP 协议组中技术上位于这个层的动态路由协议通常被认为是网络层的一部分；一个例子就是 OSPF（IP 协议 89）。 TCP（IP 协议 6）是一个“可靠的”、面向链接的传输机制，它提供一种可靠的字节流保证数据完整、无损并且按顺序到达。TCP 尽量连续不断地测试网络的负载并且控制发送数据的速度以避免网络过载。另外，TCP 试图将数据按照规定的顺序发送。这是它与 UDP 不同之处，这在实时数据流或者路由高网络层丢失率应用的时候可能成为一个缺陷。较新的 SCTP 也是一个“可靠的”、面向链接的传输机制。它是面向纪录而不是面向字节的，它在一个单独的链接上提供通过多路复用提供的多个子流。它也提供多路自寻址支持，其中链接终端能够被多个 IP 地址表示（代表多个实体接口），这样的话即使其中一个连接失败了也不中断。它最初是为电话应用开发的（在 IP 上传输 SS7），但是也可以用于其他的应用。 UDP（IP 协议号 17）是一个无链接的数据报协议。它是一个“尽力传递”（best effort）或者说“不可靠”协议——不是因为它特别不可靠，而是因为它不检查数据包是否已经到达目的地，并且不保证它们按顺序到达。如果一个应用程序需要这些特性，那它必须自行检测和判断，或者使用 TCP 协议。 UDP 的典型性应用是如流媒体（音频和视频等）这样按时到达比可靠性更重要的应用，或者如 DNS 查找这样的简单查询／响应应用，如果创建可靠的链接所作的额外工作将是不成比例地大。 DCCP 当前正由 IEFT 开发。它提供 TCP 流动控制语义，但对于用户来说保留 UDP 的数据报服务模型。 TCP 和 UDP 都用来支持一些高层的应用。任何给定网络地址的应用通过它们的 TCP 或者 UDP 端口号区分。根据惯例使一些大众所知的端口与特定的应用相联系。 RTP 是为如音频和视频流这样的实时数据设计的数据报协议。RTP 是使用 UDP 包格式作为基础的会话层，然而据说它位于因特网协议栈的传输层。

网络互连层

TCP/IP 协议族中的网络互连层（internet layer）在 OSI 模型中叫做网络层（network layer）。

正如最初所定义的，网络层解决在一个单一网络上传输数据包的问题。类似的协议有 X.25 和 ARPANET 的 Host/IMP Protocol。随着因特网思想的出现，在这个层上添加附加的功能，也就是将数据从源网络传输到目的网络。这就牵涉到在网络组成的网上选择路径将数据包传输，也就是因特网。在因特网协议组中，IP 完成数据从源发送到目的的基本任务。IP 能够承载多种不同的高层协议的数据；这些协议使用一个唯一的 IP 协议号进行标识。ICMP 和 IGMP 分别是 1 和 2。一些 IP 承载的协议，如 ICMP（用来发送关于 IP 发送的诊断信息）和 IGMP（用来管理多播数据），它们位于 IP 层之上但是完成网络层的功能，这表明因特网和 OSI 模型之间的不兼容性。所有的路由协议，如 BGP、OSPF、和 RIP 实际上也是网络层的一部分，尽管它们似乎应该属于更高的协议栈。

网络接口层

网络接口层实际上并不是因特网协议组中的一部分，但是它是数据包从一个设备的网络层传输到另外一个设备的网络层的方法。这个过程能够在网卡的软件驱动程序中控制，也可以在韧体或者专用芯片中控制。这将完成如添加报头准备发送、通过实体介质实际发送这样一些数据链路功能。另一端，链路层将完成数据帧接收、去除报头并且将接收到的包传到网络层。然而，链路层并不经常这样简单。它也可能是一个虚拟专有网络（VPN）或者隧道，在这里从网络层来的包使用隧道协议和其他（或者同样的）协议组发送而不是发送到实体的接口上。VPN 和信道通常预先建好，并且它们有一些直接发送到实体接口所没有的特殊特点（例如，它可以加密经过它的数据）。由于现在链路“层”是一个完整的网络，这种协议组的递归使用可能引起混淆。但是它是一个实现常见复杂功能的一个优秀方法。（尽管需要注意预防一个已经封装并且经隧道发送下去的数据包进行再次地封装和发送）。

类型转换

引用类型

6.1 包装类型

6.2 装箱和拆箱

七、类型转换

7.1 类型转换规则

7.2 if语句和逻辑语句

7.3 各种运数学算符

7.4 ==

7.5 一道有意思的面试题

八、判断JavaScript数据类型的方式

8.1 typeof

8.2 instanceof

8.3 toString

8.4 jquery

参考

小结

Hooks 已经到来

前言

为什么要用 Hooks

Vue Hooks 与 React Hooks 的差异

简单语法的差异

自定义 hooks 的差异

总结

初始化终端

初始化编辑器

其他

创建一个数组

原型方法

改变原数组的方法（9 个）

不改变原数组的方法（8 个）

遍历方法（12 个）

Javascript 类型

typeof

instanceof

constructor

toString

一、JavaScript数据类型

二、为什么区分原始类型和对象类型

2.1 不可变性

2.2 引用类型

2.3 复制

2.4 比较

2.5 值传递和引用传递

三、分不清的null和undefined

四、不太熟的Symbol类型

4.1 Symbol的特性

4.2 Symbol的应用场景

五、不老实的Number类型

5.1 精度丢失

5.2 对结果的分析—更多的问题

5.3 js对二进制小数的存储方式

5.4 IEEE 754

5.5 js中的toString(2)

5.6 JavaScript能表示的最大数字

5.7 最大安全数字

什么是 Hooks

为什么要使用 Hooks

使用Hooks重构应用

在 React 中使用计算属性

前言

React 中的计算属性

使用 memoization 优化计算属性

使用 React hooks 优化计算属性

总结

添加标签

使用标签发布

使用标签安装

注意事项

使用 npm version

npm version 的hooks

OSI 参考模型

ISO 通信功能七个层次的划分原则是：

OSI 参考模型具有以下优点：

各层功能详述如下

TCP/IP 参考模型

应用层

传输层

网络互连层

网络接口层

使用 `npm version`

`npm version` 的`hooks`