私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.138 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
そもそもjavascript動かしただけで犯罪になるのが日本だからな
逮捕されることを覚悟してやるしかねえわ
逮捕されることを覚悟してやるしかねえわ
replace用の第1引数と第2引数のペアをまとめてオブジェクトに入れておいて呼び出したいのですけど
どんな感じでやるんですかね
今だと
const regObj = { 'a':正規表現, 'b':正規表現, 'c':正規表現 ];
const strObj = { 'a':文字列, 'b'文字列, 'c':文字列 };
const index = 'c';
text.replace(regObj[index], strObj[index]);
って別々の配列使っちゃってるんですけど
まとめたほうがわかりやすいだろうなと
一応
const regStrObj = {
'a' : [ 正規表現, 文字列 ],
'b' : [ 正規表現, 文字列 ],
'c' : [ 正規表現, 文字列 ],
};
const arr = regStrObj['c'];
text.replace(arr[0], arr[1]);
って方法は思いつくものの、なんかもっといい書き方があるような気がして
どんな感じでやるんですかね
今だと
const regObj = { 'a':正規表現, 'b':正規表現, 'c':正規表現 ];
const strObj = { 'a':文字列, 'b'文字列, 'c':文字列 };
const index = 'c';
text.replace(regObj[index], strObj[index]);
って別々の配列使っちゃってるんですけど
まとめたほうがわかりやすいだろうなと
一応
const regStrObj = {
'a' : [ 正規表現, 文字列 ],
'b' : [ 正規表現, 文字列 ],
'c' : [ 正規表現, 文字列 ],
};
const arr = regStrObj['c'];
text.replace(arr[0], arr[1]);
って方法は思いつくものの、なんかもっといい書き方があるような気がして
>>253
こんなんは？てきとうだけど。
const replaceRules = {
'a' : [ 正規表現, 置換文字列 ],
'b' : [ 正規表現, 置換文字列 ],
'c' : [ 正規表現, 置換文字列 ],
};
const replaceByRule = rule => str => str.replace(...rule);
使い方
const replaceByRuleC = replaceByRule(replaceRules['c']);
const replacedText = replaceByRuleC(text);
または
const replacedText = replaceByRule(replaceRules['c'])(text);
こんなんは？てきとうだけど。
const replaceRules = {
'a' : [ 正規表現, 置換文字列 ],
'b' : [ 正規表現, 置換文字列 ],
'c' : [ 正規表現, 置換文字列 ],
};
const replaceByRule = rule => str => str.replace(...rule);
使い方
const replaceByRuleC = replaceByRule(replaceRules['c']);
const replacedText = replaceByRuleC(text);
または
const replacedText = replaceByRule(replaceRules['c'])(text);
本来順序がないものに配列使うのは好きじゃないなぁ
だからArray#entries/Object.entriesとかも好きになれない
だからArray#entries/Object.entriesとかも好きになれない
entiries系は走査が目的で順序なんて気にしないことの方が多いでしょ
[key, value] of entries
とかすりゃいいだけじゃん
とかすりゃいいだけじゃん
>>253
new Map
new Map
>>264
> 他にもMapに配列リテラル与えるのも違和感あるんだが
「違和感がある」がキーのことか、引数に二次元配列を渡していることか、わからんが、既にある定義に違和感があるなら、Mapを漠然と理解している気になってるからなんじゃないかね
イテレータとか、理解してるか？
> 他にもMapに配列リテラル与えるのも違和感あるんだが
「違和感がある」がキーのことか、引数に二次元配列を渡していることか、わからんが、既にある定義に違和感があるなら、Mapを漠然と理解している気になってるからなんじゃないかね
イテレータとか、理解してるか？
ま、好みの問題だし[0],[1]のアクセスに全く違和感ないなら分かり合えんのでいいわ
デストラクチャリングできるから良いって問題じゃないし
ただesには妥協の産物もあるってことは理解しといたほうがいいぞ
デストラクチャリングできるから良いって問題じゃないし
ただesには妥協の産物もあるってことは理解しといたほうがいいぞ
jsが妥協だらけなんてことは大前提の上での話だと思うけど……生まれからして開発者と会社間の妥協の産物やないか
すべての言語が妥協だらけなんてことは大前提の上での話だと思うけど……
ちなみにリリースしたてのreact hooks apiの使用例：
const [count, setCount] = useState(initialCount);
5ちゃんのｽｰﾊﾟｰﾊｶｰによると妥協の産物である。
const [count, setCount] = useState(initialCount);
5ちゃんのｽｰﾊﾟｰﾊｶｰによると妥協の産物である。
違和感ある/なしの感想だけを求めて理由はどうでも良かったのか
すぐ共感を求める女性のような考え方だな
すぐ共感を求める女性のような考え方だな
これか？
'a' : [ 正規表現, 文字列 ],
key が文字列で、value がコンテナなんて、
JSON なんか、ほとんどこればっかりだろ
違和感なんて感じないけど？
'a' : [ 正規表現, 文字列 ],
key が文字列で、value がコンテナなんて、
JSON なんか、ほとんどこればっかりだろ
違和感なんて感じないけど？
>>258はPHPの連想配列にも不満をいいそう
>>267
考え方が狭いだけだと思うよ
[a,b],
[c,d],
[e,f]
って
_ key val
0 a b
1 c d
2 e f
のような項目名が暗黙のテーブルってだけなんだよ
なんか配列というものにへんな固定観念を持ってるから違和感を感じるだけなんだよ
定義はシンプルな方が良いんだからさ
{key:'a',value:'b'},{key:'c',value:'d'},{key:'e',value:'f'}
みたいにするよりは配列を使ったほうが良いんだよ
別に[a,b],[c,d],[e,f]と書いて置いてオブジェクトに変換して使うとかも簡単にできるんだからさ
そのへんが内部的にも行われてると考えればいいだけで変なこだわりを持っても価値がないんだよ
考え方が狭いだけだと思うよ
[a,b],
[c,d],
[e,f]
って
_ key val
0 a b
1 c d
2 e f
のような項目名が暗黙のテーブルってだけなんだよ
なんか配列というものにへんな固定観念を持ってるから違和感を感じるだけなんだよ
定義はシンプルな方が良いんだからさ
{key:'a',value:'b'},{key:'c',value:'d'},{key:'e',value:'f'}
みたいにするよりは配列を使ったほうが良いんだよ
別に[a,b],[c,d],[e,f]と書いて置いてオブジェクトに変換して使うとかも簡単にできるんだからさ
そのへんが内部的にも行われてると考えればいいだけで変なこだわりを持っても価値がないんだよ
元は順序がどうとか言ってたから、arr[3]みたいな順序に依存したアクセスが気にくわないと言うのならわかる
そもそも、new Mapの引数にはiterableが指定可能で配列限定ではないんだが
o = { a:'b', c:'d', e:'f' }
new Map(Object.entries(o))
でいいじゃん
new Map(Object.entries(o))
でいいじゃん
iterableの考え方が出来てない人が「妥協の産物」と断じているだけだろう
一週間前に始めた超初心者です。
htmlファイルと外部読み込みjavascriptファイルをPCで作り、スマホに送ってクロームで開いたところ、
htmlは表示されましたが、どうしてもjavascriptがうまくいきません。なぜでしょうか？
(スクリプトをhtmlに直接書き込むと動作するので、外部読み込みファイルの指定の仕方が悪いと思っています。)
【外部ファイル指定部分】
<a href="./time.html" target="frame_name" >現在時刻</a><br>
<iframe name="frame_name" width="200" height="50" ></iframe><br>
htmlファイルと外部読み込みjavascriptファイルをPCで作り、スマホに送ってクロームで開いたところ、
htmlは表示されましたが、どうしてもjavascriptがうまくいきません。なぜでしょうか？
(スクリプトをhtmlに直接書き込むと動作するので、外部読み込みファイルの指定の仕方が悪いと思っています。)
【外部ファイル指定部分】
<a href="./time.html" target="frame_name" >現在時刻</a><br>
<iframe name="frame_name" width="200" height="50" ></iframe><br>
>>284
まず服を脱いでください
まず服を脱いでください
質問です。
var x = 123;
function hello(){
var y = 456;
var button = document.getElementById("btnElement");
button.onclick = function(mouseEvent){ console.log("x="+x+",y="+y); };
}
このときyがundefinedになりますが、
クリックのイベントハンドラ内にyを渡す方法はありませんか？
var x = 123;
function hello(){
var y = 456;
var button = document.getElementById("btnElement");
button.onclick = function(mouseEvent){ console.log("x="+x+",y="+y); };
}
このときyがundefinedになりますが、
クリックのイベントハンドラ内にyを渡す方法はありませんか？
>>286
> このときyがundefinedになりますが、
button.onclick の関数を定義してるのはhello関数のスコープ
hello関数で定義しているyは参照できるはず
適当に補って試してみたが再現しない
変数のスコープ説明のためのソースっぽいけど、このソースそのままなの？
どこかtypoしてないか？
> このときyがundefinedになりますが、
button.onclick の関数を定義してるのはhello関数のスコープ
hello関数で定義しているyは参照できるはず
適当に補って試してみたが再現しない
変数のスコープ説明のためのソースっぽいけど、このソースそのままなの？
どこかtypoしてないか？
>>287
すいません、ちょっと違いました
function(){}とvar = function(){}でスコープが違うんですね・・・
var x = 123;
var world = function hello(){
var y = 456;
var button = document.getElementById("btnElement");
button.onclick = function(mouseEvent){ console.log("x="+x+",y="+y); };
}
すいません、ちょっと違いました
function(){}とvar = function(){}でスコープが違うんですね・・・
var x = 123;
var world = function hello(){
var y = 456;
var button = document.getElementById("btnElement");
button.onclick = function(mouseEvent){ console.log("x="+x+",y="+y); };
}
>>288
それならjQueryを使うと良い。単純に置き換えるだけでもここまで短くなる
function fnc(event) {
alert(event.currentTarget.value);
}
$(function() {
var btn1 = $("#btn1");
btn1.click(fnc);
var btn2 = $("#btn2");
btn2.click(fnc);
var btn3 = $("#btn3");
btn3.click(fnc);
});
一時変数を使うまでもないのでこうだな
function fnc(event) {
alert(event.currentTarget.value);
}
$(function() {
$("#btn1").click(fnc);
$("#btn2").click(fnc);
$("#btn3").click(fnc);
});
それならjQueryを使うと良い。単純に置き換えるだけでもここまで短くなる
function fnc(event) {
alert(event.currentTarget.value);
}
$(function() {
var btn1 = $("#btn1");
btn1.click(fnc);
var btn2 = $("#btn2");
btn2.click(fnc);
var btn3 = $("#btn3");
btn3.click(fnc);
});
一時変数を使うまでもないのでこうだな
function fnc(event) {
alert(event.currentTarget.value);
}
$(function() {
$("#btn1").click(fnc);
$("#btn2").click(fnc);
$("#btn3").click(fnc);
});
そして根本的にやるならこう
<button id="btn1" value="1" class="btn">ボタン１</button>
<button id="btn2" value="2" class="btn">ボタン２</button>
<button id="btn3" value="3" class="btn">ボタン３</button>
$(function() {
$(".btn").click(function() {
alert(this.value);
});
});
<button id="btn1" value="1" class="btn">ボタン１</button>
<button id="btn2" value="2" class="btn">ボタン２</button>
<button id="btn3" value="3" class="btn">ボタン３</button>
$(function() {
$(".btn").click(function() {
alert(this.value);
});
});
>>288
const $$ = q => [...document.querySelectorAll(q)]
を定義しておいて、冗長になっているところを、
$$`#btn1,#btn2,#btn3`.forEach(el => el.addEventListener('click', fnc, false))
で置き換えては？
また、
$$(['#btn1', '#btn2', '#btn3']).forEach(el => el.addEventListener('click', fnc, false))
と書くこともできるから、以下のようにすれば対象要素増やしたいときも配列にセレクタ追加するだけで対応できるよ。
const selectors = [
'#btn1',
'#btn2',
'#btn3',
'#btn4', // new!
]
$$(selectors).forEach(el => el.addEventListener('click', fnc, false))
const $$ = q => [...document.querySelectorAll(q)]
を定義しておいて、冗長になっているところを、
$$`#btn1,#btn2,#btn3`.forEach(el => el.addEventListener('click', fnc, false))
で置き換えては？
また、
$$(['#btn1', '#btn2', '#btn3']).forEach(el => el.addEventListener('click', fnc, false))
と書くこともできるから、以下のようにすれば対象要素増やしたいときも配列にセレクタ追加するだけで対応できるよ。
const selectors = [
'#btn1',
'#btn2',
'#btn3',
'#btn4', // new!
]
$$(selectors).forEach(el => el.addEventListener('click', fnc, false))
>>288
ボタンが一列に並ぶかどうかとか色々不明な前提条件があるので
すまんけど明確な方針は出せない
少なくとも適用する関数が全て同じfncならば、
idじゃなくてclassでまとめることをオススメする
http://jsfiddle.net/kgn91oyL/
ボタンが一列に並ぶかどうかとか色々不明な前提条件があるので
すまんけど明確な方針は出せない
少なくとも適用する関数が全て同じfncならば、
idじゃなくてclassでまとめることをオススメする
http://jsfiddle.net/kgn91oyL/
>>288
>>291のコードを動くようにしてみた
http://jsfiddle.net/r38gt724/
更に一行で書いてみた。
個人的にはアロー関数は戻り値を使うべきだと思ってるので好きではないが
http://jsfiddle.net/pm4cqf75/
>>291のコードを動くようにしてみた
http://jsfiddle.net/r38gt724/
更に一行で書いてみた。
個人的にはアロー関数は戻り値を使うべきだと思ってるので好きではないが
http://jsfiddle.net/pm4cqf75/
>>290-294でした
>>288
var btn1 = document.getElementById("btn1");
などはまるごと省略してよい
id属性をもつ要素はそのままグローバルプロパティとして現れる決まりがある
var btn1 = document.getElementById("btn1");
などはまるごと省略してよい
id属性をもつ要素はそのままグローバルプロパティとして現れる決まりがある
>>297と同等のことをjQueryであるとこうなります。
document.getElementById("buttons").addEventListener("click", ev => {
if (ev.target.classList.contains("btn")) {
alert(ev.target.value);
}
});
↓
$("#buttons").on("click", '.btn', function(event) {
alert(this.value);
});
http://jsfiddle.net/3t1nv7kq/
document.getElementById("buttons").addEventListener("click", ev => {
if (ev.target.classList.contains("btn")) {
alert(ev.target.value);
}
});
↓
$("#buttons").on("click", '.btn', function(event) {
alert(this.value);
});
http://jsfiddle.net/3t1nv7kq/
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.130 + (1001) - [97%] - 2017/11/25 20:45
- + JavaScript の質問用スレッド vol.135 + (1002) - [97%] - 2018/11/23 10:30
- + JavaScript の質問用スレッド vol.130 + (974) - [97%] - 2016/10/26 14:18
- + JavaScript の質問用スレッド vol.108 + (1001) - [97%] - 2013/9/21 15:16
- + JavaScript の質問用スレッド vol.131 + (1004) - [97%] - 2018/3/7 13:30
- + JavaScript の質問用スレッド vol.132 + (1001) - [97%] - 2018/4/19 11:00
- + JavaScript の質問用スレッド vol.133 + (1001) - [97%] - 2018/6/8 10:45
- + JavaScript の質問用スレッド vol.128 + (1001) - [97%] - 2016/2/26 6:45
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.139 + (1001) - [97%] - 2019/5/27 15:15
- + JavaScript の質問用スレッド vol.118 + (1002) - [97%] - 2014/8/29 22:30
- + JavaScript の質問用スレッド vol.117 + (1009) - [95%] - 2014/8/5 3:30
- + JavaScript の質問用スレッド vol.116 + (1002) - [95%] - 2014/7/1 0:45
- + JavaScript の質問用スレッド vol.119 + (1002) - [95%] - 2014/10/3 15:30
トップメニューへ / →のくす牧場書庫について