小编Joj*_*oji的帖子

我一直在阅读著名的 webgl 教程https://webgl2fundamentals.org/webgl并学习如何使用bufferData将数据放入缓冲区。本教程bufferData广泛使用这样的形式

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

这里的第二个参数是我们想要发送到 GPU 缓冲区的实际数组或数据。然而，我今天遇到了 API 的这种新用法。

gl.bufferData(gl.ARRAY_BUFFER, 8*maxNumVertices, gl.STATIC_DRAW);

这里第二个参数表示缓冲区的大小。

所以我对此很困惑。我在 MDN https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData上查找了这个 API ，它说

// WebGL1: 
void gl.bufferData(target, size, usage); 
void gl.bufferData(target, ArrayBuffer? srcData, usage); 
void gl.bufferData(target, ArrayBufferView srcData, usage); 

// WebGL2: 
void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length);

这是否意味着对于 webgl1.0，我们可以将实际的数据数组或缓冲区的大小作为第二个参数传递给 API。但是对于WebGL2.0，我们只能将实际的数据数组传递给API？

对此我还不清楚。请帮忙。

你好，我试图想出一个函数来返回斐波那契序列，这是一个数组，而不是通常的最后一个斐波那契数。

function fib(n,arr=[0]) {
  if (n===0||n===1) {
    arr.push(n)
    return arr;
  }
  let arr2 = fib(n-2);
  let arr1 = fib(n-1);
  arr1.push(arr2[arr2.length-1]+arr1[arr1.length-1]);
  return arr1;
}

它工作正常，但我对这里的硬编码 arr=[0] 不满意。我尝试将 arr=[] 改为，但最终我的序列排除了数组中本应存在的前 0 个条目。

我确信有更好的方法来解决这个问题。

PS：我想使用递归方法来解决这个问题，我知道它的指数时间复杂度很差，但我只是想练习我的递归编程技能。

我有一个enum这样的

enum A {
  Car = "car",
  Bike = "bike",
  Truck = "truck"
}

我想要得到一个类型car | bike | truck

我知道这keof typeof A可以给我Car | Bike | Truck，但我需要这里的值而不是键。

我想运行一个执行此操作的函数：

const input =“hellooooloo”;
const results = getRepeated(input);
console.log(results) // [(2,3), (4,7), (9,10)]

它从字符串中返回连续重复字符的起始和结束索引的索引数组。

这是我的尝试，它是一个 O(n^2)。我想知道是否有更优雅和有效的方法来实现这一目标

const input = 'hellooooloo'; 
const results = getRepeated(input); // // [(2,3), (4,7), (9,10)]

function getRepeated(string) {
    const results = []
    if(string.length < 2) return results
    for(let i = 0; i < string.length - 1; i++) {
        if(i > 1 && string[i] === string[i-1]) {
            continue
        }
        let startIndex = i
        let endIndex = i
        for(let j = i + 1; j < string.length; j++) …

class RandomObject {
  constructor() {
    this.method1 = function() {}
  }

  method2() {
    // only this is non enumerable
  }

  method3 = function() {}
}

const object = new RandomObject()

for (const prop in object) {
  console.log(prop) // 'method1', 'method2'
}

我发现只有method1andmethod2是在循环中打印出来的for...in，这意味着它们是可枚举的。但是method2不会出现在循环中，这意味着它是不可枚举的。我想知道是什么造成了这里的差异？为什么method2在这种情况下它是不可枚举的？

另外，我发现如果我直接在对象文字中定义该方法，那么它又是可枚举的：

const object2 = {
  method2() {
    // Now this is enumerable
  }
}

我想写出一个函数来编辑某个范围内的字符串，如果提供的话，可能会为该范围交换另一段字符串。范围是这样工作的 - 开始索引是包含的，结束索引是不包括的（比如slice），如果范围大于字符串的长度，那么它会选择到结尾。如果起始索引超出字符串范围，则忽略整个操作。例如，

const string = 'HELLO'
const startIdx = 1
const endIdx = 3

editText(string, startIdx, endIdx) // should return 'HLO' 

const string = 'HELLO'
const startIdx = 1
const endIdx = 3
const textToAdd = 'y there'

editText(string, startIdx, endIdx) // 'HLO' 

const string = 'HELLO'
const startIdx = 2
const endIdx = 6
const textToAdd = 'y there'
editText(string, startIdx, endIdx,textToAdd)  // 'HEy there'

这是我的尝试：

function editText(string, startIdx, endIdx, textToAdd) {
    if(startIdx < 0 || …

我有一个基本的记忆功能写为

function memo(func) {
  const cache = new Map()

  return function (...args) {
    const cacheKey = args.join('-')
    if (!cache.has(cacheKey)) {
      const value = func(...args)
      cache.set(cacheKey, value)
      return value
    }

    return cache.get(cacheKey)
  }
}

它不适用于递归调用自身的函数。例如：

const fibonacci = (n) => {
  if (n <= 1) return 1
  return fibonacci(n - 1) + fibonacci(n - 2)
}

const memoizedFib = memo(fibonacci)
memoizedFib(20)

在里面fibonacci，它仍然进行大量重复计算。

我想避免这种情况的一种方法是将记忆插入到函数的实现中。

const cache = new Map();
const memoFibonacci = (n) => {
  if (memory.has(n)) return memory.get(n);
  if …

我正在使用 Gatsby 和 React 开发一个网站。而且我发现每次刷新页面，都会加载 1.6 MB / 1.6 MB 的资源。我是网络开发的新手，所以我真的不知道这是下载很多还是只是中等数量。

但是我确实注意到一个问题，即在我在 Netlify 上部署我的网站后，字体文件被请求两次，因此它被下载两次。您可以在屏幕截图中看到请求了两个 Roboto-Light 文件。

这是我在代码库中包含字体文件的方式。

首先我设置了一个 webpack 别名 '@fonts': path.resolve(__dirname, 'src/fonts'),

然后在src/styles/fonts.js我有

import RobotoLight from '@fonts/Roboto/Roboto-Light.ttf';
export { RobotoLight};

最后在我的src/styles/GlobalStyle.js我有

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@font-face {
  font-family: 'Roboto';
  src: url(${fontFamilies.RobotoLight}) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
...

所以每当我需要应用这种RobotoLight字体时，我只需将元素设置font-family为Roboto.

我不知道为什么我的字体被下载了不止一次，我不知道这种包含字体的方式是否是最佳实践。我也想知道1.6 MB / 1.6 MB resources是不是太多了。

我有一个组件Layout，我用它来设计我的应用程序的布局，这就是我介绍的地方react-helmet

组件是这样的

import React from 'react';
import { Global, css } from '@emotion/core';
import Helmet from 'react-helmet';
import Header from '../components/header';

const Layout = ({ children }) => (
  <>
    <Global
      styles={css`
        // some CSS style
    />

    <Helmet>
      <html lang="en" />
      <title>title</title>
      <meta name="description" content="site description" />
    </Helmet>

    <Header />
    <main
      css={css`
       // some css
      `}
    >
      {children}
    </main>
  </>
);

export default Layout;

添加后<Helmet />，出现此错误。如果我<Helmet />从组件中删除，错误就会消失。显然我没有忘记导出我的Layout组件，所以我真的不知道它来自哪里。

我有一个函数，它接受一组异步/同步函数，并按照输入传递的顺序依次调用每个函数（而不是并行）。

例如：

const sleep = (delay) => new Promise((r) => setTimeout(r, delay))

const fn1 = async () => {
  await sleep(2000)
  console.log('fn1')
  return 'fn1'
}

const fn2 = async () => {
  await sleep(3000)
  console.log('fn2')
  return 'fn2'
}

const fn3 = async () => {
  await sleep(1000)
  console.log('fn3')
  return 'fn3'
}

const fn4 = () => {
  console.log('fn4')
  return 'fn4'
}

function serializeAsyncFns(fns) {
  return fns.reduce(
    (promise, fn) => promise.then(() => fn()),
    Promise.resolve()
  )
}

serializeAsyncFns([fn1, fn2, fn3, …