快捷導(dǎo)航

JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)

更新時(shí)間：2022年09月22日 10:16:16 作者：web前端開(kāi)發(fā)

數(shù)組是?JavaScript?中最強(qiáng)大的數(shù)據(jù)結(jié)構(gòu)，我們常常通過(guò)將字符串轉(zhuǎn)換為數(shù)組來(lái)解決許多算法。本文為大家總結(jié)了6個(gè)JS字符串轉(zhuǎn)數(shù)組的方法，希望對(duì)你有所幫助

1、使用 .split('')

split() 是一種字符串方法，可將字符串拆分為具有模式的有序列表的數(shù)組。這是一種 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']

這種方式的另一個(gè)優(yōu)點(diǎn)是我們可以用字符或空格分隔字符串。以下是我們?nèi)绾巫龅竭@一點(diǎn)的示例。

////* 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']

它也適用于正則表達(dá)式，你可以在此處找到 split() 的完整文檔。

這種方式完美地將字符串元素分離到一個(gè)數(shù)組中，但它有其局限性。

注意：此方法不適用于不常見(jiàn)的 Unicode 字符。此方法返回字符的 Unicode 而不是實(shí)際字符，這可能會(huì)使我們的工作變得更復(fù)雜，但 MDN 文檔已更新，因此，如果我們僅包含 u 標(biāo)志，我們就可以使其與 Unicode 一起使用。

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

2、使用擴(kuò)展語(yǔ)法 ([…str])

這是 ES2015 的特性，它使轉(zhuǎn)換變得非常容易。

const myFavShow = 'The Office'

const myFavShowArray = [...myFavShow]

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

在這里消除了我們?cè)?split() 中的限制也有幫助，考慮下面的例子，我們可以使用這種方法輕松拆分任何字符。

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

3、使用 Array.from(str)

陣列，from() 方法從可迭代或類似數(shù)組的對(duì)象創(chuàng)建一個(gè)新的、淺拷貝的 Array 實(shí)例。

const myFavShow = 'The Office'

const myFavShowArray = Array.from(myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

這種方法在處理不常見(jiàn)的字符時(shí)不會(huì)引起任何問(wèn)題。

const str = '????'
const arr = Array.from(str)
console.log(arr)

// ['??', '??']

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

assign() 方法將一個(gè)或多個(gè)源對(duì)象的所有屬性復(fù)制到目標(biāo)對(duì)象。不過(guò)，關(guān)于這種方法有兩點(diǎn)需要記住。一個(gè)是那個(gè)對(duì)象，二是assign() 復(fù)制稱為深拷貝的屬性值，在使用此方法之前，必須牢記這一點(diǎn)。

const myFavShow = 'The Office'

const myFavShowArray = Object.assign([], myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

另一個(gè)是我們和 split() 方法有同樣的麻煩：它不能分隔不常見(jiàn)的字符（我們看到的是 Unicode 而不是實(shí)際的字符）。

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

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

雖然我們有很多選擇可以玩，但我不得不提到這種老式的方法，我們使用 for 循環(huán)和數(shù)組方法 push() 來(lái)推送字符串的元素。

這不是最干凈的方式，但絕對(duì)值得一提的是想要遠(yuǎn)離 JavaScript 不斷變化的復(fù)雜性（盡管我更喜歡其他方式）。

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']

此外，它對(duì)不常見(jiàn) (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() 方法相同的問(wèn)題，因此在使用時(shí)要注意。

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

到此這篇關(guān)于JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript字符串轉(zhuǎn)數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: