首先说说什么是数组:数组在类型划分上归为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的更多相关文章

  1. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...

  2. 使用ES6新数组方法(象C# Lambda表达式一样写查询语句)

    let people = [ {id: 1, name: "a", age: 12}, {id: 2, name: "b", age: 13}, {id: 3, ...

  3. es6之数组方法

    //兼容插件 babel-polyfill values()等存在兼容问题,需要加载babel-polyfill插件 .keys()  获取数组的key值 .values()  获取数组的value值 ...

  4. 用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 ...

  5. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

  6. js 字符串方法 和 数组方法总览

    字符串方法        search()             方法搜索特定值的字符串,并返回匹配的位置.         相比于indexOf(),search()可以设置更强大的搜索值(正则表 ...

  7. es6 Array数组方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. ES6扩展——数组的新方法(Array.from、Array.of、Array.fill、Array.includes、keys values entries 、find)

    1.Array.from(objec,回调函数)将一个ArrayLike对象或者Iterable对象(类数组对象)转换成一个数组 1)该类数组对象必须具有length属性,用于指定数组的长度.如果没有 ...

  9. 最新数组方法(包括es6)

    整理目前所用过的数组方法,学习了新增的es6方法. 1 arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr. ...

随机推荐

  1. PlayMaker Debug Int/Float/Vector3...

    1.在一个游戏对象上建一个PlayMakerFSM,在状态机里新建几个不同类型的变量: 2.再新加几个Action: 3.运行,结果如下:

  2. 关于老教授之家项目的思考 && 中国互联网+大赛培训

    最近在做中国互联网+竞赛相关的项目,有一点思考在这里记录下来,算是一份经历,日后可以再回顾,这也是我真正参加的一个大型比赛,作为技术人员可能更多的是从事技术,但是在其他方面能贡献自己的一份力量也是不错 ...

  3. MakeFile基本使用

    MakeFile Making makefile demo # Run this line when useing `make` command # default is the target whi ...

  4. react做股票、期货交易遇到的问题(不完全是react)及解决方法。

    公司项目主要是做股票及期货行情展示及交易,h5相应的做了一些功能---可以看行情图及模拟交易,实盘交易存在一定的风险,老板希望做自己的产品,这样h5就尴尬了,不过没关系,项目里还是有一定技术含量的-- ...

  5. Linux访问https报错

    今天用Linux(CentOS)拉Git仓库时,报了个错unable to access 'https://github.com/Wind4/vlmcsd.git/': SSL connect err ...

  6. 深入理解java虚拟机阅读笔记(1)运行时数据区域

    java虚拟机所管理的内存区域主要分为方法区.堆:虚拟机栈.本地方法栈.程序计数器,如图: 1.程序计数器是当前线程所执行的字节码行号指示器,用以记录当前指令执行的位置.程序计数器是线程私有的,每个线 ...

  7. iOS - The identity used to sign the executable is no longer valid

    ①.首先在xcode中的Build Settings中看有没有设置: ②.账号是不是多个人在用,个人开发者的账号只能绑定一台电脑,当另外一台电脑绑定了话,你的电脑就失效了.你确认下是不是这个原因造成的 ...

  8. [转]C#利用委托跨线程更新UI数据

    在使用C#的过程中,难免会用到多线程,而用多线程之后,线程如何与界面交互则是一个非常头疼的问题.其实不仅仅是界面,一般情况下,我们往往需要获得线程的一些信息来确定线程的状态.比较好的方式是用委托实现, ...

  9. typedef struct 与 struct

    学c++之前最好先学c.特别要说的是,一些虽然冠名为c++的项目的文件中却大部分都是c的代码. 比如我们这个例子: 在c语言中,定义一个结构体和其实适合c++中有区别的.比如我们有如下的代码: str ...

  10. java最大最小堆

    堆是一种经过排序的完全二叉树,其中任一非终端节点的数据值均不大于(或不小于)其左孩子和右孩子节点的值. 最大堆和最小堆是二叉堆的两种形式. 最大堆:根结点的键值是所有堆结点键值中最大者. 最小堆:根结 ...