数组是 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']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
这种方式的另一个优点是我们可以用字符或空格分隔字符串。以下是我们如何做到这一点的示例。
////* 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']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
它也适用于正则表达式，你可以在此处找到 split() 的完整文档。
这种方式完美地将字符串元素分离到一个数组中，但它有其局限性。
注意：此方法不适用于不常见的 Unicode 字符。此方法返回字符的 Unicode 而不是实际字符，这可能会使我们的工作变得更复杂，但 MDN 文档已更新，因此，如果我们仅包含 u 标志，我们就可以使其与 Unicode 一起使用。
"😄😄".split(/(?:)/); // [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]
"😄😄".split(/(?:)/u); // [ "😄", "😄" ]- 1.
- 2.
2、使用扩展语法 ([…str])
这是 ES2015 的特性，它使转换变得非常容易。
const myFavShow = 'The Office'
const myFavShowArray = [myFavShow]
console.log(myFavShowArray)
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
在这里消除了我们在 split() 中的限制也有帮助，考虑下面的例子，我们可以使用这种方法轻松拆分任何字符。
const animal = '🦊🦊'
const animalArr = [animal]
console.log(animalArr) // ['🦊', '🦊']- 1.
- 2.
- 3.
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']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
这种方法在处理不常见的字符时不会引起任何问题。
const str = '😎😎'
const arr = Array.from(str)
console.log(arr)
// ['😎', '😎']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
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']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
另一个是我们和 split() 方法有同样的麻烦：它不能分隔不常见的字符（我们看到的是 Unicode 而不是实际的字符）。
const s = '😄😄'
const a = Array.from(s)
console.log(a) // ['😄', '😄']- 1.
- 2.
- 3.
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']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
此外，它对不常见 (Unicode) 字符也能很好地工作。看下面的例子。
const s = '𝟘𝟙𝟚𝟛😄😄';
const a = [];
for (const s2 of s) {
a.push(s2);
}
console.log(a); //['𝟘', '𝟙', '𝟚', '𝟛', '😄', '😄']- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
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', '!']- 1.
- 2.
此方法也有与 split() 方法相同的问题，因此在使用时要注意。
const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['\uD83D', '\uDE04', '\uD83D', '\uDE04']- 1.
- 2.
结论
总而言之，以下是我们可以完成这项工作的方法。这是我在 JavaScript 中将字符串转换为数组的 6 种方法的整理汇总。如果你使用任何其他方法来完成工作，请在留言区给我留言交流。