ES6的数组方法之Array.from
首先说说什么是数组:数组在类型划分上归为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)
)();
ES6的数组方法之Array.from的更多相关文章
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- 使用ES6新数组方法(象C# Lambda表达式一样写查询语句)
let people = [ {id: 1, name: "a", age: 12}, {id: 2, name: "b", age: 13}, {id: 3, ...
- es6之数组方法
//兼容插件 babel-polyfill values()等存在兼容问题,需要加载babel-polyfill插件 .keys() 获取数组的key值 .values() 获取数组的value值 ...
- 用ES5实现ES6的数组方法map
先举个常见的栗子: var arr = [1,2,3,4,6,7,8,9,12,3,25,63,100] var arr2 = arr.map(item => item += 1) consol ...
- ES6数组的扩展--Array.from()和Array.of()
一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...
- js 字符串方法 和 数组方法总览
字符串方法 search() 方法搜索特定值的字符串,并返回匹配的位置. 相比于indexOf(),search()可以设置更强大的搜索值(正则表 ...
- es6 Array数组方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- ES6扩展——数组的新方法(Array.from、Array.of、Array.fill、Array.includes、keys values entries 、find)
1.Array.from(objec,回调函数)将一个ArrayLike对象或者Iterable对象(类数组对象)转换成一个数组 1)该类数组对象必须具有length属性,用于指定数组的长度.如果没有 ...
- 最新数组方法(包括es6)
整理目前所用过的数组方法,学习了新增的es6方法. 1 arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr. ...
随机推荐
- Unity 物体旋转会发生变形
当游戏对象的 "父物体们" 有一个是缩放的,也就是Scale不是(1,1,1)的时候,旋转这个游戏对象它就会出现变形的现象.
- 那些经历过的Bug Unity的Invoke方法
有一个游戏对象,上面挂着 3 个脚本,如下: using System.Collections; using System.Collections.Generic; using UnityEngine ...
- ubuntu下搭建android开发环境核心篇安装AndroidStudio、sdk、jdk
本文系转载http://blog.csdn.net/lsyz0021/article/details/52215996 一.安装前的准备 1.1.如果你还没有安装ubuntu 14.04 LTS系统, ...
- (转)AIX 5.3 安装中文语言包
AIX 5.3 安装中文语言包 原文:http://blog.51cto.com/lubby/571648 在AIX操作系统安装国内软件厂商使用的一些应用软件中,会涉及到一些中文乱码问题(我就是在部署 ...
- Java入门之IDE集成开发环境安装及配置
常用的开发工具 一.Eclipse Eclipse 是一个开放源代码的.基于 Java 的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,Eclipse ...
- ubuntu .net core The specified framework 'Microsoft.NETCore.App', version '1.0.1' was not found
想在ubuntu下试试.net core mvc,按照官方教程走完,然后把在window 下做好的项目想在ubuntu下试试,然后输入了 git clone https://github.com/ka ...
- Hibernate课程 初探一对多映射4-2 cascade级联属性
1 级联属性:hibernate一方和多方设置关联关系,当一方发生相应修改时(见下表),多方不用进行显式修改,也能进行相应修改. 级联在一方和多方xml中都可以设置 属性值 含义和作用 all 对 ...
- lnmp架构-负载均衡
一.几个基本概念 1.pv 值 pv 值(page views):页面的浏览量 概念:一个网站的所有页面,在一天内,被浏览的总次数.(大型网站通常是上千万的级别) 2.uv值 uv值(unique v ...
- 测试驱动开发(TDD)及测试框架Mocha.js入门学习
组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...
- R.java文件无法自动生成的问题
如果出现R.java文件无法自动生成的问题,同时Console窗口提示下列信息: Android requires compiler compliance level 5.0 or 6.0. Foun ...