[Parte IV | Noções básicas de JavaScript] 3: Funções, escopo e preparação, objetos

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

Observe a diferença entre o valor de retorno JS e Java

Não há necessidade de escrever o tipo de retorno na instrução da declaração da função
Basta escrever return XXX;
Todas as funções em JS têm um valor de retorno! Se você não escrever return, haverá um valor de retorno padrão: indefinido
O código após a instrução de retorno não é executado. return só pode retornar um valor. Se vários valores forem separados por vírgulas, prevalecerá o último.

exemplo de código

		function getStr(){
            return 'AAA';
        }

        function getUndefined(){

        }

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

argumentos (pontos de conhecimento específicos de JS)

O papel dos argumentos: armazenar todos os parâmetros reais passados.
A essência é um objeto. Um pouco semelhante ao mapa de Java
Todas as funções JS possuem este objeto embutido, sinta-se à vontade para usá-lo!

introduzir

exemplo

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

Funções nomeadas e anônimas

introduzir

Função nomeada:

função anônima:

Precauções

Para funções nomeadas, o código para chamar a função pode ser colocado antes ou depois da função declarada;

Para funções anônimas, o código da chamada de função deve ser escrito após o corpo da função
Declaração de função anônima var XXX = function(){...}; Neste momento, XXX armazena uma função

| escopo

Global e local, JS5 não possui escopo em nível de bloco

O escopo do JS é semelhante ao do Java, ambos são escopos globais e locais dentro de funções.
Mas JS tem um caso especial: variáveis declaradas dentro de funções também são variáveis globais. do seguinte modo
Atenção especial deve ser dada a: Exceto para funções, JS5 não tem escopo em nível de bloco! Ou seja: as variáveis definidas em if e for são variáveis globais! Depois do JS6, as variáveis em if e for são variáveis locais.

O Princípio da Proximidade: A Cadeia de Escopo

Em termos humanos, existem duas variáveis com o mesmo nome, ao chamar uma variável com este nome em uma função, qual variável é utilizada? O princípio da proximidade

exemplo

| Pré-análise (importante)

Introdução: Quatro fenômenos induzidos pela posição da frase

JS é uma linguagem interpretada, ou seja: roda linha por linha, compila linha por linha. Portanto, isso é um tanto rígido quanto à ordem do código. Alguns exemplos são dados abaixo

O princípio do fenômeno acima: processo de compilação JS [importante! 】

Pontos de conhecimento [importante! 】

Explicação dos fenômenos de posição de quatro sentenças

O motivo para indefinido no segundo caso: pré-compilação JS, a variável de declaração var nume é promovida para a frente do escopo atual, mas a operação de atribuição não é promovida, portanto, é equivalente a nenhuma atribuição e a saída é indefinida

O terceiro caso: a razão pela qual a chamada da função nomeada pode entrar em vigor antes e depois da instrução de declaração: JS promoverá a declaração de função à frente do escopo atual e, em seguida, a instrução de chamada estará atrás da instrução de declaração de função pré-compilada, então você pode ligar ~

O princípio do relatório de erros no quarto caso: uma variável divertida é declarada primeiro, mas o corpo da função não é atribuído. Neste momento, fun() é chamado, mas JS pensa que JS é uma variável em vez de uma função neste momento , portanto, gera o erro "isto não é uma função"

Pontos de avaliação de entrevista relacionados à pré-análise

O código acima é pré-analisado como:

Hoisting de variável: a declaração é trazida para a frente, mas nenhum valor é atribuído; hoisting de função: a declaração da função é trazida para a frente, mas não é chamada

var num;

função divertida() {

var num;

console.log(num);

num = 20;

}

num = 10;

diversão();

A saída final é: indefinido

var a=b=c=9; é equivalente a var a=9 ; b=9 ; c=9; a é uma variável local, b e c são variáveis globais

O código acima é pré-analisado como:

// promoção da função

função f1() {

//promoção variável

var a;

a=b=c=9;

console.log(a);

console.log(b);

console.log(c);

}

f1(); //9 9 9

console.log(c);// 9

console.log(b);// 9

console.log(a);// variável local, erro

| objeto personalizado

criar objeto

Criar objetos usando literais

{ } é expresso na forma de pares chave-valor. var só precisa ser declarado fora do objeto. As propriedades dentro de um objeto são vinculadas usando pares chave-valor [dois pontos]. Uma função anônima dentro de um objeto
Observe que após o nome do objeto e entre as chaves está = entre o nome do atributo e o valor do atributo está: após o valor do atributo não está;

Criar objetos com novo Objeto

Objeto é uma forma fixa. Note que O é maiúsculo

Use o sinal de igual para anexar a atribuição, seguido de um ponto e vírgula no final
Objetos em JS podem adicionar atributos a eles

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

Criar objetos usando construtores (comumente usados)

Construtor não precisa escrever 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 propriedades e métodos de objeto

O primeiro método chama o método um

对象名.属性名;

O segundo método chama a propriedade

对象名['属性名'];

funções usando objetos

Nota: Para chamar uma função anônima (método), você precisa adicionar um () após o nome da propriedade
A função definida fora do objeto é chamada [função] e a função definida dentro do objeto é chamada [método]

对象名.函数名（）;

exemplo 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álise】Variáveis, propriedades, funções, métodos

Variáveis: use a palavra-chave var para declarar e atribuir valores individualmente. Tal como var num = 10;

Atributo: Em uma classe, não há necessidade de declarar a palavra-chave var e um par chave-valor é usado para atribuição. Tal como var obj = { num : 10; }

Função: declarar e chamar separadamente. Use o nome da função ( ) sozinho ao chamar;

Método: Declarado no objeto, que equivale a uma função anônima. Ao chamar, passe o nome do objeto nome do método ();

As quatro etapas executadas pela nova palavra-chave

A travessia de objetos usa for...in...

Resumir

| objeto embutido

API oficial

É melhor ensinar um homem a pescar do que ensiná-lo a pescar. No futuro, você pode vir aqui para encontrar alguns objetos embutidos do JS

MDN: MDN Web Docs

objeto matemático matemática

Math pode chamar diretamente os métodos internos. A matemática não precisa de um construtor para criar objetos

operações básicas

função aleatória

Código de amostra

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

O objeto de data Date precisa ser criado por meio de um construtor e precisa ser instanciado antes de poder ser usado

criar objeto de data

formatação de objeto de data

Formato padrão: Feio, precisamos aprender a formatar a hora.
Precisa obter a parte especificada da data, então temos que obter manualmente este formato

Obtenha o total de milissegundos da data

Os objetos de data são baseados no número de milissegundos desde 1º de janeiro de 1970 (UTC)
Muitas vezes usamos o número total de milissegundos para calcular o tempo porque é mais preciso

Exemplos de código dos três pontos de conhecimento acima

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

Array objeto Array

Determinar se é uma matriz

O operador instanceof pode determinar se um objeto pertence a um determinado tipo
Array.isArray() é usado para determinar se um objeto é um array, isArray() é um método fornecido em 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

Adicionar e excluir elementos da matriz

classificação de matriz

Método de índice de matriz

array para string

outras operações

Todos os exemplos de código para as operações acima

<!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 wrapper básico e string imutável

tipo de embalagem básica

Strings são imutáveis

Objeto String String

Como mencionado anteriormente, todos os métodos da string não modificarão a string em si (a string é imutável) e uma nova string será retornada após a conclusão da operação

posição de retorno por caractere

aplicativo

Retorna caracteres por posição (ênfase adicionada)

tabela ASCII

Métodos de manipulação de strings

caractere para substituir o índice

colocar array → string

array.join('');

Exemplo de código detalhado para a sintaxe acima

<!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] Conte os caracteres com mais ocorrências

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