js関数やメソッドに関するいくつかの補足まとめ

データ型、コンストラクタ、プロトタイプとプロトタイプチェーンに関する補足説明

一、データ型#

1.5 つの基本型#

string
number
boolean
undefined 未定義
null 値が空
symbol シンボルを表し、シンボル型は唯一であり変更不可能

最も一般的なのは最初の 3 つ、文字列、数値、ブール値です。

2. 一般的な参照型#

参照型はデータと機能を一緒に整理するためのデータ構造です。

オブジェクト－Object, 配列－Array, 関数－Function, 正規表現－RegExp, 日付－Date など。

二、関数#

1. 関数とは？#

独立した機能を持つコードブロックで、js では function キーワードを使用して関数を定義します。
コードの構造をより明確にし、コードの可用性を向上させます。
js 関数の分類：ユーザー定義関数とシステム関数。

2. ユーザー定義関数#

名前のない関数である匿名関数があり、クロージャを作成し、グローバル変数の汚染を避けます。

匿名即時実行関数

概念：匿名関数の定義が完了した後に即座に実行され、関数式を実行します。
目的：クロージャを実現し、独立した名前空間を作成します。
使用：グループ演算子 ()、void 演算子、~ 演算子、! 演算子など。
使用シーン：関数式、オブジェクトプロパティ、イベント、イベントパラメータ、戻り値。
匿名関数を定義した後は、必ず呼び出す必要があります。

// 関数式
window.onload = function() {
    let funcobj = function() {
        alert("関数式の匿名関数")
    }
    funcobj();
}

// オブジェクトプロパティ
window.onload = function() {
    let obj = {
        name: function() {
            alert('オブジェクトプロパティの匿名関数')
        }
    }
    obj.name();
}

3. 組み込み関数#

グローバルの下に置かれると関数と呼ばれ、オブジェクトの中に置かれるとメソッドと呼ばれます。

通常の関数

alert() // アラートボックス
confirm()   // 確認ボックスを表示
prompt()    // 入力ボックスを表示
isNaN()     // 数字かどうかを判断
parseInt()  // 文字列または浮動小数点数を整数に変換
parseFloat()    // 文字列を整数または浮動小数点数に変換
eval()      // 式の結果を計算

配列関数

forループを使用して配列を繰り返し処理します。

var arr = [1,2,3,4];
for(var i = 0; i<arr.length; i++) {
    console.log(arr[i])
}

// 出力 1,2,3,4

for inを使用して配列を繰り返し処理します。

var arr = [1,2,3,4];
for (var i in arr) {
    console.log(arr[i]);
}

// 出力 1,2,3,4

// 追加
unshift()   // 配列の先頭に要素を追加し、返り値は配列の長さ
push()      // 配列の末尾に要素を追加し、返り値は配列の長さ
conat()     // 2つの配列を結合し、返り値は結合後の配列
    var arr1 = [1];
    var arr2 = [2];
    let arr = arr1.concat(arr2);
    console.log(arr); // [1,2]

/*****************************************/
// 削除
pop()       // 配列の最後の要素を削除し、返り値は削除された要素
shift()     // 配列の最初の要素を削除し、返り値は削除された要素
splice(a,b) // 指定位置aの後のb個の要素を削除し、返り値は削除された要素
slice(a,b)  // a位置からb位置までの要素を削除

/*****************************************/
// 検索
indexOf()   // 配列が指定された要素を含むかどうかを判断し、存在すれば要素を返し、存在しなければ-1を返す
includes()  // 配列が指定された要素を含むかどうかを判断し、存在すればtrue、存在しなければfalseを返す

/*****************************************/
// その他
sort()      // 配列を規則に従ってソート
    var arr1 = [4,5,6];
    var arr2 = [1,2,3];

    var arrAscSort = arr5.sort((a, b) => a-b); // 昇順ソート
    console.log(arrAscSort); // [ 1, 1, 2, 3, 5, 6 ]
    
    var arrDescSort = arr5.sort((a, b) => b-a); // 降順ソート
    console.log(arrDescSort); // [ 6, 5, 3, 2, 1, 1 ]

reerse()    // 配列を反転
    var arr = [1,2,3,4,5,6];
    // reverse()メソッドを直接呼び出す
    console.log(arr.reverse())  // [6,5,4,3,2,1]

Array.from()    // 一連のデータを配列形式に変換
    var str = '一連のデータを配列形式に変換'
    console.log(Array.from(str))
    // ["一", "連", "の", "デ", "ー", "タ", "を", "配", "列", "形", "式", "に", "変", "換"]

Array.isArray() // 変数が配列かどうかを判断
    var str = '一連のデータを配列形式に変換'
    console.log(Array.isArray(str))
    // false

日付関数 Date ()

時間を取得

var time = new Date()
// 現在の時間を取得
// Fri Nov 13 2020 20:21:35 GMT+0800 (中国標準時間)

getFullYear()   // 現在の年を取得
getMonth()      // 現在の月を取得  -1
getDate()       // 今日の日付を取得
getHours()      // 現在の時間を取得
getMinutes()    // 現在の分を取得
getSeconds()    // 現在の秒を取得
getMilliseconds()   // 現在のミリ秒を取得
getTime()       // タイムスタンプ-1970年から現在までのミリ秒数を取得

時間を設定

setYear()       // 年を設定
setMonth()      // 月を設定
setDate()       // 日付を設定
setHours()      // 時間を設定
setMinutes()    // 分を設定
setSeconds()    // 秒を設定

数学関数 Math

主に使用される数学関数メソッド

Math.abs()  // 絶対値
Math.ceil() // 切り上げ
Math.floor()// 切り捨て
Math.round()// 四捨五入
Math.random()   // 0-1の間のランダム数を生成

random () の応用－指定桁のランダム数を生成

function getRandomNumber(min, max){
    return Math.floor(Math.random()*(max - min)) + min;
}
console.log(getRandomNumber(1000, 9999));

文字列関数

indexOf()   // 文字列を検索し、インデックス値を返す
    var arr = ["字", "符", "串", "函", "数"]
    console.log(arr.indexOf("串"))  // 2

split()     // 文字列を指定の区切り文字で分割する
    var str = "文字列関数"
    console.log(str.split(''))      // ["字", "符", "串", "函", "数"]

trim()      // 文字列の両端の空白を削除
    var str = "   文字列関数   "
    console.log(str)        // [   文字列関数   ]
    console.log(str.trim()) // [文字列関数]

match()     // 指定したルールで値を検索
    var str = "文字列関数文字列関数"
    console.log(str.match(/文字列/))    // 文字列
    document.write(str.match(/文字列/)) // 文字列

search()    // 文字列の最初の出現位置を返す
    var str = "文字列関数文字列関数"
    console.log(str.search('串'))   // 2

replace()   // 指定した文字列を置き換える
    var str = "文字列関数文字列関数"
    console.log(str.replace('字','函'))
    // 函符串関数文字列関数

substring(a,b) // 指定位置から文字列を切り取る、左閉右開
    // インデックスaからbまでを切り取る
    var str = "文字列関数文字列関数"
    console.log(str.substring(0,3)) // 文字列

substr(a,b)    // 指定位置から指定個の文字を切り取る
    // インデックスaから始めてb個の文字を切り取る
    var str = "文字列関数文字列関数"
    console.log(str.substr(0,3))    // 文字列