JavaScriptノート02(jsループ/関数パラメータ/jsで値/検出タイプ/配列共通apiをコピー)

JavaScriptノート02
ノートを受け取る
5.for/forEach/for-in/for-of
bbは多くありません.コードを直接見ます.

//     
let array = ['a', 'b', 'c'];
//    for   
for (let index = 0; index < array.length; index++) {
    const element = array[index];
    console.log(element);
}
// forEach   
//      break       ，      return          
array.forEach(element => {
    console.log(element);
});
// for-in   
//    ，      index     ，     ，          
//              
for(const index in array) { 
    console.log(typeof index);
    console.log(array[index]);
}
// for-of   
//      、             
//        for-in       
//  forEach()    ，       break、continue return  
for (const value of array) {
    console.log(value);
}

//     
let me = {
    name: 'ethan',
    sex: 'male',
    age: 24,
    hobby: 'skate'
};
// for-in   
for (const key in me) {
    //           
    if (me.hasOwnProperty(key)) {
        console.log(key+ ':' + me[key]);
    }
}
// for-of   ，   ，    for-in
for (const key of Object.keys(me)) {
    console.log(key+ ':' + me[key]);
}

ただし、for-ofは配列やオブジェクトのほか、string文字列やES 6に追加されたMap、Setのセットを巡回することもできます.もっと詳しくはこの文章を参考にすることができます.まとめると、ループ配列はbreakやreturnがforEachを推奨する必要はなく、必要であればfor-ofを使用し、通常のオブジェクトをループしてfor-inを使用し、残りはfor-ofを使用します.もちろん、最も重要なのは彼らの異同を理解し、使用するときに柔軟に選択することです.
6.関数パラメータについて

jsの関数は、パラメータの個数も、パラメータのタイプも気にしない

jsのパラメータは、実際には配列

です.
上記2点については、以下のコードを参照してください.

function abc (a, b) {
    console.log(arguments[0]);
    console.log(arguments.length);
}

abc(1);   // 1 1
abc(1,2); // 1 2
abc();    // undefined 0

関数のパラメータを削除します

function abc () {
    console.log(arguments[0]);
    console.log(arguments.length);
}

abc(1);   // 1 1
abc(1,2); // 1 2
abc();    // undefined 0

結果は同じです.
argumentsという特性を利用して加数を規定しない加算を書くことができます

function add() {
    if(arguments.length === 0){
        return 0;
    } else {
        let total = 0;
        for(let i = 0; i < arguments.length; i++) {
            if (typeof arguments[i] === 'number') {
                total += arguments[i];
            }
        }
        return total;
    }
}

console.log(add(1, 3, 5.5, 7, 8, 'a', 10));

argumentsは実際にはarrayのインスタンスではなくarrayオブジェクトであることに注意してください.

function abc() {
    console.log(arguments);
    console.log(typeof arguments);
}

abc();    // {}  object
abc(1);   // { '0': 1 }  object
abc(1,2); // { '0': 1, '1': 2 }  object

7.基本タイプと参照タイプで値をコピーする場合の違い
この点は主に参照タイプを理解するためのポインタです

基本タイプの値をコピーすると、変数オブジェクトに新しい値が作成され、この新しい値が新しい変数割り当ての場所にコピーされます.

参照タイプの値をコピーすると、コピーされるのはポインタです.ポインタは異なりますが、ポインタは同じオブジェクトを指しているので、1つの参照タイプがオブジェクトを変更すると、別の参照タイプの値も変化します.

let num1 = 1;
let num2 = num1;
console.log(num2); // 1
num1 = 2;
console.log(num2); // 1 ，    ，   num1       num2   

let person1 = {
  name: 'ethan'
};
let person2 = person1;
console.log(person2.name);  // ethan
person1.name = 'ethan1';
console.log(person2.name); // ethan1，    ，   person1      person2   ，             。

8.検出タイプ
typeofについてはノート1の4点目に明記されているが、typeofは主に基本データ型を検出するために用いられ、検出された値が1つのオブジェクトまたはnullであればobjectに戻るので、変数が参照型の場合はinstanceof,person instanceof RegExpを用いてtrue/falseに戻り、Array.isArray()に戻るのが望ましい.配列の場合、array.splice(0,2);も使用できます.
9.配列共通API
方法
さぎょう
戻り値
push()
任意の数のパラメータを配列の末尾に追加
修正後の配列の長さ
pop()
配列の最後から最後の項目を削除
削除されたアイテム
shift()
配列の最初の項目を削除
削除されたアイテム
unshift()
数値フロントエンドに任意の数のパラメータを追加
修正後の配列の長さ
reverse()
配列アイテムの順序を反転
反転配列
sort()
並べ替え、デフォルトは基本的に使わず、書き換える必要があります
ソート後の配列
concat()
現在の配列に基づいて新しい配列を作成
新しい配列
splice()
削除:array.splice(2,0,"red","green");パラメータは、削除する最初の項目と削除する項目の数です.
元の配列から削除されたアイテムからなる配列
挿入:array.splice(2,1,"red","green"); 2 2から0を削除し、redとgreenを挿入します.
元の配列から削除されたアイテムからなる配列
置換:factorial前の1条を参考にして、とても分かりやすいです
元の配列から削除されたアイテムからなる配列
indexOf()/lastIndexOf()
配列の先頭/末尾からn番目のビットにあるアイテムを検索
検索されたアイテム
every()
配列内の各項目に対して所定の関数を実行する
各項目がtrueを返すとtrueが返されます
filter()
配列内の各項目に対して所定の関数を実行する
この配列のtrueを返すすべてのアイテムからなる新しい配列を返します.
forEach()
配列内の各項目に対して所定の関数を実行する
戻り値はありません.このメソッドは主に配列を巡回するために使用されます.
map()
配列内の各項目に対して所定の関数を実行する
各関数呼び出しの結果からなる配列
some()
配列内の各項目に対して所定の関数を実行する
trueを返すアイテムが1つある場合はtrueを返します.
reduce()/reduceRight()
集計方法は、次の例を見てみましょう
例をみる
sortメソッドの書き換え

function compare (value1, value2) {
  if(value1 < value2) {
    return -1;
  } else if (value1 > value2) {
    return 1;
  } else {
    return 0;
  }
}

let values = [14,2,53,3,6,1];
values.sort(compare);
console.log(values);  // [ 1, 2, 3, 6, 14, 53 ]

反復メソッド

let num = [1,2,3,4,5,4,3,2,1];

// every()
let everyResult = num.every((item, index, array) => {
  return (item > 2);
});
console.log(everyResult); // false

// filter()
let filterResult = num.filter((item, index, array) => {
  return (item > 2)
})
console.log(filterResult); // [ 3, 4, 5, 4, 3 ]

// forEach()
num.forEach(element => {
  console.log(element);  // 1  2  3  4  5  4  3  2  1
});

// map()
let mapResult = num.map((item, index, array) => {
  return (item*2);
})
console.log(mapResult);  // [ 2, 4, 6, 8, 10, 8, 6, 4, 2 ]

// some()
let someResult = num.some((item, index, array) => {
  return (item > 2);
})
console.log(someResult);  // ture

reduce()

let num = [1,2,3,4,5];
let sum = num.reduce((prev, cur, index, array) => {
  return prev+cur;
})
console.log(sum);  // 15

10.calleeについて(厳密モードではエラー)
関数の内部にはargumentsとthisの2つの特殊なオブジェクトがあります.calleeはargumentsのプロパティです.
まず、非常に古典的な階乗関数を見てみましょう.

function factorial(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * factorial(num-1);
  }
}

console.log(factorial(5)); // 120

しかし、このように問題があり、関数の実行と関数名arguments.calleeが密接に結合されており、この問題を解決するためにapply()を使用することができます.

function factorial(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * arguments.callee(num-1);
  }
}

console.log(factorial(5)); // 120

これにより、関数名を変更しても影響はありません.注意callerと区別します.
11.関数のapply()、call()およびbind()メソッド

call():関数を実行する役割ドメインとパラメータ配列の2つのパラメータを受け入れます.

function sum (num1, num2) {
  return num1 + num2;
}

function applySum1 (num1,num2,num3) {
  return sum.apply(this, [num1, num3]);
}

function applySum2 (num1,num2,num3) {
  return sum.apply(this, arguments);
}

console.log(applySum1(10,20,30)); // 40
console.log(applySum2(10,20,30)); // 30

apply():作用はapply()と同じで、異なるのは2番目のパラメータで、配列の形式ではなく、一つ一つ列挙しなければならない.

function sum (num1, num2) {
  return num1 + num2;
}

function callSum1 (num1,num2,num3) {
  return sum.call(this, num1, num3);
}

console.log(callSum1(10,20,30)); // 40

役割:call()とbind()の最大の役割は、関数を拡張して実行できる役割ドメインです.以下のようにします.

window.color = 'red';
let o = {
  color: 'green'
};
function printColor () {
  return this.color;
}

console.log(printColor.call(window)); // red
console.log(printColor.call(this));   // red
console.log(printColor.call(o));      // green

このメソッドは、toFix()関数に渡される値にバインドされる関数のインスタンスを作成します.次のようにします.

let color = 'red';
let o = {
  color: 'green'
};
function printColor () {
  console.log(this.color);
}

let objectPrintColor = printColor.bind(o);
objectPrintColor(); // green

12.具体的な桁数の小数処理
自分の仕事の中でちょうど出会って、要求は四捨五入して小数点の後の1位を取ることです.私はこう書きました.

s = Math.round(s * 10) / 10 + 'km';

今日本を読むと既成の方法があります.

let s = 3.1415;
s1 = Math.round(s * 10) / 10;
console.log(s1);         // 3.1
console.log(typeof s1);  // number

s2 = s.toFixed(1);
console.log(s2);         // 3.1
console.log(typeof s2);  // string

もっと簡単なようですが、データ型は変わりました.だから本の中でもNumberタイプをインスタンス化しないことをお勧めします.もちろん、私が仕事で使っているシーンを見ても、実はtoFix()を使っても影響しません.