O editor de Downcodes mostrará várias maneiras de converter dados JSON em arrays em JavaScript front-end. No desenvolvimento front-end, muitas vezes é necessário converter os dados JSON obtidos do servidor em um array JavaScript para processamento. Este artigo apresentará em detalhes três métodos comumente usados: JSON.parse(), Object.keys() e Object.entries(), e usará código de exemplo para explicar como usar esses métodos para converter dados JSON em matrizes com eficiência e como usar o método de arrays para processamento de dados subsequente. Além disso, o artigo também fornece perguntas frequentes relevantes para ajudá-lo a compreender e aplicar melhor esses métodos.
Em projetos JavaScript front-end, converter dados JSON em arrays é uma operação muito comum e valiosa. Isso pode ser conseguido usando o método JSON.parse(), usando o método Object.keys() e aproveitando o método ES6 Object.entries(). Esses métodos podem converter JSON de maneira fácil e eficiente em formato de array para facilitar o processamento e operações de dados subsequentes. Usar o método JSON.parse() é o método mais direto e comumente usado. Meng Xuewu elabora sobre ele. Por meio de JSON.parse(), podemos analisar strings formatadas em JSON em objetos ou arrays JavaScript. É um meio importante para processar os dados retornados pelo servidor e realizar a conversão de estruturas de dados complexas.
O método JSON.parse() pode analisar uma string formatada em JSON em um objeto ou array JavaScript. Isso é extremamente importante para o desenvolvimento front-end, porque os dados obtidos do servidor geralmente estão na forma de strings JSON, e o front-end precisa converter esses dados em objetos ou arrays nos quais o JavaScript pode operar para uso. Primeiro, basta chamar JSON.parse() e passar uma string JSON como argumento para obter um array ou objeto JavaScript.
As etapas específicas incluem obter uma string formatada em JSON do servidor e, em seguida, analisá-la usando JSON.parse(). Por exemplo, se você tiver uma representação de string JSON de uma lista de usuários, poderá passar essa string para JSON.parse(), resultando em uma matriz JavaScript em que cada elemento da matriz é um objeto Usuário.
const jsonString = '[{nome: John Doe, idade: 30}, {nome: Jane Doe, idade: 25}]';
const jsonArray = JSON.parse(jsonString);
console.log(jsonArray);
// Saída: [ {nome: 'John Doe', idade: 30 }, { nome: 'Jane Doe', idade: 25 } ]
O método Object.keys() é muito útil quando você tem um objeto JSON e deseja converter suas chaves ou valores em um array. Este método retorna um array contendo os nomes de todas as propriedades enumeráveis do próprio objeto.
A operação detalhada é primeiro usar Object.keys() para obter todas as chaves do objeto e, em seguida, obter os valores correspondentes mapeando essas chaves e, finalmente, formar um novo array. Esta técnica é útil para converter dados de objetos JSON em formato de array para que possam ser manipulados usando vários métodos do array.
const userObject = {1: John Doe, 2: Jane Doe};
const keysArray = Object.keys(userObject);
console.log(keysArray);
//Saída: ['1', '2']
const valoresArray = keysArray.map(chave => userObject[chave]);
console.log(valoresArray);
// Saída: ['John Doe', 'Jane Doe']
ES6 introduziu o método Object.entries(), que fornece outra maneira fácil de converter objetos JSON em arrays. Ele retorna um array, cada elemento do array é outro array contendo dois elementos, o primeiro elemento é a chave do objeto e o segundo elemento é o valor correspondente.
Você pode obter diretamente um array bidimensional usando o método Object.entries(), que é muito adequado para cenários que requerem manipulação simultânea de chaves e valores.
const userObject = {1: John Doe, 2: Jane Doe};
const entradasArray = Object.entries(userObject);
console.log(entriesArray);
// Saída: [ ['1', 'John Doe'], ['2', 'Jane Doe'] ]
Depois que os dados JSON são convertidos em um array, os dados podem ser processados posteriormente usando os métodos avançados fornecidos pelos arrays JavaScript. Por exemplo, use funções de ordem superior, como map(), filter() e reduzir() para percorrer, filtrar e acumular matrizes.
Vários métodos de operação de arrays podem implementar lógica complexa de processamento de dados. O método map() pode ser usado para converter cada elemento da matriz, o método filter() pode filtrar os elementos da matriz que atendem às condições de acordo com as condições e o método reduzir() pode processar cumulativamente os elementos em a matriz para realizar a transformação da matriz para uma determinada conversão de valores únicos.
const jsonArray = [{'id': 1, 'pontuação': 90}, {'id': 2, 'pontuação': 80}, {'id': 3, 'pontuação': 85}];
// Use map() para aumentar a pontuação
const aumentouScores = jsonArray.map(user => ({ ...usuário, pontuação: user.score + 10 }));
console.log (pontuações aumentadas);
// Saída: [{id: 1, pontuação: 100}, {id: 2, pontuação: 90}, {id: 3, pontuação: 95}]
// Use filter() para filtrar usuários cujas pontuações excedam 85
const pontuações altas = pontuações aumentadas.filter (usuário => usuário.score > 85);
console.log (pontuações máximas);
// Saída: [{id: 1, pontuação: 100}, {id: 3, pontuação: 95}]
// Use reduzir() para calcular a pontuação total
const totalScore = aumentouScores.reduce((total, usuário) => total + user.score, 0);
console.log(pontuaçãototal);
//Saída: 285
Através do método acima, de JSON.parse() ao processamento de método de array, você pode obter processamento profundo de dados JSON para arrays e, em seguida, para arrays, construindo um poderoso processo de processamento de dados. Esta não é apenas uma questão técnica para o desenvolvimento front-end, mas também uma solução que pode melhorar a flexibilidade e a eficiência das operações de dados.
P: Como converter dados JSON em projetos JavaScript front-end em arrays?
R: Em projetos JavaScript front-end, você pode usar o método JSON.parse() para converter dados JSON em um array. Este método analisa uma string JSON em um objeto ou array JavaScript, que você pode usar como um array para operações adicionais. Por exemplo, você pode usar o código a seguir para converter dados JSON em um array:
const jsonStr = '[1, 2, 3, 4, 5]'; // string de dados JSON const jsonArray = JSON.parse(jsonStr); // Converte dados JSON em um array console.log(jsonArray); o resultado de saída é: [1, 2, 3, 4, 5]P: Como acessar os elementos do array JSON convertido em JavaScript?
R: Em JavaScript, os elementos de um array JSON convertido podem ser acessados por índice. O índice começa em 0, que representa o primeiro elemento da matriz. Por exemplo, suponha que você tenha um array JSON convertido da seguinte maneira:
const jsonArray = [1, 2, 3, 4, 5];Você pode acessar um elemento em uma posição específica em um array usando a seguinte sintaxe:
console.log(jsonArray[0]); // O resultado da saída é: 1console.log(jsonArray[2]); // O resultado da saída é: 3console.log(jsonArray[4]); : 5P: Como lidar com a conversão de array aninhado em JSON?
R: Se os dados JSON contiverem matrizes aninhadas, eles poderão ser processados recursivamente. Primeiro, você precisa analisar os dados JSON em objetos JavaScript. Em seguida, use uma função recursiva para iterar sobre os objetos e elementos do array, convertendo o array aninhado em um array JavaScript normal. Aqui está um exemplo de código:
const jsonData = '{nome: John, idade: 30, interesses: [codificação, leitura, música]}'; const jsonObject = JSON.parse(jsonData); (deixe digitar obj) { if (Array.isArray(obj[key])) { obj[key] = Array.from(obj[key]); Converter matrizes aninhadas em matrizes comuns} else if (typeof obj[key] === 'object') { convertNestedArray(obj[key]); // Processar recursivamente objetos aninhados} }}convertNestedArray(jsonObject); array console.log(jsonObject.interests); //O resultado da saída é: [codificação, leitura, música]Espero que este artigo possa ajudá-lo a entender e aplicar melhor esses métodos e melhorar a eficiência do desenvolvimento front-end! Se você tiver alguma dúvida, deixe uma mensagem na área de comentários.