es6怎么用 es6怎么转换格式

array.from() 是 es6 中用于将类读写对象或可迭代对象转换为新数组的方法。其语法为 array.from(arraylike，mapfn，thisarg)，其中 arraylike 是必填参数，表示要转换的对象；mapfn 和 thisarg 为任选参数，分别用于映射元素和指定 this 后面。 它解决了传统使用 array.prototype.slice.call() 转换类仓库对象时语义不清晰、适用范围狭窄的问题；2. 支持类数组对象（如arguments、nodelist）和可迭代对象（如set、map、字符串）；3. 提供内置映射功能，在转换过程中即可处理元素；4. 由于展开操作（...），array.from 更适用于不可迭代的类副本对象，并能在转换时进行映射；5. 高级应用包括生成数字序列、处理dom集合、克隆数组、从字符串创建字符数组等场景。它提升了代码的语义化、可执行性和灵活性，是处理数据集合的重要工具。

ES6中的Array.from方法是用来将类读取对象或可复制对象转换成一个真正的数据库实例。它的出现，极大地简化了我们处理那些“看上去像数据库但又不是数据库”的数据结构流程，提供了一种更语义化、更灵活的转换方式。解决方案

Array.from()静态方法一个类读取或可复制对象创建一个新的、浅复制的数据库实例。它的基本语法是：Array.from(arrayLike，mapFn， thisArg)登录后复制array之类：这是一个必需的参数，可以是类数据库对象（拥有一个长度属性和可索引元素，比如arguments对象或NodeList）或者可迭代对象（比如Set、Map、String）。mapFn (任选)： 一个map函数，新数组中的每个元素都会经过这个函数的处理。这使得我们可以在转换的同时对元素进行操作，非常方便。thisArg (可选)：执行mapFn时使用这个值。

举几个例子，你会发现它用起来真的非常理解：// 1. 转换arguments 对象function toArray() { //arguments 是一类数据库对象 const args = Array.from(arguments)；console.log(args)； // 比喻为 (1, 2, 3) 会得到 [1, 2, 3]}toArray(1, 2, 3)；// 2. NodeList (例如从 DOM 查询结果)// 假设 HTML 中有多个 div 元素 // const divs = document.querySelectorAll('div')； // 这是一个 NodeList，不是真正转换的阵列 // const divArray = Array.from(divs)；// console.log(divArray)； // 现在你可以对 divArray 使用所有的队列方法了，比如 forEach，map，filter// 3. 字符串（字符串是可迭代的）const str = quot；你好quot；；const charArray = Array.from(str)；console.log(charArray)； // ['h'， 'e'， 'l'， 'l'， 'o']// 4.结合映射函数 (mapFn)// 生成一个从 0 到 4 的数组，并每个元素翻倍 const numbers = Array.from({ length： 5 }， (v， i) =gt； i * 2)；console.log(numbers)； // [0， 2， 4， 6， 8]// 5.转换 Set 或 Map const mySet = new Set([1， 2， 3， 3， 4])；const setArray = Array.from(mySet)；console.log(setArray)； // [1， 2， 3， 4]const myMap = new Map([['a'， 1]， ['b'， 2]])；const mapArray = Array.from(myMap)；console.log(mapArray)； // [['a'， 1]， ['b'， 2]]登录后复制

Array.from的强大存在它可以处理任何具有Symbol.iterator属性的对象（可以迭代对象），以及任何具有长度的对象属性的对象（即类数组对象），这覆盖了我们日常开发中需要转换的场景。为什么我们需要Array.from？它解决了什么痛点？

在Array.from出现时，我们处理类数组对象，比如arguments或者document.querySelectorAll()返回的NodeList，通常会用一些相对“古老”或者说不那么相似的方法。

最常见的就是 Array.prototype.slice.call()：// 以前我们可能会碰function oldSchoolToArray() { const args = Array.prototype.slice.call(arguments)； console.log(args)；}oldSchoolToArray(10， 20， 30)；//或者// const divs = document.querySelectorAll('div')；// const divArray = Array.prototype.slice.call(divs)；登录后复制

这种写法虽然有效，但总感觉有点别扭，对吧？尤其是对于刚接触 JavaScript 的开发者来说，Array.prototype.slice.call(arguments) 这种链式调用理解和 call 方法的使用，起来了模块高一些。它本质上是借用了 Array.prototype 上的 slice 方法，并强制将参数对象的这个上下文绑定到切片方法上，从而模拟出批量切片的效果，间接实现了转换。

在我看来，Array.from 解决了几个核心痛点：人工智能化和约束性：Array.from的名字本身就非常清晰地表达了它的意图——“从...创建一个数据库”。这比slice.call这种略显“黑魔法”的写法要好理解。代码的临界性提升了，维护起来自然也更轻松。更广泛的适用性：slice.call 处理那些“长得像阵列”的对象（有长度属性和可索引项），但对真正的可迭代对象（比如Set、Map）就无不稳定力了。而 Array.from 既能处理类数组，也能处理所有可迭代对象，变成了一个更通用的工具。内置的映射能力：Array.from 的第二个参数 mapFn 是一个非常实用的功能。它允许你在同时对每个元素进行处理，这在很多场景下可以省去一次额外的映射。比如，这你想把一个 NodeList 做成数组，然后只取每个元素的 id，用Array.from 一步到位：// const ids = Array.from(document.querySelectorAll('div')， div =gt；div.id)；登录后复制

这比先转换再映射要非常简洁。

所以，Array.from不仅仅是语法糖，它对JavaScript的读取操作能力来说更是重要的补强和现代化。它让我们的代码更整洁、更易懂，也更强大。Array.from与展开数据（Spread Operator）有什么区别？什么时候选择谁？

展开这些（...）也是ES6引入了一个非常强大的功能，它还能够将可复制对象转换成磁盘，或者用于磁盘的合并、复制等。

例如：// 使用展开转换字符串 const strSpread = [...'hello']；console.log(strSpread)； // ['h'， 'e'， 'l'， 'l'， 'o']// 转换 Setconst mySetSpread = new Set([1， 2， 3])；const setArraySpread = [...mySetSpread]；console.log(setArraySpread)； // [1， 2， 3]//转换NodeList// const divsSpread = [...document.querySelectorAll('div')]；登录后复制

看起来它们的功能有些重叠，那我们到底要选择呢？这里有一些关键的区别和考量：

处理对象类型：展开数组(...)：只能用于可迭代对象。如果一个对象没有实现Symbol.iterator（例如一个纯粹的类对象{0： 'a'， 1： 'b'， Array.from()：既可以处理可迭代对象，也可以处理类分布式对象（只要有长度属性和可索引项）。这是它比展开操作更灵活的地方。const myCustomArrayLike = { 0： 'apple'， 1： 'banana'， length： 2 }；// const arr1 = [...myCustomArrayLike]； //报错：myCustomArrayLike is not iterableconst arr2 = Array.from(myCustomArrayLike)；console.log(arr2)； // ['apple Conversion'， 'banana']登录后复制

映射功能：展开运算符 (...)：没有内置的映射函数。如果需要同时并联对元素展开操作，通常需要先用并联转换式调用map()方法。Array.from()：第二个参数就是mapFn，可以在转换过程中直接对元素进行映射处理，一步到位。const nums = [1， 2， 3]；// 使用展开运算符 mapconst doubledSpread = [...nums].map(n =gt； n * 2)； // [2， 4， 6]// 使用 Array.from mapFnconst doubledFrom = Array.from(nums， n =gt； n * 2)； // [2， 4， 6]登录后复制

在这个例子中，虽然结果一样，但Array.from的写法在语义上更紧凑，尤其是在处理非备份的可复制对象时，省去中间步骤。

什么时候选择谁？

选择展开转换转换（...）：当你的数据源是一个可迭代对象，而你只需要进行简单的转换（不需要在转换时进行映射）。追求代码的简洁性和连通性。展开转换的语法非常简洁明了。例如：将 Set 为阵列，或者将 NodeList 为阵列用于 forEach等方法。

选择 Array.from()：当你的源数据是类备份对象但不是可迭代对象（比如上面提到的自定义对象，或者某些旧的 DOM API 返回的类备份集合）。当你需要在转换的同时对每个元素进行映射或转换。mapFn 参数是其亮点的优势。当你需要生成一个特定长度的阵列并行填充时，例如 Array.from({ length： N }， (_， i) =gt； i)来生成一个数字序列。需要更明确的语义，或者处理更复杂的转换逻辑时。

总的来说，对于简单的可迭代对象到数组的转换，展开运算符通常是因为首选，它更简单。但如果你遇到不可迭代的类数组对象，或者需要在转换过程中进行复杂的数据处理，Array.from()就会是更强大、更灵活的选择。它们是互补的工具，而不是替代品。Array.from在实际开发中有哪些高级应用场景？

Array.from不仅仅用于转换参数或NodeList 简单，它的灵活性使得在很多实际开发场景中可以发挥出惊人的妙用。

生成数字序列：这是Array.from最常用也是最强大的“非传统”实现之一。你不再需要手动循环来创建包含连续数字的队列。//生成一个从0到9的队列const tenNumbers = Array.from({ length： 10 }， (_， i) =gt； i)；console.log(tenNumbers)； // [0， 1， 2， 3， 4， 5， 6， 7， 8， 9]//生成一个从 1 到 5 的带宽 const oneToFive = Array.from({ length： 5 }， (_， i) =gt； i 1)；console.log(oneToFive)； // [1， 2， 3， 4， 5]//生成偶数序列const EvenNumbers = Array.from({ length： 5 }， (_， i) =gt； i * 2)；console.log(evenNumbers)； // [0， 2， 4， 方便转换 6， 8] 登录后复制

这在创建需要循环次数、分页码、图表数据点等场景时，非常简单。

处理 DOM 集合，并进行复杂的操作：虽然展开了，也可以将 NodeList 搞定，但是Array.from 结合 mapFn 让你一步步完成更复杂的转换。// 假设页面上有多个带 data-id 属性的 div/* lt；div data-id=quot；item-1quot；gt；lt；/divgt； lt；div data-id=quot；item-2quot；gt；lt；/divgt； */// 获取所有 div 的 data-id 属性值，并在一个存储中// const divIds = Array.from(document.querySelectorAll('div')， div =gt； div.dataset.id)；// console.log(divIds)； // 例如：['item-1'， 'item-2']登录后复制

这比先成转换数据再映射看起来更流畅，也更符合函数式编程的风格。

克隆复制（浅拷贝）：虽然展开姿势 [...arr] 是比较常见的浅拷贝方式，但 Array.from(arr) 也能实现同样的效果。const originArray = [1， { a： 1 }， 3]；const clonedArray = Array.from(originalArray)；console.log(clonedArray)； // [1， { a： 1 }， 3]console.log(clonedArray === originalArray)； // false登录后复制

在某些特定场景下，比如统一处理 arrayLike 和 Array 时，使用 Array.from 可能会带来代码风格上的一致性。

从字符串创建字符数据库（并进行处理）：字符串本身是可重构的，所以 Array.from 可以将其拆分成字符数组。 mapFn，你甚至可以在分割时就对字符进行转换。const word = quot；JavaScriptquot；；const upperChars = Array.from(word， char =gt； char.toUpperCase())；console.log(upperChars)； // ['J'， 'A'， 'V'， 'A'， 'S'， 'C'， 'R'， 'I'， 'P'， 'T']登录后复制

这对于需要对字符串的字符进行独立操作的场景非常有用。

处理自定义的方便的可迭代对象或类备份对象：如果你自己定义了一个对象，并很容易实现了Symbol.iterator接口，它只是一个简单的类迁移转换结构，Array.from轻松解决其备份的所有方法。//一个简单的自定义迭代器const myIterable = { *[Symbol.iterator]() { 产量 1； 产量 2； 产量 3； }}；const arrFromIterable = Array.from(myIterable)；console.log(arrFromIterable)； // [1， 2， 3]// 一个自定义的类数组对象 const customData = { 0： 'Alice'， 1： 'Bob'， 2： 'Charlie'， length： 3}；const arrFromCustomData = Array.from(customData)；console.log(arrFromCustomData)； // ['Alice'， 'Bob'， 'Charlie']登录复制后

这里展示了 Array.from在处理各种数据源时的强大性。

总的来说，Array.from不仅仅是一个简单的转换工具，它更是一个多功能的磁盘阵列工具。通过巧妙地通用利用它的mapFn参数对以及各种数据类型的支持，我们可以在代码中实现更简洁、更丰富表现力的逻辑。它鼓励我们用更现代、更函数式的方式来思考和处理数据集合。

以上就是ES6中如何用Array.from转换类迁移的详细内容，更多请关注乐哥常识网其他相关文章！