javascript - 最初の Javascript プログラム。私は何を間違っていますか？

Question

私はついに Javascript で最初の小さな練習用プログラムを作成することに取り掛かりました。エレガントではないことはわかっています。このコードのほとんどは動作するようになりましたが、数回実行すると「未定義」の文字列が表示されます。どうしてか分かりません。この未定義がどこから来ているのか、誰かが親切に説明してくれませんか?

var work = new Array();
work[1] = "product design";
work[2] = "product system design";
work[3] = "product social media post x5";
work[4] = "product Agent Recruitment system design";
work[5] = "product profile system design";
work[6] = "product Agent testing design";
work[7] = "product customer support";
work[8] = "product promotion";
var course = new Array();
course[1] = "javascript";
course[2] = "mandarin";
course[3] = "javascript practical-Code Academy";
course[4] = "javascript practical-learn Street";
course[5] = "mandarin practical-memrise";
course[6] = "new stuff with audiobooks";
var activity = new Array();
activity[1] = "listen to podcasts";
activity[2] = "chat online";
activity[3] = "Exercise";
activity[4] = "take a walk";
activity[5] = "call a friend";
var picker1 = Math.floor(Math.random()*3+1);
var picker2 = Math.floor(Math.random()*work.length+1);
var picker3 = Math.floor(Math.random()*course.length+1);
var picker4 = Math.floor(Math.random()*activity.length+1);
var group_pick = function(){
  if(picker1 === 1){
    return "Time to work on ";
  } else if(picker1 === 2){
    return "Time to learn some ";
  } else if (picker1 === 3){
    return "Lets relax and ";
  } else {
    return "error in group_pick";
  }
};
var item_pick = function() {
  if (picker1 === 1) {
    return work[picker2] ;
  } else if (picker1 === 2) {
    return course [picker3] ;
  } else if (picker1 === 3) {
    return activity[picker4] ;
  } else {
    return "error in item_pick";
  }
};
var task = group_pick() + item_pick();
document.write(task);

Answer 1

配列はインデックス 0 から始まります。1インデックスに値を割り当てると、値の0ないインデックスが作成されます ( undefined)。

var arr = new Array();
arr[1] = 'hi!';
console.log(arr); // [undefined, "hi!"]
console.log(arr.length) // 2

長さは 2 です。確認してください。その配列には 1 つの項目があると思っていましたが、長さは 2 です。

通常、配列インデックスを自分で管理しない方が簡単です。また、配列リテラル構文は通常、さまざまな理由で好まれます。

var arr = [];
arr.push('hi!');
console.log(arr); // ["hi!"]
console.log(arr.length) // 1

または、アイテムを直接含む配列を作成するだけで、非常に便利です。

var arr = [
  "hi",
  "there!"
];
console.log(arr); // ["hi", "there"]
console.log(arr.length) // 2

---

配列を適切に作成したら、次のようにしてランダムなアイテムを取得できます。

var arr = ['a','b','c'];
var index = Math.floor(Math.random() * arr.length);
console.log(arr[index]); // "a", "b" or possibly "c"

これは、時間(配列の長さ)までvar indexのランダムな値によって計算されるため、機能します。、またはを与えることができます。0.01.03012

つまり、arrここには3項目があり、1 つは0、もう 1つは 、もう11 つは2です。

ゼロから配列に対処することを学ぶことは、精神的に難しい場合があります。あなたはそれに慣れます。最終的。

---

これらのヒントを使用した実際の例: http://jsfiddle.net/du5Jb/

配列の宣言方法を変更し、計算+1から不要なものを削除しました。var pickerX

Answer 2

問題は、配列の属性がゼロから始まる.length配列内の要素の数をカウントすることです。たとえば、要素 1 から 5 があるため、Javascript によると、実際には6です。次に、乱数計算により、配列の末尾を過ぎた 1 から 7 までの数値が選択されます。これが の由来です。activity.lengthundefined

これを修正するには、インデックスの番号付けを 1 ではなく 0 から開始します。activity要素は 0 から 4 で、a.lengthは 5 になります。また+1、選択した計算から を削除します。

Answer 3

+1「ピッカー」を使用する場合、`Math.floor 関数の内部は必要ありません。

次の配列を検討してください。

var array = [ "one", "two", "three" ];

array.length; // 3

長さは 3 -- 意味があります。中には 3 つのアイテムがあります。
しかし、配列はゼロベースです。

array[0]; // "one"
array[1]; // "two"
array[2]; // "three"
array[3]; // undefined

したがって、それを追加すると+ 1、次のようになります:
a) 配列の最初のものを選択できないようにする b) 配列の最後の要素よりも正確に 1 大きい数値を選択できるようにする ( undefined)

Answer 4

ここでの問題は、ランダム変数を生成するときに PickerX + 1 を実行していることです...

したがって、それを行う正しい方法は、+1 なしの PickerX です。また、ifコマンドを使用してはならないトピックから外れて、スイッチケースを使用してみてください...

これが固定コードです-

var work = new Array()
        work[0] = "product design";
        work[1] = "product system design";
        work[2] = "product social media post x5";
        work[3] = "product Agent Recruitment system design";
        work[4] = "product profile system design";
        work[5] = "product Agent testing design";
        work[6] = "product customer support";
        work[7] = "product promotion";

var course = new Array();
    course[0] = "javascript";
    course[1] = "mandarin";
    course[2] = "javascript practical-Code Academy";
    course[3] = "javascript practical-learn Street";
    course[4] = "mandarin practical-memrise";
    course[5] = "new stuff with audiobooks";

var activity = new Array();
    activity[0] = "listen to podcasts";
    activity[1] = "chat online";
    activity[2] = "Exercise";
    activity[3] = "take a walk";
    activity[4] = "call a friend";



    var picker1 = Math.floor(Math.random() * 3 +1 );
    var picker2 = Math.floor(Math.random() * work.length );
    var picker3 = Math.floor(Math.random() * course.length );
    var picker4 = Math.floor(Math.random() * activity.length );




var group_pick = function(){
    switch(picker1){
        case 1:
            return "Time to work on ";
        case 2:
            return "Time to learn some ";
        case 3:
            return "Lets relax and ";
        default:
            return "error in group_pick";        
    }
};




var item_pick = function() {
    switch(picker1){
        case 1:
            return work[picker2] ;
        case 2:
            return course [picker3] ;
        case 3:
            return activity[picker4] ;
        default:
            return "error in item_pick";    
    }
};


var task = group_pick() + item_pick();
document.write( task );​

Answer 5

そんなに頑張らないでください。ゼロはあなたの友達です。ゴルフに行こう...

var work = [
    "product design", "product system design",
    "product social media post x5",
    "product Agent Recruitment system design",
    "product profile system design",
    "product Agent testing design",
    "product customer support", "product promotion",
], course = [
    "javascript", "mandarin",
    "javascript practical-Code Academy",
    "javascript practical-learn Street",
    "mandarin practical-memrise", "new stuff with audiobooks",
], activity = [
    "listen to podcasts", "chat online", "Exercise",
    "take a walk", "call a friend",
];
function rint(cap) {
    return (Math.random() * cap) | 0;
}
function pick(item) {
    switch (item) {
    case 0: return "Time to work on " +
        work[ rint(work.length) ];
    case 1: return "Time to learn some " + 
        course[ rint(course.length) ];
    case 2: return "Lets relax and " + 
        activity[ rint(activity.length) ];
    default: return "error";
    }
}
document.write(pick(rint(3)) + '<br>');