Novos métodos de array: 1. from(), que pode converter um objeto semelhante a array ou iterável em um array real 2. of(), que pode converter um conjunto de valores em um array, o que compensa as deficiências; do construtor de array Array() ; 3. find() e findIndex(), retorne o primeiro elemento do array que atenda às condições 4. fill() e assim por diante.
Como começar rapidamente com o VUE3.0: Entre
no ambiente operacional deste tutorial: sistema Windows 7, ECMAScript versão 6, computador Dell G3.
1. Array.from()
O método Array.from é usado para converter dois tipos de objetos em arrays reais:
objetos semelhantes a array e
objetos iteráveis (incluindo ES6 new A estrutura de dados Set e Map)
significa que enquanto à medida que a estrutura de dados da interface Iterator é implantada, Array.from pode convertê-la em um array.
No desenvolvimento real, geralmente pode ser usado para converter a coleção NodeList retornada pela operação DOM, bem como os argumentos dentro da função.
Quandoo objeto
passa um parâmetro, ele é usado para converter o array de classe em um array real
para remover a duplicação.
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...O mesmo efeito também pode ser alcançado console.log([...new Set(arr)]) //[1,2,3,5]
Para navegadores que não implementam este método, você pode usar Array.método protótipo.slice em vez de
cost toArray = (() => {
Array.from? Array.from: obj => [].slice.call(obj)
})() também pode receber um segundo parâmetro, que é passado para uma função para obter um efeito semelhante ao método map, processando cada elemento e retornando o array processado
Array.from([1,2,3 ], item => item *2) //[2,4,6]
O comprimento da string retornada
pode ser usado para converter a string em um array e, em seguida, retornar o comprimento da string, porque pode lidar corretamente com vários caracteres Unicode, isso evita O próprio bug do JS de contar caracteres Unicode maiores que /uFFFF como 2 caracteres
function countLength(string) {
retornar Array.from(string).length
} 2. Array.of()
O método Array.of é usado para converter um conjunto de valores em um array. Compense as deficiências do construtor de array Array(). Como o número de parâmetros é diferente, o comportamento de Array() será diferente
//O código a seguir mostra a diferença Array.of(3);
Array.of(3, 11, 8); // [3,11,8]
nova Matriz(3);
nova Matriz(3, 11, 8); // [3, 11, 8]
//O método Array.of pode ser simulado com o código a seguir.
função ArrayOf() {
return [].slice.call(argumentos);
} 3. Find() e findIndex() de instâncias de array
find()
retornam o primeiro membro do array que atende às condições. é encontrado membro e, em seguida, retorna o membro. Se não houver nenhum membro que atenda às condições, retorne indefinido
A função de retorno de chamada deste método recebe três parâmetros: valor atual, posição atual,
exemplo de matriz original 1
[1,12,4. ,0,5] .find((item,index, arr) => return item < 1) // 0
Exemplo 2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find também suporta esse tipo de pesquisa complexa var points = [
{
x: 10,
e: 20
},
{
x: 20,
ano: 30
},
{
x: 30,
e: 40
},
{
x: 40,
e: 50
},
{
x: 50,
e: 60
}
];
pontos.find(função correspondente(ponto) {
retornar ponto.x % 3 == 0 && ponto.y % 4 == 0;
}); // { x: 30, y: 40 } A escrita e o uso de findIndex()
é basicamente o mesmo que o método find(). for nenhum, ele retorna -1.
Exemplo 1
[1 ,2,4,15,0].findIndex((item, index,arr) => return item > 10) //3Exemplo
2
var points = [
{
x: 10,
e: 20
},
{
x: 20,
ano: 30
},
{
x: 30,
e: 40
},
{
x: 40,
e: 50
},
{
x: 50,
e: 60
}
];
pontos.findIndex(função correspondente(ponto) {
retornar ponto.x % 3 == 0 && ponto.y % 4 == 0;
}); //2
pontos.findIndex(função correspondente(ponto) {
retornar ponto.x % 6 == 0 && ponto.y % 7 == 0;
}); //1 4. O método fill(
// O método fill preenche um array com o valor fornecido.
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//O método fill também pode aceitar o segundo e o terceiro parâmetros, que são usados para especificar as posições inicial e final do preenchimento.
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// Observe que se o tipo preenchido for um objeto, então o objeto atribuído terá o mesmo endereço de memória, não o objeto de cópia profunda.
deixe arr = new Array(3).fill({
nome: "Mike"
});
arr[0].nome = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] Ambos os métodos podem encontrar NaN no array, mas indexOf() no ES5 não consegue encontrar NaN 5. Os três.
os métodos entradas(), chaves() evalores
() da instância do array
são todos usados para percorrer o array, e todos retornam um objeto atravessador. O loop for...of pode ser usado para percorrer o array.
keys() é um par de nomes de chaves. A travessia de
valores() é uma travessia de valores
) é uma travessia de pares de valores-chave
para (let index of ["a", "b"].keys. ()) {
console.log(índice);
}
// 0 1
for (deixe o elemento de ["a", "b"].values()) {
console.log(elem);
}
//ab
for (deixe [índice, elem] de ["a", "b"].entries()) {
console.log(índice, elemento);
}
//0 "a"
//1 "b"
var a = [1, 2, 3];
[...a.valores()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ] 6. O método inclui() retorna um valor booleano
. , indicando se uma matriz contém um determinado valor
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
também pode receber um segundo parâmetro, indicando a posição inicial da busca, o padrão é 0. Se o segundo parâmetro for um número negativo, indica a posição do número. Se o segundo parâmetro for maior que o comprimento da matriz, o método include começa no subscrito 0
para compensar as deficiências do método indexOf que não é semântico o suficiente e julga mal NaN
[1, 23, NaN].includes(NaN) //
método compatível verdadeiro:
função contém = ( () => {
Array.prototype.includes
?(arr, val) => arr.includes(val)
:(arr, val) => arr.some(item => retornar item === val)
})() 7. Flat() de instâncias de array, flatMap()
// flat()
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].plano(2)
// [1, 2, 3, 4, 5]
//mapaplano()
[2, 3, 4].flatMap((x) => [x, x * 2])
//Depois que o mapa é executado, ele é [[2, 4], [3, 6], [4, 8]]
//Em seguida, execute o método flat() para obter o seguinte resultado // [2, 4, 3, 6, 4, 8]
// flatMap() só pode expandir um nível de array.
// Equivalente a .flat()
[1, 2, 3, 4].flatMap(x => [
[x*2]
])
//Depois que o mapa é executado, ele é [[[2]], [[4]], [[6]], [[8]]]
//Em seguida, execute o método flat() para obter os seguintes resultados // [[2], [4], [6], [8]] Copie o código 8. O copywithin() da instância do array
copiará o membro em a posição especificada dentro do array atual Copie para outras posições e depois retorne ao array atual, o que alterará o array original
para receber três parâmetros:
1. target (obrigatório) comece a substituir os dados desta posição
2. start (opcional) comece a ler os dados a partir desta posição, o padrão é 0. Se for um número negativo, significa
parar a leitura dos dados antes de atingir o número 3 e terminar (opcional). Se for um número negativo, significa que
todos os três parâmetros devem ser números. Caso contrário, eles serão convertidos automaticamente para valores numéricos
[1,2,3,4,5].copywithin(0,3); /[4,5,3 ,4,5] significa que os membros do subscrito 3 até o final (4,5) são copiados para a posição começando no subscrito 0 e os originais 1 e 2 são substituídos.