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 种方法的整理汇总。如果你使用任何其他方法来完成工作,请在留言区给我留言交流。

相关内容

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗?在安卓系统里,华为的应用可是个宝库呢!它们不仅功能强大,而且使用起来超级方便。今天,就让我...
安卓变ios系统魅蓝 你知道吗?最近有个朋友突然告诉我,他要把自己的安卓手机换成iOS系统,而且还是魅蓝品牌的!这可真是让...
幻书启世录安卓系统,安卓世界中... 亲爱的读者们,你是否曾在某个夜晚,被一本神奇的书所吸引,仿佛它拥有着穿越时空的力量?今天,我要带你走...
电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去,这可真是让人头疼的问题啊!你是不是也遇到了这种情况,心里直呼“怎么办怎...
用键盘切换控制安卓系统,畅享安... 你有没有想过,用键盘来控制你的安卓手机?是的,你没听错,就是那个我们每天敲敲打打的小玩意儿——键盘。...
小米安卓镜像系统在哪,小米安卓... 你有没有想过,你的小米手机里有一个隐藏的宝藏——安卓镜像系统?没错,就是那个可以让你的手机瞬间变身成...
安卓手机下载排班系统,高效排班... 你有没有想过,每天忙碌的工作中,有没有什么好帮手能帮你轻松管理时间呢?今天,就让我来给你介绍一个超级...
桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们,你是否曾梦想过将安卓系统搬到你的电脑桌面上?想象那些流畅的动画、丰富的应用,还有...
安卓13系统介绍视频,新功能与... 亲爱的读者们,你是否对安卓13系统充满好奇?想要一探究竟,却又苦于没有足够的时间去研究?别担心,今天...
车机安卓7.1系统,功能升级与... 你有没有发现,现在的车机系统越来越智能了?尤其是那些搭载了安卓7.1系统的车机,简直就像是个贴心的智...
安卓系统下如何读pdf,And... 你有没有遇到过这种情况:手机里存了一大堆PDF文件,可是怎么也找不到一个能顺畅阅读的工具?别急,今天...
安卓系统全国通用的吗,畅享智能... 你有没有想过,为什么你的手机里装的是安卓系统呢?安卓系统,这个名字听起来是不是有点神秘?今天,就让我...
假苹果手机8安卓系统,颠覆传统... 你有没有想过,如果苹果手机突然变成了安卓系统,会是怎样的景象呢?想象那熟悉的苹果外观,却运行着安卓的...
安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦?没错,就是那个让手机焕然一新的安卓12.0系统!那么,咱们国内的手...
核心芯片和安卓系统,探索核心芯... 你知道吗?在科技的世界里,有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...
如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们,你是否曾觉得安卓系统的屏幕颜色不够个性,或者是因为长时间盯着屏幕而感到眼睛疲劳?别担...
旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年,性能逐渐力不从心,却又不忍心让它退役呢?别急,今天就来教你怎么给...
美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统:一场技术革新还是政治博弈?在数字化时代,智能手机已经成为我们生活中不可或缺的一...
安卓系统日记本 你有没有发现,手机里的安卓系统日记本,简直就是记录生活点滴的宝藏库呢?想象每天忙碌的生活中,有没有那...
安卓手机广告最少的系统,探索安... 你有没有发现,用安卓手机的时候,广告总是无处不在,让人烦得要命?不过别急,今天我要给你揭秘一个秘密—...