6 种在 JavaScript 中将字符串转换为数组的方法
admin
2024-02-11 03:01:45
0

数组是 JavaScript 中最强大的数据结构,我发现自己通过将字符串转换为数组来解决许多算法。所以我想到了整合和比较各种方法来做同样的事情。

从字符串到数组的转换总是使用 split() 方法完成,但是在 ES6 之后,我们可以使用许多工具来做同样的事情。让我们一一介绍每种方法,并讨论每种方法的优缺点。

1、 使用 .split(''):

split() 是一种字符串方法,可将字符串拆分为具有模式的有序列表的数组。这是一种 ES6 方法,是完成工作的最干净的方法。

* Seperate string by space character(' ') *
const myFavShow = 'The Office';const myFavShowArray = myFavShow.split('');console.log(myFavShowArray) //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

这种方式的另一个优点是我们可以用字符或空格分隔字符串。以下是我们如何做到这一点的示例。

* Seperate string by whitespace(' ') *const myFavShow = 'The Office';const myFavShowArray = myFavShow.split(' ');console.log(myFavShowArray) //['The', 'Office']* Seperate string by a character '-' *const favDialogue = 'Thats-what-she-said';const favDialogueArr = favDialogue.split('-');console.log(favDialogueArr) //['Thats', 'what', 'she', 'said']

它也适用于正则表达式,你可以在此处找到 split() 的完整文档。

这种方式完美地将字符串元素分离到一个数组中,但它有其局限性。

注意:此方法不适用于不常见的 Unicode 字符。此方法返回字符的 Unicode 而不是实际字符,这可能会使我们的工作变得更复杂,但 MDN 文档已更新,因此,如果我们仅包含 u 标志,我们就可以使其与 Unicode 一起使用。

"😄😄".split(/(?:)/); // [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]"😄😄".split(/(?:)/u); // [ "😄", "😄" ]

2、使用扩展语法 ([…str])

这是 ES2015 的特性,它使转换变得非常容易。

const myFavShow = 'The Office'
const myFavShowArray = [...myFavShow]
console.log(myFavShowArray) // ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

在这里消除了我们在 split() 中的限制也有帮助,考虑下面的例子,我们可以使用这种方法轻松拆分任何字符。

const animal = '🦊🦊'const animalArr = [...animal]console.log(animalArr) // ['🦊', '🦊']

3、使用 Array.from(str):

阵列,from() 方法从可迭代或类似数组的对象创建一个新的、浅拷贝的 Array 实例。

const myFavShow = 'The Office'
const myFavShowArray = Array.from(myFavShow);
console.log(myFavShowArray) // ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

这种方法在处理不常见的字符时不会引起任何问题。

const str = '😎😎'const arr = Array.from(str)console.log(arr)// ['😎', '😎']

4、使用 Object.assign([], str)

assign() 方法将一个或多个源对象的所有属性复制到目标对象。不过,关于这种方法有两点需要记住。一个是那个对象,二是assign() 复制称为深拷贝的属性值,在使用此方法之前,必须牢记这一点。

const myFavShow = 'The Office'
const myFavShowArray = Object.assign([], myFavShow);
console.log(myFavShowArray) // ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

另一个是我们和 split() 方法有同样的麻烦:它不能分隔不常见的字符(我们看到的是 Unicode 而不是实际的字符)。

const s = '😄😄'const a = Array.from(s)console.log(a) // ['😄', '😄']

5、使用老式方法(for loop 和 array.push())

虽然我们有很多选择可以玩,但我不得不提到这种老式的方法,我们使用 for 循环和数组方法 push() 来推送字符串的元素。

这不是最干净的方式,但绝对值得一提的是想要远离 JavaScript 不断变化的复杂性(尽管我更喜欢其他方式)。

const s = 'the office';const a = [];for (const s2 of s) {   a.push(s2);}console.log(a); // ['t', 'h', 'e', ' ', 'o', 'f', 'f', 'i', 'c', 'e']

此外,它对不常见 (Unicode) 字符也能很好地工作。看下面的例子。

const s = '𝟘𝟙𝟚𝟛😄😄';const a = [];for (const s2 of s) {   a.push(s2);}console.log(a); //['𝟘', '𝟙', '𝟚', '𝟛', '😄', '😄']

6、使用 Array.prototype.slice.call('string')

const favShow = Array.prototype.slice.call("The Office!");console.log(favShow); //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e', '!']

此方法也有与 split() 方法相同的问题,因此在使用时要注意。

const favShow = Array.prototype.slice.call("The Office!");console.log(favShow); //['\uD83D', '\uDE04', '\uD83D', '\uDE04']

结论

总而言之,以下是我们可以完成这项工作的方法。

这是我在 JavaScript 中将字符串转换为数组的 6 种方法的整理汇总。如果你使用任何其他方法来完成工作,请在留言区给我留言交流。

相关内容

热门资讯

安卓系统怎么样安装wd系统,安... 你有没有想过给你的安卓手机来个换装大变身?没错,就是将安卓系统升级为WD系统!听起来是不是有点酷炫?...
安卓最帅的系统手机,引领潮流的... 你有没有发现,最近手机圈里掀起了一股“颜值”风暴?没错,说的就是安卓系统中最帅的手机!今天,就让我带...
如何循环播放录音安卓系统,安卓... 你是不是也有过这样的经历:录了一段超级好听或者有用的录音,想要随时随地都能听到,但又不想每次都手动播...
手机怎么刷回安卓系统,轻松刷机... 手机刷回安卓系统,这可是个技术活儿,不少小伙伴在升级系统后,发现新系统用起来不那么顺心,就想把手机恢...
酷开系统4.13刷安卓,畅享智... 亲爱的读者们,你是否也像我一样,对家里的智能电视系统充满了好奇?今天,我要和你分享一个超级酷的话题—...
x86安卓系统引导,从启动到运... 你有没有想过,你的安卓手机里竟然隐藏着一个x86安卓系统引导的秘密?没错,就是那个你可能从未听说过的...
车载安卓系统联手机,车载安卓系... 你有没有发现,现在开车的时候,手机和车载系统之间的互动越来越紧密了呢?想象一边听着动感的音乐,一边用...
安卓系统的软件商城在哪,软件商... 你有没有想过,手机里那些好玩的应用都是从哪里来的呢?没错,就是那个神奇的软件商城!今天,就让我带你一...
和平精英安卓系统的手机 你有没有发现,最近和平精英这款游戏在安卓系统手机上可是火得一塌糊涂啊!不少小伙伴都纷纷加入了这场刺激...
安卓系统镜像预览版本,未来科技... 你有没有想过,当你打开安卓系统的最新镜像预览版本时,那感觉就像是在未知的科技海洋中遨游呢?想象那些炫...
安卓系统能显示的emoji,探... 你知道吗?现在手机上用的安卓系统,可真是越来越聪明了!它不仅能帮你处理各种任务,还能让你的聊天变得更...
安卓系统保留运存 你有没有发现,手机用久了,运行速度越来越慢?这可不是闹着玩的,有时候打开个APP都要等半天,简直让人...
橘子系统安卓12,探索全新体验... 你知道吗?最近手机界可是掀起了一股热潮,那就是安卓12的橘子系统。这款系统不仅带来了全新的界面设计,...
安卓系统录音怎么不能用,排查与... 最近是不是发现你的安卓手机录音功能突然失灵了?别急,别急,让我来给你一探究竟,帮你找出录音不能用的小...
安卓系统查看闪照,闪照生成技术... 你有没有遇到过这种情况:手机里突然弹出一个闪照,瞬间心跳加速,好奇心爆棚,但又担心错过重要信息。别急...
拓实安卓系统驱动下载,轻松实现... 你有没有遇到过手机系统崩溃,然后发现需要下载驱动才能让安卓手机重新焕发生机的情况?别急,今天就来给你...
安卓网上火车订票系统,便捷出行... 你有没有想过,在这个信息爆炸的时代,订火车票竟然也能变得如此轻松愉快?没错,我要跟你聊聊的就是这个神...
安卓系统连接hcair导航,畅... 你有没有想过,你的安卓手机竟然能和HCAir导航这么高科技的东西无缝连接呢?没错,就是那种在驾驶时帮...
安卓如何用苹果系统拍照,安卓设... 你有没有想过,即使你的手机是安卓的,也能享受到苹果系统拍照的乐趣呢?没错,就是那种拍出高清、色彩鲜艳...
怎么开启安卓原生系统,开启纯净... 你有没有想过,你的安卓手机其实隐藏着许多未被发掘的潜能?没错,就是那个我们每天不离手的安卓原生系统!...