[Parte IV | Conceptos básicos de JavaScript] 3: funciones, alcance y preparación, objetos

Después de la prueba, modificar los elementos de la matriz en el parámetro de la función es equivalente a modificar el elemento de la dirección correspondiente de la matriz

<!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>

valor devuelto

Tenga en cuenta la diferencia entre el valor de retorno de JS y Java

No es necesario escribir el tipo de retorno en el enunciado de la declaración de la función.
Solo escribe return XXX;
¡Todas las funciones en JS tienen un valor de retorno! Si no escribe retorno, habrá un valor de retorno predeterminado: indefinido
No se ejecuta el código después de la declaración de devolución. return solo puede devolver un valor. Si varios valores están separados por comas, prevalecerá el último.

ejemplo de código

		function getStr(){
            return 'AAA';
        }

        function getUndefined(){

        }

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

argumentos (puntos de conocimiento específicos de JS)

El papel de los argumentos: almacenar todos los parámetros reales pasados.
La esencia es un objeto. Un poco similar al mapa de Java
Todas las funciones de JS tienen incorporado este objeto, ¡siéntete libre de usarlo!

introducir

ejemplo

<!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>

Funciones con nombre y anónimas

introducir

Función nombrada:

función anónima:

Precauciones

Para funciones con nombre, el código para llamar a la función se puede colocar antes o después de la función declarada;

Para funciones anónimas, el código de la llamada a la función debe escribirse después del cuerpo de la función.
Declaración de función anónima var XXX = function(){...}; En este momento, XXX almacena una función

| alcance

Global y local, JS5 no tiene alcance a nivel de bloque

El alcance de JS es similar al de Java, ambos son alcances globales y alcances locales dentro de las funciones.
Pero JS tiene un caso especial: las variables declaradas dentro de las funciones también son variables globales. como sigue
Se debe prestar especial atención a: ¡ Excepto por las funciones, JS5 no tiene un alcance de nivel de bloque! Es decir: ¡las variables definidas en if y for son variables globales! Después de JS6, las variables en if y for son variables locales.

El principio de proximidad: la cadena de alcance

En términos humanos, hay dos variables con el mismo nombre. Al llamar a una variable con este nombre en una función, ¿qué variable se usa? El principio de proximidad

ejemplo

| Análisis previo (importante)

Introducción: cuatro fenómenos inducidos por la posición de la oración

JS es un lenguaje interpretado, es decir: ejecutar línea por línea, compilar línea por línea. Así que esto es algo estricto sobre el orden del código. A continuación se dan algunos ejemplos.

El principio del fenómeno anterior: proceso de compilación JS [¡importante! 】

Puntos de conocimiento [¡importante! 】

Explicación de los fenómenos de posición de cuatro oraciones

El motivo de indefinido en el segundo caso: precompilación JS, la declaración de variable var número se promueve al frente del alcance actual, pero la operación de asignación no se promueve, por lo que es equivalente a ninguna asignación, y la salida no está definida

El tercer caso: la razón por la cual la llamada de la función nombrada puede tener efecto antes y después de la declaración de declaración: JS promoverá la declaración de función al frente del alcance actual, y luego la declaración de llamada está detrás de la declaración de declaración de función precompilada, para que puedas llamar ~

El principio del informe de errores en el cuarto caso: primero se declara una variable divertida, pero no se asigna el cuerpo de la función. En este momento, se llama a fun(), pero JS piensa que JS es una variable en lugar de una función en este momento. , por lo que genera el error "esto no es una función"

Puntos de evaluación de la entrevista relacionados con el análisis previo

El código anterior se analiza previamente como:

Elevación de variables: la declaración se trae al frente, pero no se le asigna ningún valor; función de elevación: la declaración de la función se trae al frente, pero no se llama

var núm;

funcion diversion() {

var núm;

consola.log(num);

número = 20;

}

número = 10;

divertido();

El resultado final es: indefinido

var a=b=c=9; es equivalente a var a=9 ; b=9 ; c=9; a es una variable local, b y c son variables globales

El código anterior se analiza previamente como:

// promoción de la función

función f1() {

//promoción variable

var a;

a=b=c=9;

consola.log(a);

consola.log(b);

consola.log(c);

}

f1(); //9 9 9

consola.log(c);// 9

consola.log(b);// 9

console.log(a);//variable local, error

| objeto personalizado

Crear objeto

Crear objetos usando literales

{ } se expresa en forma de pares clave-valor. var solo necesita declararse fuera del objeto. Las propiedades dentro de un objeto se vinculan mediante pares clave-valor [dos puntos]. Una función anónima dentro de un objeto.
Tenga en cuenta que después del nombre del objeto y entre las llaves está = entre el nombre del atributo y el valor del atributo es: después del valor del atributo no es;

Crear objetos con nuevo Objeto

El objeto es una forma fija. Tenga en cuenta que O es mayúscula

Use el signo igual para agregar la tarea, seguido de un punto y coma al final
Los objetos en JS pueden agregarles atributos

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

Crear objetos usando constructores (comúnmente usados)

El constructor no necesita escribir 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();

Usar propiedades y métodos de objetos

El primer método llama al método uno.

对象名.属性名;

El segundo método llama a la propiedad

对象名['属性名'];

funciones usando objetos

Nota: para llamar a una función anónima (método), debe agregar un () después del nombre de la propiedad
La función definida fuera del objeto se llama [función], y la función definida dentro del objeto se llama [método]

对象名.函数名（）;

ejemplo de código

<!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>

【Análisis】Variables, propiedades, funciones, métodos

Variables: use la palabra clave var para declarar y asignar valores individualmente. Tales como var num = 10;

Atributo: en una clase, no es necesario declarar la palabra clave var y se utiliza un par clave-valor para la asignación. Como var obj = { num: 10; }

Función: declarar y llamar por separado. Use el nombre de la función ( ) solo cuando llame;

Método: Declarado en el objeto, que equivale a una función anónima. Al llamar, pase el nombre del objeto.nombre del método ();

Los cuatro pasos realizados por la nueva palabra clave

Usos transversales de objetos para... en...

Resumir

| objeto incorporado

API oficial

Es mejor enseñarle a un hombre a pescar que enseñarle a pescar. En el futuro, puede venir aquí para encontrar algunos objetos incorporados de JS

MDN: Documentos web de MDN

Objeto matemático Matemáticas

Las matemáticas pueden llamar directamente a los métodos internos. Las matemáticas no necesitan un constructor para crear objetos.

operaciones básicas

función aleatoria

Código de muestra

<!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>

Objeto de fecha Fecha

El objeto de fecha Fecha debe crearse a través de un constructor, y debe crearse una instancia antes de que pueda usarse

crear objeto de fecha

formato de objeto de fecha

Formato por defecto: feo, tenemos que aprender a formatear la hora.
Necesita obtener la parte especificada de la fecha, por lo que debemos obtener manualmente este formato

Obtener la fecha en milisegundos totales

Los objetos de fecha se basan en la cantidad de milisegundos desde el 1 de enero de 1970 (UTC)
A menudo usamos el número total de milisegundos para calcular el tiempo porque es más preciso

Ejemplos de código de los tres puntos de conocimiento anteriores

<!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>

Objeto de matriz Matriz

Determinar si es una matriz

El operador instanceof puede determinar si un objeto pertenece a un cierto tipo
Array.isArray() se usa para determinar si un objeto es una matriz, isArray() es un método proporcionado en 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

Agregar y eliminar elementos de la matriz

tipo de matriz

Método de índice de matriz

matriz a cadena

otras operaciones

Todos los ejemplos de código para las operaciones anteriores

<!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>

Tipo de envoltorio básico y cadena inmutable

tipo de embalaje básico

Las cadenas son inmutables

Objeto de cadena Cadena

Como se mencionó anteriormente, todos los métodos de la cadena no modificarán la cadena en sí (la cadena es inmutable), y se devolverá una nueva cadena después de que se complete la operación.

posición de retorno por carácter

solicitud

Devolver caracteres por posición (énfasis añadido)

tabla ASCII

Métodos de manipulación de cadenas

carácter para reemplazar el índice

poner matriz → cadena

array.join('');

Ejemplo de código detallado para la sintaxis anterior

<!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>

[Caso] Cuenta los personajes con más ocurrencias

<!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>