Questions tagged «javascript»

似乎在JavaScript（ES6）类中super.__proto__ === this.__proto__。 您能解释为什么会这样吗？在不同的浏览器上，行为似乎是一致的，因此我怀疑这是在规范中的某个地方指定的。 考虑以下代码： class Level1 { myFunc() { console.log('Level1'); } } class Level2 extends Level1 { myFunc() { console.log('Level2'); } } class Level3 extends Level2 { myFunc() { console.log('Level3 BEGIN ' + Math.random()); super.__proto__.myFunc(); console.log(super.__proto__ === this.__proto__); console.log('Level3 END'); } } const foo = new Level3(); foo.myFunc(); 运行代码段隐藏结果展开摘要 …

10 javascript  ecmascript-6 

我有一个ES6样式的函数，该函数是使用组成的asyncPipe。 import { getItemAsync } from 'expo-secure-store'; const asyncPipe = (...fns) => x => fns.reduce(async (y, f) => f(await y), x); const getToken = () => getItemAsync('token'); const liftedGetToken = async ({ ...rest }) => ({ token: await getToken(), ...rest, }); const liftedFetch = ({ body, route, token, method = …

10 javascript  ecmascript-6  functional-programming  intellisense  jsdoc 

更新5 创建了另一个小提琴以显示预期的外观。添加了不可见的穹顶和魔方相机，并使用了环境贴图；就我而言，由于已经提到的原因，不应使用这些技术。 显示代码段 var MatcapTransformer = function(uvs, face) { for (var i = uvs.length; i-- > 0;) { uvs[i].x = face.vertexNormals[i].x * 0.5 + 0.5; uvs[i].y = face.vertexNormals[i].y * 0.5 + 0.5; } }; var TransformUv = function(geometry, xformer) { // The first argument is also used as an array …

10 javascript  three.js  geometry  texture-mapping  uv-mapping 

我在理解javaScript时遇到了麻烦promises。我写了以下代码： var p = new Promise(function(resolve,reject){ reject(Error("hello world")); }); setTimeout(()=>p.catch(e=>console.log(e)),5000); 我立即在Chrome开发者控制台中看到以下内容： 但是，等待5秒钟后，该消息会自动变为黑色，如下图所示： 我以前从未在javaScript代码和开发人员控制台之间看到过这种行为，在这里，我的javaScript代码可以在开发人员控制台中“修改现有内容”。 因此，我决定resolve通过编写以下代码来查看是否发生相同的情况： var p = new Promise(function(resolve,reject){ resolve("hello world"); }); setTimeout(()=>p.then(e=>console.log(e)),5000); 但是在这种情况下，我的开发者控制台要等5秒钟后才显示任何内容，然后打印到hello world。 为什么在调用时将resolve和reject区别开来？ 额外 我也写了这段代码： var p = new Promise(function(resolve,reject){ reject(Error("hello world")); }); setTimeout(()=>p.catch(e=>console.log("errors",e)),5000); setTimeout(()=>p.catch(e=>console.log("errors 2",e)),6000); setTimeout(()=>p.catch(null),7000); 这将导致多个输出到开发人员控制台。红色错误在时间0处出现，红色在5秒处变为带有文本的黑色errors hello world，然后在6秒钟处出现新的错误消息errors 2 hello world，然后在7秒钟处出现红色错误消息。现在我对一个reject实际被调用多少次感到非常困惑...我迷路了...

10 javascript  asynchronous  promise 

我目前正在为Bot Land编写一些脚本。Bot Land是一种实时策略游戏，您无需使用鼠标和键盘来控制自己的单位，而是可以编写代码来通过API控制机器人，然后让机器人与其他机器人进行对抗。如果您熟悉SC2中的单位，则可以创建类似于眨眼潜行者，攻城坦克，医护人员和超能力的机器人。（对于软件工程师来说，这是一个非常有趣的游戏，但这超出了此问题的范围。） Bot控件的复杂度从三个级别提高：默认的AI，类似于Scratch的编程语言以及减少的JavaScript集合，称为BotLandScript。尽管BotLandScript的内置编辑器是合理的，但是您必须将所有代码作为一个文件上载，并在各处使用全局顶级功能。自然，如果您的代码开始变长并且不同的机器人共享相同的功能，那么一段时间后，这将变得很痛苦。 为了方便为多个机器人编写代码，减少使用裸露的JS编码时发生意外错误的机会，并增加击败其他玩家的机会，我设置了上述TypeScript项目，以提供一个公共库以及每个机器人的代码。当前目录结构大致类似于以下内容： lib/ bot.land.d.ts common.ts BlinkStalker/ BlinkStalker.ts tsconfig.json Artillery/ Artillery.ts tsconfig.json SmartMelee/ SmartMelee.ts tsconfig.json lib是bot之间共享的通用代码，并提供（非TS）Bot Land API的TypeScript定义。然后，每个机器人都有自己的文件夹，其中一个文件包含机器人代码，另一个文件包含样板tsconfig.json： { "compilerOptions": { "target": "es3", "module": "none", "sourceMap": false, "outFile": "bot.js" }, "files": [ "MissileKite.ts" ], "include": [ "../lib/**/*" ] } tsconfig.json构建bot.js完每个文件后，它会创建一个对应文件，其中包含来自bot本身的转译代码以及中的所有代码common.js。此设置由于以下几个原因而欠佳：需要大量重复的样板，使其很难添加新的bot，为每个bot包含很多不必要的代码，并且要求分别构建每个bot。 但是，根据我到目前为止的研究，似乎没有一种简单的方法可以完成我想要的事情。特别是，使用new tsc -b选项和引用不起作用，因为这需要对代码进行模块化，而Bot Land需要一个文件，且所有功能都在顶层定义。 达成以下尽可能多的最佳方法是什么？ 不需要新的样板即可添加新的机器人（例如，tsconfig.json每个机器人不需要） 使用import了常用的功能，以避免输出无用的代码，但随后... 仍以Bot …

10 javascript  typescript  visual-studio-code  tsconfig 

在开发环境中时，我的应用程序可以正常工作。在生产环境中时，它崩溃并显示以下错误： Uncaught TypeError: (0 , _react.useEffect) is not a function 这发生在我导入React和useEffect的文件中，如下所示： import React, { useEffect } from 'react' const X = () => { useEffect(() => { ... }) ... } 在此行下添加console.log确认在生产中useEffect确实是未定义的，在dev中则是预期的功能。 我检查了package.json，yarn.lock和node_modules中是否存在引入了useEffect的16.8.0以下的任何react或react-dom版本。但是所有内容都是16.13.1，它们是主要依赖项，我确实尝试清理了纱线缓存，删除了node_modules＆yarn.lock，然后重新安装。 我尝试将其添加和删除peerDependencies失败。 我检查一下以确保没有运行两个独立版本的React，但要保存window.React1 = React在库和window.React2 = React我的应用程序中并检查 window.React1 === window.React2 是真的，所以也不是。 最后，我还尝试将React别名为node_modules中的特定别名，但是没有任何运气。 我发现可行的唯一解决方案是按如下方式导入它： import React from 'react'; const …

9 javascript  reactjs  react-hooks  parceljs 

try { const val = 'correct value'; (() => { ((arg = val) => { const val = 'ignored value'; alert(arg); })(); })(); } catch (err) { alert(err.message || 'Unknown error'); } 运行代码段隐藏结果展开摘要 在OS X Chrome，OS X Safari，Android Chrome，Windows Chrome，Windows Firefox 甚至 Windows Edge上，它会警告“正确值”。在iOS Safari和iOS Chrome上，它会提示“找不到变量：val”。 以下代码段均适用于iOS： 不使用默认参数（代码段2）： try { …

9 javascript  ios  ecmascript-6  scope 

我的页面上有一个iframe。由于Safari阻止了第三方Cookie，我正在尝试使用“开发人员指南”中此处建议的存储访问API：https : //webkit.org/blog/10218/full-third-party-cookie-blocking-and-more /。我从文档中复制了以下代码： <script type="text/javascript"> window.addEventListener('load', () => { document.getElementById('test-button').addEventListener('click', () => { document.hasStorageAccess().then(hasAccess => { console.log('hasAccess: ' + hasAccess); if (!hasAccess) { return document.requestStorageAccess(); } }).then(_ => { console.log('Now we have first-party storage access!'); document.cookie = "foo=bar"; console.log(`document.cookie: ${document.cookie}`); }).catch(_ => { console.log('error'); }); }); }); </script> <button …

9 javascript  iframe  safari  storage-access-api 

从文件对话框中选择文件并单击“确定”后，如何改善此代码以消除不响应/页面滞后？ 我一直在测试大小约为50-100 KB的文件 function handleFileSelect(evt) { var files = evt.target.files; // FileList object // files is a FileList of File objects. List some properties. var output = []; for (var i = 0, f; f = files[i]; i++) { output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, …

9 javascript  html 

我有一个React组件，其中包括Internet连接的可用性标志。UI元素必须根据状态实时动态更改。同样，功能随着标志的改变而有所不同。 我当前的实现使用间隔每秒钟使用Axios轮询一次远程API，并相应地更新状态。我正在寻找一种更精细，更有效的方法来执行此任务，以最小的计算成本消除状态的1秒错误。仅当设备具有外部Internet连接时才视为在线 当前实施： class Container extends Component { constructor(props) { super(props) this.state = { isOnline: false }; this.webAPI = new WebAPI(); //Axios wrapper } componentDidMount() { setInterval(() => { this.webAPI.poll(success => this.setState({ isOnline: success }); }, 1000); } render() { return <ChildComponent isOnline={this.state.isOnline} />; } } 编辑： 寻找一种能够检测外部Internet连接的解决方案。设备可以连接到没有外部连接的局域网。因此，它被认为是脱机的。仅当设备可以访问外部Internet资源时，才考虑联机。

9 javascript  reactjs  axios 

我有一个包含其他元素的容器元素，但是根据屏幕尺寸的不同，它们的各个部分会被莫名其妙地切除。当调整HTML页面的宽度（通过单击并拖动它）时，您可以在我的代码沙箱链接中观察到这种行为。如何确保仅渲染主容器边框，并且子元素没有任何影响？ https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` height: 35%; width: 100%; display: flex; border: none; …

9 javascript  css  reactjs 

我有一个组件，它以100毫秒的间隔“延迟加载”一些注释。 当我使用setTimeout时，它确实很慢。 零件 <div *ngFor="let post of posts"> <app-post [post]="post" ></app-post> </div> 这使我的应用程序延迟（平均fps 14，空闲时间51100ms）： while(this.postService.hasPosts()){ setTimeout(()=> { this.posts.push(this.postService.next(10)); },100); } 这使我的应用程序流畅（平均fps 35，空闲时间40800ms） while(this.postService.hasPosts()){ timer(100).subscribe(()=> { this.posts.push(this.postService.next(10)); }); } 有什么解释，为什么rxjs计时器能更好地工作？ 我使用firefox进行了运行时分析。在第一个示例中，帧速率降至14 fps；在另一个示例中，帧速率降至35 fps。 甚至空闲时间也减少了20％。 此方法更加平滑（平均fps 45，空闲时间13500ms）： interval(100).pipe(takeWhile(this.postService.hasPosts()).subscribe(()=> { this.posts.push(this.postService.next(10)); }); }

9 javascript  angular  typescript  rxjs 

我已经编写了一个脚本（在这里用户的帮助下），该脚本允许我扩展选定的div并通过相等地拉伸以适合剩余的空间（使第一个div的宽度固定）来使其他div相应地表现。 这是我要实现的目标的图片： 为此，我使用flex和transitions。 它运作良好，但是jQuery脚本指定了“ 400％”的拉伸值（非常适合测试）。 现在，我希望所选的div扩展/缩小以完全适合内容，而不是“ 400％”固定值。 我不知道该怎么做。 可能吗 ？ 我尝试克隆div，使其适合内容，获取其值，然后使用该值转换BUT，这意味着我的初始宽度为百分比，但目标值为像素。那不行 而且，如果我将像素值转换为百分比，则无论出于何种原因，结果都不完全适合内容。 在所有情况下，这似乎都是实现我想要的目标的一种复杂方法。 是否没有可以转换的flex属性以适合选定div的内容？ 这是代码（为了便于阅读，对其进行了编辑/简化）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; …

9 javascript  jquery  css  flexbox  css-transitions 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引用的形式回答。 3个月前关闭。 此函数采用一串DNA（例如“ GTCA”）并返回包含正确匹配的DNA对的数组。 function pairDNA(dna) { const pairs = [] for (let i = 0; i < dna.length; i ++) { if (dna[i] === "C" | dna[i] === "c") { pairs.push("CG"); } else if (dna[i] === "G"| dna[i] === "g") { pairs.push("GC"); } else if (dna[i] === "T"| …

9 javascript  arrays  for-loop 

我正在尝试用Java重写以下Javascript函数： function normalizeHash(encondindRound2) { if (encondindRound2 < 0) { encondindRound2 = (encondindRound2 & 0x7fffffff) + 0x80000000; } return encondindRound2 % 1E6; } 我的Java适应： public long normalizeHash(long encondindRound2) { if (encondindRound2 < 0) { encondindRound2 = (((int) encondindRound2) & 0x7fffffff) + 0x80000000; } return (((int) encondindRound2) % 1_000_000); } 当我通过时-1954896768，Javascript版本返回70528，而Java返回-896768。我不知道为什么。区别似乎始于if条件：在if后面的Javascript函数中encodingRound2 = …

9 javascript  java