タグ付けされた質問 「javascript」

生徒の住所と保護者の住所の配列があります。 例えば、 const users = [{ id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'USA', relationship:'mother' }, { id: 1, name: 'John', email: 'johnson@mail.com', age: 25, parent_address: 'Spain', relationship:'father' }, { id: 2, name: 'Mark', email: 'mark@mail.com', age: 28, parent_address: 'France', relationship:'father' } ]; これを次の結果に再フォーマットしようとしています。 const list = [ …

16 javascript  arrays 

楕円、より具体的には楕円「エンベロープ」を含むこのデータセットがあります。これらがD3マップにどのように描画できるかについて誰かがアドバイスをくれたのではないかと思っていました。メルカトル図法を使用したマップ設定をすでに持っています。このstackoverflowの回答にはcreateEllipse関数があり、これにより近づきましたが、データを正しく解釈していることを確認したいと思います。 データから楕円の主軸/副軸の値を差し込み、回転に方位角を使用しましたが、これは正しいでしょうか？「封筒」の部分もよくわかりません。各ゾーンのいくつかの楕円はどのようにして単一の連続した形状を作成しますか？ 任意のアドバイスをいただければ幸いです。 const margin = {top:0, right:0, bottom:0, left:0}, width = 1000 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; const svg = d3.select('body') .append('svg') .attr('width', '100%') .attr('height', '100%') .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`); const chart = svg.append('g') …

16 javascript  d3.js  geospatial 

次の例で、このキーワードの予期しない値が見つかりました。 let x = { z : 10 , get func1() { return function(v) { console.log(this === v); } } } x.func1(x) コードスニペットを実行する結果を非表示スニペットを展開 値は、このキーワードは、オブジェクトであるXそれは、そのオブジェクトから実行されますかのように私は期待して、get関数があるこのキーワードは呼び出し元のオブジェクトに等しいX この例は私たちに違いを示しています let x = { func2() { return function(v) { console.log(this === v); } } } x.func2()(x); コードスニペットを実行する結果を非表示スニペットを展開 どちらの例でも、getter関数であるfunc1とオブジェクトのメソッドであるfunc2がオブジェクトxから実行され、返された関数が実行されます。したがって、最初の例のこの値がオブジェクトxではなくグローバルオブジェクトと等しくないのはなぜですか。

15 javascript  getter-setter 

Edgeでポリフィルを機能させるのに非常に苦労しています。私はすべてがうまくいかない様々な試みでドキュメントを追おうとしました。それはpromise.finally具体的には機能していないようです。これはvuexモジュールで発生するため、vue.configの transpileDependenciesにvuexを追加しようとしましたが、うまくいきませんでした。 私のbabel.config.js： module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', }]], }; 私のmain.jsでは、最上部に次の2つのインポートがあります。 import 'core-js/stable'; import 'regenerator-runtime/runtime'; 私のvue.config.js // eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); const isProd = process.env.NODE_ENV === 'production'; module.exports = { configureWebpack: { // Set up all the aliases we use in our app. plugins: [ …

15 javascript  vue.js  vuejs2  babel  polyfills 

function andMultipleExpr(){ let logicalAnd; let i; for (i = 0; i < arguments.length; i++){ logicalAnd = arguments[i] && arguments[i+1]; } return logicalAnd; } console.log(andMultipleExpr(true, true, false, false)); 私が期待しているのは、このコードを実行することです：true && true && false && falseそしてそれはfalseを返すはずです。 それをjsで機能させる方法は？ありがとう

15 javascript  function 

ハンドルバーを使用したサーバー側レンダリングでNodejsバックエンドを使用しています。docハンドルバーからオブジェクトの配列を読み込んだ後、キー「コンテンツ」と「from」を含みます ただし、を使用#eachしてオブジェクトの配列をループしようとすると、「ハンドルバー：親の「独自のプロパティ」ではないため、プロパティ「from」を解決するためにアクセスが拒否されました」というエラーが表示されます。 私はdoc配列でフェッチしたデータをconsole.log（）しようとしましたが、すべて問題ありません。 いくつかの見方をすると、これはマングースクエリ です。res.render引数内にキーとしてオブジェクトドキュメントを追加しました。 Confession.find() .sort({date: -1}) .then(function(doc){ for(var i=0; i < doc.length; i++){ //Check whether sender is anonymous if (doc[i].from === "" || doc[i].from == null){ doc[i].from = "Anonymous"; } //Add an extra JSON Field for formatted date doc[i].formattedDate = formatTime(doc[i].date); } res.render('index', {title: 'Confession Box', success:req.session.success, errors: …

15 javascript  node.js  mongodb  express  handlebars.js 

カスタムキーを持つ配列として扱うJavaScriptオブジェクトをループする必要があります。プロパティには本質的な順序がないため、これは完全にはサポートされていませんが、常にプロパティを並べ替えるので、このアプローチは単純で信頼できるものであることがわかりました。 この問題は、キーが数値、または数値としてキャストできる文字列の場合に発生します。 このコードを実行すると： var test1 = {4294966222:"A",4294966333:"A",4294966111:"A"}; var test2 = {4294968222:"A",4294968333:"A",4294968111:"A"}; for (var k in test1) {console.log(k);} console.log("---"); for (var k in test2) {console.log(k);} コードスニペットを実行する結果を非表示スニペットを展開 出力は次のとおりです。 4294966111 4294966222 4294966333 --- 4294968222 4294968333 4294968111 つまり： （test1）キーが2 ^ 32（4,294,967,296）未満の場合、自動的に並べ替えられ、最小のものが最初に （test2）キーが2 ^ 32を超える場合、それらは並べ替えられません。 問題は、なぜこれが起こっているのかということです。 私がテストしたすべてのブラウザー（Google Chrome 79.0、Mozilla Firefox 71.0、Microsoft Edge 44.18362、Internet Explorer 11.535）はこの出力に同意しているため、いくつかの公式の仕様が必要です。 …

15 javascript 

履歴window.location.replaceを回避し、ページをリロードせずにページ上のアンカーをターゲットにするために使用できますが、iframeではできませんか？ 問題は、CSP（コンテンツセキュリティポリシー）違反、状態をscript-src 'unsafe-inline'有効にする必要があります。CSPを定義していない場合を除いて、CSPを定義して許可しscript-src 'unsafe-inline'ても、同じ違反エラーが発生します。ie11 / chrome / ffでも同じ結果になります。 同じドメイン（同じディレクトリ内）の iframe 。 コンソールでiframeをターゲットにして、コンソールで使用window.location.replace('/samepage.html#onpage_anchor')します。 できます。 これは、ページをリロードすることなく、履歴なしでページ上のアンカーをターゲットにします。 同じコードをアンカーリンクにインラインで配置すると機能します。 外部スクリプトで同じコードを使用すると、csp違反エラーが発生します。 これは、iframe内でなくても正常に機能します。 私は、CSPを作成しようとしたアクションを許可しますが、いなくても、最も寛容なコンテンツセキュリティポリシー可能性は、それを可能にします。 編集：複数のファイルを許可する例をプランカーにまとめて、親/子ページを参照する適切なhrefを使用できるようにします。 プランカーの例に関するメモ： 問題はこれらの例では再現されません。 スクリプトは、iframeでも完全に機能します。ただし、同じコードがローカルサーバーで機能しないか、VPSでライブ実行すると機能しません。 プランカーはある種の抽象化レイヤーを介してブラウザーにコンテンツを提示しているため、CSP違反はプランカーでトリガーされないのではないかと思います。 親のアコーディオンリンクを初めてクリックすると、更新されます。これは、ページが最初にロードされる方法がindex.htmlを参照しないためです。以降のクリックは、ページをリロードしなくても期待どおりに機能します。最初はchild.htmlを参照するため、iframeの問題ではありません これらは、コードを機能させるために変更を必要とせずにコードを表示するのに適した例です（下記のStackoverflowスニペットで機能させるためにhrefを変更する必要がある場合など）。また、javascriptが正常に機能していることも示しています。しかし、それは実際の問題を示していません。実際の問題を確認するには、エディターにロードしてローカルサーバーまたはライブホスティング環境で実行する必要があります。 プランカーの例 スクリプトあり： 履歴 なしスクリプトなし： 履歴あり 簡略化されたコード例 1つのエントリを持つ単純なアコーディオン。問題を再現するのに十分です。 開く/閉じるをクリックすると、アコーディオンが展開/折りたたまれます。JSは必要ありません。JSはまったく同じことを行いますが、履歴はありません。正常に機能しますが、iframeでは機能しません。 コードスニペットのメモ： スニペットを実行して、私が説明していることについてのアイデアを得ることができますが、実際には問題を示していません。 スニペットは実際のブラウザのように動作せず、JavaScriptは機能しません。 スニペットはコードを示していますが、問題を確認するにはiframeで実行する必要があります。iframeの外で実行して、違いとその動作を確認します。 リンクがJSでどのように機能するか（URL全体を置き換える）のため、スニペットに表示されるのと同じようにリンクするのではなく、 実際にはこのようにする必要があります（スニペットの実際のHTMLページをターゲットにすることはできません）。あなたがあれば、あなたのエディタでこれを試してください（行ってください）、その後、することを忘れないでください、この形式へのリンクを変更し、彼らはまだあるので、同じページのアンカー、しかしpage.htmlがリンクに含まれています。href="https://stackoverflow.com/thispage.html#ac1"href="#ac1" this_document.html#anchor コードスニペットを表示 $(document).ready(function() { // anchor links without history $.acAnch = …

15 javascript  html  iframe  browser-history  content-security-policy 

次のようなアイテムの配列がある場合 const array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ] 画面/ページがレンダリングされるように、どうすればマッピングできますか？ 1 6 11 16 2 7 12 17 3 8 13 18 4 9 14 5 10 15 横向きの作業ができるようになり、 const chunkSize = 5; array .map((e, …

15 javascript 

history pushStateとreplaceStateメソッドを使用して、ページを移動しながら履歴を更新するWebアプリを作成しました。 スクリプト自体はほぼ完全に機能します。ページを正しくロードし、スローする必要がある場合はページエラーをスローします。しかし、pushStateが複数の重複したエントリを履歴にプッシュする（そしてその前のエントリを置き換える）とは、奇妙な問題に気づきました。 たとえば、次のことを（順番に）実行するとします。 index.phpをロードします（履歴はIndexになります） profile.phpに移動します（履歴はプロファイル、インデックスになります）。 search.phpに移動します（履歴は検索、検索、インデックスになります） dashboard.phpに移動します そして最後に、これは私の履歴に現れるものです（最も新しいものから最も古いものの順に）： ダッシュ ボード ダッシュボードダッシュボード 検索 インデックス この問題は、ユーザーが進むボタンまたは戻るボタンをクリックすると、誤ったページにリダイレクトされるか、1回戻るために複数回クリックする必要があることです。それは、彼らが行って履歴を確認しても意味がありません。 これは私がこれまでに持っているものです： var Traveller = function(){ this._initialised = false; this._pageData = null; this._pageRequest = null; this._history = []; this._currentPath = null; this.abort = function(){ if(this._pageRequest){ this._pageRequest.abort(); } }; // initialise traveller (call replaceState on load instead …

15 javascript 

時間と分の形式で浮動小数点数を合計するにはどうすればよいですか？ それら。そのような数値を2つ計算する場合0.35+3.45は、= 4.20ではなく、3.80 var arr = [0.15, 0.2, 3.45, 0.4, 2, 0.3, 5.2, 1, 1.4, 1.1, 2.4, 1, 3.4] var sum = 0.0; arr.forEach(function(item) { console.log(sum); sum += parseFloat(item); }); コードスニペットを実行する結果を非表示スニペットを展開 結果は次のようになります。 0 0.15 0.35 4.20 5.0 7.0 7.30 12.50 13.50 15.30 16.40 19.20 20.20

14 javascript 

アスペクト比を想定せずにiframeをレスポンシブにする方法は？たとえば、コンテンツには幅や高さがあり、レンダリング前は不明です。 JavaScriptを使用できることに注意してください。 例： <div id="iframe-container"> <iframe/> </div> iframe-container余計なスペースがなくてもコンテンツがかろうじて収まるようにサイズを調整します。つまり、コンテンツを表示するのに十分なスペースがあり、スクロールせずに表示できますが、余分なスペースはありません。コンテナはiframeを完全にラップします。 これは、コンテンツのアスペクト比が16：9であると想定して、iframeをレスポンシブにする方法を示しています。しかし、この質問では、アスペクト比は可変です。

14 javascript  html  css  iframe  responsive-design 

ロケーションの配列のみを取得するオブジェクトの配列があります。私の目標は、これらの場所の配列を1つの配列にマージすることですが、そうすることができず、空の配列を取得します。これが私のやり方です： let results = [{ id: '1', locations: ['aaaa', 'bbbbbb', 'cccccc'] }, { id: '2', locations: [] }, { id: '3', locations: ['ddd', 'aaadsad', 'sefd'] }, { id: '4', locations: ['ffff', 'eeee', 'sfdsfsd'] }, ]; const locationIds = [].concat.apply([], ...results.filter(s => s.locations && s.locations.length > 0).map(({ locations }) => ({ …

14 javascript  arrays  typescript 

最後の数字を入力すると、最初の数字が内部に入りtext-box（消えます）、スペースが1つ追加されます。 外側をクリックした後、text-box最後の文字を入力するときに必要な見栄えが良くなります。 #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: 220px; box-sizing: border-box; outline:none; } <input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234" > コードスニペットを実行する結果を非表示スニペットを展開 この問題から抜け出すのを手伝ってください。ありがとう

14 javascript  jquery  html  css 

ローカルホスト（Windows 7、Chrome v79.0.3945.130（64ビット））でhtml / jsコードをテストしましたが、コード変更の約50％がブラウザーに反映されていません（開発ツール/ソースで確認しました） ）。 インターネットにはたくさんのアドバイスがありますが、どちらもうまくいかないようです： リロードを右クリックして、「キャッシュを空にしてハードリロード」を選択します-30％の場合は役に立ちません。 Chrome開発ツールの[ネットワーク]タブでキャッシュを無効にする-役に立ちません。 <meta http-equiv="Cache-control" content="no-cache">ヘッダーに追加-助けにはなりません。 交換する<script src="common.js"></script>ことにより、<script src="common.js?blabla"></script>-例60％に役立ちますが、すべての変更は、巨大な雑用になった後、あなたはそれを行う必要があります。また、htmlの変更には対応していません。 ファイルを新しいファイル（index.htmlからindex2.htmlなど）にコピーし、コード内のファイル名を置き換えます-常に機能しますが、さらに面倒です。 コードをgithub.ioにコミットするときに発生するまったく同じ問題 サイトにコードの変更がすぐに反映されるようにしてください。 編集：index3.htmlファイルを作成し、「hello world」のみを配置しました。ブラウザでファイルを開きました。「hello world2」に変更-ブラウザがコンテンツを更新しました。「hello world3」に変更-複数の再ロードと「キャッシュとハードの再ロードを空にする」後でも、ブラウザはまだ「hello world2」を表示していました。私は「hello world4」に変更しました-ブラウザはまだ「hello world2」を示していました。4時間後、私は「hello world5」に変更しました-ブラウザーにはまだ「hello world2」が表示されています。このファイルは、基本的なメモ帳で編集しました。 Edit2：人々は私が使用しているサーバーを尋ね続けます。これは問題の一部のようです。残念ながら、私はそれを確認するために私が正確に何をする必要があるのか​​わかりません。ここに私がこれまでに見つけたすべてがあります： 私が持っているinetpub/wwwroot私は、HTML＆JSファイルを配置し、で、ブラウザでindex.htmlを開きディレクトリをhttp://localhost/。 Devs Toolsの[マイネットワーク]パネルは次のようになります：画像リンク。 サーバーのセットアップは非常に高速で、追加のソフトウェアをインストールする必要はありませんでした。つまり、node.jsを使用していません。 にiisstart.htmがinetpub/wwwrootあり、開くhttp://localhost/iisstart.htmとIIS7と表示されます。

14 javascript  html  server  browser-cache