[パート IV | JavaScript の基礎] 3: 関数、スコープと準備、オブジェクト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var nums = [1,2,3];
        alert(nums);// 1 2 3

        changeArrayElements(nums);
        function changeArrayElements(array) {
            array[1] = 5;
        }

        alert(nums);// 1 5 3


    </script>
</head>
<body>
    
</body>
</html>

戻り値

JSの戻り値とJavaの違いに注意してください

関数宣言文に戻り値の型を記述する必要はありません。
return XXX と書くだけです。
JS のすべての関数には戻り値があります。return を記述しない場合、デフォルトの戻り値: unknown が返されます。
return ステートメント以降のコードは実行されません。return は 1 つの値のみを返すことができます。複数の値がカンマで区切られている場合は、最後の値が優先されます。

コード例

		function getStr(){
            return 'AAA';
        }

        function getUndefined(){

        }

        alert(getStr()); //AAA
        alert(getUndefined()); //undefined

引数 (JS 固有の知識ポイント)

引数の役割: 渡されたすべての実際のパラメータを保存します。
本質は物体です。Javaのマップに少し似ています
すべての JS 関数にはこのオブジェクトが組み込まれているので、自由に使用してください。

導入

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        useArguments(1,2,3,4);

        // 若形参的个数不确定，则我们干脆不写形参了。这样的话，我们的JS会自动帮我们把传进来的形参，放进arguments[]数组中
        function useArguments() {
            // arguments的本质是一个对象。有点类似于Java的map
            console.log(arguments); //Arguments { 0: 1, 1: 2, 2: 3, 3: 4, … }
        }
    </script>
</head>
<body>
    
</body>
</html>

名前付き関数と匿名関数

導入

名前付き関数:

匿名関数:

予防

名前付き関数の場合、関数を呼び出すコードは、宣言された関数の前後に配置できます。

匿名関数の場合、関数呼び出しのコードは関数本体の後に記述する必要があります。
匿名関数宣言 var XXX = function(){...}; このとき、XXXには関数が格納されています

| 範囲

グローバルでもローカルでも、JS5 にはブロックレベルのスコープがありません

JS のスコープは Java のスコープと似ており、どちらもグローバルスコープと関数内のローカルスコープです。
ただし、JS には特殊なケースがあります。関数内で宣言された変数もグローバル変数です。次のように
次の点に特別な注意を払う必要があります。関数を除いて、JS5 はブロックレベルのスコープではありません。つまり、if と for で定義された変数はグローバル変数です。JS6 以降、if と for の変数はローカル変数になります。

近接性の原理: スコープチェーン

人間の言葉で言えば、同じ名前の変数が 2 つありますが、関数内でこの名前の変数を呼び出す場合、どちらの変数が使用されるでしょうか。近接性の原理

例

| 事前解析 (重要)

はじめに: 文の位置によって引き起こされる 4 つの現象

JS はインタープリタ言語です。つまり、1 行ずつ実行し、1 行ずつコンパイルします。したがって、これはコードの順序に関して多少厳密です。いくつかの例を以下に示します

上記現象の原理：JSコンパイル処理【重要！】

知識のポイント【重要！】

四文位置現象の説明

2 番目のケースの未定義の理由: JS のプリコンパイルで、変数宣言 var nume は現在のスコープの先頭にプロモートされますが、代入操作はプロモートされないため、代入がないことと同等であり、出力は未定義です

3 番目のケース: 名前付き関数の呼び出しが宣言ステートメントの前後で有効になる理由: JS は関数宣言を現在のスコープの前にプロモートし、呼び出しステートメントはプリコンパイルされた関数宣言ステートメントの後ろにあります。だから〜に電話してもいいよ

4 番目のケースのエラー報告の原則: fun 変数が最初に宣言されていますが、関数本体は割り当てられていません。このとき、fun() が呼び出されますが、この時点では JS は JS を関数ではなく変数であると認識します。したがって、「これは関数ではありません」というエラーが出力されます

事前分析に関する面接評価ポイント

上記のコードは次のように事前に解析されます。

変数巻き上げ: 宣言は前面に表示されますが、値は代入されません; 関数巻き上げ: 関数宣言は前面に表示されますが、呼び出されません

変数番号;

関数 fun() {

変数番号;

コンソール.ログ(番号);

数値 = 20;

}

数値 = 10;

楽しい（）;

最終的な出力は次のとおりです。

var a=b=c=9; は var a=9 ; b=9 ; c=9; と同等です; a はローカル変数、b と c はグローバル変数です

上記のコードは次のように事前に解析されます。

// 関数のプロモーション

関数 f1() {

//変数のプロモーション

変数a;

a=b=c=9;

コンソール.ログ(a);

コンソール.ログ(b);

コンソール.ログ(c);

}

f1(); //9 9 9

console.log(c);// 9

console.log(b);// 9

console.log(a);// ローカル変数、エラー

| カスタムオブジェクト

オブジェクトを作成する

リテラルを使用してオブジェクトを作成する

{ } は、キーと値のペアの形式で表現されます。var はオブジェクトの外部で宣言する必要があるだけです。オブジェクト内のプロパティは、キーと値のペア [コロン] を使用してリンクされます。オブジェクト内の匿名関数
オブジェクト名の後および中括弧の間は = であることに注意してください。属性名と属性値の間は次のとおりです。属性値の後は次のとおりではありません。

新しいオブジェクトでオブジェクトを作成する

オブジェクトは定型です。O は大文字であることに注意してください

等号を使用して割り当てを追加し、最後にセミコロンを付けます。
JS のオブジェクトには属性を追加できます

        //new关键字定义对象
        var obj2 = new Object();
        obj2.name = 'Klee2';
        obj2.age = 10;
        obj2.f2 = function() {
            alert('Hi~ ');
        }
        obj2['name'];
        obj2.f2();

コンストラクターを使用してオブジェクトを作成する (一般的に使用される)

コンストラクターは return を書く必要はありません

        //构造函数定义对象
        function Person(name , age , sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

            this.f3 = function() {
                alert('name = '+name+';age = '+age+';sex = '+sex);
            }
        }
        obj3 = new Person('Klee3 , 12 , Women');
        console.log(obj3.name);
        obj3.f3();

オブジェクトのプロパティとメソッドを使用する

最初のメソッドはメソッド 1 を呼び出します

对象名.属性名;

2 番目のメソッドはプロパティを呼び出します

对象名['属性名'];

オブジェクトを使用した関数

注:匿名関数 (メソッド) を呼び出すには、プロパティ名の後に () を追加する必要があります。
オブジェクトの外で定義された関数を「関数」、オブジェクトの内部で定義された関数を「メソッド」と呼びます。

对象名.函数名（）;

コード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //字面量定义对象
        var obj1 = {
            name : 'Klee',
            age : 9,
            f1 : function() {
                alert('I\'m Klee');
            }
        }
        //调用对象
        console.log(obj1.name);   //klee
        console.log(obj1['name']);  //klee
        obj1.f1();


    </script>
</head>
<body>
    
</body>
</html>

【分析】変数、プロパティ、関数、メソッド

変数: var キーワードを使用して、値を個別に宣言して割り当てます。var num = 10;など。

属性: クラスでは、キーワード var を宣言する必要はなく、割り当てにはキーと値のペアが使用されます。var obj = { num : 10; }など

機能: 宣言と呼び出しを別々に行います。呼び出すときは関数名 ( ) を単独で使用します。

メソッド: オブジェクト内で宣言され、無名関数と同等です。呼び出すときは、オブジェクト名を渡します。

新しいキーワードによって実行される 4 つのステップ

オブジェクトトラバーサルは...で使用します

要約する

| 組み込みオブジェクト

公式API

人に釣り方を教えるよりも、釣り方を教える方が良いです。将来的には、ここに来て JS の組み込みオブジェクトを見つけることができるようになります。

MDN: MDN ウェブドキュメント

数学オブジェクト数学

Math は内部のメソッドを直接呼び出すことができます。数学ではオブジェクトを作成するためにコンストラクターは必要ありません

基本操作

ランダム関数

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var nums = [-1,0,2,3,3];

        //基本运算
        console.log(Math.PI); //3.1415...
        console.log(Math.floor(2.33)); //向下取整 2
        console.log(Math.ceil(2.33)); //向上取整 3
        console.log(Math.round(-2.5)); //变大的四舍五入  -2
        console.log(Math.round(2.5)); //变大的四舍五入 3
        console.log(Math.abs(-2.3)); //绝对值 2.3
        console.log(Math.max(3,4,5)); //最大值 3
        console.log(Math.min(-1,1,0)); //最小值 -1
        console.log(Math.max()); //没有参数 则Math.max返回  -Infinity
        console.log(Math.max(1,'Klee'));; //有非数字，则返回 NaN
        console.log(Math.min());  //没有参数 则Math.min返回  Infinity

        
        // 函数：获取[min,max]的整数。  Math.Random()获取 [0,1)的小数
        function getRandom(min , max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(20,40));
        
    </script>
</head>
<body>
    
</body>
</html>

日付オブジェクト日付

日付オブジェクト Date はコンストラクターを通じて作成する必要があり、使用する前にインスタンス化する必要があります。

日付オブジェクトを作成する

日付オブジェクトの書式設定

デフォルトの形式: 醜い、時間の形式を学ぶ必要があります。
日付の指定された部分を取得する必要があるため、この形式を手動で取得する必要があります

日付の合計ミリ秒を取得する

日付オブジェクトは、1970 年 1 月 1 日 (UTC) からのミリ秒数に基づいています。
時間の計算には合計ミリ秒数を使用する方が正確であるため、よく使用されます。

上記 3 つの知識ポイントのコード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>


        //构造日期对象
        var date1 = new Date();//构造函数没有参数，则返回当前时间
        console.log(date1);

		//构造函数有参数，数字格式的时间   XXXX,XX,XX  则产生对应时间的date（JS的月份从0开始，数字为n，则JS认为是n+1月）
        var date2 = new Date(2001,1,1);
        console.log(date2);  //返回的是Febrary 2月【即通过数字型格式参数赋值的月份，比规定的要大一个月】

        var date3 = new Date('2001-1-1 8:8:8');//使用字符串时间的格式  'XXXX-XX-XX XX:XX:XX' （推荐！！！！）
        console.log(date3);  //通过字符串格式产生的date对象，月份和参数一致



        //日期格式化
        var year = date1.getFullYear();
        var month = date1.getMonth();
        var day = date1.getDate();
        console.log('今天是'+year+'年'+month+'月'+day+'日'); //今天是2022年4月23日【错误！需要注意，获取到的month从0开始，因此需要加1】
        console.log('今天是'+year+'年'+(month+1)+'月'+day+'日'); //今天是2022年5月23日 正确


        
        //当前日期的毫秒值（距1970.1.1）
        var date4 = new Date();
        console.log(date4.valueOf()); //1653310553063
        console.log(date4.getTime()); //1653310553063

        var dateTime = +new Date(); //+new Date() 返回的就是总的毫秒数
        console.log(dateTime); //1653310553063

        var dateTime2 = Date.now();//Html5新方法 有兼容问题
        console.log(dateTime2); //1653310553063

    </script>
</head>
<body>
    
</body>
</html>

配列オブジェクト配列

配列かどうかを判断する

instanceof 演算子は、オブジェクトが特定の型に属しているかどうかを判断できます。
Array.isArray() はオブジェクトが配列であるかどうかを判断するために使用されます。isArray() は HTML5 で提供されるメソッドです

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

配列への要素の追加と削除

配列ソート

配列インデックス方式

配列から文字列へ

その他の操作

上記の操作のすべてのコードサンプル

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var nums = [1,2,3,4,5,6];

        //判断是否为数组
        console.log(nums instanceof Array);//true
        console.log(Array.isArray(nums));//true
        console.log(nums.toString());//1 2 3 4 5 6


        //push向末尾增加一个 / 多个元素（改变原数组）
        nums.push(7,8);
        console.log(nums.toString()); //1 2 3 4 5 6 7 8 

        
        //pop删除最后一个元素（改变原数组）
        nums.pop();
        console.log(nums.toString());//1 2 3 4 5 6 7


        //unshift向开头增加一个 / 多个元素（改变原数组）
        nums.unshift(-2,-1,0);
        console.log(nums.toString());//-2 -1 0 1 2 3 4 5 6 7    


        //shift删除第一个元素（改变原数组）
        nums.shift();
        console.log(nums.toString());//-1 0 1 2 3 4 5 6 7


        //数组reverse()颠倒数组（改变原数组）
        var nums2 = nums.reverse();
        console.log(nums2.toString());//7,6,5,4,3,2,1,0,-1
        console.log(nums.toString());//7,6,5,4,3,2,1,0,-1


        //数组sort( )排序数组
        var nums3 = [3,5,2,4,5,6,5,3,2,4,4,2];
        nums3.sort();
        console.log(nums3.toString());//2,2,2,3,3,4,4,4,5,5,5,6


        //使用indexOf()查找元素的第一个索引
        console.log(nums3.indexOf(3));//3  即：元素3第一次出现的索引是3
        //使用lastIndexOf()查找元素的最后一个索引
        console.log(nums3.lastIndexOf(5));//10


        //除了toString，join('分隔符') 也可以把数组转为字符串
        console.log(nums3.join(' | '));//2 | 2 | 2 | 3 | 3 | 4 | 4 | 4 | 5 | 5 | 5 | 6


        //concat()用来连接两个数组为一个新数组
        var nums4 = [1,2];
        var nums5 = [3,4];
        var nums6 = nums4.concat(nums5);
        console.log(nums6.toString());//1,2,3,4


        //slice(beginIndex , endIndex)返回被截取项目的新数组，返回的是 [begin , end) 上的元素
        var nums7 = nums6.slice(1,3);
        console.log(nums7.toString());//2,3


        //splice(开始的索引数 ， 要删除的个数)
        var nums8 = [1,2,3,4,5,6];
        nums8.splice(2,3);//从索引2开始，删除3个数
        console.log(nums8.toString());//1,2,6

    </script>
</head>
<body>
    
</body>
</html>

基本的なラッパー型と文字列の不変

基本的な包装タイプ

文字列は不変です

文字列オブジェクト文字列

前述したように、文字列のすべてのメソッドは文字列自体を変更しません (文字列は不変です)。操作が完了すると新しい文字列が返されます。

文字ごとに位置を返す

応用

位置によって文字を返します (強調を追加)

ASCII表

文字列操作メソッド

インデックスを置き換える文字

配列→文字列を入れる

array.join('');

上記の構文の詳細なコード例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str1 = 'Klee';

        //根据字符返回位置
        console.log(str1.indexOf('K'));//0
        console.log(str1.indexOf('K',1));//('K',1)代表从索引=1的地方开始查找。因为没有找到K 所以返回的是 -1
        console.log(str1.lastIndexOf('e'));//3


        //根据位置返回字符
        var c1 = str1.charAt(0);
        console.log(c1);//K
        var c2 = str1[0];
        console.log(c2);//K H5、IE8+、CharAt支持

        
        //根据位置返回字符的ASCII码
        console.log(str1.charCodeAt(0));//75  （K的ASCII码是75）

        //substr（开始索引，字符个数） 截取字符串
        console.log(str1.substr(1,2));//le

        //replace（被替换字符串 ，要替换的字符串）
        console.log(str1.replace('le','el'));//leke


    </script>
</head>
<body>
    
</body>
</html>

【事例】最も多く出現する文字を数える

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age: 18
        }
        if (o['sex']) {
            console.log('里面有该属性');

        } else {
            console.log('没有该属性');

        }

        //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4
        // 核心算法：利用 charAt(） 遍历这个字符串
        // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
        // 遍历对象，得到最大值和该字符
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);
    </script>
</head>

<body>

</body>

</html>