1: O que é ES6 e por que devo aprendê-lo?
ES6 (ECMAScript) é a especificação de sintaxe em JavaScript e é uma parte importante do JavaScript. Ele especifica como escrevemos JS.
Razões para aprender ES6:
(1) A versão ES6 é a que apresenta mais alterações e é um marco.
(2) ES6 adicionou muitos novos recursos gramaticais, tornando a programação mais fácil e eficiente.
(3) ES6 é uma tendência de desenvolvimento inicial e uma habilidade necessária para o emprego.
2: A diferença entre let, var e const.
(1) As variáveis declaradas usando var têm um escopo global ou de função, podem ser usadas antes da declaração, podem ser definidas repetidamente e atribuídas várias vezes, e há um fenômeno de promoção de variáveis.
(2) As variáveis declaradas usando let têm um escopo em nível de bloco. Elas são declaradas primeiro e depois usadas. Elas não podem ser definidas repetidamente, mas podem ser atribuídas várias vezes. Não há promoção de variável.
(3) O que é declarado usando const é uma constante, e o valor da constante não pode ser modificado no código que aparece posteriormente. O escopo é um escopo em nível de bloco, que é declarado primeiro e depois usado. Não pode ser definido repetidamente. Os tipos de dados básicos não podem ser atribuídos várias vezes e não há promoção de variável.
(4) As variáveis declaradas usando let e const não pertencem ao objeto de nível superior e retornam indefinidas.
3: Como desconstruir o objeto, dê um exemplo!
O uso mais básico da desestruturação de objetos é recuperar o valor de uma chave de propriedade de um objeto. Primeiro encontre o atributo com o mesmo nome e depois atribua-o à variável correspondente.
Por exemplo, defina um objeto Pessoa, ele possui dois atributos: nome real e idade
deixe Pessoa = {nome real:"Zhang San",idade:20};
deixe {nome real:meunomereal,idade,altura=180} = Pessoa;
console.log(meunomereal,idade,altura); // Zhang San 20 180
As propriedades do objeto não estão em ordem e a variável deve ter o mesmo nome da propriedade para obter o valor correto, caso contrário será indefinida se a desestruturação falhar.
4: Qual é a diferença entre for...in e for...of?
for in percorre o índice (atravessando tipos enumeráveis)
for of percorre o valor da matriz (atravessável iterável tem uma interface iteradora)
5: Qual é a diferença entre isso de uma função de seta e isso de uma função normal?
a diferença:
(1) O ponto this da função ordinária é o chamador, e o ponto this da função de seta é sua função pai.
(2) O this na função de seta é definido na declaração, enquanto o this na função normal é definido quando é chamado.
(3) As funções de seta não podem mudar a direção disso, e apenas as funções de função comuns podem mudar a direção disso.
6: Dê um exemplo de como usar strings de modelo no ES6.
função demonstração(){
retornar "fim";
}
deixe es6 = "es6!";
deixe str = `olá,${es6},${demo()}`;
console.log(str); // olá,es6!,fim
7: O mapa do método de extensão e o filtro do Array têm os mesmos pontos e diferenças.
Semelhanças: nenhum dos dois verifica um array vazio; nenhum deles altera o array original.
Diferença: o método map() retorna um novo array, e os elementos do array são os valores processados pelos elementos originais do array após chamar a função.
O método filter() cria um novo array cujos elementos são verificados verificando todos os elementos no array especificado que atendem aos critérios.
8: Qual é o resultado da figura a seguir e por quê?
O resultado de saída é 10.
A variável i é declarada por var e é uma variável global. O escopo é todo o loop for. Quando i muda em cada loop, o valor de cada i em a também é alterado de forma síncrona. Quando o loop termina, o valor de i é 10.
9: Qual é o resultado da saída na figura abaixo e por quê?
A saída é 20.
Primeiro chame a função fn por meio de obj, e o ponto this dentro da função fn é obj. A função de seta em setTimeout não mudará a direção disso, então aqui this.a === obj.a, o resultado da impressão é o valor de a dentro do obj.
10: Qual é o resultado da figura a seguir sobre o parâmetro rest? Por que?
O resultado é um erro, pois o parâmetro restante deve ser o último parâmetro formal, caso contrário será relatado um erro.
Dois: questões de operação
1: Use uma matriz para salvar um grupo de alunos. Os atributos de cada aluno incluem nome, pontuação, nome e pontuação na caixa de entrada na página. Clique no botão de consulta para selecionar todos os alunos com pontuações superiores a 60. O efeito é como mostrado na figura: (30 pontos)
código mostrado abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1：用数组保存一组学生，每个学生的属性包含，姓名，分数，姓名和分数从页面input框获取，点击查询按钮，刷选出分数大于60的所有同学。效果如图：(30分) -->
<div>
姓名: <input placeholder="输入学生姓名" type="text" id="uname" value="" />
分数: <input placeholder="输入学生分数" type="text" id="score" value="" />
<button>添加</button>
</div>
<p>学生信息:</p>
<ul class="persons"></ul>
<input type="button" value="查找及格的学生" id="search" />
<p>及格学生如下:</p>
<ul class="pass"></ul>
<script>
let sName = document.querySelector('#uname');
let sScore = document.querySelector('#score');
let btn = document.querySelector('button');
let ul1 = document.querySelector('.persons');
let search = document.querySelector('#search');
let ul2 = document.querySelector('.pass');
let arr = [];
btn.addEventListener('click', function () {
let obj = { uname: sName.value, score: sScore.value };
arr.push(obj);
sName.value = '';
sScore.value = '';
let str = '';
arr.forEach(item => {
const { uname, score } = item;
str = str + `<li>姓名：${uname} 分数：${score}</li>`;
})
ul1.innerHTML = str;
})
search.addEventListener('click', function () {
let newArr = arr.filter(item => {
return item.score >= 60;
})
let str = '';
newArr.forEach(item => {
const { uname, score } = item;
str = str + `<li>姓名：${uname} 分数：${score}</li>`;
})
ul2.innerHTML = str;
})
</script>
</body>
</html>Efeito:
2: Calcule o valor mínimo em um conjunto de arrays. Tais como: const arr = [3,4,10,1,9]; (20 pontos)
