ES6的数组方法之Array.from
2024-10-21 03:16:02
首先说说什么是数组:数组在类型划分上归为Object,属于比较特殊的对象,数组的索引值类似于对象的key值。
数组的几个注意点:
1.数组的长度是可读属性,不可更改,数组的长度根据索引最大值。
2.数组的索引值可以是字符串等,但这个不影响数组的长度。
3.数组根据下标最大值,会自动补齐对应的其他索引值,且值为空。
ES6新增了数组的一系列方法,如Array.of,Array.from,Array.find等等
数组与类数组的最大区别在于数组自身具有迭代器iterator
Array.from 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和 Map)
任何有length属性的都可以转换为数组。
document.querySelectorAll() //返回的是object,但是内有迭代器,可循环
document.getElementsByClassName()//类数组集合,不可循环
function fn(){
let args = arguments //不定参集合,不可循环
}
解决方法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c'] //ES5
或者
arr = Array.from(likeArr) //ES6 不改变原来的类数组,返回新的数组
在解决不定参的转为数组也可以用扩展运算符
function foo() { var args = [...arguments]; } //扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组.
Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
利用这一特性,可以这样做:
Array.from([1, , 2, , 3], (n) => n || 0) // [1, 0, 2, 0, 3]
或者这样
function typesOf () { return Array.from(arguments, value => typeof value) }
Array.from()可以将各种值转为真正的数组,并且还提供map功能。这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然 后转成规范的数组结构,进而就可以使用数量众多的数组方法
Array.from({ length: 2 }, () => 'jack') // ['jack', 'jack']
对于不支持Array.from的浏览器,可以用Array.prototype.slice方法去弥补
const toArray = (() =>
Array.from ? Array.from : obj => [].slice.call(obj)
)();
最新文章
- 【转】Django Model field reference学习总结
- C#程序使用SQLite数据库
- PHP 操作mongodb api大部分方法
- 【读书笔记】读《JavaScript模式》 - 对象创建模式
- S1:函数上下文
- 【测试】RAC搭建(裸设备)
- OK335xS mac address hacking
- [java bug记录] java.util.zip.ZipException: invalid code lengths set
- oracle表设置主键自增长
- MySQL保留关键字
- E/WindowState(643): getStack: Window{33f867f8 u0 Starting com.xxxxxx.ooooo}
- PS图层混合算法之一(不透明度,正片叠底,颜色加深,颜色减淡)
- C#简单委托示例——让你一看就会的demo
- 3 HTTP 协议
- Python环境搭建详解(Window平台)
- 字符串前面加u、r、b的含义
- stm32+ESP8266AT指令详细说明
- 路由器子网掩码设置不正确导致github无法访问
- django多对多中间表详解
- windows 命令行使用p4