[過去ログ]
JavaScript の質問用スレッド vol.125 (1002レス)
JavaScript の質問用スレッド vol.125 http://mevius.5ch.net/test/read.cgi/tech/1659855460/
上
下
前
次
1-
新
通常表示
512バイト分割
レス栞
このスレッドは過去ログ倉庫に格納されています。
次スレ検索
歴削→次スレ
栞削→次スレ
過去ログメニュー
41: デフォルトの名無しさん (ワッチョイ a52d-bBdM [220.100.64.9]) [sage] 2022/09/03(土) 00:11:31.61 ID:8AM/s+hA0 連想配列から特定のキーを検索して、重複がないもののみ取り出した配列を取得したいのですが、 このコードだと速度的に問題がありました。何か良い方法があったら教えていただけないでしょうか const a= [ {'id': 1, 'category': 'animal', 'kind': 'dog'}, {'id': 2, 'category': 'fruit', 'kind': 'apple'}, {'id': 3, 'category': 'fruit', 'kind': 'orange'}, {'id': 4, 'category': 'animal', 'kind': 'dog'}, {'id': 5, 'category': 'animal', 'kind': 'cat'}, {'id': 6, 'category': 'fruit', 'kind': 'grape'}, ] var b=a.filter((x,y,z)=>z.slice(0,z.length).filter(w=>w.kind==x.kind).length==1); console.log(b); http://mevius.5ch.net/test/read.cgi/tech/1659855460/41
42: デフォルトの名無しさん (ワッチョイ ad5f-wuTS [106.185.148.64]) [sage] 2022/09/03(土) 02:15:20.35 ID:Wm/0iruN0 >>41 const buckets = a.reduce((buckets, current) => { if (!buckets[current.kind]) { buckets[current.kind] = [current]; } else { buckets[current.kind].push(current); } return buckets; }, {}); const b = Object.values(buckets) .filter((items) => items.length === 1) .flat(); 速度は測ってないけどたぶんO(n^2)→O(n)になって速いはず http://mevius.5ch.net/test/read.cgi/tech/1659855460/42
43: デフォルトの名無しさん (スプッッ Sd03-5GnA [1.75.244.51]) [sage] 2022/09/03(土) 03:34:12.57 ID:E5gjC2rTd Mapで似たようなこと考えてた http://mevius.5ch.net/test/read.cgi/tech/1659855460/43
44: デフォルトの名無しさん (ワッチョイ 3501-bBdM [126.94.243.226]) [sage] 2022/09/03(土) 10:05:53.47 ID:RJZpwhgn0 >>41 要素数や重複要素のばらつき具合によって結果は変わるが、最終的には力業が最速な事が多い https://jsfiddle.net/gft5ah0n/ 極端な結果になっているのは重複要素がすぐそばにあり、while文による検索ですぐに見つかる為だ 重複要素が遠い位置にあるなら、while文による検索が遅くなるケースも十分にある >>41のコードが比較的高速なのも重複要素が比較的近くにある為だ Object.valuesやArray#filterによる変換コストが検索コストより高くついているので、他のコードが比較的遅い 重複検知が頻繁に発生するようであれば、データのも持ち方を new Map や new Set を使うように変更した方がいい 配列はユニークな値を得るのに向いていない http://mevius.5ch.net/test/read.cgi/tech/1659855460/44
45: デフォルトの名無しさん (ワッチョイ 3501-bBdM [126.94.243.226]) [sage] 2022/09/03(土) 10:08:20.30 ID:RJZpwhgn0 >>44の補足 jsfiddleのconsoleはconsole.time()を実装していないようだ ベンチマーク結果はブラウザのコンソールで確認する必要がある http://mevius.5ch.net/test/read.cgi/tech/1659855460/45
46: デフォルトの名無しさん (ワッチョイ 3501-bBdM [126.94.243.226]) [sage] 2022/09/03(土) 10:28:11.32 ID:RJZpwhgn0 すまん >>44のwhile_loopは期待通りに動かないので忘れてほしい(console.assert()のコードをミスって気づかなかった) 重複要素のばらつき具合によるが、(>>41の配列においては)暫定最速は>>41 http://mevius.5ch.net/test/read.cgi/tech/1659855460/46
47: デフォルトの名無しさん (ワッチョイ 3501-bBdM [126.94.243.226]) [sage] 2022/09/03(土) 10:46:53.92 ID:RJZpwhgn0 >>46 console.assert()の修正、重複チェックをkindのみに修正したら、mapが最速になった https://jsfiddle.net/bw8z2acf/ http://mevius.5ch.net/test/read.cgi/tech/1659855460/47
48: デフォルトの名無しさん (ワッチョイ 3501-bBdM [126.94.243.226]) [sage] 2022/09/03(土) 11:16:26.73 ID:RJZpwhgn0 >>47 高速化で考えるべきは「ループ回数の削減」と「変換回数の削減」 >>41 source >>42 reduce >>47 map reduceはループ回数は削減されているが、変換回数がsourceよりも多い 要素数6では「変換コスト > 検索コスト」になってしまい、sourceよりも遅い 要素数192では「変換コスト < 検索コスト」となるので、sourceよりも速い mapの変換回数は2回で Array.from() と results.values() のみ ループ回数、変換回数ともにsource,reduceよりも少ない 要素数6、要素数192のいずれも map が最速となる 実際のところ、変換を一度も発生させないコードが理想となる データの持ち方として配列(new Array)であるべきなのか、はよく考えた方がいい http://mevius.5ch.net/test/read.cgi/tech/1659855460/48
49: デフォルトの名無しさん (ワッチョイ 3501-bBdM [126.94.243.226]) [sage] 2022/09/03(土) 11:42:14.57 ID:RJZpwhgn0 >>39 a要素でマークアップされているなら、難しくはない for (let a of document.querySelectorAll('a[href]')) a.target = '_blank'; window.open()などでリンクを開く挙動もJavaScriptで制御しているなら、コードを読んでリンク先を得る手段を考える必要がある http://mevius.5ch.net/test/read.cgi/tech/1659855460/49
50: デフォルトの名無しさん (ワッチョイ 9534-9i1j [14.14.181.44]) [sage] 2022/09/04(日) 09:22:10.61 ID:eAq4eNQY0 >>40 >>49 ありがとうございます。 テーブルの表示となっていて、行全体にリンクが設定されているようです。 以下のような記載が複数並んでおり、通常は左クリックでリンク先に移動しかできず、新しいタブで開くことができません。 <tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”> <td class=”〇〇〇”></td> <td class=”〇〇〇”></td> </tr> 素人ながらいくつかブックマークレットで試したのですが、逆に実行するとリンクが無効になる事が多々でした。 アドバイスをいただければ幸いです。 http://mevius.5ch.net/test/read.cgi/tech/1659855460/50
51: デフォルトの名無しさん (ワッチョイ d510-bEl6 [180.12.82.129]) [] 2022/09/04(日) 12:38:54.82 ID:FoFuUBY00 <div style="width:100%;height:200px;border:Solid 3px #0000ff" id="test"></div> これのcss初期設定を取得したいのでstyle="○○"の○○部分を抽出したいんだけどやり方がわかりません。 element.style.widthみたいに取得すると途中で値を書き換えられると初期設定が得られないので 最初にタグに埋め込んであるものを取得したいんです。 http://mevius.5ch.net/test/read.cgi/tech/1659855460/51
52: デフォルトの名無しさん (ワッチョイ 955f-EB17 [14.8.104.32]) [sage] 2022/09/04(日) 20:07:02.96 ID:KWOOnIlI0 getAttributeとか? http://mevius.5ch.net/test/read.cgi/tech/1659855460/52
53: デフォルトの名無しさん (ワッチョイ 7561-rTOP [222.144.116.143]) [sage] 2022/09/04(日) 20:23:24.42 ID:FTTWPGH/0 element.style.hoge=fugaしたらstyle属性値も連動するんだから 書き換える前に取得しとくしかなくね? http://mevius.5ch.net/test/read.cgi/tech/1659855460/53
54: デフォルトの名無しさん (ワッチョイ 3501-vbgY [126.94.243.226]) [sage] 2022/09/04(日) 21:15:03.99 ID:SMoCQy1h0 >>51 ・直後にscript書いて書き換え前にstyleを取得しておく ・Fetch APIでhtmlをGETしてCSPでscript無効化してparseしてstyleを得る http://mevius.5ch.net/test/read.cgi/tech/1659855460/54
55: デフォルトの名無しさん (ワッチョイ d510-bBdM [180.12.82.129]) [] 2022/09/04(日) 22:38:54.08 ID:FoFuUBY00 >>52-54 ありがとうございました http://mevius.5ch.net/test/read.cgi/tech/1659855460/55
56: デフォルトの名無しさん (ワッチョイ d52c-6nWD [180.52.202.152]) [sage] 2022/09/04(日) 23:03:12.95 ID:9ocqxCfk0 >>50 開発者が、どのフレームワークを使っているのか分からないけど、 例えば、Ruby on Rails, Stimulus を使っているなら、 [Rails]Stimulusを使ってtableの行全体<tr>をリンクにする(jQuery不要) https://zenn.dev/necocoa/articles/rails-stimulus-tr-link これのhref_controller.js に、 export default class extends Controller { toHref(event) { // 既定の動作を取り消す event.preventDefault() // data-href 属性に入っている、URL を取得する const href = event.currentTarget.dataset['href'] // URL を設定する window.location.href = href } } http://mevius.5ch.net/test/read.cgi/tech/1659855460/56
57: 56 (ワッチョイ d52c-6nWD [180.52.202.152]) [sage] 2022/09/04(日) 23:14:48.88 ID:9ocqxCfk0 >>56 // URL を設定する window.location.href = href みたいに直接、window.location.href に設定しているけど、 この場合、Ctrl + クリックや、 右クリックメニューから新しいタブで開くことは出来ないのかな? http://mevius.5ch.net/test/read.cgi/tech/1659855460/57
58: デフォルトの名無しさん (ワッチョイ e3b7-9TNW [211.124.165.35]) [sage] 2022/09/04(日) 23:26:45.19 ID:RdtW7bNN0 >>50 遷移する時にdata-targetが使われることを見込んでこれでいけるかもね for (let tr of document.querySelectorAll('tr.〇〇〇')) tr.dataset.target = '_blank' ※〇〇〇はtrのクラス名で http://mevius.5ch.net/test/read.cgi/tech/1659855460/58
59: デフォルトの名無しさん (JP 0H93-Dk2f [103.163.220.88]) [sage] 2022/09/05(月) 18:27:01.95 ID:XvLqNcU6H document内の要素で、textContentに'xxx'を持つクラスを取得するにはどうしたらいいですか? 全部の要素総当たりでtextContent調べるしかないんでしょうか? http://mevius.5ch.net/test/read.cgi/tech/1659855460/59
60: デフォルトの名無しさん (ワッチョイ 3501-bBdM [126.94.243.226]) [sage] 2022/09/05(月) 18:51:10.83 ID:ng2JfbNn0 >>50 JavaScriptコードが不明なので正確な回答は不可能 >>58の想定通りなら、おそらくその実装が一番楽 tr要素ノードにclickイベントハンドラでwindow.openする実装と仮定して、下記実装が考えられる 1. elementdataset.hrefでリンク先アドレスを得る 2. createElementでa要素ノード生成 3. replaceChildで(A)のDOMになるよう調節 4. tr要素ノードの仕掛けられたであろうclickイベントハンドラをevent.stopImmediatePropagation()で封印 (A) <tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”> <td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td> <td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td> </tr> window.open()なんてレガシーコード書きたくないからあえてa要素を使っているが、 イベントを横取りできるなら、既存イベントハンドラと同じコードにしても良い http://mevius.5ch.net/test/read.cgi/tech/1659855460/60
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
あと 942 レスあります
スレ情報
赤レス抽出
画像レス抽出
歴の未読スレ
AAサムネイル
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.013s