本周学习总结

p5.js

是一个画图的工具

angular的基本使用

angular.json

 "scripts": [
              "./node_modules/p5/lib/p5.min.js",
              "./node_modules/p5/lib/addons/p5.sound.js"
            ]

import * as p5 from 'p5';
export class TextThreeComponent implements OnInit, AfterViewInit {
  constructor() {
  }
  ngAfterViewInit() {

  }

  ngOnInit(): void {
    new p5(p => {
      let x = 100;
      let y = 100;

      p.setup = () => {
        p.createCanvas(700, 410);
      };

      p.draw = () => {
        p.background(0);
        p.fill(255);
        p.rect(x, y, 50, 50);
      };
    }, document.querySelector('#ccc'));

  }
}

function preload(){
    // 预加载
}
function setup(){ // 首函数
    
}
function draw(){ // 绘制函数,1s->60次
    
}

学习网址

https://overflowjs.com/
https://zhuanlan.zhihu.com/DepthInAngular
https://t.codebug.vip/tag-113.htm
https://discourse.processing.org/
https://codinglatte.com/angular/
https://ultimatecourses.com/blog/

DOM和window的区别

Document 就是整个HTML页面,而且Document 也是window对象的一个属性,可以作为全局变量来访问

window.onload 在DOM准备就绪并且所有内容加载完成时触发

document.onload 在DOM准备就绪时(可能在加载图片和其他外部内容之前) 触发

为什么Math.min()>Math.max()

简单理解如果没有参数,有个初始化的值

Math.max() 从搜索值 -Infinity开始

Math.min() 从搜索值 Infinity 开始

如果有一个参数不能转换为数字,结果为NaN

放一段v8源码的片段

function MathMax(arg1, arg2) {  // length == 2
  var length = %_ArgumentsLength();
  if (length == 2) {
    arg1 = TO_NUMBER(arg1);
    arg2 = TO_NUMBER(arg2);
    if (arg2 > arg1) return arg2;
    if (arg1 > arg2) return arg1;
    if (arg1 == arg2) {
      // Make sure -0 is considered less than +0.
      return (arg1 === 0 && %_IsMinusZero(arg1)) ? arg2 : arg1;
    }
    // All comparisons failed, one of the arguments must be NaN.
    return NaN;
  }
  var r = -INFINITY;
  for (var i = 0; i < length; i++) {
    var n = %_Arguments(i);
    n = TO_NUMBER(n);
    // Make sure +0 is considered greater than -0.
    if (NUMBER_IS_NAN(n) || n > r || (r === 0 && n === 0 && %_IsMinusZero(r))) {
      r = n;
    }
  }
  return r;
}

我们可以知道Math.max() 是for循环实现

关于弹出框滚动和大盒子滚动的问题

.modal-container {  默认小盒子不滚
  pointer-events: none; 
  opacity: 0;
}
.modal-container.is-open { //当鼠标点击到小盒子,就打开大盒子的滚动
  pointer-events: all; 
  opacity: 1;
}

MDN中的fill

console.log([].fill.call({length: 3}, 10))
// { '0': 10, '1': 10, '2': 10, length: 3 }

下载

  let a = document.createElement('a');
    a.href = xxx
    a.download = 名称
    a.style.display="none";
    a.click();

console.table

有对象数组时,console.table()

解构

let obj = {name: 'xxx', age: 13};
const func = ({name}) => {
  return '我叫' + name;
};
console.log(func(obj));
// 我叫xxx

查看github不错的项目

https://awesomeopensource.com/projects/javascript

单引号和双引号的区别

结论: 除了转移时,其他两种都相同

''
""
``
但是不要忘记啦 JSON的时候只能用双引号

复习下数组的方法

class Obj {
    constructor(obj) {
        this.obj = new Object(obj);
    }

    indexOf(searchElement, fromIndex = 0) {
        for (let i = fromIndex; i < this.obj.length; i++) {
            if (this.obj[i] === searchElement) return i;
        }
        return -1;
    }

    lastIndexOf(searchElement, fromIndex = this.obj.length - 1) {
        for (let i = fromIndex; i >= 0; i--) {
            if (this.obj[i] === searchElement) return i;
        }
        return -1;
    }

    includes(searchElement, fromIndex = 0) {
        let i = fromIndex;
        while (i < this.obj.length) {
            if (this.obj[i++] === searchElement) return true;
        }
        return false;
    }

    fill(value, start = 0, end = this.obj.length - 1) {
        let i = start-1;
        while (++i <= end){
          this.obj[i++] = value;
        }
        return this.obj;
    }

    join(separator = ",") {
        let str = "";
        let i = 0;
        for (const value of this.obj) {
            ++i;
            str += value + (i < this.obj.length ? separator : "");
        }
        return str;
    }

    findIndex(callback) {
        for (const key in this.obj) {
            if (callback(this.obj[key], key)) return key;
        }
        return null;
    }

    find(callback) {
        for (const key in this.obj) {
            if (callback(this.obj[key], key)) return this.obj[key];
        }
        return undefined;
    }

    filter(callback) {
        const obj = {};
        for (const key in this.obj) {
            if (callback(this.obj[key], key)) obj[key] = this.obj[key];
        }
        return obj;
    }

    forEach(callback) {
        for (const key in this.obj) {
            this.obj[key] = callback(this.obj[key], key);
        }
        return this.obj;
    }

    map(callback) {
        const obj = {};
        for (const key in this.obj) {
            obj[key] = callback(this.obj[key], key);
        }
        return obj;
    }

    some(callback) {
        for (const key in this.obj) {
            if (callback(this.obj[key], key)) return true;
        }
        return false;
    }

    every(callback) {
        for (const key in this.obj) {
            if (callback(this.obj[key], key)) continue;
            return false;
        }
        return true;
    }

    reduce(callback, initialValue) {
        let accumulator = initialValue;
        for (const key in this.obj) {
            accumulator = callback(accumulator, this.obj[key], key);
        }
        return accumulator;
    }
}

一种新的反转方式

原型
const _reverse = str => {
  let result = "";
  for (let item of str) {
    result=item+result
  }
  return result
}
-----
    
console.log('abc'.split('').reduce((acc, val) => val + acc));
// cba

不错的算法

https://medium.com/siliconwat/algorithms-in-javascript-b0bed68f4038