Classe avançada de JavaScript ES6 → ES11
- 1. Novos recursos do ES6
- 1.1. deixe a palavra-chave
- 1.2. palavra-chave const
- 1.3. Desestruturação e atribuição de variáveis
- 1.4. Cadeia de modelos
- 1.5. Simplifique a escrita de objetos
- 1.6. Função de seta
- 1.7. Valores padrão dos parâmetros da função
- 1.8. parâmetros de descanso
- 1.9. operador de spread
- 1.9.5. Clonagem de objetos
- 2、Símbolo
- 3. Iterador
- 4. Função geradora
- 5. Promessa
- 6、Definir
- 7、Mapa
Vídeo de referência: tutorial ES6 de front-end da Web de Shang Silicon Valley, cobrindo
o código de suporte ES6-ES11: https://gitee.com/Augenstern-creator/kuang-study-es6
1. Novos recursos do ES6
1.1. deixe a palavra-chave
A palavra-chave let é usada para declarar variáveis. As variáveis declaradas usando let possuem diversas características:
- Declarações duplicadas não são permitidas
//1. 变量不能重复声明
let star = '大林';
let star = '小林'; // 报错
- Escopo em nível de bloco (incluindo colchetes formados por if, else, while e for)
//2. 块儿级作用域
{
let girl = '秦xx';
}
console.log(gril); // 报错
- Não há promoção variável
//3. 不存在变量提升
console.log(song); // 报错
let song = '恋爱达人';
- Não afeta a cadeia de escopo
//4. 不影响作用域链
{
let school = '尚硅谷';
function fn(){
console.log(school);
}
fn(); // 尚硅谷
}
Cenários de aplicação:No futuro, basta usar let ao declarar variáveis.
1.2. palavra-chave const
A palavra-chave const é usada para declararconstante, a declaração const tem as seguintes características
- A declaração deve receber um valor inicial
//1. 一定要赋初始值
const A; // 报错
- Os identificadores geralmente são maiúsculos
//2. 一般常量使用大写(潜规则)
const A = 100;
- Declarações duplicadas não são permitidas
const SCHOOL = '尚硅谷';
const SCHOOL = 'ZZU'; // 报错
- O valor não pode ser modificado
//声明常量
const SCHOOL = '尚硅谷';
//3. 常量的值不能修改
SCHOOL = 'ATGUIGU'; // 报错
- escopo do bloco
//4. 块儿级作用域
{
const PLAYER = 'UZI';
}
console.log(PLAYER); // 报错！
- Modificações em elementos de matrizes e objetos não são contadas como modificações em constantes e nenhum erro será relatado.
const TEAM = ['UZI','MXLG','Ming','Letme'];
TEAM.push('Meiko'); // 不报错
Nota: A modificação das propriedades do objeto e as alterações nos elementos da matriz não acionarão erros const.
Cenários de aplicação:Use const ao declarar tipos de objetos e deixe ao declarar tipos que não sejam de objetos.
1.3. Desestruturação e atribuição de variáveis
ES6 permite extrair valores de arrays e objetos e atribuí-los a variáveis de acordo com determinados padrões, o que é chamado de atribuição de desestruturação.
1.3.1. Desestruturação e atribuição de arrays
- Sintaxe: Desestruturando dados usando colchetes
[]
//1. 数组的结构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao); //小沈阳
console.log(liu); //刘能
console.log(zhao); //赵四
console.log(song); //宋小宝
1.3.2. Desestruturação e atribuição de objetos
- Sintaxe: desestruturando objetos usando chaves
{}
//2. 对象的解构
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function(){
console.log("我可以演小品");
}
};
let {
name, age, xiaopin} = zhao;
console.log(name); // 赵本山
console.log(age); // 不详
console.log(xiaopin); // [Function: xiaopin]
xiaopin(); // 我可以演小品
// 复杂解构
let wangfei = {
name: "王菲",
age: 18,
songs: ['红豆','流年','暧昧','传奇'],
history: [
{
name : '窦唯'
},
{
name: '李亚鹏'
},
{
name: '谢霆锋'
}
]
};
let {
songs: [one,two,three], history: [first,second,third]} = wangfei;
console.log(one); // 红豆
console.log(two); // 流年
console.log(three); // 暧昧
console.log(first); // { name: '窦唯' }
console.log(second); // { name: '李亚鹏' }
console.log(third); // { name: '谢霆锋' }
- Geralmente desconstruímos menos atributos em objetos e mais métodos em objetos desconstruídos., use da seguinte forma:
let {
xiaopin} = zhao;
xiaopin();
Nota: Se você usa métodos de objeto e elementos de array com frequência, pode usar o formulário de atribuição de desestruturação.
1.4. Cadeia de modelos
String de modelo é uma versão aprimorada de string, usadaBacktick `identificação, Características:
- Novas linhas podem aparecer em strings
//1. 声明
let str1 = `我也是一个字符串哦!`;
console.log(str1, typeof str1);
// 我也是一个字符串哦! string
//2. 内容中可以直接出现换行符
let str2 = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`;
console.log(str2);
${xxx}Variáveis podem ser geradas usando o formulário
//3. 变量拼接
let lovest = '魏翔';
let out = `${
lovest}是我心目中最搞笑的演员!!`;
console.log(out);
// 魏翔是我心目中最搞笑的演员!!
Perceber:Use strings de modelo ao concatenar strings e variáveis
1.5. Simplifique a escrita de objetos
**ES6 permite que variáveis e funções sejam escritas diretamente entre chaves como propriedades e métodos de objetos. **Este tipo de escrita é mais conciso
let name = '尚硅谷';
let age = 20;
// 原始写法
const school1 = {
name: name,
age: age,
change: function() {
console.log('我们可以改变你!!');
},
improve: function() {
console.log('我们可以提高你!!');
}
}
// ES6 写法
const school2 = {
name,
age,
change() {
console.log('我们可以改变你!!');
},
improve() {
console.log("我们可以提高你的技能");
}
}
Perceber:As abreviações de objetos simplificam o código, portanto, use abreviações de agora em diante.
1.6. Função de seta
ES6 permite o uso deSeta =>definir função
// 声明一个函数原始写法
let fn = function(){
}
// 声明函数箭头函数写法
let fn = (a,b) => {
return a + b;
}
// 调用函数
let result = fn(1, 2);
console.log(result);
Notas sobre funções de seta :
- Se houver apenas um parâmetro formal, os parênteses podem ser omitidos
let add = (n) => {
return n + n;
}
console.log(add(9));
// 省略小括号
let add = n => {
return n + n;
}
- Se o corpo da função tiver apenas uma instrução, as chaves podem ser omitidas (Omita as chaves e a instrução return também deve ser omitida), o valor de retorno da função é o resultado da execução da instrução
// 函数体如果只有一条语句，则省略花括号和return语句
let pow1 = (n) => {
return n * n;
}
console.log(pow1(9));
// 省略花括号
let pow2 = n => n * n;
console.log(pow2(9));
- A função de seta this aponta para o valor de this no escopo onde é declarado.
//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
function getName() {
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
//设置 window 对象的 name 属性
window.name = '尚硅谷';
const school = {
name: "ATGUIGU"
}
//直接调用
getName();
getName2();
//call 方法调用
getName.call(school);
getName2.call(school);
- Funções de seta não podem ser instanciadas como construtores
//4. 箭头函数不能作为构造实例化对象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let me = new Person('xiao',30);
console.log(me); // Person is not a constructor
- argumentos não podem ser usados
//5. 不能使用 arguments 变量
let fn = () => {
console.log(arguments);
}
fn(1,2,3); // arguments is not defined
Perceber:As funções de seta não alteram esse ponteiro, portanto são muito adequadas para especificar funções de retorno de chamada.。
1.7. Valores padrão dos parâmetros da função
ES6 permite atribuir valores iniciais aos parâmetros de função
- Valor inicial dos parâmetros formais, parâmetros com valores padrão, geralmente localizados posteriormente (regra oculta)
// 1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a,c=10,b) {
return a + b + c;
}
let result = add(1,2);
console.log(result);
- Combinado com atribuição de desestruturação
//原始写法
function connect (options){
let host = options.host;
let username = options.username;
let password = options.password;
let port = options.password;
}
// 调用 connect 方法,向里面传个对象
connect({
host: 'atguigu.com',
username: 'root',
password: 'root',
port: 3306
})
// 与解构赋值结合写法
function connect({
host="127.0.0.1", username,password, port}){
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
// 调用 connect 方法,向里面传个对象
connect({
username: 'root',
password: 'root',
port: 3306
})
1.8. parâmetros de descanso
ES6 introduz parâmetros restantes, que são usados para obter os parâmetros reais das funções e são usados em vez de argumentos.
- rest funciona de forma semelhante aos argumentos
function add(...args){
console.log(args);
}
add(1,2,3,4,5);
- O parâmetro rest deve ser o último parâmetro formal
function minus(a,b,...args){
console.log(a,b,...args);
}
minus(100,1,2,3,4,5,19);
Perceber:O parâmetro rest é muito adequado para cenários com um número indefinido de funções de parâmetros.
1.9. operador de spread
Quando não há operador spread, você só pode usar push, splice, concat e outros métodos combinados para transformar os elementos existentes do array em parte de um novo array. Com o operador spread, a construção de novos arrays torna-se mais simples e elegante. O operador spread também é de três pontos (…). É como a operação inversa dos parâmetros restantes, convertendo um array em uma sequência de parâmetros separados por vírgula e descompactando o array.
// 展开数组
console.log(...[1,2,3]);
// 1 2 3
console.log(1,...[2,3,4],5)
// 1 2 3 4 5
console.log([1,...[2,3,4],5])
// [1, 2, 3, 4, 5]
1.9.1. Mesclagem de matrizes
//1. 数组的合并
const kuaizi = ['王太利', '肖央'];
const fenghuang = ['曾毅', '玲花'];
// ES5数组合并写法
const zuixuanxiaopingguo1 = kuaizi.concat(fenghuang);
console.log(zuixuanxiaopingguo1);
// [ '王太利', '肖央', '曾毅', '玲花' ]
// ES6扩展运算符数组合并
const zuixuanxiaopingguo2 = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo2);
// [ '王太利', '肖央', '曾毅', '玲花' ]
1.9.2. Clonagem de array
let arr = [1, 2, 3];
let arr2 = [...arr]; // [1, 2, 3]
arr2.push(4);
console.log(arr2); // [1, 2, 3, 4]
// 数组含空位
let arr3 = [1, , 3],
arr4 = [...arr3];
console.log(arr4); // [1, undefined, 3]
- Aqui está uma cópia superficial
1.9.3. Converter pseudo array em array real
<body>
<div></div>
<div></div>
<div></div>
<script>
//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div'); //获取到的是一个伪数组
console.log(divs);
const divArr = [...divs];
console.log(divArr);
</script>
</body>
1.9.4. Mesclagem de objetos
let age = {
age: 15};
let name = {
name: "Amy"};
let person = {
...age, ...name};
console.log(person); // {age: 15, name: "Amy"}
1.9.5. Clonagem de objetos
var obj1 = {
foo: 'bar', x: 42 };
var clonedObj = {
...obj1 };
console.log(clonedObj); // { foo: "bar", x: 42 }
2、Símbolo
ES6 introduz um novo tipo de dados primitivo, Símbolo, que representa um valor único.É o sétimo tipo de dados da linguagem JavaScript e é um tipo de dados semelhante a uma string.
- O valor de Symbol é único e é usado para resolver conflitos de nomenclatura.
- Os valores dos símbolos não podem ser operados com outros dados
- As propriedades do objeto definidas por Symbol não podem ser percorridas usando o loop for...in, mas você pode usá-lo
Reflect.ownKeyspara obter todos os nomes de chaves do objeto.
2.1. Criação de Símbolo
- Símbolo()
- Palavras-chave não podem ser adicionadas na frente de Symbol
newe um valor de tipo de símbolo exclusivo pode ser criado chamando-o diretamente.
- Palavras-chave não podem ser adicionadas na frente de Symbol
let s = Symbol();
console.log(s,typeof s);
// Symbol() symbol
- Stmbol('string')
- A string aqui é apenas uma descrição e o resultado retornado não é fixo.(Existem dois Zhang Sans, mas os números dos dois Zhang Sans são diferentes)
// 创建 Symbol 的时候，可以添加一个描述
const sym = Symbol('foo');
// sym.description 可以直接返回 Symbol 的描述
console.log(sym.description); // foo
let s2 = Symbol('张三');
let s3 = Symbol('张三');
// 没有两个 Symbol 的值是相等的
console.log( s2 === s3); //false
- Símbolo.for('string')
- Ao criar um Símbolo desta forma, um valor fixo do Símbolo pode ser retornado através de uma string
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 === s5); // true
2.2. Não pode ser operado com outros dados
//不能与其他数据进行运算
// let result = s + 100;
// let result = s > 100;
// let result = s + s;
2.3.7 tipos de dados de memória
Mantra: USONB == você é tão niubiilidade
você == indefinido
S == símbolo de string
o == objeto
n == número nulo
b == booleano
2.4. Aplicação do Símbolo
2.4.1. Símbolo como nome de atributo
No ES6, os nomes das propriedades dos objetos suportam expressões, então você pode usar uma variável como nome da propriedade, o que é útil para simplificar algum código, mas a expressão deve ser colocada entre colchetes :
let prop = "name";
const obj = {
// 使用表达式作为属性名,需要加方括号
[prop]: "liao"
};
console.log(obj.name); // 'liao'
Depois de entender esse novo recurso, vamos continuar aprendendo. O valor do símbolo pode ser usado como um nome de atributo porque o valor do símbolo é único, portanto, quando for usado como um nome de atributo, não será repetido com nenhum outro nome de atributo:
let name = Symbol();
let obj = {
[name]: "liao"
};
console.log(obj); // { Symbol(): 'liao' }
O objeto impresso possui um nome de atributo que é um valor de símbolo. Se quisermos acessar o valor deste atributo, não podemos usar .pontos, mas devemos usar colchetes:
console.log(obj[name]); // 'liao'
console.log(obj.name); // undefined
- Quando Símbolo é usado como nome do atributo, Símbolo precisa ser
[]encapsulado com
2.4.2. Travessia de nomes de atributos de símbolos
Use um valor do tipo Símbolo como nome do atributo. Este atributo não será for…inpercorrido ou obtido por Object.keys(), Object.getOwnPropertyNames(), ouJSON.stringify()
Object.keys(): Obtenha todas as chaves de nomes de atributosObject.getOwnPropertyNames(): Obtenha todas as chaves de nomes de atributosJSON.stringify(): Obtenha todos os nomes de atributos, chave e valor do valor do atributo
const obj1 = {
name: "林晓",
age: 18,
salary: 30000,
};
for (const key in obj1) {
// 遍历属性名 key
console.log(key);
/**
* name
age
salary
*/
}
// 获取所有的属性名 key
console.log(Object.keys(obj1));
// [ 'name', 'age', 'salary' ]
// 获取所有的属性名 key
console.log(Object.getOwnPropertyNames(obj1));
// [ 'name', 'age', 'salary' ]
// 获取所有的属性名key和属性值value
console.log(JSON.stringify(obj1));
// {"name":"林晓","age":18,"salary":30000}
- Podemos usar os dois métodos a seguir para obter os nomes dos atributos de todos os tipos de símbolos do objeto
Reflect.ownKeysNova APIObject.getOwnPropertySymbols：
/**
* 但是如果是 Symbol 属性名
*/
const salary = Symbol("salary");
const name = Symbol("name");
const obj = {
[name]: "林晓",
age: 18,
[salary]: 30000,
};
// age 只能拿到 key,拿不到Symbol类型的 name 属性名
for (const key in obj) {
console.log(key);
}
// 获取到obj对象里面的所有 Symbol 属性名
const SymbolPropNames = Object.getOwnPropertySymbols(obj);
console.log(SymbolPropNames); // [ Symbol(name), Symbol(salary) ]
// 获取第一个 Symbol 类型的属性值
console.log(obj[SymbolPropNames[0]]); // 林晓
// 获取第二个 Symbol 类型的属性值
console.log(obj[SymbolPropNames[1]]); // 30000
// 新的api: Reflect.ownKeys()
console.log(Reflect.ownKeys(obj)); // [ 'age', Symbol(name), Symbol(salary) ]
2.4.3、Symbol.for() eSymbol.keyFor()
O símbolo contém dois métodos estáticos fore keyFor.
const s1 = Symbol("liao");
const s2 = Symbol("liao");
const s3 = Symbol.for("liao");
const s4 = Symbol.for("liao");
console.log(s1 === s3); // false
console.log(s3 === s4); // true
- Usando o método Symbol diretamente, mesmo que as strings recebidas sejam iguais, os valores dos símbolos criados não são iguais entre si.
- Ao usar
Symbol.foro método para passar uma string, ele primeiro verificará se existe um valor de símbolo criado chamando o método Symbol.for usando a string. Se houver, retorne o valor. Caso contrário, use a string para criar um novo um.
// Symbol.keyFor() 方法传入一个 symbol 值,返回该值在全局注册的键名
const sym = Symbol.for("liao");
console.log(Symbol.keyFor(sym)); // 'liao'
2.5. Valor incorporado do símbolo
Além de definir os valores de Símbolo que você usa, o ES6 também fornece 11 valores de Símbolo integrados que apontam para métodos usados internamente na linguagem. Esses métodos podem ser chamados de métodos mágicos porque são executados automaticamente em cenários específicos.
| Símbolo.hasInstance | Este método é chamado quando outros objetos usam o operador instanceof para determinar se são instâncias do objeto. |
|---|---|
| Símbolo.isConcatSpreadable | A propriedade Symbol.isConcatSpreadable do objeto é igual a um valor booleano, indicando se o objeto pode ser expandido quando usado em Array.prototype.concat(). |
| Símbolo.espécie | Esta propriedade é usada ao criar objetos derivados |
| Símbolo.match | Quando str.match(myObject) for executado, se a propriedade existir, ela será chamada, retornando o valor de retorno do método. |
| Símbolo.substituir | Quando o objeto é chamado pelo método str.replace(myObject), o valor de retorno deste método é retornado. |
| Símbolo.pesquisa | Quando o objeto é chamado pelo método str.search (myObject), o valor de retorno deste método é retornado. |
| Símbolo.divisão | Quando o objeto é chamado pelo método str.split(myObject), o valor de retorno deste método é retornado. |
| Símbolo.iterador | Quando um objeto executa um loop for...of, o método Symbol.iterator será chamado e o iterador padrão do objeto será retornado. |
| Símbolo.toPrimitivo | Quando o objeto for convertido em um valor de tipo primitivo, este método será chamado e o valor do tipo primitivo correspondente ao objeto será retornado. |
| Símbolo. toStringTag | Quando o método toString é chamado no objeto, o valor de retorno do método é retornado. |
| Símbolo. inescapáveis | Este objeto especifica quais propriedades serão excluídas do ambiente with ao usar a palavra-chave with. |
3. Iterador
Iterador (Iterador) é um mecanismo. É uma interface que fornece um mecanismo de acesso unificado para diversas estruturas de dados diferentes. Contanto que a interface do Iterator seja implantada em qualquer estrutura de dados, a operação de passagem poderá ser concluída.
- ES6 criou um novo comando de travessia for...of loop, e a interface Iterator é usada principalmente para consumo por for...of
- Dados com interface de iterador nativo (podem ser percorridos usando for of)
- Variedade
- Argumentos
- Definir
- Mapa
- Corda
- TypedArray
- Lista de nós
3.0. Métodos comuns de matrizes
Aqui está uma breve introdução aos métodos comuns de arrays:
- Como alterar a matriz original:
// 1、push() : 数组末尾添加数据,返回数组的长度
var arr = [10, 20, 30, 40]
res = arr.push(20)
console.log(arr);//[10,20,30,40,20]
console.log(res);//5
// 2、pop():数组末尾弹出数据
var arr = [10, 20, 30, 40]
res =arr.pop()
console.log(arr);//[10,20,30]
console.log(res);//40
// 3、unshift(): 数组头部添加数据,返回数组的长度
var arr = [10, 20, 30, 40]
res=arr.unshift(99)
console.log(arr);//[99,10,20,30,40]
console.log(res);//5
// 4、shift():数组头部删除数据,返回删除的那个数据
var arr = [10, 20, 30, 40]
res=arr.shift()
console.log(arr);[20,30,40] // [ 20, 30, 40 ]
console.log(res);// 10
// 5、reverse():翻转数组,返回翻转的数据
var arr = [10, 20, 30, 40]
res=arr.reverse()
console.log(arr);//[40,30,20,10]
console.log(res);//[40,30,20,10]
// 6、sort(): 排序
var arr = [1,3,5,7,9,10]
console.log(arr.sort()); // 默认排序顺序为按字母升序,所以通常不准确
// 正序排列
arr.sort(function(a,b){
return(a-b)})
console.log(arr); // [1,3,5,7,9,10]
// 倒序排列
arr.sort(function(a,b){
return(b-a)})
console.log(arr);// [ 10, 9, 7, 5, 3, 1 ]
// 7、splice(开始的索引,截取几个): 截取数组,返回截取出来的数据
var arr = [1,3,5,7,9,10]
res = arr.splice(1,2) // 从索引1开始,截取2个数据
console.log(arr); // [ 1, 7, 9, 10 ]
console.log(res); // [ 3, 5 ]
//splice(开始的索引,截取几个,你要插入的数据) : 删除并插入数据
var arr = [1,3,5,7,9,10]
res = arr.splice(1,1,999,888) // 从索引1开始,截取1个数据删除,并插入999,888
console.log(arr); // [1, 999, 888, 5,7,9,10]
console.log(res); // [ 3 ]
- Método sem alterar o array original
// 1、concat(): 合并数据
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.concat(20,"小敏",50)
console.log(arr) // [10, 20, 10, 30, 40, 50, 60,20,"小敏",50]
console.log(res);// [10, 20, 10, 30, 40, 50, 60,20,"小敏",50]
//2、join(): 数组转字符串
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.join("+")
console.log(arr) // 数组不改变 [10, 20, 10, 30, 40, 50, 60]
console.log(res); // 10+20+10+30+40+50+60
console.log(typeof res); //string
//3、slice(开始索引,结束索引): 截取数组的一部分数据,返回截取的数据,前闭后开 [ ),
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.slice(1,4)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res);// [ 20, 10, 30 ]
//4、indexOf(数值):从左边开始检查数组中有没有这个数值,如果有就返回该数据第一次出现的索引
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res); // 返回第一次出现的索引 0
//indexOf(数值,开始的索引)
var arr = [10, 20, 10, 30, 40, 50, 60]
res = arr.indexOf(10,1)
console.log(arr) // 数组不改变 [10, 20, 10, 30,40, 50, 60]
console.log(res); // 2
//5、lastIndexOf(数值):从右边开始检查数组中有没有这个数值,如果有就返回该数据第一次出现的索引
- Novos métodos de array no ES6
//1、forEach(): 循环遍历数组
var arr = ['盖伦','德玛','大风车']
arr.forEach((item,index) => {
// index 是数组下标,item是数组值
console.log(index);
console.log(item);
});
// 2、map 加工数组
var arr = ['盖伦','德玛','大风车'];
var newArr = arr.map((item,index) => {
console.log(index);
console.log(item);
return item + '111'
});
console.log(newArr); // [ '盖伦111', '德玛111', '大风车111' ]
// 3、filter() 过滤数组
var arr = [1,2,3,4,5];
var newArr = arr.filter((item,index) => {
return item > 2;
});
console.log(newArr); // [ 3, 4, 5 ]
// 4、every() 判断数组是不是满足所有条件
var arr = [1, 2, 3, 4, 5]
var res = arr.every((item,index) => {
return item > 0;
})
console.log(res);//打印结果 true
// 6、find() 用来获取数组中满足条件的第一个数据
var arr = [1, 2, 3, 4, 5]
var res = arr.find((item,index) => {
return item > 3;
})
console.log(res);//打印结果 4
3.1. Percurso de matriz
Vejamos primeiro como percorrer o array:
//声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
//使用 for...in 遍历数组
for (let i in xiyou) {
// i 是数组的下标
console.log(i);
console.log(xiyou[i]);
}
//使用 for...of 遍历数组
for (let v of xiyou) {
console.log(v);
/**
* 唐僧
孙悟空
猪八戒
沙僧
*/
}
//forEach(): 循环遍历数组
var arr = ['盖伦','德玛','大风车']
arr.forEach((index,item) => {
// index 是数组下标,item是数组值
console.log(index);
console.log(item);
});
3.2. Percurso de objetos
//对象
var test = {
name : "zs",
age: "18"
}
// 遍历属性名和属性值
for(let key in test) {
// key 是属性名
console.log(key);
console.log(test[key]);
}
// 获取所有的属性名
console.log(Object.keys(test)); // [ 'name', 'age' ]
// 获取所有的属性值
console.log(Object.values(test)); // [ 'zs', '18' ]
3.3. Conversão entre arrays e objetos
- Converter array em objeto
// 数组转对象
// 方法一:使用 spread 扩展运算符
const arr1 = ['one','two','three'];
const obj1 = {
...arr1};
console.log(obj1); // { 0: 'one', 1: 'tow', 2: 'three' }
// 方法二:使用 foreach
const arr = [1,2,3,4,5];
let obj = {
};
arr.forEach((item,index) => {
// index 是下标, item 是数组元素
obj[index] = item;
})
console.log(obj); //{ 0: 1, 1: 2, 2: 3, 3: 4, 4: 5 }
- Converter objeto em array
3.4. Iterador
Por que os dados podem ser percorridos usando for...of? Porque o array tem uma propriedadeSymbol.iterator
//声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
console.log(xiyou);
Perceber:Quando você precisar personalizar a passagem de dados, pense em iteradores
// 原理
//声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
//创建数组的迭代器
let iterator = xiyou[Symbol.iterator]();
//调用对象的next方法
console.log(iterator.next());//{ value: '唐僧', done: false }
console.log(iterator.next());//{ value: '孙悟空', done: false }
console.log(iterator.next());//{ value: '猪八戒', done: false }
console.log(iterator.next());//{ value: '沙僧', done: false }
console.log(iterator.next());//{ value: undefined, done: true }
4. Função geradora
A função Generator é uma solução de programação assíncrona fornecida pelo ES6 e seu comportamento sintático é completamente diferente das funções tradicionais.
/**
* generator 生成器函数,可以通过 yield 关键字 , 将函数挂起
* 和普通函数的区别
* 1. function 后面,函数名之前有个星号 *
* 2. 只能在函数内部使用 yield 表达式
* 3. generator函数是分段执行的, yield 语句是赞同执行, next() 是恢复执行
*/
function* func(){
yield 2; // 调用一次 next 会执行到这
yield 3; // 调用二次 next 会执行到这
}
// 调用生成器函数,会返回一个迭代器对象,可以使用 next() 方法
let fn = func();
console.log(fn.next()); // { value: 2, done: false }
console.log(fn.next()); // { value: 3, done: false }
console.log(fn.next()); // { value: undefined, done: true }
Descrição do código:
*Não há restrição quanto à posição do asterisco- O resultado retornado pela função geradora é um objeto iterador. Você pode obter o valor após a instrução de rendimento chamando o próximo método do objeto iterador.
- Yield é equivalente à marca de pausa da função, e também pode ser considerado como o delimitador da função. Cada vez que o próximo método é chamado, um trecho de código é executado.
- O próximo método pode passar parâmetros reais como o valor de retorno da instrução de rendimento
5. Promessa
Promise é uma nova solução para programação assíncrona introduzida no ES6. Sintaticamente, Promise é um construtor que encapsula operações assíncronas e obtém seus resultados de sucesso ou falha .
//实例化 Promise 对象
// 参数是一个函数,函数的形参是 resolve 和 reject,resolve 可以改变 Promise的状态为成功,reject 可以改变Promise的状态为失败
const p = new Promise(function(resolve, reject) {
//异步操作定时器
setTimeout(function() {
let data = '数据库中的用户数据';
resolve(data);
}, 1000);
});
/**
* 调用 promise 对象的 then 方法,then 方法接收两个参数,两个参数都是函数,成功的函数形参是value,失败函数的形参是reason
* 上方 resolve 成功后,下面的 then 方法就是执行第一个函数的方法
*/
p.then(function(value) {
console.log(value); // 数据库中的用户数据
}, function(reason) {
console.error(reason);
})
Depois de obtermos os dados no temporizador de operação assíncrona, podemos chamar a função de resolução para alterar o estado do objeto Promise para que o estado do objeto Promise seja bem-sucedido. Após o sucesso, podemos chamar o método then do objeto Promise. O método then recebe dois parâmetros, ambos bem-sucedidos. É um tipo de função. O parâmetro formal bem-sucedido é chamado de valor, e o parâmetro formal com falha é chamado de razão. Quando o status do objeto Promise é detectado como bem-sucedido, o primeiro método em o método then é executado.
<script>
//实例化 Promise 对象
const p = new Promise(function(resolve, reject) {
// 使用定期器来做一个异步任务的模拟
setTimeout(function() {
// let data = '数据库中的用户'
// resolve(data)
let err = '数据读取错误';
reject(err);
}, 1000);
});
//调用 promise 对象的 then 方法
p.then(function(value) {
console.log(value);
}, function(reason) {
console.error(reason);
})
</script>
Depois de não conseguirmos obter dados no temporizador de operação assíncrona, chamamos a função de rejeição para alterar o estado do objeto Promise para que o estado do objeto Promise falhe. Após a falha, podemos chamar o método then do objeto Promise e detecte que o estado do objeto Promise falhou e execute o segundo método no método then.
Se o objeto Promise obtiver dados com sucesso, a primeira função de retorno de chamada será executada e o valor será gerado.
Se o objeto Promise não conseguir obter dados, a segunda função de retorno de chamada será executada e o motivo será gerado.
5.1. Promessa de encapsulamento de arquivos de leitura
//1. 引入 fs 模块
const fs = require('fs');
//2. 调用方法读取文件
// fs.readFile('./resources/为学.md', (err, data)=>{
// //如果失败, 则抛出错误
// if(err) throw err;
// //如果没有出错, 则输出内容
// console.log(data.toString());
// });
//3. 使用 Promise 封装
const p = new Promise(function(resolve, reject){
fs.readFile("./resources/为学.md", (err, data)=>{
//判断如果失败
if(err) reject(err);
//如果成功
resolve(data);
});
});
p.then(function(value){
console.log(value.toString());
}, function(reason){
console.log("读取失败!!");
});
5.2. Promessa encapsula Ajax
<body>
<script>
// 接口地址: https://api.apiopen.top/getJoke
const p = new Promise((resolve, reject) => {
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化
xhr.open("GET", "https://api.apiopen.top/getJ");
//3. 发送
xhr.send();
//4. 绑定事件, 处理响应结果
xhr.onreadystatechange = function () {
//判断
if (xhr.readyState === 4) {
//判断响应状态码 200-299
if (xhr.status >= 200 && xhr.status < 300) {
//表示成功
resolve(xhr.response);
} else {
//如果失败
reject(xhr.status);
}
}
}
})
//指定回调
p.then(function(value){
console.log(value);
}, function(reason){
console.error(reason);
});
</script>
</body>
5.3, método Promise.then
Chame o método then. O resultado de retorno do método then é um objeto Promise. O estado do objeto é determinado pelo resultado da execução da função de retorno de chamada.
- Se o resultado de retorno na função de retorno de chamada for uma propriedade do tipo não Promise
<body>
<script>
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("获取数据成功");
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值
const result = p.then(value => {
console.log(value);
return 123;
}, reason => {
console.warn(reason);
})
console.log(result);
</script>
</body>
- Se o resultado retornado na função de retorno de chamada for uma propriedade do tipo Promise
<body>
<script>
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("获取数据成功");
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//2. 如果回调函数中返回的结果是 promise 类型的属性,则then方法的返回状态由 promise 对象决定
const result = p.then(value => {
return new Promise((resolve, reject) => {
resolve('ok');
})
}, reason => {
console.warn(reason);
})
console.log(result);
</script>
</body>
- erro de lançamento
<body>
<script>
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("获取数据成功");
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//3.抛出错误
const result = p.then(value => {
//3. 抛出错误
throw new Error('出错啦!');
}, reason => {
console.warn(reason);
})
console.log(result);
</script>
</body>
Portanto, o método Promise.then pode ser chamado em uma cadeia
p.then(value =>{
},reason => {
}).then(value =>{
},reason => {
})
// 常用写法如下
p.then(value=>{
}).then(value=>{
});
5.4, método Promise.catch
<body>
<script>
const p = new Promise((resolve, reject)=>{
setTimeout(()=>{
//设置 p 对象的状态为失败, 并设置失败的值
reject("出错啦!");
}, 1000)
});
// p.then(function(value){}, function(reason){
// console.error(reason);
// });
p.catch(function(reason){
console.warn(reason);
});
</script>
</body>
Promise.catchSó Promise.thenfalta o açúcar sintático do primeiro parâmetro da função, thenentão basta usar .
6、Definir
-
Propriedades e métodos do mapa
-
sizeRetorna o número de elementos do Conjunto -
addAdicione um novo elemento e retorne o conjunto atual -
hasVerifique se um conjunto contém um elemento -
clearLimpe a coleção e retorne indefinido
-
//声明一个 set集合
let s = new Set();
let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
console.log(s2);// { '大事儿', '小事儿', '好事儿', '坏事儿' }
// 注意Set集合会有去重功能,所以s2的元素个数其实是4个
// 元素个数
console.log(s2.size); // 4
// 添加新的元素
s2.add('喜事儿');
console.log(s2); // { '大事儿', '小事儿', '好事儿', '坏事儿', '喜事儿' }
// 删除元素
s2.delete('坏事儿');
// 检测是否存在某个值
console.log(s2.has('糟心事')); // false
// 清空
s2.clear();
console.log(s2);// {}
6.1. Definir prática de coleta
- Desduplicação de matriz
let arr = [1,2,3,4,5,4,3,2,1];
//1. 数组去重
let result1 = new Set(arr); //此时result是一个集合,转化为数组只需要使用扩展运算符展开
console.log(result1); // { 1, 2, 3, 4, 5 }
let result2 = [...new Set(arr)];
console.log(result2); // [ 1, 2, 3, 4, 5 ]
- Encontre a intersecção de dois conjuntos
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
// 首先先对数组去重
let result = [...new Set(arr)];
let result2 = [...new Set(arr2)];
7、Mapa
-
ES6 fornece a estrutura de dados do mapa. É semelhante a um objeto e também é uma coleção de pares de valores-chave.
-
estrutura de dados. É semelhante a um objeto e também é uma coleção de pares de valores-chave. No entanto, o escopo da "chave" não se limita a strings. Vários tipos de valores (incluindo objetos) podem ser usados como chaves.
-
O mapa também implementa a interface do iterador, para que você possa usar
扩展运算符efor…of…percorrer. -
Propriedades e métodos do mapa
sizeRetorna o número de elementos do MapasetAdicione um novo elemento e retorne o mapa atualgetRetorna o valor-chave do objeto-chavehasVerifique se um mapa contém um elementoclearLimpe a coleção e retorne indefinido
//创建一个空Map
let m = new Map();
//创建一个非空Map
let m2 = new Map([
['name','林晓'],
['age','21']
]);
//添加元素
m2.set('salary','30000');
//添加方法
m2.set('fighting', function(){
console.log("加油!!");
});
console.log(m2);
// 获取
console.log(m2.get('name'));
console.log(m2.get('age'));
console.log(m2.get('salary'));
console.log(m2.get('fighting'));
// 删除
m2.delete('age');
// 检查是否包含某元素
console.log(m2.has('age'));
// 清除
m2.clear();
