Melhore suas habilidades de codificação com esses testes de JavaScript

1. Explique o conceito e o uso de Promise.

        Em JavaScript, Promises são uma forma de lidar com operações assíncronas. Um objeto Promise representa uma operação que ainda não foi concluída, mas será concluída no futuro e o resultado dessa operação. As promessas são uma maneira de resolver o Callback Hell e tornar o código assíncrono mais claro e fácil de entender.

        O conceito básico de Promise é que um objeto Promise representa uma operação assíncrona, que pode estar em um dos três estados a seguir:

• Estado de espera (pendente): a operação assíncrona ainda não foi concluída e a promessa está no estado de espera.
• Cumprido: a operação assíncrona foi concluída com sucesso, a promessa está no estado concluído e o resultado da operação pode ser obtido.
• Rejeitado: a operação assíncrona falha, a promessa está no estado rejeitado e uma mensagem de erro pode ser obtida.

        O objeto Promise possui um then()método que recebe duas funções de callback como parâmetros, uma para lidar com o sucesso da operação e outra para lidar com a falha da operação. Quando o objeto Promise está no estado concluído, a função de retorno de chamada bem-sucedida é executada; quando o objeto Promise está no estado rejeitado, a função de retorno de chamada com falha é executada.

        Por exemplo, aqui está um exemplo usando Promises para ler o conteúdo de um arquivo:

const fs = require('fs');

function readFile(path) {
    
    
  return new Promise(function(resolve, reject) {
    
    
    fs.readFile(path, 'utf8', function(err, data) {
    
    
      if (err) {
    
    
        reject(err);
      } else {
    
    
        resolve(data);
      }
    });
  });
}

readFile('example.txt')
  .then(function(data) {
    
    
    console.log(data);
  })
  .catch(function(err) {
    
    
    console.log(err);
  });

        No exemplo acima, readFile()a função retorna um objeto Promise. Quando a leitura do arquivo for concluída, o objeto Promise será resolvido, a função callback de sucesso then()no método e o conteúdo do arquivo lido será passado para a função callback. Se ocorrer um erro, o objeto Promise será rejeitado, a função callback de falha catch()no método e a mensagem de erro será passada para a função callback.

        A promessa é um dos conceitos muito importantes no JavaScript moderno, torna o código assíncrono mais claro e fácil de entender e também pode ajudar a resolver problemas como callback hell.

2. Explique os cenários de aplicação de aceleração e debounce em JavaScript.

        Throttle e debounce são técnicas de otimização de desempenho comumente usadas em JavaScript. Seus cenários de aplicação são os seguintes:

        1. Cenário de aplicação do acelerador
        O acelerador pode limitar uma função a ser executada apenas uma vez dentro de um determinado período de tempo. Mesmo se vários eventos que acionam a função forem acionados continuamente, a função será executada apenas uma vez. Isso é útil nas seguintes situações:

• Operações frequentes do DOM, como arrastar, rolar, etc.
• Solicitações Ajax frequentes, como sugestões de pesquisa, etc.
• Associação frequente de eventos, como eventos de redimensionamento, etc.

        2. Cenários de aplicação do debounce O Debounce
pode aguardar um determinado período de tempo após o evento de disparo e então executar a função correspondente.Se houver vários eventos de disparo dentro do tempo de espera, ele reiniciará o tempo. Isso é útil nas seguintes situações:

• Digite na caixa de entrada, você pode esperar que a entrada do usuário pare antes de pesquisar
• Quando o tamanho da janela muda, você pode esperar que a janela pare de mudar de tamanho antes de acionar o cálculo do layout
• Evento de rolagem, você pode esperar que a rolagem pare antes de acionar o processamento

Resumindo, tanto o throttling quanto o anti-vibração são tecnologias que parecem otimizar o desempenho em JavaScript, e qual tecnologia escolher depende do cenário da aplicação.

3. Liste os tipos de dados primitivos em JavaScript.

        Em JavaScript, os tipos de dados primitivos são tipos de dados que não podem ser alterados. A seguir estão os tipos de dados primitivos em JavaScript:

1. Number (Number): Representa números, incluindo inteiros e números de ponto flutuante.
2. String (String): Indica dados de texto, entre aspas.
3. Booleano: Um valor que representa verdadeiro ou falso.
4. indefinido: Indica um valor indefinido ou inexistente.
5. null: Indica um valor vazio ou um objeto que não existe.
6. Símbolo: Representa um identificador único, a chave usada para criar um objeto.

        Todos esses tipos de dados acima são imutáveis, o que significa que seu valor não pode ser alterado. O oposto do tipo de dados original é o tipo de objeto (Object), que se refere a uma coleção composta por vários pares chave-valor, e seu valor pode ser alterado.

4. Explique o escopo em JavaScript.

        Em JavaScript, o escopo refere-se ao intervalo dentro do código onde uma variável é acessível. Em JavaScript, existem dois tipos de escopos: escopo global e escopo local.

        Escopo global refere-se a variáveis ​​acessíveis em todo o seu código, incluindo variáveis ​​definidas dentro e fora de funções. As variáveis ​​declaradas no escopo global podem ser acessadas em qualquer lugar, mas também estão sujeitas a alterações acidentais, portanto, as variáveis ​​globais devem ser usadas com cuidado.

        Escopo local refere-se a variáveis ​​declaradas dentro de uma função. Em JavaScript, toda chamada para uma função cria um novo escopo que só pode ser acessado dentro da função. Isso significa que as variáveis ​​declaradas dentro de uma função não são acessíveis fora da função, o que protege a variável de alterações acidentais.

        O escopo em JavaScript segue as regras do escopo léxico (Lexical Scope), ou seja, o escopo das variáveis ​​é determinado quando a função é definida, não quando a função é chamada. Isso significa que quando uma variável é acessada dentro de uma função, o mecanismo JavaScript primeiro verificará se a variável está definida dentro da função e, caso contrário, verificará se a variável está definida no escopo externo.

        O escopo é um dos conceitos importantes do JavaScript, que torna o uso de variáveis ​​e funções no código mais flexível e seguro.

5. Escreva uma função chamada multiplicação que aceite dois parâmetros a e b e retorne o produto deles.

        A seguir está uma função multiplychamada que recebe aa soma de dois argumentos be retorna seu produto. ,

function multiply(a, b) {
    
    
  return a * b;
}

        A função acima calcula o produto de dois argumentos usando *o operador e retorna o resultado. A função pode ser chamada com o seguinte código:

const result = multiply(3, 5);
console.log(result); // 输出 15

        No exemplo acima, 3 e 5 são passados ​​como parâmetros para multiplya função , e a função calculará seu produto e 15retornará o resultado. Por fim, o resultado é atribuído a uma variável resulte enviado para o console.

6. Escreva uma função reverseString que aceite um parâmetro de string e retorne a string invertida.

        Aqui está uma função reverseStringchamada que recebe um argumento de string e retorna a string invertida:

function reverseString(str) {
    
    
  return str.split('').reverse().join('');
}

        A função acima usa split()o método para converter uma string em uma matriz de caracteres, então usa reverse()o método para inverter a matriz e, finalmente, usa join()o método para combinar as matrizes invertidas em uma string. A função pode ser chamada com o seguinte código:

const reversed = reverseString('Hello, World!');
console.log(reversed); // 输出 !dlroW ,olleH

        No exemplo acima, uma string é passada 'Hello, World!'como um argumento para reverseStringa função e a função retornará a string invertida '!dlroW ,olleH'. Por fim, o resultado é atribuído a uma variável reversede enviado para o console.

7. Dado um array, escreva uma função findMax para encontrar o valor máximo no array e retorne-o.

        Aqui está uma função findMaxchamada que recebe um argumento de array e retorna o maior valor no array:

function findMax(arr) {
    
    
  let max = arr[0];
  for (let i = 1; i < arr.length; i++) {
    
    
    if (arr[i] > max) {
    
    
      max = arr[i];
    }
  }
  return max;
}

        A função acima usa uma variável maxpara armazenar o valor máximo encontrado atualmente. Ele itera pela matriz e usa ifa instrução para comparar cada elemento com o valor máximo atual e, se encontrar um elemento maior, atribui-o à maxvariável. Finalmente, a função retorna o valor máximo.

        A função pode ser chamada com o seguinte código:

const numbers = [3, 6, 2, 8, 1];
const maxNumber = findMax(numbers);
console.log(maxNumber); // 输出 8

        No exemplo acima, uma matriz de números é passada [3, 6, 2, 8, 1]como um argumento para findMaxa função e a função retornará o maior valor dessa matriz 8. Por fim, o resultado é atribuído a uma variável maxNumbere enviado para o console.

8. Crie um construtor Car, que contém os atributos marca (marca), modelo (modelo) e ano (ano de produção) e um método getInfo, que retorna a string de representação da marca, modelo e ano de produção do veículo.

        Aqui está um construtor Carchamado que contém as propriedades marca ( brand), modelo ( model) e ano ( year) e define um getInfométodo que retorna uma representação em string da marca, modelo e ano de fabricação do veículo:

function Car(brand, model, year) {
    
    
  this.brand = brand;
  this.model = model;
  this.year = year;

  this.getInfo = function() {
    
    
    return this.brand + ' ' + this.model + ' (' + this.year + ')';
  };
}

        O construtor acima usa thisa palavra-chave para definir três atributos brand, modele year, que são inicializados como parâmetros de entrada, respectivamente. Além disso, o construtor define um getInfométodo que retorna uma string contendo a marca, modelo e ano de fabricação do veículo.

        Você pode usar o seguinte código para criar uma instância Car e chamar o método getInfo:

const myCar = new Car('Toyota', 'Camry', 2020);
const carInfo = myCar.getInfo();
console.log(carInfo); // 输出 "Toyota Camry (2020)"

        No exemplo acima, é criado um myCarobjeto , que é Caruma instância de , e getInfoo método para retornar uma representação em string da marca, modelo e ano de fabricação do veículo. Por fim, o resultado é atribuído a uma variável carInfoe enviado para o console.

9. Explique as características e uso das funções de seta.

        A função de seta é um novo recurso no ES6 (ECMAScript 2015), que é uma forma de sintaxe de função mais concisa e legível. As funções de seta têm as seguintes características:

• Sintaxe concisa: as funções de seta omitem a palavra-chave da função e as chaves, tornando o código mais conciso e fácil de ler.

• Escopo léxico: O escopo de uma função de seta é o escopo léxico, que está vinculado ao contexto no qual está localizado.

• Este ponto: O ponto este da função de seta é determinado quando a função é definida, não quando é chamada. O this da função de seta aponta para o valor this em seu escopo léxico.

        Os casos de uso para funções de seta incluem:

• Simplifique as funções de retorno de chamada: onde as funções de retorno de chamada são necessárias, as funções de seta podem tornar o código mais conciso e claro.

• Simplifique as expressões de função: as funções de seta podem substituir a forma das expressões de função, tornando o código mais conciso.

• Simplifique a definição do método do objeto: as funções de seta podem definir facilmente os métodos do objeto, tornando o código mais conciso e fácil de ler.

        Aqui está um exemplo de código para funções de seta:

// 简化回调函数
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);

// 简化函数表达式
const sum = (a, b) => a + b;

// 简化对象方法定义
const person = {
    
    
  name: "Tom",
  sayHello: () => console.log("Hello, " + this.name)
};

10. Explique a cadeia de protótipos em JavaScript.

        Todo objeto em JavaScript possui um objeto protótipo (protótipo), e um objeto protótipo também pode ter seu próprio objeto protótipo, formando assim uma cadeia de protótipos.

        Quando acessamos uma propriedade ou método de um objeto, o JavaScript primeiro irá verificar se o próprio objeto possui a propriedade ou método, caso contrário, ele verificará se o objeto protótipo do objeto possui a propriedade ou método, caso contrário, ele continuará Procure o objeto protótipo do objeto protótipo do objeto até que o Object.prototype de nível superior seja encontrado. Se nenhum for encontrado, retorna indefinido.

        Veja a seguir um exemplo de código que demonstra o processo de construção e pesquisa da cadeia de protótipos:

// 定义一个构造函数
function Person(name) {
    
    
  this.name = name;
}

// 给Person.prototype添加一个方法
Person.prototype.sayHello = function() {
    
    
  console.log("Hello, " + this.name);
}

// 创建一个Person实例
const person = new Person("Tom");

// 访问person对象的name属性和sayHello方法
console.log(person.name); // "Tom"
person.sayHello(); // "Hello, Tom"

// 查看person对象的原型对象
console.log(Object.getPrototypeOf(person)); // Person {}

// 查看Person.prototype的原型对象
console.log(Object.getPrototypeOf(Person.prototype)); // Object {}

// 查看Object.prototype的原型对象
console.log(Object.getPrototypeOf(Object.prototype)); // null

        No código acima, definimos um construtor Person e adicionamos um método sayHello ao seu objeto protótipo. Criamos uma instância Person person, e acessamos o atributo name e o método sayHello através do objeto person. No processo de encontrar propriedades e métodos, o JavaScript primeiro verifica se o próprio objeto pessoa tem a propriedade ou método, se não for encontrado, então verifica se Person.prototype tem a propriedade ou método e finalmente encontra o método sayHello.

        Também podemos visualizar o objeto protótipo de um objeto através do método Object.getPrototypeOf, e o objeto protótipo do objeto protótipo até Object.prototype.

11. Explique os fechamentos em JavaScript e forneça um exemplo simples.

        Fechamento significa que uma função pode acessar variáveis ​​definidas fora dela, e salvar essas variáveis ​​no escopo formado dentro da função. Em JavaScript, toda função é um encerramento porque todas têm acesso a variáveis ​​definidas fora delas.

        Uma característica importante do encerramento é que ele pode manter o contexto da execução da função externa, o que significa que mesmo que a função externa tenha sido executada, o encerramento ainda pode acessar e manipular as variáveis ​​e funções que ele acessa. Esse mecanismo permite que muitos padrões e técnicas de programação avançada sejam implementados em JavaScript, como padrões de módulo, variáveis ​​e funções privadas e assim por diante.

        Aqui está um exemplo de código que demonstra a implementação de fechamento:

function createCounter() {
    
    
  let count = 0;
  return function() {
    
    
    count++;
    console.log(count);
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1(); // 1
counter1(); // 2
counter2(); // 1

        No código acima, definimos uma função createCounter que retorna uma função interna. Esta função interna pode acessar a variável count definida na função createCounter e operar sobre ela. Quando chamamos a função createCounter, ela retorna uma função de fechamento, e cada vez que a função de fechamento for chamada, ela acessará e manipulará a variável de contagem em seu contexto. Portanto, podemos criar vários contadores chamando diferentes funções de fechamento, cada uma mantendo seu próprio estado de contador.

        Closures são amplamente usados ​​e podem ser usados ​​para implementar muitas técnicas avançadas de programação, como currying, memoização e cálculo atrasado. Mas, ao mesmo tempo, também precisamos prestar atenção ao fato de que os encerramentos podem ocupar muita memória e causar vazamentos de memória, portanto, precisamos prestar atenção ao uso adequado dos encerramentos.

12. Como usar JavaScript para selecionar elementos DOM?

        Em JavaScript, você pode usar uma série de APIs para selecionar elementos DOM, incluindo os seguintes métodos comuns:

• document.getElementById(id): Selecione um elemento de acordo com seu atributo id.

• document.getElementsByClassName(className): Selecione elementos de acordo com seu atributo de classe. Retorna um objeto semelhante a um array.

• document.getElementsByTagName(tagName): Seleciona os elementos de acordo com seus nomes de tags. Retorna um objeto semelhante a um array.

• document.querySelector(selector): Selecione os elementos de acordo com o seletor CSS e retorne o primeiro elemento correspondente.

• document.querySelectorAll(selector): Selecione os elementos de acordo com o seletor CSS, retorne todos os elementos correspondentes e retorne um objeto NodeList.

        Os objetos de elemento retornados por esses métodos podem usar JavaScript para manipular e modificar seus atributos e estilos e também podem responder a operações do usuário por meio de seus ouvintes de evento.

        Aqui está um exemplo de código que demonstra como selecionar elementos DOM usando JavaScript:

// 选取元素
const header = document.getElementById("header");
const links = document.getElementsByClassName("link");
const paragraphs = document.getElementsByTagName("p");
const firstLink = document.querySelector(".link:first-of-type");
const allLinks = document.querySelectorAll(".link");

// 操作元素
header.innerText = "Welcome to my website!";
links[0].classList.add("active");
paragraphs[0].style.color = "red";
firstLink.href = "http://www.example.com";
allLinks.forEach(link => link.addEventListener("click", () => {
    
    
  console.log("Link clicked!");
}));

        No código acima, usamos diferentes métodos para selecionar elementos DOM e, em seguida, executamos diferentes operações neles, como modificar o conteúdo de texto do elemento, adicionar e excluir classes CSS, modificar o estilo do elemento, modificar os atributos do elemento elemento, etc., e ouvintes de eventos adicionados aos elementos para responder às ações do usuário.

13. Escreva uma função addClass que aceite um elemento DOM e um nome de classe como parâmetros e adicione o nome da classe ao atributo classList do elemento

        A seguir está um código de exemplo para a função addClass escrita:

function addClass(element, className) {
    
    
  if (element.classList) {
    
    
    element.classList.add(className);
  } else {
    
    
    element.className += ' ' + className;
  }
}

        No código acima, primeiro verificamos se o elemento possui o atributo classList e, em caso afirmativo, usamos diretamente o método classList.add para adicionar o nome da classe; caso contrário, usamos o método de concatenação de strings para adicionar o nome da classe. Esta função pode ser aplicada a todos os navegadores que suportam o atributo classList e versões antigas dos navegadores IE.

        Você pode usar esta função para adicionar nomes de classe ao atributo classList de qualquer elemento DOM, por exemplo:

const element = document.getElementById('my-element');
addClass(element, 'my-class');

        Isso adicionará o nome de classe "my-class" ao atributo classList do elemento DOM com id "my-element".

14. Explique a instrução try-catch em JavaScript

        A instrução try-catch em JavaScript é usada para lidar com possíveis exceções ou erros para garantir a estabilidade e a confiabilidade do programa. Uma instrução try-catch consiste em um bloco try e um bloco catch, onde o bloco try contém o código que pode lançar uma exceção e o bloco catch contém o código que manipula a exceção.

        Quando ocorre uma exceção no código do bloco try, o programa salta imediatamente para o bloco catch e executa o código contido nele. O objeto de exceção (ou seja, o objeto Error) pode ser acessado no bloco catch e as propriedades e métodos do objeto podem ser usados ​​para obter e processar informações de exceção. Depois que o bloco catch é executado, o programa continua a executar o código seguinte à instrução try-catch.

        Abaixo está um exemplo de código que demonstra o uso da instrução try-catch:

function divide(x, y) {
    
    
  try {
    
    
    if (y === 0) {
    
    
      throw new Error('Division by zero');
    }
    return x / y;
  } catch (e) {
    
    
    console.error(e);
    return NaN;
  }
}

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // NaN

        No código acima, definimos uma função de divisão, que é usada para calcular o quociente de dois números. No bloco try, primeiro julgamos se o divisor é 0 e, se for 0, usamos a instrução throw para lançar uma exceção. No bloco catch, capturamos o objeto de exceção e e usamos o método console.error para gerar as informações da exceção. Por fim, independentemente de ocorrer uma exceção no bloco try, o programa continua a executar o código após a instrução try-catch.

        O uso da instrução try-catch pode nos ajudar a capturar e tratar exceções que possam ocorrer no programa, garantindo assim a estabilidade e a confiabilidade do programa.