JavaScript实现字符串转数组的6种方法总结

目录
  • 1、 使用 .split('')
  • 2、使用扩展语法 ([…str])
  • 3、使用 Array.from(str)
  • 4、使用 Object.assign([], str)
  • 5、使用老式方法（for loop 和 array.push()）
  • 6、使用 Array.prototype.slice.call('string')

数组是 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 = '
赞 (0)

相关推荐

  • JavaScript中数组reduce()方法使用详情

    JavaScript中数组reduce()方法使用详情

    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回调函数 arr.reduce(function(tmp, value, [index]) { // dosomething... }, [startValue]) // 提供初始值通常更安全 tmp:上一次的累加值,初始值为外部传进去的初始值 startValue,若没传默认是数组第一个值 value:数组元素:若累加值tmp为数组第一

  • 20个常见的JavaScript数组操作总结

    目录 声明数组 1. 常规方式 2. 简洁方式 3. 字面 Array 对象方法 1. forEach 2. map 3. concat 4. push 5. unshift 6. pop 7. shift 8. splice 9. slice 10. join 11. every 12. filter 13. indexOf 14. reduce 15. reverse 16. sort 17. toString 18. at 19. find 20. some JavaScript中的Arr

  • Javascript数组的 splice 方法详细介绍

    目录 前言 牛刀小试 删除元素 添加元素 并且替换元素 example1 example2 example3 example4 添加元素 example1 example2 负数索引支持 总结 前言 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容.此方法会改变原数组. 语法格式: array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 参数: start 必选 指定修改的开始

  • 关于JavaScript中的数组方法和循环

    关于JavaScript中的数组方法和循环

    目录 1.基本概念 2.创建数组的三种方法 3.访问数组 4.数组常用属性 5.数组常用方法 6.常用的循环遍历数组的方法 1.基本概念 JavaScript 数组用于在单一变量中存储多个值.是一个具有相同数据类型的一个或多个值的集合 2.创建数组的三种方法 (1)使用JavaScript关键词 new 一个Array对象,并且单独赋值 //1.创建数组 new 一个Array() 对象 let arr = new Array(); arr[0] = "html"; arr[1] =

  • JS对象数组中如何匹配某个属性值

    目录 对象数组中匹配某个属性值 对象数组取出对象属性值完全一样的项 对象数组中匹配某个属性值 如果有一个js对象数组,一个变量如下 var a = [     {         'id' : 2,         'name' : 'xxxx',     },     {         'id' : 3,         'name' : 'bbbbb',     }, ]; var b = 3; 我想要查询 变量b,是否在数组a的id值中,如果在,返回true:不在,返回false 写法如

  • JavaScript数组操作总结

    目录 1.定义 2.数组的本质 3.数组的length 4. in 5. for…in 6.数组的空位 7.类数组(伪数组) 总结 1.定义 数组是按次序依次排列的一组值 任何数据类型都可以放入数组 数组可以嵌套形成多维数组 const arr = [0,'1',{},function(){}]; //二维数组 const arr1 = [1,2,[3,4,5],6]; 2.数组的本质 数组是一种特殊的对象,数组的key是正整数字符串,我们一般使用数字键操作数组,会自动转换成字符串 const

  • JS实现数组/对象数组删除其中某一项

    目录 数组/对象数组删除其中某一项 移除对象数组中指定元素 数组/对象数组删除其中某一项 由于日常工作中经常需要对数组进行操作,最经常使用到的就是对数组进行的删除操作 对于我们前端来说,数组有两种区别 1.var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ]  这种暂且称之为纯数组 2.var jsonArr =  [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:

  • js如何获取对象在数组中的index

    目录 获取对象在数组中的index 数组的indexOf()方法 获取对象在数组中的index 需求:数组中的元素是对象,需要获取对象在数组中的index 方法:使用findIndex方法 原数据: const  array = [     {         id:1,         name:'张xx'     },     {         id:2,         name:'王xx'     } ] 方法: const index = array.findIndex(functi

  • JavaScript实现字符串转数组的6种方法总结

    目录 1. 使用 .split('') 2.使用扩展语法 ([…str]) 3.使用 Array.from(str) 4.使用 Object.assign([], str) 5.使用老式方法(for loop 和 array.push()) 6.使用 Array.prototype.slice.call('string') 数组是 JavaScript 中最强大的数据结构,我发现自己通过将字符串转换为数组来解决许多算法.所以我想到了整合和比较各种方法来做同样的事情. 从字符串到数组的转换总是使用

  • JavaScript判断对象和数组的两种方法

    在调用后端接口时,由于后端接口的不规范统一,接口最外层在没有数据时返回的是空数组(其实更想要的是空json对象),而在有数据时返回的是json对象,所以在接收到后端返回的接口时就需要首先判断返回的数据是对象还是数组,这里提供一些方法  方法一: //判断是否为数组 function isArray(obj) { return obj instanceof Array; } //判断是否为对象 function isObject(obj) { return obj instanceof Objec

  • JavaScript判断是否为数组的3种方法及效率比较

    JavaScript判断是否为数组的3种方法及效率比较

    今天针对不同的数组判定方式在chrome上做了一个效率的对比,结果如下: 其代码如下: var ret; var o = [1,2,3]; var toStr = {}.toString; var array = {}; array["[object Array]"] = "array"; console.log("各种判断是否数组的速度比较!") console.log("方法一:Array.isArray(o)"); co

  • JavaScript中数组的22种方法必学(推荐)

    前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和valueOf()方法 [toString()] toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串 [注意]该方法的返回值与不使用任何参数

  • JavaScript遍历数组的三种方法map、forEach与filter实例详解

    本文实例讲述了JavaScript遍历数组的三种方法map.forEach与filter.分享给大家供大家参考,具体如下: 前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法,分别为:map.forEach.filter,在讲解知识点的同时,会类比相识的函数进行对比,这样会有助于思考方法的利与弊. 一.Js自带的map()

  • JavaScript定义数组的三种方法(new Array(),new Array('x','y')

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JavaScript字符串转数字的5种方法及遇到的坑

    String转换为Number有很多种方式,我可以想到的有5种! parseInt(num); // 默认方式 (没有基数) parseInt(num, 10); // 传入基数 (十位数) parseFloat(num) // 浮点数 Number(num); // Number 构造器 ~~num //按位非 num / 1 // 除一个数 num * 1 // 乘一个数 num - 0 // 减去0 +num // 一元运算符 "+" 选择哪一种呢?什么时候选择它?为什么选择这种

  • JavaScript中使用Spread运算符的八种方法总结

    Spread运算符 允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中). 语法 var array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 参数 iterable 必需. 迭代对象. arg0ToN 可选. 数组文本的一个或多个元素. args 可选. 函数的一个或多个参数. 本文将带大家了解如

  • java8 统计字符串字母个数的几种方法总结(推荐)

    1.统计字符串字母个数(并且保持字母顺序) 比如: aabbbbbbbba喔喔bcab cdabc deaaa 目前我做知道的有5种方式噢,如果你还有更好的,欢迎赐教 //方式1 public static void letterCount1(String s) { s=s.replaceAll(" +", ""); //1,转换成字符数组 char c[]=s.toCharArray(); Map<Character, Integer> tree=ne

  • laravel框架查询数据集转为数组的两种方法

    方法一: return DB::table('game_matchperiod')->select('starttime')->where('Type',$type)->get() ->map(function ($value) {return (array)$value;})->toArray(); 方法二: public function objToArr($object) { //先编码成json字符串,再解码成数组 return json_decode(json_en

随机推荐