对不起，我抛弃了Vue，转入React阵营。不因为其它，就因为在我这边使用React的工资比使用Vue的工资高。

在六月前，我硬背了几百道的React面试题，入职一家使用React的公司，薪资增幅120%；

入职就马上进入开发阶段，完全是从零开始，随着时间的推移，发现React入门也不是网传的那么难。难道是自己天生就适合吃这碗饭…………

到今天已经六个月了，在这里想把这段时间的收获跟掘友们分享一下，请掘友们多多指教，一起进步哈。

另外我是用React16.8来入门，故在开发过程中大多使用函数式组件和React Hooks来开发。

重磅提醒，文末有抽奖噢。

一、关于函数式组件的收获

函数式组件可以理解为一个能返回React元素的函数，其接收一个代表组件属性的参数props。

在React16.8之前，也就是没有React Hooks之前，函数式组件只作为UI组件，其输出完全由参数props控制，没有自身的状态没有业务逻辑代码，是一个纯函数。函数式组件没有实例，没有生命周期，称为无状态组件。

在React Hooks出现后，可以用Hook赋予函数式组件状态和生命周期，于是函数式组件也可以作为业务组件。

开发过程中，类组件和函数式组件都有使用，经过六个月的开发，感觉还是函数式组件比类组件好用一些，感受最深的是以下两点：

• 不用去学习class，不用去管烦人的this指向问题；


• 复用性高，很容易就把共同的抽取出来，写出自定义Hook，来替代高阶组件。

函数式组件和类组件之间有一个非常重要的区别：函数式组件捕获了渲染所使用的值。

我是遇到一个BUG才知道有这个区别，在解决这个BUG的过程理解了这个区别的含义。

那个BUG的场景是这样的，一个输入框，输入完内容，点击按钮搜索，搜索时先请求一个接口，获取一个类型，再用类型和输入框值去请求搜索接口。用代码简单描述一下。

import React, { Component } from "react";

import * as API from 'api/list';

class SearchComponent extends Component {

  constructor() {

    super();

    this.state = {

      inpValue: ""

    };

  }

  

  getType () {

    const param = {

      val:this.state.inpValue

    }

    return API.getType(param);

  }

  

  getList(type){

    const param = {

      val:this.state.inpValue,

      type,

    }

    return API.getList(param);

  }

  

  async handleSearch() {

    const res = await this.getType();

    const type = res?.data?.type;

    const res1 = await this.getList(type);

    console.log(res1);

  }

  

  render() {

    return (

      <div>

        <input

          type="text"

          value={this.state.inpValue}

          onChange={(e) => {

            this.setState({ inpValue: e.target.value });

          }}

        />

        <button

          onClick={() => {

            this.handleSearch();

          }}

        >

          搜索

        </button>

      </div>

    );

  }

}

export default SearchComponent;

以上代码逻辑看上去都没什么毛病，但是QA给我挑了一个BUG，在输入框输入要搜索的内容后，点击搜索按钮开始搜索，然后很快在输入框中又输入内容，结果搜索接口getList报错。查一下原因，发现是获取类型接口getType和搜索接口getList接受的参数val不一致。

在排查过程中，我非常纳闷，明明两次请求中val都是读取this.state.inpValue的值。当时同事指导我改成函数式组件就可解决这个BUG。

import React, { useState } from "react";

import * as API from 'api/list';

export const SearchComponent = () =>{

  const [inpValue,setInpValue] = useState('');



  const getType = () =>{

    const param = {

      val:inpValue

    }

    return API.getType(param);

  }



  const getList = (type) =>{

    const param = {

      val:inpValue,

      type:type,

    }

    return API.getList(param);

  }



  const  handleSearch = async ()=>{

    const res = await getType();

    const type = res?.data?.type;

    const res1 = await getList(type);

    console.log(res1);

  }

  

  return (

    <div>

      <input

        type="text"

        value={inpValue}

        onChange={(e) => {

          setInpValue(e.target.value);

        }}

      />

      <button

        onClick={() => {

          handleSearch();

        }}

      >

        搜索

      </button>

    </div>

  );

}

export default SearchComponent;

改成函数式组件后，再试一下，不报错了，BUG修复了。后面我查阅资料后才知道在函数式组件中的事件的state和props所获取的值是事件触发那一刻页面渲染所用的state和props的值。当点击搜索按钮后，val的值就是那一刻输入框中的值，无论输入框后面的值在怎么改变，不会捕获最新的值。

那为啥类组件中，能获取到最新的state值呢？关键在于类组件中是通过this去获取state的，而this永远是最新的组件实例。

其实在类组件中改一下，也可以解决这个BUG，改动的地方如下所示：

getType (val) {

  const param = {

    val,

  }

  return API.getType(param);

}

getList(val,type){

  const param = {

    val,

    type,

  }

  return API.getList(param);

}

async handleSearch() {

  const inpValue = this.state.inpValue;

  const res = await this.getType(inpValue);

  const type = res?.data?.type;

  const res1 = await this.getList(inpValue,type);

  console.log(res1);

}

在搜索事件handleSearch触发时，就把输入框的值this.state.inpValue存在inpValue变量中，后续执行的事件用到输入框的值都去inpValue变量取，后续再往输入框输入内容也不会影响到inpValue变量的值，除非再次触发搜索事件handleSearch。这样修改也可以解决这个BUG。

二、关于受控和非受控组件的收获

在React中正确理解受控和非受控组件的概念和作用至关重要，因为太多地方用到了。

• 受控组件

在Vue中有v-model指令可以很轻松把组件和数据关联起来，而在React中没有这种指令，那怎么让组件和数据联系起来，这时候就要用到受控组件的概念。

受控组件，我理解为组件的状态由数据来控制，改变这个数据的方法却不是组件的，这里所说的组件不仅仅是组件，也可以表示一个原生DOM。比如一个input输入框。

input输入框的状态（输入框的值）由数据value控制，改变数据value的方法setValue不是input输入框自身的。

import React, { useState } from "react";

const Input = () =>{

  const [value,setValue] = useState('');

  return (

    <div>

      <input

        type="text"

        value={value}

        onChange={(e) => {

          setValue(e.target.value);

        }}

      />

    </div>

  );

}

export default Input;

再比如在Ant Design UI中的Form组件自定义表单控件时，要求自定义表单控件接受属性value和onChange，其中value来作为自定义表单控件的值，onChange事件来改变属性value。

import React from 'react';

import { Form, Input } from 'antd';



const MyInput = (props) => {

  const { value, onChange } = props;

  

  const onNameChange = (e) => {

    onChange?.(e.target.value)

  }

  

  return (

    <Input

      type="text"

      value={value || ''}

      onChange={onNameChange}

    />

  )

}

const MyForm = () => {

  const onValuesChange = (values) => {

    console.log(values);

  };

  

  return (

    <Form

      name="demoFrom"

      layout="inline"

      onValuesChange={onValuesChange}

    >

      <Form.Item name="name">

        <MyInput />

      </Form.Item>

    </Form>

  )

}



export default MyForm;

我认为受控组件最大的作用是在第三方组件的状态经常莫名奇妙的改变时，用一个父组件将其包裹起来，传入一个要控制的状态和改变状态方法的props，把组件的状态提到父组件来控制，这样当组件的状态改变时就很清晰的知道哪个地方改变了组件的状态。

• 非受控组件

非受控组件就是组件自身状态完全由自身来控制，是相对某个组件而言，比如input输入框受Input组件控制，而Input组件不受Demo组件控制，那么Input相对Demo组件是非受控组件。

import React, { useState } from "react";

const Input = () =>{

  const [value,setValue] = useState('');

  return (

    <div>

      <input

        type="text"

        value={value}

        onChange={(e) => {

          setValue(e.target.value);

        }}

      />

    </div>

  );

}

const Demo = () =>{

 return (

     <Input/>

 )

}

export default Demo;

也可以把非受控组件理解为组件的值只能由用户设置，而不能通过代码控制。此外要记住一个非常特殊的DOM元素<input type="file" />，其无法通过代码设置所上传的文件。

三、关于useState的收获

useState可谓是使用频率最高的一个Hook，下面分享一下使用的3个心得。

• 
  

  useState可以接收一个函数作为参数，把这个函数称为state初始化函数

  
  

  一般场景下useState只要传入一个值就可以作为这个state的初始值，但是如果这个值要通过一定计算才能得出的呢？那么此时就可以传入一个函数，在函数中计算完成后，返回一个初始值。

  
  

  import React, { useState } from 'react';
  
  export default (props) => {
  
    const { a } = props;
  
    const [b] = useState(() => {
  
      return a + 1;
  
    })
  
    return (
  
      <div>{b}</div>
  
    )
  
  };
  

  
  


• 
  

  state更新如何使用旧的state

  
  

  刚开始时，我这么使用的

  
  

  const [a , setA] = useState(1);
  
  const changeA = () =>{
  
     setA(a + 1);
  
  }
  

  
  

  后来遇到一个错误，代码如下

  
  

  const [a , setA] = useState(1);
  
  const changeA = () =>{
  
     setA(a + 1);
  
     setA(a + 1);
  
  }
  

  
  

  在函数中连续调用两次setA会发现a还是等于2，并不是等于3。正确要这么调用

  
  

  const [a , setA] = useState(1);
  
  const changeA = () =>{
  
     setA( a => a+1 );
  
     setA( a => a+1 );
  
  }
  

  
  


• 
  

  如何拆分state

  
  

  在函数式组件中，只要一个state改变都会引起组件的重新渲染。而在React中只要父组件重新渲染，其子组件都会被重新渲染。

  
  

  那么问题就来了，如果把state拆分成多个，当依次改变这些state，则会多次触发组件重新渲染。

  
  

  若不拆分state，改变state时，就只会触发一次组件重新渲染。但是要注意，函数式组件不像类组件那样，改变其中state中的一个数据，会自动更新state中对应的数据。要这么处理

  
  

  const [data,setData] = useState({a:1,b:2,c:3});
  
  const changeData = () =>{
  
     setData(data =>{
  
        ...data,
  
        a:2,
  
     })
  
  }
  

  
  

当然也不能不拆分state，这样代码复用性会大大降低。我的经验是：

• 
  

  将完全不相关的state拆分成一个个。

  
  


• 
  

  如果有些state是相互关联的，或是需要一起改变，那么将其合并为一个state。

  
  

四、关于useMemo和usecallback的收获

• 对其定义的理解

useCallback(fn,[a, b]);

useMemo(fn, [a, b]);

如上所示，useMemo和usecallback参数中fn是一个函数，参数中[a,b]的a和b可以是state或props。

useMemo和usecallback首次执行时，执行fn后创建一个缓存并返回这个缓存，监听[a,b]中的表示state或props的a和b，若值未发生变化直接返回缓存，若值发生变化则重新执行fn再创建一个缓存并返回这个缓存。

useMemo和usecallback都会返回一个缓存，但是这个缓存各不相同，useMemo返回一个值，这个值可以认为是执行fn返回的。usecallback返回一个函数，这个函数可以认为是fn。那么注意了传给useMemo的fn必须返回一个值。

• 结合React.memo来使用

用React.memo包裹一个组件，当组件的props发生改变时才会重新渲染。

若包裹的组件是个函数式组件，在其中拥有useState、useReducer、useContext的 Hook，当state 或context发生变化时，它仍会重新渲染，不过这些影响不大，使用React.memo的主要目的是控制父组件更新迫使子组件也更新的问题。

props值的类型可以为String、Boolean、Null、undefined、Number、Symbol、Object、Array、Function，简单的来说就是基础类型和引用类型。

两个值相等的基础类型的数据用==比较返回true，那两个值相等的引用类型的数据用==比较返回false，不信试一试以下代码，看是不是都为false。

console.log({a:1} == {a:1});

console.log([1] == [1]);

const fn1 = () =>{console.log(1)};

const fn2 = () =>{console.log(1)};

console.log(fn1 == fn2);

正因为如此，当props的值为引用类型时，且这个值是通过函数计算出来的，用useMemo或usecallback来处理一下，避免计算出来的值相等，但是比较却不相等，导致组件更新。我认为usecallback是专门为处理props值为函数而创建的Hook。

在下面的例子，List组件是一个渲染开销很大的组件，它有两个属性，其中data属性是渲染列表的数据源，是一个数组，onClick属性是一个函数。在Demo组件中引入List组件，用useMome处理data属性值，用useCallback处理onClick属性值，使得List组件是否重新渲染只受Demo组件的data这个state控制。

List组件：

import React from 'react';

const List = (props) => {

  const { onClick, data } = props;

  //...

  return (

    <>

      {data.map(item => {

        return (

          <div onClick={() =>{onClick(item)}} key={item.id}>{item.content}</div>

        )

      })}

    </>

  )

}

export default React.memo(List);

Demo组件：

import

React,

{ useState, useCallback, useMemo }

  from 'react';

import List from './List';



const Demo = () => {

  //...

  const [data, setData] = useState([]);

  const listData = useMemo(() => {

    return data.filter(item => {

      //...

    })

  }, [data])



  const onClick = useCallback((item) => {

    console.log(item)

  }, []);



  return (

    <div>

      <List onClick={onClick} data={listData} />

    </div>

  )

}



export default Demo;

可见useMemo和usecallback作为一个性能优化手段，可以在一点程度上解决React父组件更新，其子组件也被迫更新的性能问题。

• 单独使用

假设List组件不用React.memo包裹，还能用useMemo或usecallback来优化吗？先来看一段代码，也可以这么使用组件。

import React, { useState } from 'react';

import List from './List';



export default function Demo() {

  //...

  const [data, setData] = useState([]);

  const list = () => {

    const listData = data.filter(item => {

      //...

    })

    const onClick = (item) => {

      console.log(item)

    }

    return (

      <List onClick={onClick} data={listData} />

    )

  }

  return (

    <div>

      {list()}

    </div>

  )

}

其中list返回一个React元素，是一个值，那么是不是可以用useMemo来处理一下。

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

import List from './List';



export default function Demo() {

  //...

  const [data, setData] = useState([]);

  const listMemo = useMemo(() => {

    const listData = data.filter(item => {

      //...

    })

    const onClick = (item) => {

      console.log(item)

    }

    return (

      <List onClick={onClick} data={listData} />

    )

  }, [data])

  return (

    <div>

      {listMemo}

    </div>

  )

}

listMemo这个值（React元素）是否重新生成只受Demo组件的data这个state控制。这样不是相当List组件是否重新渲染只受Demo组件的data这个state控制。

• 不能滥用

不能认为“不管什么情况，只要用useMemo或useCallback处理一下，就能远离性能的问题”

要认识到useMemo和useCallback也有一定的计算开销，例如useMemo会缓存一些值，在后续重新渲染，将依赖数组中的值取出来和上一次记录的值进行比较，如果不相等才会重新执行回调函数，否则直接返回缓存的值。这个过程有一定的计算开销。

所以在使用useMemo和useCallback前一定要考虑清楚使用场景，不能滥用。

下面总结一下要使用useMemo和useCallback的场景：

• 
  

  一个渲染开销很大的组件的属性是一个函数时，用useCallback处理一下这个属性值。

  
  


• 
  

  得到一个值，有很高得计算开销，用useMemo处理一下。

  
  


• 
  

  一个通过计算得到的引用类型的值，且这个值被赋值给一个渲染开销很大的组件的属性，用useMemo处理一下。

  
  


• 
  

  自定义Hook中暴露出的引用类型的值，用useMemo处理一下。

  
  

总之一句话使用useMemo和useCallback是为了保持引用相等和避免重复成本很高的计算。

五、关于useEffect和useLayoutEffect的收获

useEffect(fn);

useLayoutEffect(fn);

useEffect可谓是使用频率第二高的一个Hook，useLayoutEffect使用频率比较低。下面介绍四个使用心得：

• 执行的时机

在使用useEffect和useLayoutEffect之前，要搞明白传入这个两个Hook的函数会在什么时候执行。

传入useEffect的函数是在React完成对DOM的更改，浏览器把更改后的DOM渲染出来后执行的。

传入useLayoutEffect的函数是在React完成对DOM的更改后，浏览器把更改后的DOM渲染出来之前执行的。

所以useEffect不会阻碍页面渲染，useLayoutEffect会阻碍页面渲染，但是如果要在渲染前获取DOM元素的属性做一些修改，useLayoutEffect是一个很好的选择。

• 只想执行一次

组件初始化和每次更新时都会重新执行传入useEffect和useLayoutEffect的函数。那只想在组件初始化时执行一次呢？相当Vue中的mounted，这样实现：

useEffect(fn,[]);

useLayoutEffect(fn,[]);

• 用来进行事件监听的坑

上面介绍在useEffect在第二参数传入一个空数组[]相当Vue中的mounted，那么在Vue的mounted中经常会用addEventListener监听事件，然后在beforeDestory中用removeEventListener移除事件监听。那用useEffect实现一下。

useEffect(() => {

   window.addEventListener('keypress', handleKeypress, false);

   return () => {

      window.removeEventListener('keypress', handleKeypress, false);

   };

},[])

上面用来监听键盘回事事件，但是你会发现一个很奇怪的现象，有些页面回车后会执行handleKeypress方法，有些页面回车后执行几次handleKeypress方法后，就不再执行了。

这是因为一个useEffect执行前会执行上一个useEffect的传入函数的返回函数，这个返回函数可以用来解除绑定，取消请求，防止引起内存泄露。

此外组件卸载时，也会执行useEffect的传入函数的返回函数。

示意如下代码所示：

window.addEventListener('keypress', handleKeypress, false); // 运行第一个effect

window.removeEventListener('keypress', handleKeypress, false);// 清除上一个effect

window.addEventListener('keypress', handleKeypress, false); // 运行下一个 effect

window.removeEventListener('keypress', handleKeypress, false); // 清除上一个effect

window.addEventListener('keypress', handleKeypress, false); // 运行下一个effect

window.removeEventListener('keypress', handleKeypress, false); // 清除最后一个effect

所以要解决上面的BUG，只要把useEffect的第二参数去掉即可。这点跟Vue中的mounted不一样。

• 用来监听某个state或prop

在useEffect和useLayoutEffect的第二参数是个数组，称为依赖，当依赖改变时候会执行传入的函数。

比如监听 a 这个state 和 b 这个prop，这样实现：

useEffect(fn,[a,b]);

useLayoutEffect(fn,[a,b]);

但是要注意不要一次性监听过多的state或prop，也就是useEffect的依赖过多，如果过多要去优化它，否则会导致这个useEffect难以维护。

我是这样来优化的：

• 考虑该依赖是否必要，不必要去掉它。


• 将useEffect拆分为更小的单元，每个useEffect依赖于各自的依赖数组。


• 通过合并依赖中的相关state，将多个state聚合为一个state。

六、结语

以上五点就是我这六个月中印象最深的收获，有踩过的坑，有写被leader吐槽的代码。不过最大的收获还是薪资涨幅120%，哈哈哈，各位掘友要勇于跳出自己的舒适区，才能有更丰厚的收获。

虽然以上的收获在某些掘友们眼里会觉得比较简单，但是对于刚转入React的掘友们这些知识的使用频率非常高，要多多琢磨。如果有错误欢迎在评论中指出，或者掘友有更好的收获也在评论中分享一下。

loader-1

这应该是最简单的CSS加载了。在圆圈上有一个红色的圆弧，仔细观察会发现，这个圆弧正好是1/4.

实现逻辑:

一个宽高相等容器，设定border为白色。然后给底边bottom设置红色,

当设定border-radius是50%，那他正好可以变成一个圆。

给这个圆加上旋转的动画。CSS中旋转角度的动画是rotate()我们只要给他设定从0旋转到360即可。（这个动画会在下面多次使用，下文不再赘述）

 @-webkit-keyframes rotation {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(360deg);

    }

  }

完整代码

.loader-1 {

    width: 48px;

    height: 48px;

    border: 5px solid #FFF;

    border-bottom-color: #FF3D00;

    border-radius: 50%;

    display: inline-block;

    -webkit-animation: rotation 1s linear infinite;

    animation: rotation 1s linear infinite;

}

loader-2

观察：外围是一个圈，内部有一个红色的元素在转动。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

里面的红色是如何实现？这里有两个思路。1；新增一个小div，让他在里面，并且跟loader-1一样，设置一个红色的底边。2：使用::after，思路跟方法1 一致。

加上旋转的动画。

完整代码

.loader-2 {

    width: 48px;

    height: 48px;

    border: 3px solid #FFF;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    -webkit-animation: rotation 1s linear infinite;

    animation: rotation 1s linear infinite;

}

.loader-2:after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-bottom-color: #FF3D00;

}

loader-3

观察：内部是一个圆，外围是一个红色的圆弧。

实现逻辑

这个加载效果跟loader-2是一致的，区别就是红色圆弧在内外。

完整代码

.loader-3 {

    width: 48px;

    height: 48px;

    border: 3px solid #FFF;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    -webkit-animation: rotation 1s linear infinite;

    animation: rotation 1s linear infinite;

}

.loader-3:after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 56px;

    height: 56px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-bottom-color: #FF3D00;

}

loader-4

观察：外围是一个圆，内部有两个圆，这两个圆正好是对称的。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

里面的红色是如何实现？这里有两个思路。1；新增两个小div，背景颜色设置为红色，然后设置50%圆角，这样看上去就像是两个小点。2：使用::after和::before，思路跟方法1 一致。

加上旋转的动画。

完整代码

.loader-4 {

    width: 48px;

    height: 48px;

    border: 2px solid #FFF;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    -webkit-animation: rotation 1s linear infinite;

    animation: rotation 1s linear infinite;

}

.loader-4:before {

    left: auto;

    top: auto;

    right: 0;

    bottom: 0;

    content: "";

    position: absolute;

    background: #FF3D00;

    width: 6px;

    height: 6px;

    transform: translate(150%, 150%);

    border-radius: 50%;

}

.loader-4:after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    background: #FF3D00;

    width: 6px;

    height: 6px;

    transform: translate(150%, 150%);

    border-radius: 50%;

}

loader-5

观察：一共是三层，最外层白圈，中间红圈，里边白圈。每一圈都有一个一半圆弧的缺口，外圈和最内圈的旋转方向一致。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

这里的问题是，圈的缺口如何实现，其实很简单，在css中有一个属性值：transparent，利用这个值给边框设置透明，即可实现缺口。

对于内部的红色和白色圆弧，继续使用::after和::before即可。

加上动画，这里有一个反方向旋转的动画(rotationBack)。
这里设置旋转是往负角度，旋转即可反方向旋转。

  @keyframes rotationBack {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(-360deg);

    }

  }

完整代码

.loader-5 {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    border: 3px solid;

    border-color: #FFF #FFF transparent transparent;

    -webkit-animation: rotation 1s linear infinite;

    animation: rotation 1s linear infinite;

}

.loader-5:before {

    width: 32px;

    height: 32px;

    border-color: #FFF #FFF transparent transparent;

    -webkit-animation: rotation 1.5s linear infinite;

    animation: rotation 1.5s linear infinite;

}

.loader-5:after, .loader-5:before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    border: 3px solid;

    border-color: transparent transparent #FF3D00 #FF3D00;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    -webkit-animation: rotationBack 0.5s linear infinite;

    animation: rotationBack 0.5s linear infinite; 

    transform-origin: center center; *

}

loader-6

观察：看上去像是一个时钟，一个圆里面有一根指针。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

指针是如何实现的：从这里开始不再讨论新增div的情况。
其实红色的指针就是一个单纯的宽高不一致的容器。

完整代码

.loader-6 {

    width: 48px;

    height: 48px;

    border: 2px solid #FFF;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    -webkit-animation: rotation 1s linear infinite;

    animation: rotation 1s linear infinite;

}

.loader-6:after {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    background: #FF3D00;

    width: 3px;

    height: 24px;

    transform: translateX(-50%);

}

loader-7

观察：首先确定几个圈，一共两个。当第一个圈还没消失，第二个圈已经出现。最后出现了类似水波的效果。同时要注意的是，这两个两个圈是一样大的，这是因为他们最终消失的地方是一致的。

实现逻辑

首先确定，这两个圈是否在容器上。上面一直时在容器上添加边框，当然这个例子也可以，但是为了实现的简单，我们把这两个圈放在::after和::before中。

加上动画，这里的圈是逐渐放大的，在CSS中scale用来放大缩小元素。同时为了实现波纹逐渐清晰的效果，我们加上透明度。

  @keyframes animloader7 {

    0% {

      transform: scale(0);

      opacity: 1;

    }

    100% {

      transform: scale(1);

      opacity: 0;

    }

  }

完整代码

这里因为两个圈是先后出现的，所以需要一个圈加上delay

.loader-7 {

    width: 48px;

    height: 48px;

    display: inline-block;

    position: relative;

}

.loader-7::after, .loader--7::before {

    content: "";

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border: 2px solid #FFF;

    position: absolute;

    left: 0;

    top: 0;

    -webkit-animation: animloader7 2s linear infinite;

    animation: animloader7 2s linear infinite;

}

.loader-7::after {

    -webkit-animation-delay: 1s;

    animation-delay: 1s;

}

.loader-7::after, .loader-7::before {

    content: "";

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border: 2px solid #FFF;

    position: absolute;

    left: 0;

    top: 0;

    -webkit-animation: animloader7 2s linear infinite;

    animation: animloader7 2s linear infinite;

}

loader-8

观察：一段圆弧加上一个三角形。

实现逻辑

一个宽高相等的容器，加上白色的边，50%的圆角。这样就是外围的圈。

transparent，利用这个值给边框设置透明，即可实现缺口。

在:after上创建箭头。CSS中我们有多种方法实现三角形，其中最简单是使用border，不需要给元素设置宽高，只需要设置border的大小，并且只有一边设置颜色。

border: 10px solid transparent;

border-right-color: #FFF

加上旋转动画。

完整代码

.loader-8 {

    width: 48px;

    height: 48px;

    border: 3px solid #FFF;

    border-bottom-color: transparent;

    border-radius: 50%;

    display: inline-block;

    position: relative;

    -webkit-animation: rotation 1s linear infinite;

    animation: rotation 1s linear infinite;

}

.loader-8:after {

    content: "";

    position: absolute;

    left: 20px;

    top: 31px;

    border: 10px solid transparent;

    border-right-color: #FFF;

    transform: rotate(-40deg);

}

js中那么多循环，for for...in for...of forEach，有些循环感觉上是大同小异今天我们讨论下for循环和forEach的差异。

我们从几个维度展开讨论：

for循环和forEach的本质区别。

for循环和forEach的语法区别。

for循环和forEach的性能区别。

本质区别

for循环是js提出时就有的循环方法。forEach是ES5提出的，挂载在可迭代对象原型上的方法，例如Array Set Map。

forEach是一个迭代器，负责遍历可迭代对象。那么遍历，迭代，可迭代对象分别是什么呢。

遍历：指的对数据结构的每一个成员进行有规律的且为一次访问的行为。

迭代：迭代是递归的一种特殊形式，是迭代器提供的一种方法，默认情况下是按照一定顺序逐个访问数据结构成员。迭代也是一种遍历行为。

可迭代对象：ES6中引入了 iterable 类型，Array Set Map String arguments NodeList 都属于 iterable，他们特点就是都拥有 [Symbol.iterator] 方法，包含他的对象被认为是可迭代的 iterable。

在了解这些后就知道 forEach 其实是一个迭代器，他与 for 循环本质上的区别是 forEach 是负责遍历（Array Set Map）可迭代对象的，而 for 循环是一种循环机制，只是能通过它遍历出数组。

再来聊聊究竟什么是迭代器，还记得之前提到的 Generator 生成器，当它被调用时就会生成一个迭代器对象（Iterator Object），它有一个 .next()方法，每次调用返回一个对象{value:value,done:Boolean}，value返回的是 yield 后的返回值，当 yield 结束，done 变为 true，通过不断调用并依次的迭代访问内部的值。

迭代器是一种特殊对象。ES6规范中它的标志是返回对象的 next() 方法，迭代行为判断在 done 之中。在不暴露内部表示的情况下，迭代器实现了遍历。看代码

let arr = [1, 2, 3, 4]  // 可迭代对象

let iterator = arr[Symbol.iterator]()  // 调用 Symbol.iterator 后生成了迭代器对象

console.log(iterator.next()); // {value: 1, done: false}  访问迭代器对象的next方法

console.log(iterator.next()); // {value: 2, done: false}

console.log(iterator.next()); // {value: 3, done: false}

console.log(iterator.next()); // {value: 4, done: false}

console.log(iterator.next()); // {value: undefined, done: true}

我们看到了。只要是可迭代对象，调用内部的 Symbol.iterator 都会提供一个迭代器，并根据迭代器返回的next 方法来访问内部，这也是 for...of 的实现原理。

let arr = [1, 2, 3, 4]

for (const item of arr) {

    console.log(item); // 1 2 3 4 

}

把调用 next 方法返回对象的 value 值并保存在 item 中，直到 value 为 undefined 跳出循环，所有可迭代对象可供for...of消费。 再来看看其他可迭代对象：

function num(params) {

    console.log(arguments); // Arguments(6) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

    let iterator = arguments[Symbol.iterator]()

    console.log(iterator.next()); // {value: 1, done: false}

    console.log(iterator.next()); // {value: 2, done: false}

    console.log(iterator.next()); // {value: 3, done: false}

    console.log(iterator.next()); // {value: 4, done: false}

    console.log(iterator.next()); // {value: undefined, done: true}

}

num(1, 2, 3, 4)



let set = new Set('1234')

set.forEach(item => {

    console.log(item); // 1 2 3 4

})

let iterator = set[Symbol.iterator]()

console.log(iterator.next()); // {value: 1, done: false}

console.log(iterator.next()); // {value: 2, done: false}

console.log(iterator.next()); // {value: 3, done: false}

console.log(iterator.next()); // {value: 4, done: false}

console.log(iterator.next()); // {value: undefined, done: true}

所以我们也能很直观的看到可迭代对象中的 Symbol.iterator 属性被调用时都能生成迭代器，而 forEach 也是生成一个迭代器，在内部的回调函数中传递出每个元素的值。

（感兴趣的同学可以搜下 forEach 源码， Array Set Map 实例上都挂载着 forEach ，但网上的答案大多数是通过 length 判断长度， 利用for循环机制实现的。但在 Set Map 上使用会报错，所以我认为是调用的迭代器，不断调用 next，传参到回调函数。由于网上没查到答案也不妄下断言了，有答案的人可以评论区给我留言）

for循环和forEach的语法区别

了解了本质区别，在应用过程中，他们到底有什么语法区别呢？

1. forEach 的参数。


2. forEach 的中断。


3. forEach 删除自身元素，index不可被重置。


4. for 循环可以控制循环起点。

forEach 的参数

我们真正了解 forEach 的完整传参内容吗？它大概是这样：

arr.forEach((self,index,arr) =>{},this)

self： 数组当前遍历的元素，默认从左往右依次获取数组元素。

index： 数组当前元素的索引，第一个元素索引为0，依次类推。

arr： 当前遍历的数组。

this： 回调函数中this指向。

let arr = [1, 2, 3, 4];

let person = {

    name: '技术直男星辰'

};

arr.forEach(function (self, index, arr) {

    console.log(`当前元素为${self}索引为${index},属于数组${arr}`);

    console.log(this.name+='真帅');

}, person)

我们可以利用 arr 实现数组去重：

let arr1 = [1, 2, 1, 3, 1];

let arr2 = [];

arr1.forEach(function (self, index, arr) {

    arr.indexOf(self) === index ? arr2.push(self) : null;

});

console.log(arr2);   // [1,2,3]

forEach 的中断

在js中有break return continue 对函数进行中断或跳出循环的操作，我们在 for循环中会用到一些中断行为，对于优化数组遍历查找是很好的，但由于forEach属于迭代器，只能按序依次遍历完成，所以不支持上述的中断行为。

let arr = [1, 2, 3, 4],

    i = 0,

    length = arr.length;

for (; i < length; i++) {

    console.log(arr[i]); //1,2

    if (arr[i] === 2) {

        break;

    };

};



arr.forEach((self,index) => {

    console.log(self);

    if (self === 2) {

        break; //报错

    };

});



arr.forEach((self,index) => {

    console.log(self);

    if (self === 2) {

        continue; //报错

    };

});

如果我一定要在 forEach 中跳出循环呢？其实是有办法的，借助try/catch：

try {

    var arr = [1, 2, 3, 4];

    arr.forEach(function (item, index) {

        //跳出条件

        if (item === 3) {

            throw new Error("LoopTerminates");

        }

        //do something

        console.log(item);

    });

} catch (e) {

    if (e.message !== "LoopTerminates") throw e;

};

若遇到 return 并不会报错，但是不会生效

let arr = [1, 2, 3, 4];



function find(array, num) {

    array.forEach((self, index) => {

        if (self === num) {

            return index;

        };

    });

};

let index = find(arr, 2);// undefined

forEach 删除自身元素，index不可被重置

在 forEach 中我们无法控制 index 的值，它只会无脑的自增直至大于数组的 length 跳出循环。所以也无法删除自身进行index重置，先看一个简单例子：

let arr = [1,2,3,4]

arr.forEach((item, index) => {

    console.log(item); // 1 2 3 4

    index++;

});

index不会随着函数体内部对它的增减而发生变化。在实际开发中，遍历数组同时删除某项的操作十分常见，在使用forEach删除时要注意。

for 循环可以控制循环起点

如上文提到的 forEach 的循环起点只能为0不能进行人为干预，而for循环不同：

let arr = [1, 2, 3, 4],

    i = 1,

    length = arr.length;



for (; i < length; i++) {

    console.log(arr[i]) // 2 3 4

};

那之前的数组遍历并删除滋生的操作就可以写成

let arr = [1, 2, 1],

    i = 0,

    length = arr.length;



for (; i < length; i++) {

    // 删除数组中所有的1

    if (arr[i] === 1) {

        arr.splice(i, 1);

        //重置i，否则i会跳一位

        i--;

    };

};

console.log(arr); // [2]

//等价于

var arr1 = arr.filter(index => index !== 1);

console.log(arr1) // [2]

for循环和forEach的性能区别

在性能对比方面我们加入一个 map 迭代器，它与 filter 一样都是生成新数组。我们对比 for forEach map 的性能在浏览器环境中都是什么样的：

性能比较：for > forEach > map

在chrome 62 和 Node.js v9.1.0环境下：for 循环比 forEach 快1倍，forEach 比 map 快20%左右。
原因分析

for：for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。

forEach：对于forEach来说，它的函数签名中包含了参数和上下文，所以性能会低于 for 循环。

map：map 最慢的原因是因为 map 会返回一个新的数组，数组的创建和赋值会导致分配内存空间，因此会带来较大的性能开销。如果将map嵌套在一个循环中，便会带来更多不必要的内存消耗。

当大家使用迭代器遍历一个数组时，如果不需要返回一个新数组却使用 map 是违背设计初衷的。在我前端合作开发时见过很多人只是为了遍历数组而用 map 的：

let data = [];

let data2 = [1,2,3];

data2.map(item=>data.push(item));

写在最后：这是我面试遇到的一个问题，当时只知道语法区别。并没有从可迭代对象，迭代器，生成器和性能方面，多角度进一步区分两者的异同，我也希望我能把一个简单的问题从多角度展开细讲，让大家正在搞懂搞透彻。

JavaScript 和 ECMAScript 的关系

JavaScript 是一种高级的、编译型的编程语言。而 ECMAScript 是一种规范。

JavaScript 是基于 ECMAScript 规范的脚本语言。ECMAScript（以下简称 ES）在 2015 年发布了 ES6（ECMAScript 2015），而且 TC39 委员会决定每年发布一个 ECMAScript 的版本，也就是我们看到的 ES6/7/8/9/11/12。

ES11 中两个非常有用的特性

空值合并操作符（??）

Nullish coalescing Operator(空值处理)只有 null 和 undefined 的时候才认为真的是空。
以下为使用方式：

let user = {

    u1: 0,

    u2: false,

    u3: null,

    u4: undefined

    u5: '',

}

let u1 = user.u1 || '用户1'  // 用户1

let u2 = user.u2 || '用户2'  // 用户2

let u3 = user.u3 || '用户3'  // 用户3

let u4 = user.u4 || '用户4'  // 用户4

let u5 = user.u5 || '用户5'  // 用户5

// es11语法【只有 null  和 undefined 的时候才认为真的是空】

let u1 = user.u1 ?? '用户1'  // 0

let u2 = user.u2 ?? '用户2'  // false

let u3 = user.u3 ?? '用户3'  // 用户3

let u4 = user.u4 ?? '用户4'  // 用户4

let u5 = user.u5 ?? '用户5'  // ''

应用的场景：后端返回的数据中 null 和 0 表示的意义可能是不一样的，null 表示为空，展示成 /。0 还是有数值，展示为 0。

let a = 0;

console.log(a ?? '/'); // 0

a = null;

console.log(a ?? '/'); // '/'

Optional chaining（可选链）

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

这个有点类似于 lodash 工具库中的 get 方法

let user = {

    age: 18

}

let u1 = user.childer.name // TypeError: Cannot read property 'name' of undefined

// es11 语法

let u1 = user.childer?.name // undefined

浏览器兼容性问题

虽然 ES 新的特性十分好用，但需要注意的是它们的兼容性问题。
比如，可选链目前的兼容性如下:

解决方法就是讲 ES 新特性的语法转换成 ES5 的语法。

使用 Babel 进行转换

Babel 是一个 JavaScript 编译器。它的输入是下一代 JavaScript 语法书写的代码，输出浏览器兼容的 JavaScript 代码。

我们可以通过 Babel 中的转换插件来进行语法转换。比如我们上面两个语法可以通过以下两个插件进行转换。

空值合并操作符。@babel/plugin-proposal-nullish-coalescing-operator

使用：

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator

在配置文件中：

{

  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]

}

就可以做到以下的转换，输入：

var foo = object.foo ?? "default";

输出：

var _object$foo;



var foo =

  (_object$foo = object.foo) !== null && _object$foo !== void 0

    ? _object$foo

    : "default";

同理，可选链操作符可以看 @babel/plugin-proposal-optional-chaining，还有其他的都可以在 @babel/preset-env 目录中找到。

测试

在 Firefox 中，下载比较老的版本。

const foo = null ?? 'default string';

console.log(foo);

// expected output: "default string"



const baz = 0 ?? 42;

console.log(baz);

运行上面的代码，报错：

项目中使用，成功。说明 polyfil 成功了。

总结

JavaScript 是基于 ECMAScript 规范的脚本语言。ECMAScript 规范的发展给前端开发带来了很多的便利，但我们在使用的时候应该使用 Babel 这种 JavaScript 编译器将其转换成浏览器兼容的代码。

很多人问我，现在可以用 Vue 3 了吗，Vue 2升级成本高吗，我想借着早早聊的场子把大家经常问的问题，跟大家谈一谈我的看法，我会尽量公平公正，客观正向，但尽然是看法，难免会有一些有争议的地方，或者不认可的地方，你可以留言。我总结了 10 个问题，期望能帮助你在技术选型中起到一定的帮助：

0、升级 Vue 3 成本大吗

可大可小，如果你使用的Vue推荐的 template 语法，成本是非常小的，改个版本号就已经可以 run 起来了，但前提是它的周边库你也已经升级了，不信你试试，其实周边库的升级成本不能算做 Vue 3 的升级成本，因为就算没有 Vue 3，周边也会不断升级，只是刚好撞到了一起，然后这个锅就让 Vue 一起背了。

关于升级这方面我想也可以借鉴 Ant Design Vue 的渐进式升级姿势，Ant Design Vue 2.x 版本是改了少量的代码，让其在 Vue 3 下运行，然后慢慢的使用Composition API 迭代重构，对于简单的没有破坏性更新的继续在 2.x 下迭代小版本，然后将有大量重构代码，复杂度高的，有破坏性更新的在 3.x 版本上迭代升级。

业务代码的更新升级相较于组件库成本会更加可控，因为组件库一般都会用到一些黑科技或非文档API等等，会让升级成本变高，这也是为什么一些组件库迟迟不兼容 Vue3 的部分原因。

1、Vue 3 稳定了吗？

目前 Vue 3 已经相当稳定，除非你会用到各种黑科技，业务项目不应该有黑科技，如果用到了，千万不要写到简历里，相信我，“黑科技”不但不会加分，还会减分，因为所谓的黑科技，大概率是你写法就不对。不服来辩

2、Vue 3 生态不丰富？

你所谓的生态是指哪些？状态管理？路由管理？国际化？组件库？SSR？常用生态库都已经提供了 Vue 3 版本，而且 Vue 2 版本都在逐渐减少维护时间。

退一步讲，如果还不够，那可是造轮子，刷 KPI 的好机会，不是嘛。

3、Vue 3 的写法不习惯？

Composition API 只是可选项，你依然可以用 Option API，没有什么变化。但我们应该跳出舒适圈，拥抱未来，拥抱更好的东西。

4、Vue 3 好找工作吗？

前端技术风口已经不多了，Vue 3 算一个，遥想当年懂个生命周期、虚拟DOM就可以进大厂的时代，甚是想念。

5、Vue 3 不兼容 IE11？

是的，不兼容，如果公司业务需要兼容IE11，我给的方案是：先统计下你们有多少 IE11 用户，是否还值得投入精力兼容，推动去IE化是需要套路的，数据、成本、收益 PPT形式报告给老板，没有想想的那么难。再透漏下，react 版本的 Antd，也会在下一个大版本中不再兼容 IE 11。

6、Vue、React 如何选择？

还在纠结？工具人用哪个，它都只是工具，哪来的优越感？我用 angular，我骄傲了吗？

摸鱼小能手：哪个熟悉用哪个，哪个干活快用哪个

职场新人：公司用哪个就用哪个

KPI 高手：轮着换，使用 Vue(React) 重构 React(Vue) 项目，加载时间减少 30%，秒开率提升，转化率提升10%，带来收益 2千万/年，这TM得跳着升，没毛病吧

学生：都得学，前端框架还没复杂到二选一的地步

7、升级 Vue 3 带来的收益

性能提升，可维护性提升(主要还是看人)，刷 KPI，升职加薪。

尤其是性能提升方面，我会在早早聊 Vue 专场给大家分享 Ant Design Vue 使用 Vue 3 重构，总结的一些经验。

8、何时使用 Vue 3？

别问，问就是现在

9、大厂都在用 React ？

其实并没有，我了解的百度、腾讯、京东、字节、快手、美团等等大厂都是 Vue 重度用户，阿里相对特殊些，只有少数部门在使用 Vue、Angular，之所以使用 React，不是说 Vue 不够好，只是最开始选择了React那些部门做的比较好，后来在 React 基建方面也已经做了很多工作，两套共存，有点浪费资源，仅此而已。至于那些个别团队，自带优越感式的招聘，大家可以忽略了，技术和氛围应该都不咋地。

10、硬广，Ant Design Vue 什么时候兼容 Vue 3？

Ant Design Vue 自 2.0 版本开始，已经全面兼容 Vue 3，目前文档站点默认还是 1.x 版本，是因为就像 Vue 3 一样，2.x 版本目前是 next tag，我们会在 Ant Design Vue 3.0 rc 后切回主站，没错 Ant Design Vue 已经 3.0 alpha 了。

所以 Vue 3 凉了吗，说真的，我也不知道，怎么算凉？从 Github Star、npm 下载量来看，都是呈上升趋势，我个人甚至押宝 Vue 3，已经在 6月份辞职，目前全职开源，押宝 Vue 3 了。

但是个别人有这种感觉，也是可以理解的，可以说 Vue 的成功，yyx 个人运营能力起到了至关重要的作用，react 反而低调了很多，因为 React 主要是为公司服务的，其次才是社区，他们没有运营的压力，也没有太大的动力去做运营。在 Vue 3 前期运营的过程中，或许过度强调了 Composition API，导致有部分人产生了不兼容误解，或许这部分人并不在少数，或许 Vue 应该将 Composition API 放在 3.2、3.3 的小版本上去迭代添加。

当然这都是猜测，10月23日，yyx 亲自为大家解读 Vue 3 及生态现状，这应该可以帮助你进一步做出决策。我也会为大家同步 Ant Design Vue 现状及未来规划，如果顺利，我们也会有新产品发布，但大概率要跳票了，哈哈哈，敬请期待吧。

最近有个朋友面试，面试官问了个奇葩的问题，也就是我写在标题上的这个问题。

能问出这个问题，面试官应该对 React 不是很了解，也是可能是看到面试者简历里面有写过自己熟悉 React，面试官想通过这个问题来判断面试者是不是真的熟悉 React 🤣。

面试官的问法是否正确？

面试官的问题是，setState 是一个宏任务还是微任务，那么在他的认知里，setState 肯定是一个异步操作。为了判断 setState 到底是不是异步操作，可以先做一个实验，通过 CRA 新建一个 React 项目，在项目中，编辑如下代码：

import React from 'react';

import logo from './logo.svg';

import './App.css';



class App extends React.Component {

  state = {

    count: 1000

  }

  render() {

    return (

      <div className="App">

        <img

          src={logo} alt="logo"

          className="App-logo"

          onClick={this.handleClick}

        />

        <p>我的关注人数：{this.state.count}</p>

      </div>

    );

  }

}



export default App;

页面大概长这样：

上面的 React Logo 绑定了一个点击事件，现在需要实现这个点击事件，在点击 Logo 之后，进行一次 setState 操作，在 set 操作完成时打印一个 log，并且在 set 操作之前，分别添加一个宏任务和微任务。代码如下：

handleClick = () => {

  const fans = Math.floor(Math.random() * 10)

  setTimeout(() => {

    console.log('宏任务触发')

  })

  Promise.resolve().then(() => {

    console.log('微任务触发')

  })

  this.setState({

    count: this.state.count + fans

  }, () => {

    console.log('新增粉丝数:', fans)

  })

}

很明显，在点击 Logo 之后，先完成了 setState 操作，然后再是微任务的触发和宏任务的触发。所以，setState 的执行时机是早于微任务与宏任务的，即使这样也只能说它的执行时机早于 Promise.then，还不能证明它就是同步任务。

handleClick = () => {

  const fans = Math.floor(Math.random() * 10)

  console.log('开始运行')

  this.setState({

    count: this.state.count + fans

  }, () => {

    console.log('新增粉丝数:', fans)

  })

  console.log('结束运行')

}

这么看，似乎 setState 又是一个异步的操作。主要原因是，在 React 的生命周期以及绑定的事件流中，所有的 setState 操作会先缓存到一个队列中，在整个事件结束后或者 mount 流程结束后，才会取出之前缓存的 setState 队列进行一次计算，触发 state 更新。只要我们跳出 React 的事件流或者生命周期，就能打破 React 对 setState 的掌控。最简单的方法，就是把 setState 放到 setTimeout 的匿名函数中。

handleClick = () => {

  setTimeout(() => {

    const fans = Math.floor(Math.random() * 10)

    console.log('开始运行')

    this.setState({

      count: this.state.count + fans

    }, () => {

      console.log('新增粉丝数:', fans)

    })

    console.log('结束运行')

  })

}

由此可见，setState 本质上还是在一个事件循环中，并没有切换到另外宏任务或者微任务中，在运行上是基于同步代码实现，只是行为上看起来像异步。所以，根本不存在面试官的问题。

React 是如何控制 setState 的 ？

前面的案例中，setState 只有在 setTimeout 中才会变得像一个同步方法，这是怎么做到的？

handleClick = () => {

  // 正常的操作

  this.setState({

    count: this.state.count + 1

  })

}

handleClick = () => {

  // 脱离 React 控制的操作

  setTimeout(() => {

    this.setState({

      count: this.state.count + fans

    })

  })

}

先回顾之前的代码，在这两个操作中，我们分别在 Performance 中记录一次调用栈，看看两者的调用栈有何区别。

在调用栈中，可以看到 Component.setState 方法最终会调用enqueueSetState 方法 ，而 enqueueSetState 方法内部会调用 scheduleUpdateOnFiber 方法，区别就在于正常调用的时候，scheduleUpdateOnFiber 方法内只会调用 ensureRootIsScheduled ，在事件方法结束后，才会调用 flushSyncCallbackQueue 方法。而脱离 React 事件流的时候，scheduleUpdateOnFiber 在 ensureRootIsScheduled 调用结束后，会直接调用 flushSyncCallbackQueue 方法，这个方法就是用来更新 state 并重新进行 render。

function scheduleUpdateOnFiber(fiber, lane, eventTime) {

  if (lane === SyncLane) {

    // 同步操作

    ensureRootIsScheduled(root, eventTime);

    // 判断当前是否还在 React 事件流中

    // 如果不在，直接调用 flushSyncCallbackQueue 更新

    if (executionContext === NoContext) {

      flushSyncCallbackQueue();

    }

  } else {

    // 异步操作

  }

}

上述代码可以简单描述这个过程，主要是判断了 executionContext 是否等于 NoContext 来确定当前更新流程是否在 React 事件流中。

众所周知，React 在绑定事件时，会对事件进行合成，统一绑定到 document 上（ react@17 有所改变，变成了绑定事件到 render 时指定的那个 DOM 元素），最后由 React 来派发。

所有的事件在触发的时候，都会先调用 batchedEventUpdates$1 这个方法，在这里就会修改 executionContext 的值，React 就知道此时的 setState 在自己的掌控中。

// executionContext 的默认状态

var executionContext = NoContext;

function batchedEventUpdates$1(fn, a) {

  var prevExecutionContext = executionContext;

  executionContext |= EventContext; // 修改状态

  try {

    return fn(a);

  } finally {

    executionContext = prevExecutionContext;

		// 调用结束后，调用 flushSyncCallbackQueue

    if (executionContext === NoContext) {

      flushSyncCallbackQueue();

    }

  }

}

所以，不管是直接调用 flushSyncCallbackQueue ，还是推迟调用，这里本质上都是同步的，只是有个先后顺序的问题。

未来会有异步的 setState

如果你有认真看上面的代码，你会发现在 scheduleUpdateOnFiber 方法内，会判断 lane 是否为同步，那么是不是存在异步的情况？

function scheduleUpdateOnFiber(fiber, lane, eventTime) {

  if (lane === SyncLane) {

    // 同步操作

    ensureRootIsScheduled(root, eventTime);

    // 判断当前是否还在 React 事件流中

    // 如果不在，直接调用 flushSyncCallbackQueue 更新

    if (executionContext === NoContext) {

      flushSyncCallbackQueue();

    }

  } else {

    // 异步操作

  }

}

React 在两年前，升级 fiber 架构的时候，就是为其异步化做准备的。在 React 18 将会正式发布 Concurrent 模式，关于 Concurrent 模式，官方的介绍如下。

什么是 Concurrent 模式？

Concurrent 模式是一组 React 的新功能，可帮助应用保持响应，并根据用户的设备性能和网速进行适当的调整。在 Concurrent 模式中，渲染不是阻塞的。它是可中断的。这改善了用户体验。它同时解锁了以前不可能的新功能。

在面试时，经过简单寒暄后，面试官一般先从让候选人自我介绍开始，紧接着就是问候选人简历中所列的项目，让介绍下项目经验。常见的问法是，说下你最近的（或感觉不错的）一个项目。面试中很多人忽视对这一个环节的准备，不仅回答不了面试官的追问，甚至连自己的项目都讲不清楚，说起来磕磕巴巴，甚至有的人说出的项目经验从时间段或技术等方面和简历上的不匹配，这样无疑会让面试官对面试者的能力产生怀疑。

面试时7份靠能力，3份靠技能，本文将从“前期准备”和“面试技巧”两大层面告诉大家如何准备面试时的项目介绍，当然，这只是一家之言，没有最好的方式，只有更适合的方法，仁者见仁智者见智。

前期分析

1. 
   

   知己知彼百战不殆。如果想打动面试官，那么你就必须得了解他到底想要从你口中了解到什么，哪些信息是他所想要的。

   
   

   在面试前准备项目描述时，别害怕，因为面试官什么都不知道，最了解你项目的还是你自己。

   
   

   面试官是人，不是神，拿到你的简历的时候，只能根据你所描述的项目去推测你的工作经历，是没法核实你的项目细节的（一般公司会到录用后，通过背景调查的方式来核实）。

   
   

   更何况，你做的项目是以月或以年为单位算的，而面试官最多用30分钟来从你的简历上了解你的项目经验，所以你对项目的熟悉程度要远远超过面试官，所以你一点也不用紧张。而面试官想了解更多他想知道的你的工作方式及项目中所负责的内容、所用到的技术栈，就不得不从你的介绍中去深挖技术点，以期了解你对项目及技术的了解的深度。

   
   

   首先从气势上就要告诉面试官，这项目就是你参与的，有你所负责的功能模块，让面试官不容置疑。

   
   

   心态上准备好了，那么就要分析面试官想要考察什么呢？

   
   
   
   
   • 表达能力。考察表达及逻辑思维能力，看面试者能不能在几分钟就跟一个完全没有参与过项目的人讲清楚这个项目。
   
   
   • 实际工作经验。你在项目中中承担了什么角色，做了什么工作。这些工作中的技术含量及跟同事合作情况如何。另外可能会针对某个项目，不断深入问一些技术上的问题，或者是从侧面问技术类实现，这是为了深入核实你做项目的细节及对技术的理解运用。
   
   
   • 解决问题能力。一般都会问项目难点，其实就是想知道当你遇到技术或业务难点，是如何思考并解决问题的。
   
   
   • 项目复盘及经验总结能力。哪里是自己觉得做的成功的，哪里觉得没做好的，是否还有继续优化的空间。自己所做的项目对个人能力有哪些提升。
   
   
   
   


2. 
   

   熟能生巧，对答自如。

   
   

   首先是需要有个充足的准备，写项目经验一定要写自己熟悉的，因为面试官就会根据你写的项目经验提问。在面试前，就要在脑子里过一遍这个项目，准备好说辞，面试的时候自信点。讲清楚这个项目是满足什么需求的，开发过程中遇到哪些困难，自己怎么解决这些困难的。如果你经过充分准备，面试中也能答的很好，那面试官好感度就会增加，相反，如果面试中说的磕磕绊绊，那么可信度就会低了。

   
   


3. 
   

   明确目标，控盘引导。

   
   

   在面试前，你需要明确自己的面试目的，就是通过面试，争取拿到 Offer 。

   
   

   最保守的方式就是在自己介绍项目的时候要么就是以面试官为主导，回答很简单，就是面试官问你一句你答一句。这会让面试官失去想了解你的信心，其次也会让自己错失表现自己，凸显重点思想的机会。做好防守虽然也是一种取胜的方式，但并非上策，很容易丢分。

   
   

   讲自己简历中所列的项目一定要很清晰明了有逻辑，埋下后续可能会提问到的技术点，也给面试官留下一个好印象。如果项目经验介绍的好，有逻辑和引导力，那么就会给自己带来以下两点明显的好处：

   
   
   
   
   1. 给面试官带来的第一印象好，会让面试官感觉该候选人表述能力较强。
   
   
   2. 一般来说，面试官会根据候选人介绍的项目背景来提问题，假设面试时会问10个问题，那么至少有5个问题会根据候选人所介绍的项目背景来问，候选人如果说的好，那么就可以很好地引导面试官去问后继问题，这就相当于把提问权完全交由自己控制了。
   
   
   
   

   如果你的工作经验比面试官还丰富的话，甚至还可以控制整个面试流程，甚至遇到 Nice 的面试官的话会以讨论的方式进行沟通。

   
   

   既然面试官无法了解你的底细，那么他们怎么来验证你的项目经验和技术？下面总结了一些常用的提问方式。

   
   

面试技巧

内容上要对项目进行以下拆分，思考并进行总结，并试着口语化讲出来。

1. 项目描述。用通俗易懂且简洁的方式简述项目，阐述整个项目及其背景、规模，不要有太多的技术词汇。


2. 项目模块。2-3分钟的流程介绍，详细的列出项目实现的功能，各个模块，整个过程，大概思路。


3. 项目技术栈。说出项目实现的技术栈和架构，能说出项目的不寻常之处，比如采用了某项新技术，采用了某个架框等，简要说明技术选型。


4. 候选人的角色及责任。说出你在项目中的责任，所涉及的功能模块，运用的技术，碰到的难题、代码细节，技术点、应对措施。


5. 项目总结，待优化点。

方法上可以使用万能的STAR原则

Situation（背景）：做这个项目的背景是什么，比如这是个人项目还是团队项目，为什么需要做这个
项目，你的角色是什么，等等。

Target（目标）：该项目要达成的目标是什么？为了完成这个目标有哪些困难？

Action（行动）：针对所要完成目标，你做了哪些工作？如何克服了其中一些困难？

Result（结果）：项目最终结果如何？有哪些成就？有哪些不足之处可以改进？

除了项目所取得的成绩之外，候选人还可以说明自己做完项目的感受，包括项目中哪些环节做的不错，哪些环节有提高的空间，自己在做这个项目中有何收获等。

无论是介绍自己的IT产品开发经历，还是在其他公司的实习项目经历，候选人都可以运用STAR法则来具体说明，轻松表现出自己分析阐述问题的清晰性、条理性和逻辑性。

但面试前如下的一些情况还是需要多加注意的。

1. 
   

   回答很简单。问什么答什么，往往就一句话回答。如果你日常回答别人的问题或者之前面试中出现过类似情况就要有所改善了。这里应该将你知道的说出来，重点突出跟问题相关的思想、框架或技术点等。

   
   


2. 
   

   扯闲篇，大忌。说少了太过于简短没有互动不好，自来熟，回答问题没有重点，没有逻辑，乱说一通也是大忌。会让面试官感觉你思路混乱，抓不到重点，只是拿其他方面的东西东拼西凑。

   
   


3. 
   

   说的太过流利，也未必就是好事。虽然面试有所准备在面试官看来是好事，但是机械的准备好答案去背诵，主观上给人一种你并没有理解这个问题，只是靠记忆知道答案，后续面试官的问题也会相应的加大难度。这方面改善建议是适当停顿，做思考状，边思考边说，过程中同面试官有个眼神上的互动。

   
   


4. 
   

   有的放矢的介绍技术细节。不要一次性过多的介绍技术细节，技术面点到为止，等面试官来问。因为面试官通常都有自己的面试节奏。所以技术点等着问的时候再多聊，可以先事先埋下技术点引导着面试官继续追问。

   
   


5. 
   

   主动介绍项目亮点。因为面试官没有义务挖掘你的亮点，所以这就需要自己主动提。遇到不会的问题，就如实说这个技术点不会。或者半懂也可以直接说。甚至可以谈谈自己的见解。把自己了解的说说。

   
   

项目准备

一般来说，在面试前，大家应当准备项目描述的说辞，自信些，因为这部分你说了算，流利些，因为你经过充分准备后，可以知道你要说些什么。而且这些是你实际的项目经验（不是学习经验，也不是培训经验），那么一旦让面试官感觉你都说不上来，那么可信度就很低了。

不少人是拘泥于“项目里做了什么业务，以及代码实现的细节”，这就相当于把后继提问权直接交给面试官。下表列出了一些不好的回答方式。

不露痕迹地说出面试官爱听的话

在项目介绍的时候（当然包括后继的面试），面试官其实很想要听一些关键点，只要你说出来，而且回答相关问题比较好，这绝对是加分项。我在面试别人的时候，一旦这些关键点得到确认，我是绝对会在评语上加上一笔的。

下面列些面试官爱听的关键点和对应的说辞。

一旦有低级错误，可能会直接出局

面试过程中有些方面你是绝对不能出错，所以你在准备过程中需要尤其注意如下的因素。下面列了些会导致你直接出局的错误回答。

面试场景题

举一个例子，比如考察候选人是否聪明，star 法则会这样询问：

1.在刚才的项目中，你提到了公司业务发展很快，人手不够，你是如何应对的呢？
2.在你的项目里面解决了什么样的难题
3.在你的项目里面如何做的登录
4.前端的项目如何进行优化，移动端呢？
5.图片加载失败要做啥
6.让你带领一个小团队完成一个项目，你会怎么做？
7.项目的同源处理，跨域相关
8.如果再做这个项目，你会在哪些方面进行改善？
面试中，如果面试官让你描述一个自己比较得意的项目的时候，一定记得要遵循 STAR 法则进行回答。比如

为了整合 xxx 业务(S)，我承担 xxx 角色，具体负责 xxx (T)。做了 xxx 事情(A)，最后产生了 xxx 结果

然后在描述项目亮点的时候也一样，比如

由于项目 xxx 原因(S)，我需要进行 xxx 改进(T)，然后进行了 xxx 处理(A)，最后产出了 xxx 结果，数据对比为 xxx

整体这样下来，会显得你很有思考力，且具有行动力，可以给企业创造出价值，这也是面试官评定候选人最关键的指标之一。

面试官的套路

面试时所问的问题基本分为两种：具象的问题和开放性的问题。

具象的问题基本都会参考工作经验按照 STAR 法则来进行，主要是了解基本的素养，技术深度和潜力。

开放性的问题基本是考察思维发散能力，考察在某个领域的深度和广度，基本上会结合技术问题来问，或者是结合工作内容来问。

比如：实现某种技术的 n 种方法？某种技术的实现原理？和什么什么相比有哪些优缺点？你对这项技术的思考是什么？

面试者的应对

1.就实际情况做回答，提前准备的时候多发散，多思考，多总结。这一块是可以自己准备的加分项。

2.发散性问题主要是看自己平时积累。首先基础知识要牢固，同时也要了解最新技术动态。面对这类问题切记也不能答非所问而跑题了。

注意：

1.避免拿别人的项目直接用

很多初级阶段的同学们，可能并没有实际的商业项目，或者所做过的项目类型有限，就直接从网上找项目当做自己的项目，直接使用是断不可取的，但是如果你仿造别人的项目自己去尝试着将功能实现，有自己的新得体验，这样在做的过程中也可以对项目中的功能点和技术栈有进一步的了解，不至于在面试的时候，磕磕巴巴，甚至将项目时间都搞错。

2.避免低级错误

很多基础相关的低级错误一定要杜绝，如果被问到熟悉知识点就多答，不熟悉就直接说不熟悉。每个人都有自己擅长的点也有不擅长的。

另外就是可以引导一些话题，不要自说自话。很多人会一直很激进的表达自己，反而显得强势。有的面试者被问到数据库相关内容，他不仅回答数据库，还会把大数据处理技术全部都说出来。其实点到为止最好，面试官感兴趣会继续问，但是你一直主导话题，会减分。

这里要说的是，不要把不是自己做的项目说成是自己做的，自己不是核心负责人说成是负责人，即使你对项目很熟悉了解，像我们一线起来的面试官，问几个问题就很清楚你实际参与了多少了，只是大部分不会明说而已，反而起到反效果。

总结

首先我要劝大家，认真对待每一次面试。既然知道自己要参加面试，就在家自己模拟一下面试。自己提前准备一下自己的项目描述，不要到了面试的时候去打磕巴。但是如果你参加面试的时候实在紧张了，磕巴了不要慌。深呼吸尝试让自己放松，一般面试官也会给些提示帮助你回答的。

两句话，第一，面试前一定要准备，第二，本文给出是的方法，不是教条，大家可以按本文给出的方向结合自己的项目背景做准备，而不是死记硬背本文给出的一些说辞。

产品同学在诉苦：线上用户不能提交表单了，带来了好多客诉，估计会是p0故障，希望尽快解决。

测试同学在纳闷：这个场景测试和预发环境明明验过的，怎么线上就不行了。

后端同学在讲原因：接口缺少了value字段，导致出错了。

就是木有人说问题怎么解决!!!

就是木有人说问题怎么解决!!!

就是木有人说问题怎么解决!!!

这样的场景不知道你是不是也似曾相识呢？o(╥﹏╥)o，不管咋说第一要务还是先把线上问题解决掉，减少持续影响，赶紧把交接的代码翻出来，开始了排查过程。

问题原因

如下图：有这样一个动态表单搜集页面，用户选择或者填写了信息之后（各字段非必填情况下也可以直接提交），接着前端把数据发送给后端，结束，看起来没有多复杂的逻辑。

直接错误原因

非必填情况下，signInfo字段中经过JSON.stringify后的字符串对象缺少value key，导致后端parse之后无法正确读取value值，进而报接口系统异常，用户无法进行下一步动作。

// 异常入参数据，数组字符串中没有value key

{

  signInfo: '[{"fieldId":539},{"fieldId":540},{"fieldId":546,"value":"10:30"}]'

}



// 正常入参数据

{

  signInfo: '[{"fieldId":539,"value":"银卡"},{"fieldId":540,"value":"2021-03-01"},{"fieldId":546,"value":"10:30"}]'

}

异常数据是如何产生的

// 默认情况下数据是这样的

let signInfo = [

  {

    fieldId: 539,

    value: undefined

  },

  {

    fieldId: 540,

    value: undefined

  },

  {

    fieldId: 546,

    value: undefined

  },

]

// 经过JSON.stringify之后的数据,少了value key,导致后端无法读取value值进行报错

// 具体原因是`undefined`、`任意的函数`以及`symbol值`，出现在`非数组对象`的属性值中时在序列化过程中会被忽略

console.log(JSON.stringify(signInfo))

// '[{"fieldId":539},{"fieldId":540},{"fieldId":546}]'

解决方案

问题的原因找到了，解决方式 (这里只讲前端的解决方案，当然也可以由后端解决) 也很简单，将value值为undefined的项转化为空字符串再提交即可。

方案一：新开一个对象处理

let signInfo = [

  {

    fieldId: 539,

    value: undefined

  },

  {

    fieldId: 540,

    value: undefined

  },

  {

    fieldId: 546,

    value: undefined

  },

]



let newSignInfo = signInfo.map((it) => {

  const value = typeof it.value === 'undefined' ? '' : it.value

  return {

    ...it,

    value

  }

})



console.log(JSON.stringify(newSignInfo))

// '[{"fieldId":539,"value":""},{"fieldId":540,"value":""},{"fieldId":546,"value":""}]'

方案二：利用JSON.stringify第二个参数，直接处理

方案一的缺陷是需要新开一个对象进行一顿操作才能解决，不够优雅

let signInfo = [

  {

    fieldId: 539,

    value: undefined

  },

  {

    fieldId: 540,

    value: undefined

  },

  {

    fieldId: 546,

    value: undefined

  },

]



// 判断到value为undefined，返回空字符串即可

JSON.stringify(signInfo, (key, value) => typeof value === 'undefined' ? '' : value)

// '[{"fieldId":539,"value":""},{"fieldId":540,"value":""},{"fieldId":546,"value":""}]'

故事后续

原本这是一个已经上线有一段时间的页面，为何会突然出现这个问题，之前却没有呢？仔细询问下，原来是中途产品同学提了一个小的优化点，离职的小伙伴感觉点比较小直接就改了代码上线了，未曾想出现了线上问题。

后面针对这件事从产品到测试、到后端、到前端单独做了一个完整的复盘，细节就不再展开说了。

因为从发现问题到解决问题速度较快、影响用户数较少，还未达到问责程度，俺的年终奖可算是保住了o(╥﹏╥)o。

重学JSON.stringify

经过这件事情，我觉得有必要重新审视一下JSON.stringify这个方法，彻底搞清楚转换规则，并尝试手写实现一个JSON.stringify

如果你曾遇到和我一样的问题，欢迎一起来重新学习一次，一定会有不一样的收获噢！

学透JSON.stringify

JSON.stringify()  方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

以下信息来自MDN

语法

JSON.stringify(value[, replacer [, space]])

参数

• 
  

  value

  
  

  将要序列化成 一个 JSON 字符串的值。

  
  


• 
  

  replacer 可选

  
  
  
  
  1. 如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；
  
  
  2. 如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；
  
  
  3. 如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
  
  
  
  


• 
  

  space 可选

  
  
  
  
  1. 指定缩进用的空白字符串，用于美化输出（pretty-print）；
  
  
  2. 如果参数是个数字，它代表有多少的空格；上限为10。
  
  
  3. 该值若小于1，则意味着没有空格；
  
  
  4. 如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；
  
  
  5. 如果该参数没有提供（或者为 null），将没有空格。
  
  
  
  

返回值

一个表示给定值的JSON字符串。

异常

• 当在循环引用时会抛出异常TypeError ("cyclic object value")（循环对象值）


• 当尝试去转换 BigInt 类型的值会抛出TypeError ("BigInt value can't be serialized in JSON")（BigInt值不能JSON序列化）.

基本使用

注意

1. JSON.stringify可以转换对象或者值（平常用的更多的是转换对象）


2. 可以指定replacer为函数选择性的地替换


3. 也可以指定replacer为数组，可转换指定的属性

这里仅仅是NDN上关于JSON.stringify其中最基础的说明，咱们先打个码试试这几个特性

// 1. 转换对象

console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy' })) // '{"name":"前端胖头鱼","sex":"boy"}'



// 2. 转换普通值

console.log(JSON.stringify('前端胖头鱼')) // "前端胖头鱼"

console.log(JSON.stringify(1)) // "1"

console.log(JSON.stringify(true)) // "true"

console.log(JSON.stringify(null)) // "null"



// 3. 指定replacer函数

console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, (key, value) => {

  return typeof value === 'number' ? undefined : value

}))

// '{"name":"前端胖头鱼","sex":"boy"}'



// 4. 指定数组

console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, [ 'name' ]))

// '{"name":"前端胖头鱼"}'



// 5. 指定space(美化输出)

console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }))

// '{"name":"前端胖头鱼","sex":"boy","age":100}'

console.log(JSON.stringify({ name: '前端胖头鱼', sex: 'boy', age: 100 }, null , 2))

/*

{

  "name": "前端胖头鱼",

  "sex": "boy",

  "age": 100

}

*/

9大特性要记住

以前仅仅是使用了这个方法，却没有详细了解他的转换规则，居然有9个之多。

特性一

1. undefined、任意的函数以及symbol值，出现在非数组对象的属性值中时在序列化过程中会被忽略


2. undefined、任意的函数以及symbol值出现在数组中时会被转换成 null。


3. undefined、任意的函数以及symbol值被单独转换时，会返回 undefined

// 1. 对象中存在这三种值会被忽略

console.log(JSON.stringify({

  name: '前端胖头鱼',

  sex: 'boy',

  // 函数会被忽略

  showName () {

    console.log('前端胖头鱼')

  },

  // undefined会被忽略

  age: undefined,

  // Symbol会被忽略

  symbolName: Symbol('前端胖头鱼')

}))

// '{"name":"前端胖头鱼","sex":"boy"}'



// 2. 数组中存在着三种值会被转化为null

console.log(JSON.stringify([

  '前端胖头鱼',

  'boy',

  // 函数会被转化为null

  function showName () {

    console.log('前端胖头鱼')

  },

  //undefined会被转化为null

  undefined,

  //Symbol会被转化为null

  Symbol('前端胖头鱼')

]))

// '["前端胖头鱼","boy",null,null,null]'



// 3.单独转换会返回undefined

console.log(JSON.stringify(

  function showName () {

    console.log('前端胖头鱼')

  }

)) // undefined

console.log(JSON.stringify(undefined)) // undefined

console.log(JSON.stringify(Symbol('前端胖头鱼'))) // undefined

特性二

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

console.log(JSON.stringify([new Number(1), new String("前端胖头鱼"), new Boolean(false)]))

// '[1,"前端胖头鱼",false]'

特性三

所有以symbol为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

console.log(JSON.stringify({

  name: Symbol('前端胖头鱼'),

}))

// '{}'

console.log(JSON.stringify({

  [ Symbol('前端胖头鱼') ]: '前端胖头鱼',

}, (key, value) => {

  if (typeof key === 'symbol') {

    return value

  }

}))

// undefined

特性四

NaN 和 Infinity 格式的数值及 null 都会被当做 null。

console.log(JSON.stringify({

  age: NaN,

  age2: Infinity,

  name: null

}))

// '{"age":null,"age2":null,"name":null}'

特性五

转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。

const toJSONObj = {

  name: '前端胖头鱼',

  toJSON () {

    return 'JSON.stringify'

  }

}



console.log(JSON.stringify(toJSONObj))

// "JSON.stringify"

特性六

Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。

const d = new Date()



console.log(d.toJSON()) // 2021-10-05T14:01:23.932Z

console.log(JSON.stringify(d)) // "2021-10-05T14:01:23.932Z"

特性七

对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

let cyclicObj = {

  name: '前端胖头鱼',

}



cyclicObj.obj = cyclicObj



console.log(JSON.stringify(cyclicObj))

// Converting circular structure to JSON

特性八

其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性

let enumerableObj = {}



Object.defineProperties(enumerableObj, {

  name: {

    value: '前端胖头鱼',

    enumerable: true

  },

  sex: {

    value: 'boy',

    enumerable: false

  },

})



console.log(JSON.stringify(enumerableObj))

// '{"name":"前端胖头鱼"}'

特性九

当尝试去转换 BigInt 类型的值会抛出错误

const alsoHuge = BigInt(9007199254740991)



console.log(JSON.stringify(alsoHuge))

// TypeError: Do not know how to serialize a BigInt

手写一个JSON.stringify

终于重新学完JSON.stringify的众多特性啦！咱们根据这些特性来手写一个简单版本的吧（无replacer函数和space）

源码实现

const jsonstringify = (data) => {

  // 确认一个对象是否存在循环引用

  const isCyclic = (obj) => {

  // 使用Set数据类型来存储已经检测过的对象

  let stackSet = new Set()

  let detected = false



  const detect = (obj) => {

    // 不是对象类型的话，可以直接跳过

    if (obj && typeof obj != 'object') {

      return

    }

    // 当要检查的对象已经存在于stackSet中时，表示存在循环引用

    if (stackSet.has(obj)) {

      return detected = true

    }

    // 将当前obj存如stackSet

    stackSet.add(obj)



    for (let key in obj) {

      // 对obj下的属性进行挨个检测

      if (obj.hasOwnProperty(key)) {

        detect(obj[key])

      }

    }

    // 平级检测完成之后，将当前对象删除，防止误判

    /*

      例如：对象的属性指向同一引用，如果不删除的话，会被认为是循环引用

      let tempObj = {

        name: '前端胖头鱼'

      }

      let obj4 = {

        obj1: tempObj,

        obj2: tempObj

      }

    */

    stackSet.delete(obj)

  }



  detect(obj)



  return detected

}



  // 特性七:

  // 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。

  if (isCyclic(data)) {

    throw new TypeError('Converting circular structure to JSON')

  }



  // 特性九:

  // 当尝试去转换 BigInt 类型的值会抛出错误

  if (typeof data === 'bigint') {

    throw new TypeError('Do not know how to serialize a BigInt')

  }



  const type = typeof data

  const commonKeys1 = ['undefined', 'function', 'symbol']

  const getType = (s) => {

    return Object.prototype.toString.call(s).replace(/\[object (.*?)\]/, '$1').toLowerCase()

  }



  // 非对象

  if (type !== 'object' || data === null) {

    let result = data

    // 特性四：

    // NaN 和 Infinity 格式的数值及 null 都会被当做 null。

    if ([NaN, Infinity, null].includes(data)) {

      result = 'null'

      // 特性一：

      // `undefined`、`任意的函数`以及`symbol值`被`单独转换`时，会返回 undefined

    } else if (commonKeys1.includes(type)) {

      // 直接得到undefined，并不是一个字符串'undefined'

      return undefined

    } else if (type === 'string') {

      result = '"' + data + '"'

    }



    return String(result)

  } else if (type === 'object') {

    // 特性五:

    // 转换值如果有 toJSON() 方法，该方法定义什么值将被序列化

    // 特性六:

    // Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。

    if (typeof data.toJSON === 'function') {

      return jsonstringify(data.toJSON())

    } else if (Array.isArray(data)) {

      let result = data.map((it) => {

        // 特性一:

        // `undefined`、`任意的函数`以及`symbol值`出现在`数组`中时会被转换成 `null`

        return commonKeys1.includes(typeof it) ? 'null' : jsonstringify(it)

      })



      return `[${result}]`.replace(/'/g, '"')

    } else {

      // 特性二：

      // 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。

      if (['boolean', 'number'].includes(getType(data))) {

        return String(data)

      } else if (getType(data) === 'string') {

        return '"' + data + '"'

      } else {

        let result = []

        // 特性八

        // 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性

        Object.keys(data).forEach((key) => {

          // 特性三:

          // 所有以symbol为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。

          if (typeof key !== 'symbol') {

            const value = data[key]

            // 特性一

            // `undefined`、`任意的函数`以及`symbol值`，出现在`非数组对象`的属性值中时在序列化过程中会被忽略

            if (!commonKeys1.includes(typeof value)) {

              result.push(`"${key}":${jsonstringify(value)}`)

            }

          }

        })



        return `{${result}}`.replace(/'/, '"')

      }

    }

  }

}

测试一把

// 1. 测试一下基本输出

console.log(jsonstringify(undefined)) // undefined 

console.log(jsonstringify(() => { })) // undefined

console.log(jsonstringify(Symbol('前端胖头鱼'))) // undefined

console.log(jsonstringify((NaN))) // null

console.log(jsonstringify((Infinity))) // null

console.log(jsonstringify((null))) // null

console.log(jsonstringify({

  name: '前端胖头鱼',

  toJSON() {

    return {

      name: '前端胖头鱼2',

      sex: 'boy'

    }

  }

}))

// {"name":"前端胖头鱼2","sex":"boy"}



// 2. 和原生的JSON.stringify转换进行比较

console.log(jsonstringify(null) === JSON.stringify(null));

// true

console.log(jsonstringify(undefined) === JSON.stringify(undefined));

// true

console.log(jsonstringify(false) === JSON.stringify(false));

// true

console.log(jsonstringify(NaN) === JSON.stringify(NaN));

// true

console.log(jsonstringify(Infinity) === JSON.stringify(Infinity));

// true

let str = "前端胖头鱼";

console.log(jsonstringify(str) === JSON.stringify(str));

// true

let reg = new RegExp("\w");

console.log(jsonstringify(reg) === JSON.stringify(reg));

// true

let date = new Date();

console.log(jsonstringify(date) === JSON.stringify(date));

// true

let sym = Symbol('前端胖头鱼');

console.log(jsonstringify(sym) === JSON.stringify(sym));

// true

let array = [1, 2, 3];

console.log(jsonstringify(array) === JSON.stringify(array));

// true

let obj = {

  name: '前端胖头鱼',

  age: 18,

  attr: ['coding', 123],

  date: new Date(),

  uni: Symbol(2),

  sayHi: function () {

    console.log("hello world")

  },

  info: {

    age: 16,

    intro: {

      money: undefined,

      job: null

    }

  },

  pakingObj: {

    boolean: new Boolean(false),

    string: new String('前端胖头鱼'),

    number: new Number(1),

  }

}

console.log(jsonstringify(obj) === JSON.stringify(obj)) 

// true

console.log((jsonstringify(obj)))

// {"name":"前端胖头鱼","age":18,"attr":["coding",123],"date":"2021-10-06T14:59:58.306Z","info":{"age":16,"intro":{"job":null}},"pakingObj":{"boolean":false,"string":"前端胖头鱼","number":1}}

console.log(JSON.stringify(obj))

// {"name":"前端胖头鱼","age":18,"attr":["coding",123],"date":"2021-10-06T14:59:58.306Z","info":{"age":16,"intro":{"job":null}},"pakingObj":{"boolean":false,"string":"前端胖头鱼","number":1}}



// 3. 测试可遍历对象

let enumerableObj = {}



Object.defineProperties(enumerableObj, {

  name: {

    value: '前端胖头鱼',

    enumerable: true

  },

  sex: {

    value: 'boy',

    enumerable: false

  },

})



console.log(jsonstringify(enumerableObj))

// {"name":"前端胖头鱼"}



// 4. 测试循环引用和Bigint



let obj1 = { a: 'aa' }

let obj2 = { name: '前端胖头鱼', a: obj1, b: obj1 }

obj2.obj = obj2



console.log(jsonstringify(obj2))

// TypeError: Converting circular structure to JSON

console.log(jsonStringify(BigInt(1)))

// TypeError: Do not know how to serialize a BigInt



复制代码

通过上面测试可以看出，jsonstringify基本和JSON.stringify表现一致，（也有可能测试用例不够全面，欢迎提出一起学习）

Git 简介

什么是 Git ? Git 是目前世界上最先进的分布式版本控制系统！！！什么？啥意思？不懂，没关系，你只要记住，它很重要，非常重要，程序猿的必备技能即可。

Git 的命令非常非常多，这里强调一下，不要傻傻的去背这些命令，没啥卵用，有些命令可能你这辈子你都未必使得上。

本章的目的是教你如何通过命令行完成 Git 的日常基操，并会适当介绍命令的意义，加深你的理解。

在介绍这些命令之前，我们先来看一张灰常重要的图：

图中有四个空间，是 Git 工作流程的精髓所在，分别是：

• Remote： 远程仓库，即你在 Github 或者 Gitee 等平台上创建的项目仓库；


• Repository： 本地仓库，你可以认为就是我们拉取项目后生成的 .git 文件夹；


• Index： 暂存区，事实上它只是一个文件，即 .git 文件夹里面的 index 文件，它保存即将提交到本地仓库的文件列表信息；


• workspace：  工作区，即你在 VS code 或者 WebStorm 编译器正在编写的代码。

Git 基本命令手册

1.克隆/拉取项目

拉取项目是开始搬砖的第一步，一般创建好项目远程仓库，你就能获取到一个 .git 结尾的地址，或者这个地址可能由公司同事给到你，之后你随便找个目录，通过 Git Bash 输入下面命令即可拉取到项目到本地。

git clone 你的项目地址.git

2.查看远程分支

一般拉取完项目后，我们是处于 master/main 主分支，不要着急就去编写代码，先要查看一下项目的远程分支情况，根据要求看是否需要切换到某个分支进行特定开发。

git branch -r

3.查看本地分支

一般本地创建的分支情况应该是和远程分支一一对应，当然，在未进行发布或者和远程分支建立关联，本地分支并不会影响到远程分支，你可以随意创建、删除和修改。

git branch

4.创建本地分支

git branch dev(分支名称, 可以随便取)

通过上面的命令，你会创建好一个本地分支，当然，该分支是基于你当前所在分支创建的。你可以再次敲命令去查看远程分支和本地分支各自的情况(多敲，很快命令就记住了-^〇^-)。

5.删除本地分支

对远程仓库分支并不会有任何影响

git branch -d dev

6.切换分支

创建好本地分支，我们就可以切换到该分支上。

git checkout dev

创建和切换两个操作也可以一起做： git checkout -b xxx （创建并切换到该本地分支）

7.发布本地分支到远程分支

当我们创建好一个本地分支的时候，这个时候还是不要着急去开始编码，我们要把该分支发布到远程仓库去，让远程仓库也拥有该分支，且让它和你本地分支进行关联，方便我们后续直接进行 git pull 或者 git push 操作。

git push origin dev

发布完本地分支后，你可以同样通过 git branch -r 去查看你远程仓库的分支列表是否多了新的分支。

8.建立本地分支与远程分支的关联

本地分支与远程分支关联这步不是必须，但后续就能很方便的直接使用 git pull 或者 git push 获取或提交该分支的代码，而不用去指定分支。

git push --set-upstream origin dev

如果你不关联两者分支的关系，强行去使用，你可能会遇到图中的情况，大致意思就是让你指定目标分支或者去关联分支情况再进行操作。（Git 的提示信息还是很友好的）

9.添加文件进暂存区

完成上面的几步，我们就能开始搬砖了。在对代码更改后，要把提交代码到远程仓库，我们就要先把代码添加到暂存区，之后提交到本地仓库，最后才能提交到远程仓库。

• 把工作区某个文件添加进暂存区，比如 src/main.js 文件，则 git add src/main.js

git add xxx(文件路径)

# 多个

git add xxx(文件路径) xxx(文件路径) xxx(文件路径) ...

• 把工作区更改的所有文件都添加进暂存区

git add .

这里你可能会在想，为什么要先添加到暂存区，再本地仓库之后才提交到远程仓库呢？ 如果你是从 SVN 转过来，可能会稍微有点不了解暂存区，这里涉及暂存区的意义，网上有很多解释，这里就不做过多的解释了。

但你可以简单的怎么理解，假如你在开发中开发了用户的添加功能和文章的添加功能，两个功能都同时开发完了，因为都互不影响，完全独立，你想分成两次提交分别写上对应的 commit 信息说明，这个时候就可以使用到暂存区，先将用户添加功能添加到暂存区，然后 commit 到本地仓库，再进行文章添加功能的提交，最后在一起 push 到远程仓库即可。

10.删除文件出暂存区

当你误把文件添加进暂存区，也不要慌，有添加，就肯定有删除。

• 把工作区某个文件删除出暂存区

git rm --cached xxx(文件路径)

• 清空暂存区，暂存区实质是 .git 目录下的 index 文件，将此文件删除，那么就认为暂存区被清空。

rm .git/index

当然，这只是把暂存区中跟踪的文件移除而已，不会改动原文件的内容，原先更改的内容还在。

11.查看工作区与暂存区状态

这个命令用于查看工作区和暂存区的状态，能看到哪些文件被修改了，它修改后是否被暂存了，又或者还没有暂存。这个暂存的过程，专业的叫法是 Git tracked，也就是是否被跟踪。

git status

通过下图，我们能查看到所有改动过的文件，绿色的文件是已经添加进暂存区的，红色的文件则是未添加到暂存区的，而且每个文件前都有对应的操作说明，如果是新文件则是 new file，修改的文件则是 modified，删除的是 deleted, 如果是未添加进暂存区的新文件，则没有。

12.提交暂存区文件到本地仓库

git commit -m "说明信息"

通过上面的命令，我们就将暂存区的文件提交到本地仓库了，我们可以通过 git status 再次查看暂存区的情况。

Git 的提示真的是非常友好的。

13.查看提交记录

这个命令可以显示提交过的记录。

git log

进入提交记录日志列表后，可以按 q 退出。

上面的命令会显示所有的 commit 记录，如果你想要显示最近几条记录，你可以通过 git log -n(n为数字, 可以随意指定) 命令完成。

14.提交本地仓库文件到远程仓库

git push

执行这条命令的前提是进行过第7步骤才行哦。

把本地仓库文件提交到远程仓库后，我们再次查看提交日志。

15.拉取新代码

git pull

这个命令同样也是建立在第7步骤之前的。

Git 进阶命令手册

记住上面15个命令，Git 的日常基操基本也满足了，当然现在各种编辑器功能强大，基本都集成了 Git 的可视化操作，不用命令行来操作，也完全没有问题。

但是程序猿使用命令行不是一件很酷的事情吗？不为别的，只为装13也是可以搞一搞的，哈哈哈。下面再来讲一些命令，虽然使用频率不高，但是也是很重要的。

1.查看全局的Git配置

git config --global -l

# or

git config --global --list

2.查看全局用户名及邮箱

git config --global user.name

git config --global user.email

3.设置全局用户名及邮箱

git config --global user.name "你自己的用户名"

git config --global user.email "你自己的邮箱"

4.查看局部项目用户名及邮箱

要在当前项目根目录下执行。

git config user.name

git config user.email

5.设置局部项目用户名及邮箱

要在当前项目根目录下执行。

git config user.name "你自己的用户名"

git config user.email "你自己的邮箱"

6.删除远程仓库分支

这个命令对于一些未设有保护的分支来说，是挺危险的操作，要慎重执行。

git push --delete origin dev(分支名称)

7.修改远程仓库分支名称

修改远程仓库分支的名称过程是：先修改本地分支名称 - 删除远程分支 - 重新发布本地分支到远程仓库

# 修改本地分支名称

git branch -m 旧分支名称 新分支名称

# 删除远程分支

git push --delete origin 分支名称

# 发布新分支

git push origin 新分支名称

# 重新建立关联

git push --set-upstream origin 新分支名称

8.合并分支

合并分支是一个比较常见的操作了，当你在一个分支开发完新功能后，很多时候这些分支最终都要合并到 master/main 这个主分支上，这个主分支拥有所有分支的代码，并且它是稳定且在生产环境上跑的，所以在你确定要将分支合并到主分支上之前，一定要确保这个分支代码是没有问题。

# 切换到稳定的目标分支

git checkout master

# 更新最新代码，防止本地仓库对应分支代码不够新而出现问题

git pull

# 合并分支到本地仓库

git merge dev

# 发布合并后的新代码到远程分支

git push

合并后，你可以通过 git log 去查看是否有相关的 commit 记录。

9.将A分支直接合并到B分支

git merge xxx(A分支名称) xxx(B分支名称)

10.合并单个commit

有时候我们只想合并某一个 commit 来满足一些特定需要，这也是可以做到的。

# 切换到稳定的目标分支

git checkout master

# 合并某个commit到本地仓库

git cherry-pick xxx(commitId)

# 发布合并后的新代码到远程分支

git push

commitId 是一个 commit 的唯一标识，你可以通过 git log 来找到它，它是一串很长不重复的字符。

当然，你也可以去到 Github 或者 Gitee 平台对应项目里面找。

合并单个 commit 你可能会遇到冲突的情况，如：在我执行合并某一个 commit 给我报了一个错，大致意思就是代码冲突了，需要去调整后，才能提交。

代码冲突是件非常蛋疼的事情，不仅仅合并的时候会发生冲突，比较频繁发生的场景是多人共同开发的时候，因为两人负责同个项目，就有极大的可能会改到相同的文件，相同的代码，这就会造成冲突。一般这个时候 Git 会阻止你的提交，让你先去整改，这时候就需要你非常谨慎细心的去处理，因为一旦粗心，就极有可能干掉同伴的代码或者自己的代码，这会造成很严重的后果。（不要问我怎么知道的，都是血的教训︶︿︶）

解决代码冲突一般我会借助编辑器等工具来完成，就不通过命令行操作了，这样比较方便，不容易出错。我使用的是 VS code 编辑器，在编辑器内冲突的文件一般都会标红，点开文件，会发现里面会有写 <<<< 的符号，被符号包围的内容就是冲突的地方。

编辑器一般会提供四个选项帮助你快速操作，当然你也可以手动删除修改。

• Accept Current Change：接收当前更改，也就是冲突部分以旧的为准。


• Accept Incoming Change：接受传入的更改，也就是冲突部分以新的为准。


• Accept Both Changes：接受两个更改，也就是新旧都存在，可能会出现重复。


• Compare Changes：比较变化，会分成两个文件，让你更直观的查看两者的冲突内容。

当你解决完冲突后，你可以保存文件，再执行以下操作，提交代码。

# 添加更改进入暂存区

git add .

# 提交暂存区到本地仓库

git commit -m ""

# 提交本地仓库commt到远程仓库

git push

11.撤销最近的一个commit

git reset --soft HEAD^

这个命令用于撤销本地仓库最近的一个 commit ，撤销后会回到暂存区中，通过 git log 可以查看 commit 记录会减少，但不影响远程仓库。

还有另一个相似的撤销 commit 命令，但它比较危险，撤销后的内容是直接就删除的，不会回到暂存区，要慎重使用！！！

git reset --hard HEAD^

12.查看简洁提交记录

这个命令可以让你更加直观的查看你需要的信息。

git log --pretty=oneline

其实这些信息都存放在 .git 文件夹中，在 .git\logs\refs\heads 下记录了所有分支的 commit 版本号。

13.备份工作区内容stash

这是一个神奇的命令，特别对项目分支比较多的情况，是非常有用的，他的使用场景大致是：当你正在A分支中开发功能，你临时接到一个紧急的需求，需要优先切换到B分支中去开发，这个时候A分支中已经改动的代码要怎么办呢？这时就能使用 stash 来备份代码了。

git stash

执行命令后，当前工作区会回到最近的一次 commit 状态，并将更改的代码保存在 Git 栈中，这样你就能先切换到B分支中去开发，等B分支功能开发完成，再切换回A分支，通过下面的命令取回原来的更改的代码，继续进行A分支的功能开发了。

git stash pop

是不是非常的 nice！！！

14.查看备份列表或清空备份列表

• 显示Git栈内的所有备份

git stash list

• 清空Git栈

git stash clear

15.查看远程仓库地址

git remote -v

16.更改远程仓库地址

git remote set-url origin xxx(新仓库地址)

更改远程仓库地址有另外的两种方式

# 删除项目的远程仓库地址

git remote rm origin

# 添加项目的远程仓库地址

git remote add origin xxx(新仓库地址)

或者去改配置文件

17.比较工作区和暂存区的所有差异

git diff

这个命令是对比工作区和暂存区的所有差异，但个人感觉不太直观，也可能只是比较少用吧，关于对比我更愿意借助编辑器工具来查看。

对比工作区单个文件和暂存区的区别：

git diff xxx(文件地址)

18.将工作区中的文件还原成与暂存区的一致

git checkout xxx(文件地址)

# 批量还原

git checkout xxx(文件地址) xxx(文件地址) xxx(文件地址) ...

前言

优秀的代码往往是最通俗易懂的代码，在于它的易于维护。在开发过程中，变量/方法优秀的命名往往有助于理解该变量/方法的用途，起到命名即注释的作用。而糟糕的命名往往会让人摸不着头脑。为了提高代码的可维护性，我们需要更优雅的命名方式。

一、通用规则

1. 有意义

起一个有意义的变量名这条相信绝大多数开发者都能做到，即变量名有实际的指代意义，在此不再赘述。

2. 指代具体

命名时需要使其更加具体详尽，可以具体到所在的模块，或者能表达出其逻辑/功能。

/* bad */

.title {}

/* good */

.head-title {}

// bad

const info;

// good

const userInfo;

3. 遵循传统

无论是CSS、JavaScript、还是文件的命名，都有一些约定俗成的惯例和规范，我们只需遵循即可。

4. 约定规范

命名的规则有很多种，没有高低之分，只有相对合适，没有绝对完美的规则。通常为了维持项目的风格统一，通常在一个项目中，相同种类的规则只选取一种。毕竟规范也只是一种工具，运用规范的根本目的是为了更好的开发和维护，太过复杂的规范反而会阻碍正常开发。因之，在项目启动前，在技术栈选取后就应当进行规范的约定，这个过程是团队意见的整合，毕竟规范是要靠团队成员的相互配合。

二、CSS 中的命名

1. 划分原则

CSS中的类名根据其职责可以分为公共类名和自定义类名。其中公共类名又可以分为常见类名（一般是约定俗成）和工具类名。

2. 常见类名

下面整理了一些常见的 css类名 供大家参考：

grid布局的理念是把网页划分成一个一个网格组合成不同样式的布局，再通过对网格进行内容填充，组成一个网页。通过一下这个案例了解grid的基本概念👇👇

经典九宫格布局：

🚨关键点🚨:

容器： 需通过display：grid设置为grid容器,容器中包含所有item

行： 横向为行，对应颜色块123

行距： 上下两个item的间距为行距

列： 纵向为列，对应颜色块147

列距： 左右两个item的间距为列距

item（子元素）： 也就是上图对应的123456789颜色块

边： 每个itme共有 上 下 左 右 四条边

1.1 display

display属性规定是否/如何显示元素。我们需要使用grid布局，就要把容器设置为grid或者inline-grid

grid 设置为块级元素的grid布局

inline-grid 设置为行内元素的grid布局

区别如下：

代码案例
在线代码入口：👉👉(点击传送)

.grid_container {

  display:grid;

  /*   display:inline-grid; */

  grid-template-columns: 100px 100px 100px;

  grid-template-rows: 100px 100px 100px;

}

1.2 grid-template-columns 和 grid-template-rows

grid-template-columns属性用来定义grid布局的每一列列宽

grid-template-rows属性用来定义grid布局的每一行行高

代码案例1：在线代码入口👉👉(点击传送)

定义一个三行三列，每列列宽100px，每行行高100px

.grid_container {

  display:grid;

  grid-template-columns: 100px 100px 100px;

  grid-template-rows: 100px 100px 100px;

}

代码案例2：在线代码入口👉👉(点击传送)

当拥有很多行和列的时候，普通的写法根本不实在，所以现在引入一个函数repeat()

repeat()函数可设置重复的值，或者重复的一个模式，还是以三行三列100px为例：

.grid_container {

  display:grid;

  /* 重复一个值 */

  grid-template-columns: repeat(3,100px);

  grid-template-rows: repeat(3,100px);

  /* 重复一个模式

    grid-template-columns: repeat(3,100px 50px);

    grid-template-rows: repeat(3,100px 50px);

  */



}

代码案例3：在线代码入口👉👉(点击传送)

这里以圣杯布局为例：左右固定，中间自适应。在这种情况下固定的列宽或行高已经不能满足实现圣杯布局了，所以这个例子引入两个关键字auto和fr

auto：自适应属性

fr：fraction 的缩写，意为"片段"，可以看做百分比属性，通过以下例子可以帮助理解该关键字

以auto为例：

.grid_container {

  display:grid;

  /* 左右列150px，中间列自适应*/

  grid-template-columns: 150px auto 150px;

   /* 一行行高 300px*/

  grid-template-rows: repeat(1,300px);

}

以fr为例：
左右列占比 2/10 = 20% ，中间列占比 6/10 = 60%， 注意10 = 2+6+2

#grid_container{

  display: grid;

  grid-template-columns: 2fr 6fr 2fr;

  grid-template-rows: repeat(1,300px);

}

代码案例4：在线代码入口👉👉(点击传送)

当需求是要求每个item子元素的宽高只有100px，但是容器宽度自适应时，我们就无法得知应该设置几行几列的属性了，所以这里再引入一个关键字auto-fill

auto-fill:自动填充

⚠️注意：grid-template-rows需要使用关键字时，容器必须要有固定高度⚠️

#grid_container{

  display: grid;

  height:500px;

  grid-template-columns: repeat(auto-fill,100px);

  grid-template-rows: repeat(auto-fill,100px);

}

代码案例5：在线代码入口👉👉(点击传送)

如果grid布局的子元素设置为自适应宽度，但宽度缩小到一定程度时就会出现错误，所以避免出现这种错误，我们必须要有一个最小的宽度，所以这里引入一个函数minmax()

minmax()：设置一个长度范围，参数1：最小值，参数2：最大值

例子：最小值500px，最大值6fr

.grid_container {

  display:grid;

  width:600px;

  grid-template-columns: 2fr minmax(500px,6fr) 2fr;

/*  自行屏蔽查看区别  */

/*  grid-template-columns: 2fr 6fr 2fr; */

  grid-template-rows: repeat(1,300px);

}

1.3grid-template-areas

1.3 grid-template-areas

grid-template-areas:用于划分区域，通过以下案例可以帮助理解

代码案例1：在线代码入口👉👉(点击传送)

1、划分出a到i九个区域

2、或者每一行划分一个区域，三行就是a b c三个区域

2、当然可以不划分部分区域，使用（.）点表示不需要划分的区域

.grid_container {

  display:grid;

  grid-template-columns: repeat(3,100px);

  grid-template-rows: repeat(3,100px);

/*  划分九个区域  */

  grid-template-areas: 

    'a b c'

    'd e f' 

    'g h i';



/*  划分三个区域  */

/*   grid-template-areas: 

    'a a a'

    'b b b' 

    'c c c'; */

/*  不划分部分区域  */

/*   grid-template-areas: 

    'a . c'

    'a . c' 

    'a . c'; */

}

划分区域的用途会在后面结合其他的属性进行讲解！！

1.4 grid-row-gap 和 grid-column-gap 和 grid-gap

grid-row-gap：行间距

grid-column-gap：列间距

grid-gap: 行间距 和 列间距 的简写形式,如：grid-gap: <grid-row-gap> <grid-column-gap>;

代码案例1：在线代码入口👉👉(点击传送)

这里以最简单的九宫格为例

.grid_container {

  display:grid;

  grid-template-columns: repeat(3,100px);

  grid-template-rows: repeat(3,100px);

  grid-row-gap:10px;

  grid-column-gap:20px;

/*  下面语句和上面设置的间距效果相同，自行解除注释对比  */

/*   grid-gap:10px 20px; */

}

1.5 grid-auto-flow

grid-auto-flow：设置grid布局的放置顺序，正常情况下是，从左到右放置每一个item子元素，在特殊情况下我们可以重新改变它的放置顺序，比如从上到下。可选值：从左到右 row、从上到下column、稠密从左到右row dense、稠密从上到下column dense，接下来会一一举例说明；

正常设置grid-auto-flow属性为 row 和 column会出现以下两种效果，左边为row,右边为column

这里还是以九宫格为例，我们将 数字1 和 数字2 和 数字3 方块设置为各占2个单元格时，在grid-auto-flow属性默认等于row就会出现以下一幕


当我们把代码设置成 稠密型的从左到右row dense时，布局就会被尽可能的填满，不会出现上图存在的空格

代码如下:在线代码入口👉👉(点击传送)

.grid_container {

  display:grid;

  grid-template-columns: repeat(3,100px);

  grid-template-rows: repeat(3,100px);

/*  默认，从左到右  */

  grid-auto-flow:row;

  /*  稠密型 从左到右  请自行开启屏蔽 */

/*   grid-auto-flow:row dense; */

}

.item-1 {

  background-color: #B53471;

  grid-column-start: 1;

  grid-column-end: 3;  

}

.item-2 {

  background-color: #ffcccc;

  grid-column-start: 1;

  grid-column-end: 3; 

}

.item-3 {

  background-color: #ff4d4d;

  grid-column-start: 1;

  grid-column-end: 3; 

}

通过上面的例子可以清楚稠密型其实就是，尽可能填满容器而已，所以column dense例子就不多做解析，在线代码入口👉👉(点击传送)

1.6 justify-items 和 align-items 和 place-items

属性说明

justify-items:设置item子元素内容水平位置

align-items:设置item子元素内容垂直位置

place-items:align-items 和 justify-items 两个属性的简写方式，若省略第二个值，则认为第二个值等于第一个值

place-items: <align-items> <justify-items>

属性可选值（三个属性均有以下可选值）

start案例：在线代码入口👉👉(点击传送)

对齐子元素容器的起始边框，justify-items对齐水平的起始边框，align-items对齐垂直的起始边框



end案例：在线代码入口👉👉(点击传送）

对齐子元素容器的结束边框，justify-items对齐水平的结束边框，align-items对齐垂直的结束边框



center案例：在线代码入口👉👉(点击传送）

子元素容器内部居中，justify-items水平居中，align-items垂直居中



stretch案例：在线代码入口👉👉(点击传送）

默认就是这个属性，只要不设置宽度和高度就会把宽高拉伸铺满

1.7 justify-content 和 align-content 和 place-content

注意这三个属性和1.6描述的区别在于， justify-items 和 align-items 和 place-items是针对子元素内容的，justify-content 和 align-content 和 place-content是针对grid容器内容的

属性说明

justify-content:设置grid布局容器内容水平位置

align-content:设置grid布局容器内容垂直位置

place-content:align-content 和 justify-content 两个属性的简写方式，若省略第二个值，则认为第二个值等于第一个值

place-content: <align-content> <justify-content>

属性可选值（三个属性均有以下可选值）

start案例：在线代码入口👉👉(点击传送)

对齐容器的水平和垂直起始边框，justify-content对齐水平的起始边框，align-content对齐垂直的起始边框

  justify-content:start;

  align-content:start;

end案例：在线代码入口👉👉(点击传送)

对齐容器的水平和垂直结束边框，justify-content对齐水平的结束边框，align-content对齐垂直的结束边框

  justify-content:end;

  align-content:end;

center案例：在线代码入口👉👉(点击传送)

容器内容水平和垂直居中对齐，justify-content容器内容水平居中对齐，align-content容器内容垂直居中对齐

  justify-content:center;

  align-content:center;

stretch案例：在线代码入口👉👉(点击传送)

自动拉伸铺满grid容器，justify-content水平铺满容器，align-content垂直铺满容器

  justify-content:stretch;

  align-content:stretch;

space-around案例：在线代码入口👉👉(点击传送)

每个子元素两侧间隔相等，所以子元素之间间隔比容器边框的间隔大一倍

  justify-content:space-around;

  align-content:space-around;

space-between案例：在线代码入口👉👉(点击传送)

子元素与子元素之间间隔相等，子元素与容器边框没有间隔

  justify-content:space-between;

  align-content:space-between;

space-evenly案例：在线代码入口👉👉(点击传送)

子元素与子元素之间间隔相等，子元素与容器边框之间也是同样长度的间隔

  justify-content:space-evenly;

  align-content:space-evenly;

1.8 grid-auto-columns 和 grid-auto-rows

grid-auto-columns：设置多余列的列宽

grid-auto-rows：设置多余行的行高

在某种情况下，我们设置了9宫格布局可能会出现10个item子元素，那正常的前9个子元素都设置有合适的宽高，但是多余出现的第10个如果不进行设置，就会出现不正常的布局，通过以下案例可以帮助理解

当使用 grid-auto-flow:column;改变默认的放置顺序会出现以下情况


所以在出现以上情况时，使用grid-auto-columns 和 grid-auto-rows解决问题
在线代码入口👉👉(点击传送）,自行修改案例代码观察变化。

.grid_container {

  grid-auto-columns:100px;

  grid-auto-rows:100px;

}

1.9 grid-template 和 grid

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

这两个属性用法比较复杂，后期再考虑重新写一篇文章讲解，有需要的请在评论区留言，留言数多的话，会尽快出新文章

2.0（子元素）grid-column-start 和 grid-column-end 和 grid-row-start 和 grid-row-end和 grid-column和 grid-row

横纵向网格线始终比横纵向子元素多1,下面通过几个案例帮助理解



案例1：在线代码入口👉👉(点击传送）

🥇当方块一想占满横向两个方格时，将方块一的grid-column-start和grid-column-end分别设置成1和3,或者设置grid-column: 1/3

🥈当方块一想占满纵向两个方格时，将方块一的grid-row-start和grid-row-end分别设置成1和3，或者设置grid-row: 1/3

.item-1 {

  background-color: #B53471; 

/*  横向  */

/*   grid-column-start: 1;

  grid-column-end: 3; */

   grid-column: 1/3; /*效果相同 */

    

/*  纵向  */

/*    grid-row-start: 1;

   grid-row-end: 3;  */

    grid-row: 1/3; /*效果相同 */

}

案例2：在线代码入口👉👉(点击传送）

🥇当遇到多个方格进行属性设置时，需要考虑网格线是否被别的元素包含，如下图所示：


所以在案例1的原有基础上，我们想把方块2的纵向占两个方块，位置放在原方块4和原方块7的位置，那么我们就要考虑方块1已经包含过的网格线不能使用。所以设置上边框网格线的的时候就要避开纵向的第2条网格线,这样我们要设置上边框网格线为3，下边框网格线为5

.item-2 {

  background-color: #ffcccc;

  grid-column: 1/2;

  grid-row: 3/5;

}

效果如下：

2.1 （子元素）justify-self 和 align-self 和 place-self

其实这一节没啥好讲的，属性justify-items和 align-items 和 place-items 属性效果一样,只不过前者是统一设置grid容器中的子元素内容位置，后者则是在子元素上单独设置，并且会覆盖统一设置的效果。

justify-self：设置水平位置

align-self：设置垂直位置

place-self：align-self属性和justify-self属性的合并简写形式。（忽略第二个值，则认为第二个值等于第一个值）

案例1：在线代码入口👉👉(点击传送）

所有子元素内容水平垂直居中，第一个子元素内容对齐垂直方向结束边框align-self: end;，对齐水平方向结束边框justify-self: end;


代码和效果如下：justify-self 和 align-self 覆盖了justify-items和 align-items 设置的居中显示

.grid_container {

  justify-items: center;

  align-items: center;

}

.item-1 {

  justify-self:end;

  align-self:end;

  background-color: #B53471; 

}

2.1 （子元素）grid-area

在上面 1.3 中已经说过如何划分区域了，接下来我们通过 grid-area 属性来了解如何使用区域

案例1：在线代码入口👉👉(点击传送）

将就九宫格中1 2 3 方块替换到 4 5 6方块

.grid_container {

  display:grid;

  grid-template-columns: repeat(3,100px);

  grid-template-rows: repeat(3,100px);

/*  划分九个区域  */

  grid-template-areas: 

    'a b c'

    'd e f' 

    'g h i';

}

.item-1 {

  background-color: #B53471; 

  grid-area: d;

}

.item-2 {

  background-color: #ffcccc;

  grid-area: e;

}

.item-3 {

  background-color: #ff4d4d;

  grid-area: f;

}

案例2：在线代码入口👉👉(点击传送）

将九宫格中的方块1 2 3 纵向占满两个单元格，方块4 水平占满3个单元格

.grid_container {

  display:grid;

  grid-template-columns: repeat(3,100px);

  grid-template-rows: repeat(3,100px);

/*  划分三个区域  */

  grid-template-areas: 

    'a b c'

    'a b c' 

    'd d d';

}

.item-1 {

  background-color: #B53471; 

  grid-area: a;

}

.item-2 {

  background-color: #ffcccc;

  grid-area: b;

}

.item-3 {

  background-color: #ff4d4d;

  grid-area: c;

}

.item-4 {

  background-color: #ffaf40;

  grid-area: d;

}

目前工作中接手的几个项目都是 B端 PC 项目，业务逻辑都比较复杂，并且代码历史较久，在日常的维护中经常会遇到想摊手的技术问题，发现问题、解决问题、避免再次出现同样的问题，既是项目可持续维护的因素之一，也是个人工作经验积累的一个过程

本文可当做 接手前端新项目？这里有些注意点你可能需要留意一下、 编写可维护的现代化前端项目 的补充

具体、连贯的变量名

在前后端分离的现代化 web开发流程下，相比于以往，前端承担了更多的业务逻辑，尽管存在着 TypeScript等约束工具，但相比于后端语言，js 仍具备相当大的灵活性，这就导致了代码一旦复杂，前端代码的排查会更加麻烦

单一变量的层层传递与到处使用是很常见的事情，变量的命名对于追踪变量有着相当大的影响

所以变量名称必须是具体且有实际意义的，不提倡为了追求变量名的精确性而使得变量名称冗长，但模糊而宽泛的变量名同样不可取，这就要求变量名称即准确又简短，在某些时候，可能很难做到这一点，个人倾向是，实在无法做好权衡的前提下，宁愿选择冗长的变量名也不要选择一个模糊宽泛的

例如，data可以当做是一个变量名，这个变量名用于临时的局部变量没啥问题，毕竟你一眼就能看到这个变量所有的使用范围，但如果变量所持有的数据的作用范围较大（例如跨组件）且具备实际业务意义，那么就不太妙了，data 可以用作任何数据的变量名，当需要追踪 data的时候，在编辑器里搜索 data，发现到处都是 data，并不是一件美好的事情

一旦确定好了变量名后，最好不要再对其进行重命名，例如想将 A组件里的 userData 传递到 B 组件中，B组件最好原模原样地接收这个变量名，而不是将其命名为其他的什么名称

有些时候可能就必须要在传递变量的时候进行重命名，例如第三方组件就接收 data，那么你无法传递 userData，这种情况下当然不得不重命名

避免对变量重命名的目的主要是，为了防止在追踪变量的时候因变量名称改变而产生思维上的重新整理，一个变量被重命名了好几次后，追踪到底再回过头来你可能就忘记了自己当初在追踪什么东西，同时对于搜索功能也不太友好，从一而终的连贯变量名可以让你一次搜索就能从追踪的起始位置跳过中间一大堆逻辑直接到终点

必要的选择器

现代化的前端项目基本都会使用 React、Vue等数据驱动的框架，UI组件一般也都是使用别人封装好的组件库，除非是要写样式，否则html元素选择器基本上都是可有可无的了，但并不是说就不需要了，最起码的一个好处是，让你想在代码里查找页面上的一个元素时，直接根据选择器名就能精准定位了

页面上有个弹窗展示得不太对，你在浏览器页面里看到这个弹窗元素名叫 ant-modal-wrap，是个第三方的组件所以你代码里根本搜不到这个选择器名；页面上有一句文案有点问题，你在浏览器页面里看到这个文案所在的元素是个没有选择器的 div标签，在目前普遍 全站div的浪潮下，光是定位这个文案到底是哪里的就够花费好一阵子了

所以，这里选择器是起到了一个索引的作用，既然是索引，那么同样应该遵守上面变量名相关的规则，即选择器名称应当 即准确又简短

优化应该从一开始就开始

不要提前优化

相信很多人都听过这句话，我曾经将这句话当做是至理名言，但经历的多了之后，目前已经开始有所质疑了

不要提前优化，那么要在什么时候优化？快要 hold 不住的时候才优化？迭代了七八十版的时候再优化？团队人员换了一茬又一茬的时候再优化？

当然是可以的，但是那个时候谁来优化，谁来做这种在业务看来毫无产出甚至是可能优化出 bug的吃力不讨好的事情？

一个函数里塞了数十层的 if...else，函数体的代码量超过千行，看着就应该要被优化的，但是这些代码在这里绵延了数年之久，经过了一批又一批不同程序员的修改，承载了不知多少明面上暗地里的业务逻辑，技术上或许好优化，但谁能保证某处优化不会对业务逻辑造成破坏？

没有提前优化，过程中也没有优化，那就完全是没有任何优化了，因而屎山就诞生了

我认为 不要提前优化 这句话是产生在一个朝九晚五不加班需求少有充足时间做技术优化的语境之下，这种语境下，这句话是没啥问题的，只是大部分情况下，现实情况根本不符合语境，所以这句话就有问题了

该拆的组件、该提取的公共方法、该规划的目录结构、该引入的代码规范……应该从一开始就形成，不要等着需要优化的时候才优化，那个时候已经来不及了

复用（组件、方法）

代码复用是为了提升工作效率，但如果只是为了复用代码而复用，就本末倒置了

通用方法、通用组件鼓励复用，但业务逻辑、业务组件，慎重复用

一个常见的例子是，移动端详情页页面和编辑页可能具有大部分重合的逻辑，但类似这种业务属性很强的组件，除非你确信这个组件将来不出现大的改动，否则不要为了贪图眼前的便利而想当然地进行复用

本来为了区分展示态和编辑态，就已经写了一些条件语句了，日后若是出现了已经复用的逻辑必须要按照业务需求进行拆分，甚至是逻辑完全南辕北辙，初期还好，或许还能抢救一下拆分出来，但到了中后期才发现这个问题很可能已经晚了，掺杂了那么多的业务逻辑，你还敢去做拆分吗？那么这个复用组件的代码量必然要被大量的 if...else 占领，修改任何一个功能点、排查任何问题都要兼顾两套逻辑，对于维护者来说，这会造成相当大的心智负担，对于项目本身来说，维护的代码将会变得更大

业务代码是千变万化的，原本多个场景下相似的逻辑，很可能随着业务的迭代变得毫无关系，在这种场景下，复用不仅不能提高工作效率，反而还会拖后腿

而对于通用方法和通用组件来说，为了更加彻底地解耦，其应当是函数式的，不应当对外部状态产生隐式地修改

通用方法最好是纯函数，相同的输入有相同的输出，入参、出参都应当是明确的，让人一眼就看出来需要哪些入参，又会有哪些出参，而不是直接传入一个大的对象，然后在方法体内去一个个查找所需的对象属性

通用组件不应当自作主张修改外部数据，而应该将产生的变化主动抛出去，让上一层组件来明确决定如何使用这个变化

依据社区而不是从心

为项目选择设计模式、UI组件库、状态管理库等基础功能的时候，应当选取社区内热度更高的而非根据个人的喜好

你所认为很牛x的设计模式、第三方库等，可能是其他人根本就没听过的，或者其他人根本就不认同的，这只会增加团队之间的协作难度

团队合作项目的代码是用来传承的而不是用来炫技的

抛弃惯性思维

待在舒适区，这是人之本能，因为熟悉，所以上一个项目使用的技术栈在下一个项目里也要继续用

但是，真的合适吗？

上一个项目用了 mobx，这个项目里也必须要用吗？上一个项目里将所有的状态数据都放到了状态管理库里，这个项目也要这样做吗？上一个项目没用 TypeScript，这一个也不用吗？

可能是不需要的，可能是需要更换的，当然，并不是说就要跟上一个项目反着来，到底怎样最起码要有一个思考的过程，而不是上一个项目就是这样的，所以这一个也要这样

考虑清楚了再写TODO

有意识做优化是个好习惯，但意识得能落到实处

以我的经验看，在多人协作的、业务敏捷迭代的项目中，大多数 todo是无法完成的

大部分 todo都是基于当时的情况做出的考量，当时这个方法可能只有几行，todo 要做的时候很简单，但是当时没有做，当过了一段时间再想起来这事的时候，发现那个方法已经变成了几百行了，你还敢动吗？

或者换句话说，你还有完成这个 todo的心思吗？人都是懒惰的，你愿意将原本可以用在打游戏刷视频的时间用在完成这个 todo上吗？看到了别人写的 todo，并且也看明白了，但是你愿意帮别人完成这个 todo吗？

该做的事情应当立即完成，或许因为某些原因无法立即完成,所以你想延后再来做，但是一般情况下，后续再来完成的成本必然大于当下，现在都完成不了，凭什么认为以后就能完成？

真的需要做的事情，哪怕会让进度延期，只要你理由充分，其他人不可能也没理由去阻止你

小结

很多时候，一些让你能够写出更好的代码建议，实际上对于业务产出是毫无帮助的，哪怕你不遵守这些建议甚至反着来，也不影响你的产出不影响你的绩效，毕竟产出和绩效跟代码写得好不好并没有直接关系，甚至这些所谓的建议有时候还会影响你快速产出，只要我能拿出一个好的产出拿到一个好的绩效，代码写得糙点烂点又有什么关系？以后的事情以后再说呗，搞不好以后维护的人根本不是我

这种心理或许才是常态，毕竟这更加符合现实的利益

但如果你是一位对技术有追求的人，你真的甘心就如此吗？我认为除了现实的考量之外，还应当为自己写下的代码负责

  下载项目后，执行的第一个命令行一般都是 npm install 。在这个过程中可能一帆风顺，也可能遇到大大小小的报错，有时候花点时间各种搜索能解决，可下次遇到还是一头雾水的上网找各种方案尝试解决报错。

  那么，你清楚当你输入 npm instal ，按下 Enter 键之后，究竟发生了什么吗？

正文

一、npm install之后发生了什么

  npm install 大概会经过以下几个流程，下面我们就来简单看一下(原图地址)。

1. npm install执行后，会检查并获取npm配置，优先级为

项目级别的.npmrc文件 > 用户级别的.npmrc文件 > 全局的.npmrc文件 > npm内置的.npmrc文件

.npmrc 文件就是npm的配置文件。查看npm的所有配置, 包括默认配置，可以通过下面的命令:

npm config ls -l

2. 然后检查项目中是否有package-lock.json文件。

  从npm 5.x开始，执行npm install时会自动生成一个 package-lock.json 文件。

  package-lock.json 文件精确描述了node_modules 目录下所有的包的树状依赖结构，每个包的版本号都是完全精确的。

  因此npm会先检查项目中是否有 package-lock.json 文件，分为两种情况：

• 如果有，检查package-lock.json和package.json中声明的依赖是否一致

• 一致：直接使用 package-lock.json 中声明的依赖，从缓存或者网络中加载依赖


• 不一致：各个版本的npm处理方式如上图

• 如果没有，根据package.json递归构建依赖树，然后根据依赖树下载完整的依赖资源，在下载时会检查是否有相关的资源缓存

• 存在：将缓存资源解压到 node_modules 中


• 不存在：从远程仓库下载资源包，并校验完整性，并添加到缓存，同时解压到 node_modules 中

3. 最终将下载资源包，存放在缓存目录中；解压资源包到当前项目的node_modules目录；并生成 package-lock.json 文件。

  构建依赖树时，不管是直接依赖还是子依赖，都会按照扁平化的原则，优先将其放置在 node_modules 根目录中(最新的npm规范), 在这个过程中，如果遇到相同的模块，会检查已放置在依赖树中的模块是否符合新模块的版本范围，如果符合，则跳过，不符合，则在当前模块的 node_modules 下放置新模块。

二、npm缓存

  在执行 npm install 或 npm update 命令下载依赖后，除了将依赖包安装在 node_modules 目录下外，还会在本地的缓存目录缓存一份。我们
可以通过以下命令获取缓存位置：

// 获取缓存位置

npm config get cache



// C:\Users\DB\AppData\Roaming\npm-cache

复制代码

  如我的缓存位置在C:\Users\DB\AppData\Roaming\npm-cache下面的_cacache 文件夹中。

  再次安装依赖的时候，会根据 package-lock.json 中存储的 integrity、version、name 信息生成一个唯一的 key，然后拿着key去目录中查找对应的缓存记录，如果有缓存资源，就会找到tar包的hash值，根据 hash 再去找缓存的 tar 包，并把对应的二进制文件解压到相应的项目 node_modules 下面，省去了网络下载资源的开销。

  因此，如果我们可能因为网络原因导致下载的包不完整，这就可能造成删除node_modules重新下载的依旧是问题包，假如删除 node_modules 重新下载问题依旧，此时就需借助命令行清除缓存。

// 清除缓存

npm cache clean --force



复制代码

  不过 _cacache 文件夹中不包含全局安装的包，所以想清除存在问题的包为全局安装包时，需用 npm uninstall -g 解决

三、关于yarn

yarn简介：

  yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。

yarn特点：

• 速度快

• yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

• 安全
  
  
  
  • 在执行代码之前，yarn 会通过算法校验每个安装包的完整性。
  
  
  
  


• 可靠
  
  
  
  • 使用详细、简洁的锁文件格式和明确的安装算法，yarn 能够保证在不同系统上无差异的工作。
  
  
  
  

四、yarn和npm部分命令对比

总结

  无论是使用npm 还是 yarn 来管理你的项目依赖，我们都应该知其然更知其所以然，这样才能在项目中跟海的定位及解决问题，不是吗？

相信应用层面的知识，大家都比较熟悉了，实际 React 用来实现业务对于熟悉 Vue 的开发人员来说也不是难事，今天我们简单的了解一下 React 和 Vue 。（瞎聊聊）

先来两张源码编译图对比一下：

由于每个步骤能涉及的东西太多，所以本篇就简单聊一下他们的区别以及他在我们项目中实际的应用场景中能够做什么（想到什么聊什么）。

Vue

new Vue

我们知道 Vue 和 React 都是通过替换调指定的 Dom 元素来渲染我们的组件，来看一下：

import Vue from 'vue'

import App from './App.vue'



new Vue({

    render: h => h(App),

}).$mount('#app')

先说 Vue 的，new Vue 做了什么？相信读过源码的同学都会知道，他执行了一堆初始化操作 initLifecycle、initEvents、initRender、initInjections、initState、initProvide。

具体包括以下操作：选项合并(用户选项、默认选项)、$children、$refs、$slots、$createElement等实例属性和方法初始化、自定义事件处理、数据响应式处理、生命周期钩子调用、可能的挂载。

响应式原理

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

var data = {

    a: 1

}

var vm = new Vue({

    data

})

vm.a = 1 

data.a // 1



data.a = 2

vm.a // 2

Vue 通过劫持 get 和 set 来实现响应式原理，这也是与 React 最大区别所在，React 只能手动调用 this.setState来将state改变。

我在往期篇幅有具体谈过 Vue 的响应式原理：
深入浅出Vue响应式原理

模板编译 && 视图渲染

当 data 中的数据实现了响应式之后，就开始在模板上做功夫了。

这里有一个很重要的东西叫虚拟 Dom。

所谓虚拟 DOM 就是用 js 来描述一个 DOM 节点，在 Vue 中通过 Vnode 类来描述各种真实 DOM 节点。

在视图渲染之前，把 template 先编译成虚拟 Dom 缓存下来，等数据发生变化需要重新渲染时，通过 diff 算法找出差异对比新旧节点（patch），之后把最终结果替换到真实 Dom 上，最终完成一次视图更新。

了解更多关于 diff 移步至：diff算法

关于编译原理要细聊就有点多了，大致总结一下：

• 第一步是将 模板字符串 转换成 AST语法树（解析器）


• 第二步是对 AST 进行静态节点标记，主要用来做虚拟 DOM 的渲染优化（优化器）


• 第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

有兴趣请移步至：
Vue 模板编译原理

生命周期

在这些过程中，Vue 会暴露一些钩子函数供我们在适当时机去执行某些操作，这就是生命周期钩子函数。关于 Vue 的生命周期大家应该都熟记于心了，简单过一下：

• 
  

  beforeCreate (创建实例前的钩子，此时 data 里的数据还不能用。)

  
  


• 
  

  created (实例创建完成后的钩子，此时 data 已完成初始化可使用，但 Dom 尚未挂载。)

  
  


• 
  

  beforeMount (将编译完成的 HTML 挂载到对应虚拟 Dom，此时页面并无内容。)

  
  


• 
  

  mounted (Dom 已完成挂载，此时可以操作 Dom，此阶段也可以调用接口等操作。)

  
  


• 
  

  beforeUpdate (更新之前的钩子，当data变化时，会触发beforeUpdate方法。基本上没有什么用处。)

  
  


• 
  

  updated (更新之后的钩子，当数据变化导致地虚拟DOM重新渲染时会被调用，被调用时，组件DOM已经更新。建议不要在这个钩子函数中操作数据，可能陷入死循环。)

  
  


• 
  

  beforeDestory (实例销毁前的钩子，此时还可以使用 this，通常在这一步会进行清除计时器等操作)

  
  


• 
  

  destoryed (实例销毁完成的钩子，调用完成后，Vue实例的所有内容都会解绑定，移出全部事件监听器，同时销毁所有的子实例。)

  
  

React

大家可能会比较关心 React 会扯什么（猜的），毕竟 Vue 已经是家喻户晓，加上国内业务使用也是居多，生态圈及各类解决方案也是层出不穷。

ReactDOM.render

ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

import App from './App.jsx'

import ReactDOM from 'react-dom'



ReactDOM.render(

    <App></App>,

    document.getElementById('root')

)

render 方法实际是调用了内部的 React.createElement 方法，进而执行 ReactMount._renderSubtreeIntoContainer。

还有一个方法 ReactDOM.unmountComponentAtNode() 作用和 ReactDOM.render() 正好相反，他是清空一个渲染目标中的 React 部件或 HTML。

React state

state 是 React 中很重要的东西，说到 state 就不得不提到 setState 这个方法，很多人认为 setState 是异步操作，其实并不是。之所以会有一种异步的表现方式是因为 React 本身的性能机制导致的。因为每次调用 setState 都会触发更新，异步操作是为了提高性能，将多个状态合并一起更新，减少 render 调用。

如图，setState 接受一个新状态并不会立即执行，而是存入 pending 队列中进行判断。

如果有阅读过源码的同学就会知道他在其中通过判断 isBatchingUpdates （是否是批量更新模式）来进行区分。

如果是，那就会将状态保存到 dirtyComponents （脏组件）。

如果否，那就遍历所有的脏组件，并调用 updateComponent 更新 pending 队列的 state 或 props。执行完后，将
isBatchingUpdates 设置为 true。

假如有如下代码：

for ( let i = 0; i < 100; i++ ) {

    this.setState( { count: this.state.count + 1 } );

}

复制代码

若 setState 是同步机制，那么这个组件会被 render 100次，这无疑对性能是毁灭性的。

当然 React 也想到了这个问题并做了处理：

React 会将 setState 的调用合并为一个执行，所以 setState 执行时我们并没有看到 state 马上更新，而是通过回调获取到更新后的数据（有点类似 Vue 中的 nextTick），也就是刚刚上图所叙。

React 渲染流程

对于首次渲染，React 的主要是通过 React.render 接收到的 VNode 转化为 Fiber 树，并根据树的层级关系构建出 Dom 树并渲染。

而二次渲染（更新），Fiber 树已经存在内存中了，所以 React 会计算 Fiber 树中的各个节点差异（diff），并将变化更新渲染。

实际上 Vue 和 React 的 diff 算法都是同层 diff，复杂度都为O(n)，但是他们的不同在于 React 首位节点是固定不动的（除了删除），然后依次遍历对比。

Vue 的 diff 在 compile 阶段的 optimize 标记了 static 点，可以减少 diff 次数，而且是双向遍历方法，并且借鉴了开源库 snabbdom。（不论 Vue 还是 React 两者都是各有秋千）

再说回渲染， React 中也存在着和 Vue 一样的 VNode（虚拟 Dom）。

JSX 会被编译转换成 React.createElement 函数的调用，返回值就是 VNode，其作用和 Vue 中的 VNode 基本一致。

关于 Fiber 是一个比较抽象的概念比较难理解，可以理解为他是用来描述有关组件以及输入输出的信息的一个 JavaScript 对象。

了解更多 Fiber：Fiber传送门

小结一下：

React 渲染流程（浅看）：

jsx --> createElement 函数 --> 这个函数帮助我们创建 ReactElement 对象(对象树) --> ReactDOM.render 函数 --> 映射到浏览器的真实DOM

生命周期

在渲染过程中暴露出来的钩子就是生命周期钩子函数了，看图：

我在 Vue 转 React 系列中有提到过 ->传送门

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM


• Updating：正在被重新渲染


• Unmounting：已移出真实 DOM

简单过一下生命周期：

• 
  

  componentWillMount 在渲染前调用,在客户端也在服务端。

  
  


• 
  

  componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

  
  


• 
  

  componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  
  


• 
  

  shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用，可以在你确认不需要更新组件时使用。

  
  


• 
  

  componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  
  


• 
  

  componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  
  


• 
  

  componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

  
  

小结

本文只是涉及内容众多，难免会有遗漏或不周，还请看官轻喷

前言

相信大家在用Vue的时候，一定用过他的transition-group组件。在该组件下方可以看到这么一句话

这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。，我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡。

和一个特别特别酷炫的动画效果

下面，跟我一起走进Flip动画的奇妙世界

前置知识

getBoundingClientRect

通过dom.getBoundingClientRect()，可以得到某个元素在屏幕上的矩形区域

const rect = dom.getBoundingClientRect(); // 获取矩形区域

rect.left; // 获取矩形区域的left值

rect.top; // 获取矩形区域的top值

transform

transform是css3提供的属性，含义为变形或变换

css3提供了多种变换方式，包括平移、旋转、倾斜、缩放，还包括更加具有通用性的矩阵变换

所有变换，均不会影响真实布局位置，只是影响最终的视觉效果

animate api

Element 接口的animate()方法是一个创建新Animation的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 Animation 对象实例

使用animate api实现动画非常简单，仅需要通过下面的代码即可实现

dom.animate(

  [

    { /* 起始css属性 */ },

    { /* 结束css属性 */ },

  ],

  {

    duration: 800, // 完成动画的时间

  }

);

其他API请看MDN文档

Flip思想

Flip是一种动画思路，专门针对上述场景

它由四个单词组成，分别是：

• First


• Last


• Invert


• Play

具体过程如下

在代码实现上，可以遵循以下结构实现动画效果

// ① Frist

record(container); // 记录容器中每个子元素的起始坐标

// 改变元素顺序

change();

// ② Last + ③ Invert + ④ Play

move(container); // 让元素真正实现移动

实现

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }



    .btns {

        text-align: center;

    }



    .btns button {

        margin: 0 1em;

        outline: none;

        border: none;

        background: #579ef8;

        color: #fff;

        padding: 7px 10px;

        border-radius: 5px;

        cursor: pointer;

    }



    .btns button:hover {

        opacity: 0.8;

    }



    .container {

        width: 500px;

        overflow: hidden;

        margin: 20px auto;

        display: flex;

        flex-wrap: wrap;

    }



    .item {

        width: 50px;

        height: 50px;

        box-sizing: border-box;

        text-align: center;

        background: #eef5fe;

        border: 1px solid #ddebfd;

        line-height: 50px;

        margin: 5px;

    }

</style>



<body>

    <div class="btns">

        <button id="sort">随机排序</button>

    </div>

    <div class="container">

        <div class="item">1</div>

        <div class="item">2</div>

        <div class="item">3</div>

        <div class="item">4</div>

        <div class="item">5</div>

        <div class="item">6</div>

        <div class="item">7</div>

        <div class="item">8</div>

        <div class="item">9</div>

        <div class="item">10</div>

        <div class="item">11</div>

        <div class="item">12</div>

        <div class="item">13</div>

        <div class="item">14</div>

        <div class="item">15</div>

        <div class="item">16</div>

        <div class="item">17</div>

        <div class="item">18</div>

        <div class="item">19</div>

        <div class="item">20</div>

        <div class="item">21</div>

        <div class="item">22</div>

        <div class="item">23</div>

        <div class="item">24</div>

        <div class="item">25</div>

        <div class="item">26</div>

        <div class="item">27</div>

        <div class="item">28</div>

        <div class="item">29</div>

        <div class="item">30</div>

        <div class="item">31</div>

        <div class="item">32</div>

        <div class="item">33</div>

        <div class="item">34</div>

        <div class="item">35</div>

        <div class="item">36</div>

        <div class="item">37</div>

        <div class="item">38</div>

        <div class="item">39</div>

        <div class="item">40</div>

        <div class="item">41</div>

        <div class="item">42</div>

        <div class="item">43</div>

        <div class="item">44</div>

        <div class="item">45</div>

        <div class="item">46</div>

        <div class="item">47</div>

        <div class="item">48</div>

        <div class="item">49</div>

        <div class="item">50</div>

    </div>



<script>

    const container = document.querySelector('.container')

    function change() {

        const childrens = [...container.children]

        for(let i = 0, l = childrens.length; i < l; i ++) {

            const children = childrens[i]

            const j = Math.floor(Math.random() * l)

            if (i !== j) {

                // 获取当前dom的下一个元素

                const inextDom = children.nextElementSibling

                // 把i插入j之前

                container.insertBefore(children, childrens[j])

                // 把下标j的元素插入到i元素之前

                container.insertBefore(childrens[j], inextDom)

            }

        }

    }

    sort.onclick = () => {

        record(container)

        change()

        move(container)

    }



    function record(container) {

        for(let i = 0, len = container.children.length; i < len; i ++) {

            const dom = container.children[i]

            const rect = dom.getBoundingClientRect()

            dom.startX = rect.left

            dom.startY = rect.top

        }

    }



    function move(container) {

        for(let i = 0, len = container.children.length; i < len; i ++) {

            const dom = container.children[i]

            const rect = dom.getBoundingClientRect()

            const curX = rect.left, curY = rect.top

            dom.animate([

                { transform: `translate(${dom.startX - curX}px, ${dom.startY - curY}px)` },

                { transform: `translate(0px, 0px)` }

            ], { duration: 600 })

        }

    }

</script>

</body>



</html>

以上就是所有代码了，可以在控制台看到，不会出现style标签，非常的神奇。

结语

FLIP 不光可以做位置变化的动画，对于透明度，大小等等都可以很轻松的实现。

Flip非常有用，可以实现在任何需要动画的地方

Promise.allSettled() 方法返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise，并带有一个对象数组，每个对象表示对应的 promise 结果。

接着，我们来看看 Promise.allSettled() 是如何工作的。

1. Promise.allSettled()

Promise.allSettled() 可用于并行执行独立的异步操作，并收集这些操作的结果。

该函数接受一个 promise 数组(通常是一个可迭代对象)作为参数:

const statusesPromise = Promise.allSettled(promises);

当所有的输入 promises 都被 fulfilled 或 rejected 时，statusesPromise 会解析为一个具有它们状态的数组

1. 
   

   { status: 'fulfilled', value: value } — 如果对应的 promise 已经 fulfilled

   
   


2. 
   

   或者 {status: 'rejected'， reason: reason} 如果相应的 promise 已经被 rejected

   
   

在解析所有 promises 之后，可以使用 then 语法提取它们的状态:

statusesPromise.then(statuses => {

 statuses; // [{ status: '...', value: '...' }, ...]

});

或者使用 async/await 语法：

const statuses = await statusesPromise;

statuses; // [{ status: '...', value: '...' }, ...]

2. 取水果和蔬菜

在深入研究 Promise.allSettle() 之前，我们先定义两个简单的 helper 函数。

首先，resolveTimeout(value, delay)返回一个 promise ，该 promise 在经过 delay 时间后用 value 来实现

function resolveTimeout(value, delay) {

  return new Promise(

    resolve => setTimeout(() => resolve(value), delay)

  );

}

第二，rejectTimeout(reason, delay) - 返回一个 promise，在经过 delay 时间后拒绝reason。

最后，我们使用这些辅助函数来试验 promise.allsettle()。

2.1 All promises fulfilled

我们同时访问当地杂货店的蔬菜和水果。访问每个列表是一个异步操作:

const statusesPromise = Promise.allSettled([

  resolveTimeout(['potatoes', 'tomatoes'], 1000),

  resolveTimeout(['oranges', 'apples'], 1000)

]);

// wait...

const statuses = await statusesPromise;

// after 1 second

console.log(statuses); 

// [

//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },

//   { status: 'fulfilled', value: ['oranges', 'apples'] }

// ]

线上事例：codesandbox.io/s/all-resol…

Promise.allSettled([...])返回一个 promise statusesPromise，该 promise 在1秒内解决，就在蔬菜和水果被解决之后，并行地解决。

statusesPromise 解析为一个包含状态的数组。

1. 数组的第一项包含有蔬菜的已完成状态:status: 'fulfilled', value: ['potatoes', 'tomatoes'] }


2. 同样的方式，第二项是水果的完成状态: { status: 'fulfilled', value: ['oranges', 'apples'] }

2.2一个 promise 被拒绝

想象一下，在杂货店里已经没有水果了。在这种情况下，我们拒绝水果的 promise。

promise.allsettle() 在这种情况下如何工作?

const statusesPromise = Promise.allSettled([

  resolveTimeout(['potatoes', 'tomatoes'], 1000),

  rejectTimeout(new Error('Out of fruits!'), 1000)

]);

// wait...

const statuses = await statusesPromise;

// after 1 second

console.log(statuses); 

// [

//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },

//   { status: 'rejected', reason: Error('Out of fruits!') }

// ]

线上事例：codesandbox.io/s/one-rejec…

Promise.allSettled([...]) 返回的 promise 在 1 秒后解析为一个状态数组:

1. 
   

   数组的第一项，蔬菜 promise 成功解析：{ status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

   
   


2. 
   

   第二项，因为水果 promise 被拒绝，所以是一个拒绝状态: { status: 'rejected', reason: Error('Out of fruits') }

   
   

即使输入数组中的第二个 promise 被拒绝，statusesPromise仍然会成功解析一个状态数组。

2.3 所有的 promises 都被 rejected

如果杂货店里的蔬菜和水果都卖光了怎么办？在这种情况下，两个 promise 都会被拒绝。

const statusesPromise = Promise.allSettled([

  rejectTimeout(new Error('Out of vegetables!'), 1000),

  rejectTimeout(new Error('Out of fruits!'), 1000)

]);

// wait...

const statuses = await statusesPromise;

// after 1 second

console.log(statuses); 

// [

//   { status: 'rejected', reason: Error('Out of vegetables!')  },

//   { status: 'rejected', reason: Error('Out of fruits!') }

// ]

线上事例：codesandbox.io/s/all-rejec…

在这种情况下，statusesPromise仍然成功地解析为一个状态数组。然而，该数组包含被拒绝的promise 的状态。

3.总结

Promise.allSettled(promises)可以并行地运行 promise，并将状态（fulfilled 或reject）收集到一个聚合数组中。

Promise.allSettled(...)在你需要执行平行和独立的异步操作并收集所有结果时非常有效，即使某些异步操作可能失败。

前言

AI 正在不断拓展前端的技术边界， 算法的加持也为前端研发注入了全新的力量。本文为大家介绍什么是端智能，端智能的应用场景以及 Web 端侧实现 AI 的基本原理概念。

什么是端智能

首先，回顾一个AI应用的开发流程，具体步骤包括了

数据的采集与预处理

模型的选取与训练

模型的评估

模型服务部署

模型训练的中间产物为一个模型文件，通过加载模型文件，部署为可调用的服务，然后就可以调用进行推理预测了。

在传统流程中，模型服务会部署在高性能的服务器上，由客户端发起请求，由服务器端进行推理，将预测结果返回给客户端，而端智能则是在客户端上完成推理的过程。

端智能的应用场景

端智能现在已经有非常多的应用场景，涵盖视觉类的 AR 、互动游戏，推荐类的信息流推荐，触达类的智能Push等，语音类的直播、智能降噪等多个领域。算法逐渐从服务端覆盖到用户实时感知更强的移动终端。

典型应用包括了

AR 应用、游戏。由 AI 提供理解视觉信息的能力，由 AR 根据视觉信息来实现虚实结合的交互，带来更沉浸式的购物、互动体验。比如美颜相机、虚拟试妆，即是通过检测人脸面部的关键点，在特定区域使用 AR 增强、渲染妆容。

互动游戏。飞猪双十一的互动游戏"找一找"， 即是一个跑在 h5 页面的图片分类应用，通过摄像头实时捕捉图片，调用分类模型进行分类，当出现游戏设定目标时得分。
端侧重排。通过实时的用户意识识别，对服务器推荐算法下发的feeds流进行重新排列，做出更精准的内容推荐。

智能Push。通过端侧感知用户状态，决策是否需要向用户实施干预，推送Push，选取合适的时机主动触达用户，而非服务器端定时的批量推送，带来更精准的营销，更好的用户体验。

端智能的优势

从普遍的应用场景，可以看到端智能的明显优势，包括了

低延时

实时的计算节省了网络请求的时间。对于高帧率要求的应用，比如美颜相机每秒都要请求服务器，高延迟绝对是用户所不能接受的。而对于高频交互场景，比如游戏，低延时变得更为重要。

低服务成本

本地的计算节省了服务器资源，现在的新手机发布都会强调手机芯片的 AI 计算能力，越来越强的终端性能让更多的端上 AI 应用成为了可能。

保护隐私

数据隐私的话题在今天变得越来越重要。通过在端侧进行模型的推理，用户数据不需要上传到服务器，保证了用户隐私的安全。

端智能的局限

同时，端智能也有一个最明显的局限，就是低算力，虽然端侧的性能越来越强，但是和服务器相比还是相差甚远。为了在有限的资源里做复杂的算法，就需要对硬件平台进行适配，做指令级的优化，让模型能够在终端设备中跑起来，同时，需要对模型进行压缩，在时间和空间上减少消耗。

现在已经有一些比较成熟的端侧推理引擎了，这些框架、引擎都对终端设备做了优化来充分发挥设备的算力。比如Tensorflow Lite、Pytorch mobile、阿里的 MNN、百度飞桨 PaddlePaddle。

Web端呢

Web 端同样拥有端侧 AI 的优势与局限，作为在 PC 上用户访问互联网内容和服务的主要手段，在移动端很多APP也会嵌入 Web 页面，但是浏览器内存和存储配额的有限，让 Web 上运行 AI 应用看上去更不可能。

然而在 2015 年的时候就已经出现了一个 ConvNetJS的库，可以在浏览器里用卷积神经网络做分类、回归任务，虽然现在已经不维护了，2018 年的时候涌现了非常多的JS的机器学习、深度学习框架。如 Tensorflow.js 、 Synaptic 、 Brain.js 、 Mind 、 Keras.js 、 WebDNN 等。

受限于浏览器算力，部分框架如 keras.js 、 WebDNN框架只支持加载模型进行推理，而不能在浏览器中训练。

此外，一些框架不适用于通用的深度学习任务，它们支持的网络类型有所不同。比如 TensorFlow.js 、 Keras.js 和 WebDNN 支持了 DNN 、 CNN 和 RNN。而 ConvNetJS 主要支持 CNN 任务，不支持 RNN。Brain.js 和 synaptic 主要支持 RNN 任务，不支持 CNN 网络中使用的卷积和池化操作。Mind 仅支持基本的 DNN。

在选择框架时需要看下是否支持具体需求。

Web端架构

Web端是如何利用有限的算力的呢？

一个典型的 JavaScript 机器学习框架如图所示，从底向上分别是驱动硬件，使用硬件的浏览器接口，各种机器学习框架、图形处理库，最后是我们的应用。

CPU vs GPU

在 Web 浏览器中运行机器学习模型的一个先决条件是通过 GPU 加速获得足够的计算能力。

在机器学习中，尤其是深度网络模型，广泛使用的操作是将大矩阵与向量相乘，再与另一个向量做加法。这种类型的典型操作涉及数千或数百万个浮点操作，而是它们通常是可并行化的。

以一个简单的向量相加为例，将两个向量相加可分为许多较小的运算，即每个索引位置相加。这些较小的操作并不相互依赖。尽管 CPU 对每个单独的加法所需的时间通常更少，随着计算量规模的变大，并发会逐渐显示出优势。

WebGPU/WebGL vs WebAssembly

有了硬件之后，需要对硬件进行充分的利用。

• 
  

  WebGL

  
  

  WebGL 是目前性能最高的 GPU 利用方案，WebGL 为在浏览器中加速 2D 和 3D图形渲染而设计，但可以用于神经网络的并行计算来加速推理过程，实现速度数量级的提升。

  
  


• 
  

  WebGPU

  
  

  随着 Web 应用对可编程 3D 图形、图像处理和 GPU 访问需求的持续增强，为了在 WEB 中引入GPU 加速科学计算性能，W3C 在 2017 年提出了 WebGPU ，作为下一代 WEB 图形的的 API 标准，具有更低的驱动开销，更好的支持多线程、使用 GPU 进行计算。

  
  


• 
  

  WebAssembly

  
  

  当终端设备没有 WebGL 支持或者性能较弱的时候，使用 CPU 的通用计算方案为 WebAssembly 。WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行，它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++ 等语言提供一个编译目标，以便它们可以在 Web 上运行。

  
  

Tensorflow.js

以 Tensorflow.js 为例，为了在不同的环境下实现运行，tensorflow 支持了不同的后端，根据设备条件自动选择相应的后端 ，当然也支持手动更改。

tf.setBackend('cpu');

console.log(tf.getBackend());

对一些通用模型进行测试，WebGL速度大于普通 CPU 后端计算的 100 倍，WebAssembly 则比普通的 JS CPU 后端快 10-30 倍。

同时， tensorflow 也提供了 tfjs-node 版本，通过 C++ 和 CUDA 代码编译的本机编译库驱动 CPU 、 GPU 进行计算，训练速度与 Python 版本的 Keras 相当。不需要切换常用语言，可以直接在 nodejs 服务上添加 AI 模块，而不是再启动一个 python 的服务。

模型压缩

有了框架对于硬件设备的适配，还需要对模型进行压缩，复杂的模型固然有更好的预测精度，但是高额的存储空间、计算资源的消耗，过长的推理速度在大部分移动端场景中还是难以接受的。

模型的复杂度在于模型结构的复杂以及海量的参数。模型文件中通常存储了两部分信息：结构与参数，如下图中简化的神经网络所示，每个方块对应一个神经元，每个神经元以及神经元中的连线上都是参数。

模型的推理即从左侧输入，通过与神经元进行计算，再通过连线加上权重传到下一层计算，到最终层得到预测输出。节点越多、连接越多，则计算量越大。

模型剪枝

对训练好的模型进行裁剪，是模型压缩的一个常见方式，网络模型中存在着大量冗余的参数，大量神经元激活值趋近于 0，通过对无效节点或者是不那么重要的节点进行裁剪，可以减少模型的冗余。

最简单粗暴的剪枝即 DropOut ，在训练过程中随机对神经元进行丢弃。
大部分的剪枝方法会计算重要性因子，计算神经元节点对于最终的结果的重要性，剪去不那么重要的节点。

模型剪枝的过程是迭代反复进行的，并非剪枝后直接用来推理，通过剪枝后的训练恢复模型的精度，模型的压缩过程是在精度和压缩比例之间的不断权衡，在可接受的精度损失范围内选择最好的压缩效果。

模型量化

为了保证较高的精度，大部分的科学运算都是采用浮点型进行计算，常见的是 32 位浮点型和 64 位浮点型，即 float32 和 double64。量化即是把高精度的数值转化为低精度。

如二值量化（1bit量化）会直接将 Float32/float64 的值映射到 1bit ，存储空间直接压缩 32 倍/ 64 倍，计算时加载所需内存同样也会变小，更小的模型尺寸，带来更低的功耗以及更快的计算速度。除此还有8bit量化、任意bit量化。

知识蒸馏

知识蒸馏则是将深度网络中所学到的知识转移到另一个相对简单的网络中，先训练一个 teacher 网络，然后使用这个 teacher 网络的输出和数据的真实标签去训练 student 网络。

工具

模型压缩的实现较为复杂，如果只是面向应用，大概了解其作用原理即可，可以直接用封装好的工具。

比如 Tensorflow Model Optimization Toolkit 提供了量化功能，其官方对于一些通用模型进行了压缩测试，如下表可以看到，对于 mobilenet 模型，模型大小由 10M+ 压缩到了 3、4M，而模型的精度损失很小。

百度的飞桨提供的 PaddleSlim 则提供了上述三种压缩方法。

总结

综上，开发一个 Web 端上的 AI 应用，流程即变成了

针对特定场景设计算法、训练模型

对模型进行压缩

转换为推理引擎所需要的格式

加载模型进行推理预测

对于算法而言，通用的深度学习框架已然提供了若干的通用预训练模型，可以直接用来做推理，也可以在其基础上训练自己的数据集。模型的压缩与推理也可以使用现有的工具。

昨天在做笔记整理的时候，看到一个面试题，如何实现水平垂直居中，虽然心里有一点点数，但是看到好几种答案，还是决定亲自动手验证一番，这验证一开始就出现了小问题，接着就像捅了个马蜂窝一样，各种疑惑扑面而来，而我又想弄清楚，折腾大半天，终于把问题锁定到了 line-height 和 vertical-align 身上。

大家现在应该都用 flex 布局，但是毕竟折腾好一会呢，好歹记录一下自己的收获哈哈

1.疑惑代码

    <div>

        <div>我要水平垂直居中</div>

    </div>

.container{

    border: 2px solid black;

    background-color: chartreuse;

    width: 200px;

    height: 200px;

    text-align: center;

    line-height: 200px;

}

.box{

    display: inline-block;

    line-height: normal;

    font-size: 1rem;

    vertical-align: middle;

    background-color: cornflowerblue;

}

你别说，还真居中了：

2.一些知识点

2.1 水平垂直对齐

有一些疑惑真的只是自己无知哈哈哈

• text-align 不仅可以作用在文本，还可以对行内元素和行内块元素有效果，设置水平对齐方式


• vertical-align 只对行内元素和行内块元素起作用，设置元素的垂直对齐方式

2.2 line-height

说来也蛮搞笑的，我对 line-height 的印象就是，当元素 height 等于 line-height 的时候，元素内部的文本就会垂直居中。但是昨天查资料的时候发现，这里面牵扯到了很多复杂的问题。

简单的和我一起学习一下吧，MDN 上边说的，line-height 可用于多行文本的间距或者是单行文本的高度等

看到这里大家可以去看一下，底下的两篇参考文章，得出以下结论：

• 没给元素设置高度时，元素高度采用的是 line-height 的高度，这个属性具有继承性。也自带默认值，所以当你给一个没有设置高度的元素设置 line-height:0;,即使里面有文本，它也是会塌陷的。


• 可以分为好几种盒子，当你设置 line-height 的时候，行内框是不会变化的，改变的是行距，它只由 font-size 的决定。这其实就是上边元素 height 等于 line-height 的时候，元素内文本会垂直居中的原因。


• 取值为 number 时，line-height 为 number 乘以当前元素的 font-size,取 normal 时一般就是 number 为 1.2

3. 疑惑产生

喜欢东拆拆西拆拆的我发现，上边代码注释掉 vertical-align: middle; 效果并没有变化，依旧垂直居中着，但是将它改成 vertical-align: top; 又起到作用了如下：

4.解决

真的，其实写博客之前我都没有理解为什么会出现这种怪异情况，但是写着写着就来灵感了，原来是这样哈哈哈

其实咱们把文字内容加一点，使它成为多行文本，效果就出来了，没注释掉 vertical-align: middle 的效果如下：

注释掉了，就是这个样子，没有垂直居中：

所以前面的只是巧合，因为是单行文本的原因，平衡上下行距，应该也不叫行距，应该就是为了平衡才会出现垂直居中的效果哦！

思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。

1. 安装及引入

// 将页面 html 转换成图片

npm install html2canvas --save  

// 将图片生成 pdf

npm install jspdf --save

在项目主文件 main.js 中引入定义好的实现方法并注册

import htmlToPdf from '@/utils/htmlToPdf';

// 使用 Vue.use() 方法就会调用工具方法中的install方法

Vue.use(htmlToPdf);

传送门：Vue中 Vue.use() 原理及使用

2. 封装导出 pdf 文件方法

配置详解

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);

第一个参数： l：横向  p：纵向

第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）；

第三个参数：可以是下面格式，默认为“a4”。如需自定义格式，只需将大小作为数字数组传递，如：[592.28, 841.89];

		   a0 - a10

		   b0 - b10

		   c0 - c10

  		   dl

		   letter

		   government-letter

		   legal

		   junior-legal

		   ledger

		   tabloid

		   credit-card

pdf.addPage() 在PDF文档中添加新页面，默认a4。参数如下：

pdf.addImage() 将图像添加到PDF。参数如下：

删除某页 pdf

let targetPage = pdf.internal.getNumberOfPages(); //获取总页

pdf.deletePage(targetPage); // 删除目标页

复制代码

保存 pdf 文档

pdf.save(`测试.pdf`);

复制代码

封装导出 pdf 文件方法（utils/htmlToPdf.js）

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

  install (Vue, options) {

    Vue.prototype.getPdf = function () {

      // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载

      let top = document.getElementById('pdfDom');

      if (top != null) {

        top.scrollIntoView();

        top = null;

      }

      let title = this.exportPDFtitle;

      html2Canvas(document.querySelector('#pdfDom'), {

        allowTaint: true

      }).then(function (canvas) {

        // 获取canvas画布的宽高

        let contentWidth = canvas.width;

        let contentHeight = canvas.height;

	      // 一页pdf显示html页面生成的canvas高度;

        let pageHeight = contentWidth / 841.89 * 592.28;

	      // 未生成pdf的html页面高度

        let leftHeight = contentHeight;

	      // 页面偏移

        let position = 0;

	      // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）

        let imgWidth = 841.89;

        let imgHeight = 841.89 / contentWidth * contentHeight;

        let pageData = canvas.toDataURL('image/jpeg', 1.0);

        let PDF = new JsPDF('l', 'pt', 'a4');

        // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度

        // 当内容未超过pdf一页显示的范围，无需分页

        if (leftHeight < pageHeight) {

          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

        } else {

          while (leftHeight > 0) {

            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

            leftHeight -= pageHeight;

            position -= 592.28;

            // 避免添加空白页

            if (leftHeight > 0) {

              PDF.addPage();

            }

          }

        }

        PDF.save(title + '.pdf')

      })

    }

  }

}

相关组件中应用

<template>

  <div class="wrap" >

    <div id="pdfDom" style="padding: 10px;">

      <el-table

        :data="tableData"

        border>

        <el-table-column prop="date" label="日期" width="250"></el-table-column>

        <el-table-column prop="name" label="姓名" width="250"></el-table-column>

        <el-table-column prop="address" label="地址"></el-table-column>

      </el-table>

    </div>

    <button type="button" style="margin-top: 20px;" @click="btnClick">导出PDF</button>

  </div>



</template>

 

<script>

export default {

  data() { 

    return {

      exportPDFtitle: "页面导出PDF文件名",

      tableData: [

         {

          date: '2016-05-06',

          name: '王小虎',

          address: '重庆市九龙坡区火炬大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '重庆市九龙坡区火炬大道'

        },{

          date: '2016-05-03',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-02',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-04',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '南京市江宁区将军大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '南京市江宁区将军大道'

        },, {

          date: '2016-05-04',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        },{

          date: '2016-05-01',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          date: '2016-05-08',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        }, {

          date: '2016-05-06',

          name: '王小虎',

          address: '南京市江宁区将军大道'

        }, {

          date: '2016-05-07',

          name: '王小虎',

          address: '武汉市洪山区文化大道'

        },

      ]

    } 

  }, 

  methods: {

    btnClick(){

      this.$nextTick(() => {this.getPdf();})

    },

  },  

}

</script>  

效果

待优化部分

分页时，页面内容被截断（欢迎留言讨论交流）；

不同内容，另起一页开始；思路：计算超出内容，占最后一页的高度（设定间距 = 页面高度 - 超出部分高度）。

作为一名前端开发者，你有没有遇到过这种头痛的事情。每次开发pc端的网页时，不管是官网还是管理后台，UI设计师都是按照1920*1080（16:9）的比例来给你提供设计稿的，导致你画页面的时候。会出现两种情况。

第一种按照设计师提供的设计稿比例画页面的话，导致在不同比例的屏幕上，就会呈现不同的样式效果，有的过大有的过小，这时候用户就会问你，你是不是写的bug。。。很无语

第二种就是按照设计师提供的比例按自适应的方式来画页面，这样导致页面的尺寸与设计稿不同，并且在不同设备也会有差别，这时候设计师跟用户就会跑过来说，这里是不是少了1px的单位，这里是不是写错了。。。很头疼

今天我就介绍一种可以解决pc端网页适配的方法，大家觉得有用的话，就给我个小小点赞，也可以在评论区留言。

PC实现适配也是用了rem这个css3属性，rem相对于根元素(即html元素)font-size计算值的倍数。这里以PC常见的分辨率1920px和1366px(14寸笔记本)为例说明。为了更好的说明，假设设计师给的设计稿是1920px，我们既要做1920px屏幕，也要给1366px的屏幕做适配。

现在我们随便取1920px设计稿一块区域，假设宽度273px，高度随意。那么在1366px屏幕上宽度应该显示多少呢？

我们将屏幕宽度等比分成100份

//1920分辨率屏幕

avg = 1920 / 100 = 19.20 px



//1366分辨率屏幕

avg = 1366 / 100 = 13.66 px

在1366分辨率屏幕应该显示宽度 = (1366 * 273) / 1920 最后是194.228125px

//1920分辨率屏幕定义根

font-size = 19.20px //即 1rem = 19.20px



//1366分辨率屏幕

font-size = 13.66px  //即 1rem = 13.66px

适配代码

html{

   font-size:19.20px;  /*默认以设计稿为基准*/

}



@media only screen and (max-width: 1366px) {

   html{

      font-size:13.66px;

   }

}

#test{

   width:14.21875rem;

}

id为test的盒子在1920屏幕宽度= 14.21875 * 19.20 最后是273

id为test的盒子在1366屏幕宽度= 14.21875 * 13.66 最后是194.228125

这样一来我们就适配了1920px和1366px屏幕。PC一般也就是这两个分辨率占多数，兼容了这两个分辨率屏幕基本就可以了。在说下国内基本没有在兼容IE8的浏览器了。基本都是IE9+，css3属性在IE9+上还是可以使用的。不过建议小伙伴们使用前还是确定下，浏览器兼容

最后在对上面补充点，有的小伙伴可能觉得每次设置宽高前都要手动的转换，实在是太麻烦，不要着急我为大家找了个sass方法。

// PX 转 rem 

@function px2Rem($px, $base-font-size: 19.2px) {

    @if (unitless($px)) { 

        //有无单位 

        @return ($px / 19.2) * 1rem; 

    } @else if (unit($px) == em) { 

        @return $px; 

    } 

    @return ($px / $base-font-size) * 1rem; 

}

测试下上面的方法

#test{

   width:px2Rem(273px) 

}

//输出

#test{

   width:14.21875rem;

}

大家将屏幕分辨率调整为1920px和1366px来查看灰色区域宽度。

    
侧边栏

        
测试p字体


    


    
内容

@function px2Rem($px, $base-font-size: 19.2px) {



@if (unitless($px)) { //有无单位



    @return ($px / 19.2) * 1rem;



} @else if (unit($px) == em) {



    @return $px;



}

@return ($px / $base-font-size) * 1rem;

}



*{

    margin:0;



    padding:0;

}



html{

    font-size:19.20px;

}



html,body{

 height:100%;

}



body{

    font-size:px2Rem(16px);

}



#app{

    position:relative;



    width:100%;



    height:100%;

}



.nav{

    position:fixed;



    left:0;



    top:0;



    width:px2Rem(273px);



    height:100%;



    background-color:#E4E4E4;



    transition:all .3s;



    z-index:11;

}



.content{



    position:absolute;



    left:px2Rem(273px);



    top:0;



    right:0;



    bottom:0;



    width:auto;



    height:100%;



    background-color:#CBE9CB;



    overflow-y:auto;



    z-index:10;

}



p{

    font-size:px2Rem(20px);

}



@media only screen and (max-width: 1366px) {

    html{

        font-size:13.66px;

    }

}

效果图

小伙伴们如果有更好的PC适配方案也可给我讲讲，欢迎在下方留言

sass下使用变量

height: calc(100% - #{px2rem(200px)});

不是标题党，这是一位leader在一次代码评审会对小组成员发出的“怒吼”，原因是在代码评审中发现很多地方还是采用ES5的写法，也不是说用ES5写法不行，会有BUG，只是造成代码量增多，可读性变差而已。

恰好，这位leader有代码洁癖，面对3~5年经验的成员，还写这种水平的代码，极为不满，不断对代码进行吐槽。不过对于他的吐槽，我感觉还是有很大收获的，故就把leader的吐槽记录下来，分享给掘友们，觉得有收获点个赞，有错误的或者更好的写法，非常欢迎在评论中留言。

ps：ES5之后的JS语法统称ES6！！！

一、关于取值的吐槽

取值在程序中非常常见，比如从对象obj中取值。

const obj = {

    a:1,

    b:2,

    c:3,

    d:4,

    e:5,

}

吐槽：

const a = obj.a;

const b = obj.b;

const c = obj.c;

const d = obj.d;

const e = obj.e;

或者

const f = obj.a + obj.d;

const g = obj.c + obj.e;

吐槽：“不会用ES6的解构赋值来取值吗？5行代码用1行代码搞定不香吗？直接用对象名加属性名去取值，要是对象名短还好，很长呢？搞得代码中到处都是这个对象名。”

改进：

const {a,b,c,d,e} = obj;

const f = a + d;

const g = c + e;

反驳

不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。

吐槽

看来你对ES6的解构赋值掌握的还是不够彻底。如果想创建的变量名和对象的属性名不一致，可以这么写：

const {a:a1} = obj;

console.log(a1);// 1

补充

ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。