Javascript 如何在新行上显示数组的每个元素

Javascript how to show each element of array on a new line

本文关键字：数组 元素 显示 新行 Javascript      更新时间：2023-09-26

>我有一个字符串构建形式逗号分隔的值，我使用 split 来获取每个值，之后我想在新行上显示每个值，但真正发生的是我在新行上获取每个值，除了最后两个值一起显示在同一行上。只是为了说清楚：

值1

，值 2

，值 3

，值

4，值 5

这是我正在使用的函数：

_checkDates: function(dates) {
    if (dates != null)
    {
        var zzz = dates.split(',');
        var xxx = zzz.length;
        console.log(xxx);
        for (var i=0; i<=xxx; i++)
        {
            zzz[i] = zzz[i] + '<br />';
            return zzz;
        }
    }
    return dates;
}

需要明确的是，这是用 ExtJS 4 编写的，我几乎可以肯定在这种情况下，问题是纯 JavaScript 并且与 ExtJS 4 无关，但无论如何，也许我错了。

那么任何想法为什么会发生这种情况，以及我如何使最后一个元素也进入新的生产线？

我已经修改了你的函数，因为Stefan 已经提到了你的错误。

function splitDate(dates) {
    if (dates != null)
    {
        var dates = dates.split(',');
        var xxx = dates.length;
        console.log(xxx);
        for (var i=0; i<xxx; i++)
        {
            dates[i] = dates[i];                    
        }
    }
    console.log(dates.join(''r'n'));
    return dates.join(''r'n');        
}

上面的功能你可以在一行中完成：

如果它是一个数组，您可以通过以下方式拆分为新行：

var arr = ['apple','banana','mango'];
console.log(arr.join(''r'n'));

如果是字符串：

var str = "apple,banana,mango";
console.log(str.split(',').join("'r'n"));

for 循环是可疑的。首先，您不会处理所有项目（正如@sarfraz指出的那样，最后一个项目丢失了）。您正在 for 循环主体中返回结果 （ zzz）：

for (var i=0; i<=xxx; i++)
{
  zzz[i] = zzz[i] + '<br />';
  return zzz; // for-loop will stop here! resulting in ["value1<br />", "Value2", etc...]
}

在 Javscript 中，您可以简单地"连接"数组：

return dates.split(',').join("<br />")

由于您只是简单地替换字符串，因此您可以使用 replace 方法：

return dates.replace(",", "<br />");

链接： https://snack.expo.io/GcMeWpPUX

import React from 'react'
import { SafeAreaView, Text, View, FlatList } from 'react-native'
export default class App extends React.Component {
    render() {
        return (
            <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center',margin:20 }}>
                <FlatList
                    data={your_array_name}
                    keyExtractor={(item, index) => String(index)}
                    renderItem={({ item, index }) => {
                        return (
                            <Text style={{ color: '#ff8500', fontSize: 18 }}>{item.skills.splice(',').join("'n")}</Text>
                        )
                    }}
                />
            </SafeAreaView>
        )
    }
}

const your_array_name = [
    {
        id: 1,
        text: 'Lorem ipsum is simple dummy text for printing the line',
        skills: ['javascript', 'java']
    },
    {
        id: 2,
        text: 'Lorem ipsum is simple dummy text.',
        skills: ['javascript', 'java']
    }]
相关文章：