发表于   |   分类于

昨天下午的笔试题。

第一题

问题

说出输出时间，并解释原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function wait(){
  return new Promise(resolve => {
    setTimeout(resolve, 10 * 1000)
  })
}

async function main(){
  console.time();
  let a = wait();
  let b = wait();
  let c = wait();
  await a;
  await b;
  await c;
  console.timeEnd();
}
main();

答案

这题还没想明白

阅读全文 »

发表于   |   分类于

有时看博客时，发现别人的博客有动漫人物背景，挺有意思的，遂自己也加一个。

hexo-helper-live2d

1
npm install --save hexo-helper-live2d

官网

模型

选择模型，我选了一只白猫，喵。

1
npm install live2d-widget-model-tororo

模型选择

配置

然后在_config.yml中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-tororo
  display:
    position: right
    width: 150
    height: 300
    hOffset: 15
    vOffset: 20
  mobile:
    show: true

更多详细配置

效果直接看博客啦。为了博客能加载快一点，把效果关了。

发表于

最近一段时间在学习使用d3的力导向图d3-force，绘制可以使用svg或canvas，但网上很多教程都是关于svg绘制的，因此在这个过程中也学习了一下svg.

svg

就像canvas绘图需要提供canvas元素一样，画svg需提供svg元素。

基本图形：<rect>、<circle>、<ellipse>、<line>、<polyline>、<polygon>

基本属性：fill、stroke、stroke-width、transform

此次只会说一下我用过的。

svg的坐标轴同样是以左上角为(0, 0)。

阅读全文 »

发表于   |   分类于

写几个目前记得的数组去重方法。

例子: var arr = [1, 2, 3, 3, 4]

Set

1
var arr1 = Array.from(new Set(arr));

循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Array.prototype.unique = function() {
    var arr = [];
    var isRepeat;
    for (let i = 0; i < this.length; i++) {
        isRepeat = false;
        if (arr.includes(this[i])) {
            isRepeat = true;
        }
        if (!isRepeat) {
            arr.push(this[i]);
        }
    }
    return arr;
}

indexOf

1
2
3
4
5
Array.prototype.unique = function() {
    return this.filter((item, index) => {
        return this.indexOf(item) === index;
    })
}

Map

1
2
3
4
5
6
Array.prototype.unique = function() {
    var map = new Map();
    return this.filter((item, index) => {
        return map.get(item) ? false : map.set(item, true)
    })
}

这是目前从网上看完后，自己能够记住的，后续看能不能多记几种吧。

祝圣诞快乐。Merry Xmax! :christmas_tree:

发表于   |   分类于

通常我们遇到类型转换的问题，都是在if()、==、+运算等遇到的隐式转换问题，强制转换的就不说了。
隐式转换涉及以下几点：

  • ToString
  • ToNumber
  • ToBoolean
  • ToPrimitive

ToString

1
2
3
4
5
6
null // "null"
undefined // "undefined"
true // "true"
{a: 'hello'} // "[object Object]"
1.07e+21 // "1.07e+21"
[1,2,3] // "1,2,3"

突发奇想 function的toString

1
2
function a(){}
a.toString(); // "function a(){}"
阅读全文 »

发表于   |   分类于

之前在看同事的问题时，她和我说了一句：“因为它是非受控组件……”。说实话，我是第一次接触到这样的概念，趁今晚有学习的念头，就了解一下吧。

react中的受控和非受控，是针对表单元素而言的。

受控组件

先看个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";

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

  onChange = e => {
    this.setState({
      value: e.target.value
    });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.onChange} />
        <span>{this.state.value}</span>
      </div>
    );
  }
}

export default App;
阅读全文 »

发表于   |   分类于

学习的是最新的v5版本，api区别于v3。

本次学习主要通过完成一个简单的力导向图, 来学习d3部分api的使用。

前提

安装d3

1
npm install d3 --save

引用d3

1
import * as d3 from 'd3';
阅读全文 »

发表于   |   分类于

背景

曾经的我天真地以为只要元素设置了定位，再设置z-index的话，z-index便决定了它在z轴的层叠顺序。

然而，前不久，有同事在解决bug时讨论了一下这个问题，发现事情并不简单。它还跟元素的父元素有没有z-index有关，也可以说是跟层叠上下文有关。

举个例子

阅读全文 »

发表于   |   分类于

不论是在之前看es6的 Proxy 文档，还是我在项目中，都看到了 Reflect 的影子，之后我也尝试用 Reflect 来优化自己的代码，今天认真的学习一下。

为了使得代码更容易维护，提高代码的可阅读性，把一些对对象的操作、或是一些方法归到一个类，也可以说是一个对象中，而这个对象就是 Reflect 。 Reflect 中的很多方法在其他对象中可以找到，也许这些方法以后会从其他对象中剖离，这是一个渐进的过程。

静态方法

看ES6入门的文档里，Reflect的静态方法有13个。

阅读全文 »

发表于

之前遇到一个问题

1
DataCloneError:Failed to execute 'pushState' on History: Symbol(xxx) could not be cloned

首先我们复现一下问题。

阅读全文 »