小编dou*_*Ort的帖子

在Chrome中的Worker中使用`console.log`两次打印相同的消息

几乎就是标题所说的.更奇怪的是,只有当您在新选项卡中运行程序时才会发生这种情况,如果您只是刷新页面,则每个页面只会有一条消息console.log.

这是main.js:

const worker = new Worker('worker.js');
Run Code Online (Sandbox Code Playgroud)

这是worker.js:

console.log('Foo bar!');
Run Code Online (Sandbox Code Playgroud)

这是index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Web Workers</title>

<style></style>
</head>
<body>

<script src="main.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Firefox中没有发生同样的情况.我使用的是Chrome版本65,更奇怪的是重复邮件似乎属于"上下文"下拉列表中没有列出的上下文,因此当我尝试过滤除发送的所有控制台消息之外列出的唯一消息worker.js是第一条消息,第二条消息(副本)似乎属于无上下文.

@ bean的回答显示,已经有一个问题(从2018年2月开始,我相信)尚未得到回答.如果没有人回答这个问题,我会考虑在Chrome的开发论坛中提出一个问题/无论如何.

javascript webkit google-chrome web-worker console.log

14
推荐指数
1
解决办法
903
查看次数

什么是JSON安全对象?

在Kyle Simpson的书" 你不了解JS:这个和对象原型"中,他写了关于如何复制对象的主题:

一个子集解决方案是,JSON安全的对象(即,可以序列化为JSON字符串,然后重新解析为具有相同结构和值的对象)可以轻松复制:

var newObj = JSON.parse( JSON.stringify( someObj ) );
Run Code Online (Sandbox Code Playgroud)

当然,这需要您确保您的对象是JSON安全的.在某些情况下,这是微不足道的.对于其他人来说,这还不够.

什么是"JSON安全"对象?我用JavaScript运行了一些测试,到目前为止大多数事情(数组,数字,字符串,对象)都可以使用上面的行复制,但方法(foo.bar),当试图复制方法时,undefined插入方法的位置,重复的对象.

javascript json

8
推荐指数
1
解决办法
1331
查看次数

在2个空数组的松散相等比较中发生了什么

我正在努力了解这个代码片段在基本级别上的工作原理

if([] == ![]){
console.log("this evaluates to true");
}
Run Code Online (Sandbox Code Playgroud)

请帮我理解我错在哪里.我的想法:

  1. 首先是运算符优先级,所以先!评估==.
  2. ToPrimitive调用Next 并[]转换为空字符串.
  3. !操作员注意到它需要转换""boolean所以它接受该值并使其成为false然后否定true.
  4. ==喜欢比较数字,所以在我的思考中true,1并将[]其转换为""然后0

为什么它会起作用呢?我在哪里弄错了?

javascript arrays coercion

7
推荐指数
2
解决办法
632
查看次数

如何将Math.max与对象数组一起使用?

我想选择一个对象数组中的最大数字,所以例如,我想获得x拥有最大数字的属性(在这个例子中,maximum应该是200):

var myArr = [{x:100,y:200},{x:200,y:500}];

//does not work:
var maximum = Math.max.apply(Math,myArr.x);
Run Code Online (Sandbox Code Playgroud)

javascript

6
推荐指数
2
解决办法
5356
查看次数

JavaScript:声明与表达式vs语句

在过去的几个小时里,我一直试图找到3之间的区别,而不仅仅是区别,我也一直试图找出哪些是同义词,MDN调用所有声明"语句",所以我认为这是真的.然而,我读过的文章和SO问题都没有提供一个类别的备忘单来区分3(或2,表达式与陈述).

我在语句中注意到的一点是它们都以某种方式涉及一个特殊的JavaScript关键字,如breakforvar.文章说,表达式评估某些内容,而语句执行操作.什么是功能呢?它是一个语句表达式混合(因为它在调用时都执行一个动作,并返回一个值)?现在,我假设情况并非如此,因为函数调用不涉及JavaScript关键字.

然后有声明,是每个声明也是一个声明?

我也知道表达式声明20 + 5 * 2 / 3;,但这些几乎没用吗?为什么有人会用这样的行污染他们的代码?

如果有人可以提出上述问题(或者至少其中一些问题),或者有人可以提供某种类型的备忘单,我会非常高兴.为什么在如此流行的语言中看起来如此简单的主题上的材料如此之少?

javascript expression

6
推荐指数
2
解决办法
1618
查看次数

为什么我们可以在 JavaScript 中创建稀疏数组?

var foo = new Array(20)我想知道、var foo = [1,2,3]; foo.length = 10或 等代码的用例是什么var foo = [,,,](另外,为什么要使用delete运算符而不是仅从数组中删除项目)。您可能已经知道,所有这些都会导致稀疏数组。

但为什么我们被允许做上述事情呢?为什么有人想要创建一个默认为 的数组length20如第一个示例中所示)?为什么有人想要修改和破坏length数组的属性(如第二个示例)?为什么有人想做类似的事情[, , ,]?为什么要使用delete而不是仅仅从数组中删除元素?有人可以为这些陈述提供一些用例吗?



我花了大约 3 个小时寻找一些答案。没有什么。大多数来源(2ality 博客、JavaScript:权威指南第 6 版,以及当您搜索“JavaScript 稀疏数组”之类的内容时在 Google 搜索结果中弹出的一大堆其他文章)说的唯一一件事是,稀疏数组是奇怪的行为,你应该远离他们。我读到的任何资料都没有解释或至少试图解释为什么我们首先被允许创建稀疏数组。除了 You Don't Know JS: Types & Grammar 之外,这本书讲述了为什么 JavaScript 允许创建稀疏数组:

一个数组在它的槽中没有明确的值,但是有一个 length 属性来暗示槽的存在,这是 JS 中一种奇怪的奇异数据结构类型,具有一些非常奇怪和令人困惑的行为。创建这样一个值的能力纯粹来自旧的、已弃用的历史功能(“类似数组的对象”,如参数对象)。

因此,这本书暗示该arguments对象以某种方式在某处使用我上面列出的示例之一来创建稀疏数组。那么,在哪里以及如何arguments使用稀疏数组呢?



另一件让我困惑的事情是《JavaScript:权威指南第六版》一书中的这一部分:

足够稀疏的数组通常以比密集数组更慢、更节省内存的方式实现。

对我来说,“内存效率更高”似乎与“速度较慢”相矛盾,那么两者之间有什么区别,尤其是在稀疏数组的情况下?是本书特定部分的链接。

javascript sparse-matrix

6
推荐指数
1
解决办法
1482
查看次数

5
推荐指数
1
解决办法
1176
查看次数

JavaScript 专家:带有“{}”的块作用域和匿名函数都有助于垃圾收集吗?

在《你不知道的 JS:作用域和闭包》一书中,Kyle simpson 指出块作用域变量有助于垃圾回收,具体示例如下:

function process(data) {
// do something interesting
}

{
let someReallyBigData = {};
process(someReallyBigData);
}

var btn = document.getElementById("my_button");
btn.addEventListener("click", function click(evt) {
console.log("Clicked!");    
}, false);
Run Code Online (Sandbox Code Playgroud)

现在上面的示例应该有助于垃圾收集,因为someReallyBigData一旦块结束,变量就会从内存中删除,与此示例不同,它对垃圾收集没有帮助:

function process(data) {
// do something interesting
}

var someReallyBigData = {};

process(someReallyBigData);

var btn = document.getElementById("my_button");
btn.addEventListener("click", function click(evt) {
console.log("Clicked!");    
}, false);
Run Code Online (Sandbox Code Playgroud)

现在我确信这个人对他提供的例子(第一个)是正确的;var但是,我想知道如果我们使用匿名 IIFE(立即调用函数表达式)以及普通的而不是{}花括号和变量,是否一切都会相同let。让我把它变成一个例子:

function process(data) {
// do something interesting
}

(function(){
var someReallyBigData = {};
process(someReallyBigData);
}()); …
Run Code Online (Sandbox Code Playgroud)

javascript v8 spidermonkey anonymous-function ecmascript-6

5
推荐指数
1
解决办法
713
查看次数

在页面加载时重定向到另一个网页,我的JavaScript数组的内容作为URL

我正在使用HTML和Javascript进行一个小练习.基本上,我有2个输入字段,我需要使用Javascript中的1个函数进行验证.第一个输入要求输入名称,如果名称少于3个字符,则会打印错误,否则将删除错误.第二个要求当地.现在,为了验证这一点,我必须首先创建一个包含大约3个位置的数组,然后比较用户输入的位置以查看它是否在数组中.如果不是,则再次打印错误.事情是这样的; 我在实时预览中收到错误.错误在屏幕上打印"无法GET/Msida,Pieta,Marsa"和"无法加载资源:服务器在控制台上响应状态为404(未找到)".问题是什么?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Revision</title>
</head>

    <body>
        <nav id="menu"></nav>
        <a>Full Name: </a><input type="text" name="fName" id="fName" ><br/>
        <div id="divName"></div><br/>
        <a>Locality: </a><input type="text" name="locality" id="locality" ><br/>
        <div id="divLocality"></div><br/>
        <script src="js/mainScript.js"></script> 
        <script src="js/detailsScript.js"></script> 
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

var fName = document.getElementById("fName");
var locality = document.getElementById("locality");
var divName = document.getElementById("divName");
var divLocality = document.getElementById("divLocality");
var location = ["Msida", "Pieta", "Marsa"];


function validation()
{
if(this.name == "fName")
    {
        if(this.value.length < 3)
            {
                divName.innerHTML = "Name should have atleast 3 characters";
                divName.style.color = "red"; …
Run Code Online (Sandbox Code Playgroud)

html javascript

5
推荐指数
1
解决办法
62
查看次数

Benchmark.js 中设置、拆卸和循环的目的是什么?

我知道正式的描述:

设置:创建测试的预期状态。
拆卸:进行必要的清理操作。

但是,为什么这是必要的,尤其是在 Benchmark.js 中?为什么需要不同的测试周期(如 Benchmark.js 中所定义中 Benchmark.js 中所定义)?我观察到,在我能想到的所有情况下(我也认为在所有其他情况下),您可以将设置代码移至准备代码(基准/测试之外的代码),也许将代码拆解到代码末尾,功能本质上是相同的(我也查看了一些 jsperf.com 测试,据我所知,它们也是如此)。

例如,这是我创建的基准测试,该版本使用设置和拆卸:

const bench = new Benchmark(
  'TicTacToeBenchmark',
  // The function to test
  () => {
    ticTacToe.addEvent(
      'turn',
      player => {
        turnText.innerHTML =
          'It\'s ' + (player['id'] === 1 ? 'X' : 'O') + '\'s turn.';
      }
    );
  },
  {
    'setup': () => {
      const players = [
        {
          char: '&#10005;',
          className: 'playerX',
          id: 1,
        },
        {
          char: '&#9711;',
          className: 'playerY',
          id: 2,
        },
      ]; …
Run Code Online (Sandbox Code Playgroud)

javascript benchmarking unit-testing benchmark.js

5
推荐指数
1
解决办法
512
查看次数

JavaScript:为什么这两个看似等效的程序的控制台输出略有不同?

这个程序:

 var arr = [];
    arr[100] = "foo";
    console.log(arr);
Run Code Online (Sandbox Code Playgroud)

输出:

(101) [undefined × 100, "foo"]
Run Code Online (Sandbox Code Playgroud)

但是,这个程序:

var arr = [];
for(var i = 0; i < 101; i++) {
arr[i] = (i === 100 ? "foo" : undefined);
}
console.log(arr);
Run Code Online (Sandbox Code Playgroud)

输出这个("foo"当然最终有):

(101) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, …
Run Code Online (Sandbox Code Playgroud)

javascript

4
推荐指数
1
解决办法
57
查看次数

JavaScript中具有三元条件和逻辑的运算符优先级和运算符

大家好,我只是通过JS插件的源代码(dropdown.js),遇到了以下代码行:

return $parent && $parent.length ? $parent : $this.parent()
Run Code Online (Sandbox Code Playgroud)

我无法完全理解以上内容,我了解Logical And(&&)和三元条件运算符(... ? ... : ...),但是在上述示例中,我似乎不理解它们是如何交互的。

现在,如果console.logreturn语句前添加一个:

console.log($parent && $parent.length ? $parent : $this.parent());
Run Code Online (Sandbox Code Playgroud)

我得到:

Object { 0: <li.dropdown.open>, length: 1, prevObject: Object, context: <a.dropdown-toggle>, selector: ".parent()" }
Run Code Online (Sandbox Code Playgroud)

确实是 $this.parent()

另外,$parent在我的情况下,结果为false

这些是我的乐高积木,有人可以帮我摆放一下,让我清楚地了解它的工作原理:

return $parent && $parent.length ? $parent : $this.parent()
Run Code Online (Sandbox Code Playgroud)

谢谢。


*请注意,此问题的预编辑版本标题不正确,并且直到人们仔细研究它后才解释问题的实质,因此,请不要在下面可能会谈论的任何答案上加注“短路”代替此问题的实际主题(操作员优先),仅是为了寻找主题外和粗心的地方

javascript operator-precedence

2
推荐指数
1
解决办法
578
查看次数

创建简单的Toast通知并将其从上到下连续链接

我正在尝试创建Toast通知,在大多数情况下,我的代码运行良好。但是,我正在努力将吐司面包放置在页面中所有其他内容的顶部,以便吐司#1出现在页面顶部中的所有内容的顶部,吐司#2出现在页面中所有内容的顶部,但将堆积在吐司下面#1等

这是我的代码:

$(document).ready(function() {
  $("#btnSuccess").click(function() {
    createSuccessToast("everything is fine");
  });

  $("#btnError").click(function() {
    createErrorToast("something went wrong");
  });
});

function createSuccessToast(toastMessage) {
  createToast(true, toastMessage);
}

function createErrorToast(toastMessage) {
  createToast(false, toastMessage);
}

function createToast(isSuccess, toastMessage) {
  var toastContainer = createToastContainer(isSuccess);
  createToastHeader(toastContainer, isSuccess);
  createToastContent(toastContainer, toastMessage);
  initToast(toastContainer);
  destroyToast(toastContainer);
}

function createToastContainer(isSuccess) {
  var toastContainer = $("<div></div>");
  toastContainer.addClass("toastContainer");
  if (isSuccess) {
    toastContainer.addClass("toastContainerSuccess");
  } else {
    toastContainer.addClass("toastContainerError");
  }
  return toastContainer;
}

function createToastHeader(toastContainer, isSuccess) {
  var toastHeader = $("<div></div>");
  toastHeader.addClass("toastHeader");
  toastHeader.html(isSuccess ? "Success" : "Error");
  toastContainer.append(toastHeader);
} …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery css-position

1
推荐指数
1
解决办法
1374
查看次数