JavaScript基础知识5点（2019.1.20）

前言：前两个星期经历了工作和朋友的变动，现在是稳定下来了，算是成长的“阵痛”吧。

1、setTimeout 和 setImmediate 哪个先执行？
（1）没有 I/O 操作：不确定谁先执行

setTimeout(() => {
  console.log('timeout');
}, 0);

setImmediate(() => {
  console.log('immediate');
});

---

（2）不管有多少个定时器，只要有 I/O 操作，setImmediate 优先执行

const fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout(() => {
    console.log('timeout');
  }, 0);
  setImmediate(() => {
    console.log('immediate');
  });
});

2、Http 请求中的 keep-alive 是什么？
（1）传统模式（非 keep-alive 模式）：
如果 HTTP 协议采用传统模式（非 keep-alive 模式），那么客户端每次发出一个 http 请求，服务器就要新建一个 tcp 连接，在请求完成后，再断开连接。

这有时会导致服务端处于 TIME_WAIT 状态，不停地调用 socket 的 accept() 和 close() ，影响性能。

（2）keep-alive 模式：
而 Http 采用 keep-alive 模式，客户端一旦和服务端新建 tcp 连接，就可以向服务端发送多个 http 请求，而不中断连接。

注意：合理设置 keep-alive timeout 时间非常重要，因为长时间的 tcp 连接容易导致系统资源无效占用。

3、React 中的 受控组件 和 不受控组件
（1）受控组件：表单输入元素（textarea、input、select）的值由 React 控制的组件

例：通过 React 的 setState() 方法来修改 form 中的 input 值，并由 state 对象来保存 这些值

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

（2）非受控组件：表单输入元素（textarea、input、select）的值保存在 DOM 中的组件

例：通过 ref 属性，获取 input 的 DOM 标签，并直接获取值

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    //关键语句
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          //通过 ref 命名获取 DOM 节点
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

4、数组扁平化处理：实现一个 flatten 方法，使得输入一个数组，该数组里面的元素也可以是数组，该方法会输出一个扁平化的数组
例：

// Example
let givenArr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
let outputArr = [1,2,2,3,4,5,5,6,7,8,9,11,12,12,13,14,10]

// 实现flatten方法使得
flatten(givenArr)——>outputArr

解：

    function flatten(array) {
      //只要数组中的元素有一个嵌套数组，就合并
      while(array.some(item=>Array.isArray(item)))
        array=[].concat(...array)

      console.log(array) //[1,2,2,3,4,5,5,6,7,8,9,11,12,12,13,14,10]
      return array
    }

5、在 4 的前提下做 去重 unique 和 排序 sort 处理
去重：

let unqiueArr=Array.from(new Set([...outputArr])) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 10]

排序：

let sortArr=outputArr.sort((a,b)=>{return a-b}) //[1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10, 11, 12, 12, 13, 14]

---

欢迎关注公众号：gh_042070ae6d0a ，每周分享前端干货和生活感悟！
（完）