一、Array.from()：负责把类似数组的对象以及可遍历的对象转为真正的数组

1.类似数组的对象

let arrayLike = {

  '0': 'a',

  '1': 'b',

  '2': 'c',

  length: 3

};

let arrayLike2 = {

  '0': 'a',

  '1': 'b',

  '2': 'c'

};

// ES5的写法

var arr1 = [].slice.call(arrayLike2);

console.log(arr1);//[]

// ES6的写法

let arr2 = Array.from(arrayLike);

console.log(arr2);//["a","b","c"]

注：所谓类似数组的对象，本质特征只有一点，即必须有length属性。

2.可遍历的对象：NodeList对象或者是函数内部的arguments对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>123</p>

<p>234</p>

<p>345</p>

<script>
　　//NodeList对象

    let ps = document.querySelectorAll('p');

    console.log(ps);//[p, p, p]

    Array.from(ps).forEach(function (p) {

        console.log(p);

    });

　　//arguments对象
　　let a = b = c = 1;
　　foo(a, b, c);

　　function foo() {
    　　var args = Array.from(arguments);
    　　console.log(args);//[1, 1, 1]
　　}
</script>

</body>

</html>

3.部署了Iterator接口的数据结构，Array.from都可以将其转化为数组

Array.from("football");

// ["f", "o", "o", "t", "b", "a", "l", "l"]

let namesSet = new Set(['a', 'b'])

Array.from(namesSet) // ['a', 'b']

4.如果是一个真正的数组，Array.from会返回一个一模一样的新数组

Array.from([1, 2, 3])

// [1, 2, 3]

5.扩展运算符（...）也可以将某些数据结构转为数组。

sky('love','me','love','you');

function sky() {

    var args = [...arguments];

    console.log(args);// ["love", "me", "love", "you"]

}

扩展运算符背后调用的是遍历器接口（Symbol.iterator）,如果一个对象没有部署这个接口，那么将无法转换。任何有length属性的对象，都可以通过Array.from方法转换成数组，而此时扩展运算符就无法转换。举栗验证如下：

Array.from({length:5});

// [undefined, undefined, undefined, undefined, undefined]

6.Array.from可以接受第二个参数，作用类似于数组的map方法，对数组的每一个元素进行操作，将处理后的值放入返回的数组

Array.from(arrayLike, x => x * x);

// 等同于

Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)

// [1, 4, 9]

Array.from的第一个参数还可以指定第二个参数运行的次数，举栗

Array.from({ length: 2 }, () => 'jack')

// ['jack', 'jack']

二、Array.of()：将一组值转换成数组

这个方法主要是为了弥补Array的不足

Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3]

Array.of(3).length //

Array的行为差异：

Array() // []

Array(3) // [, , ,]

Array(3, 11, 8) // [3, 11, 8]

Array没有参数，一个参数，多个参数，返回的结果是不一样的。只有当参数个数超过两个的时候，Array才会正常返回由参数组成的新数组。参数个数只有一个的时候，是在指定这个数组的长度。

Array.of()的行为非常统一，基本上可以完全替代Array()和new Array()。

Array.of()方法可以用下面的代码模拟实现。

function ArrayOf(){

  return [].slice.call(arguments);

}

三、copyWithin()：在当前数组内部，将指定位置成员复制到其他位置，这个操作会覆盖原有成员，返回当前数组（被修改后的）

Array.prototype.copyWithin(target, start = 0, end = this.length)

这个方法可以接收三个参数：

target（必需）：从该位置开始替换数据

start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。

end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

[1, 2, 3, 4, 5].copyWithin(0, 3)  // [4, 5, 3, 4, 5]

上面代码表示将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。

// 将3号位复制到0号位

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)

// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位

[1, 2, 3, 4, 5].copyWithin(0, -2, -1)

// [4, 2, 3, 4, 5]

// 将3号位复制到0号位

[].copyWithin.call({length: 5, 3: 1}, 0, 3)

// {0: 1, 3: 1, length: 5}

关于第三个的理解：对象{length:5,3:1}有两个属性，length属性决定这个对象是类数组对象，另外还有一个key值为3，值为1的属性。将3号位复制到0号位，因此会创建key为0，值为1的属性（与key为3的值相同），所以结果是{0:1,3:1,length:5}

四、find()和findIndex()

find()用于找出第一个符合条件的数组成员。

它的参数是一个回调函数，所有数组成员一次执行该回调函数，直到找出第一个符合条件的数组成员。如果找不到，返回值为undefined

[1, 4, -5, 10].find((n) => n < 0)

// -5
[1, 4, 5, 10].find((n) => n < 0)
//undefined

find()回调函数可以接受三个参数，当前的值，当前的位置，和原数组

[1, 5, 10, 15].find(function(value, index, arr) {

  return value > 9;

}) //

数组实例的findIndex()方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {

  return value > 9;

}) //

这两个方法都可以发现NaN，弥补了indexOf方法的不足。

[NaN].indexOf(NaN)

// -1

[NaN].findIndex(y => Object.is(NaN, y))

//

上面代码中，indexOf方法无法识别数组的NaN成员，但是findIndex()方法可以借助Object.is方法做到。

五、fill()

fill()方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)

// [7, 7, 7]

new Array(3).fill(7)

// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)

// ['a', 7, 'c']

//可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

fill()用于初始化空数组比较合适，如果数组中已有元素，那么会被抹去。

ES6-数组的扩展-整理的更多相关文章

  1. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  2. es6数组的扩展

    数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...

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

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

  4. ES6 数组的扩展

    1. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回. 下面是一个类数组 let arr = { '0':'a', '1':'b' ...

  5. ES6数组的扩展运算符

    一.基本使用 ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面. let fn = (a, ...value) => { console.log(a); c ...

  6. ES6对数组的扩展(简要总结)

    文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...

  7. ES6数组扩展

    前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...

  8. ES6的新特性（8）——数组的扩展

    数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...

  9. ES6学习（三）：数组的扩展

    chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...

  10. Es6学习笔记(7)----数组的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...

随机推荐

  1. python笔记2小数据池,深浅copy,文件操作及函数初级

    小数据池就是在内存中已经开辟了一些特定的数据,经一些变量名直接指向这个内存,多个变量间公用一个内存的数据. int: -5 ~ 256 范围之内 str: 满足一定得规则的字符串. 小数据池: 1,节 ...

  2. python中关于with以及contextlib的使用

    一般在coding时,经常使用with来打开文件进行文件处理,然后无需执行close方法进行文件关闭. with open('test.py','r' as f: print(f.readline() ...

  3. Excel导入工具类

    项目需要从Excel导入数据,然后插入到数据库对应表中.设计了一个导入工具类,导入数据和导入结果如下图示: poi jar版本采用的3.15 导入工具类实现如下: package com.alphaj ...

  4. django 之(五) --- 验证码|富文本|邮箱短信

    验证码 在用户登录,注册以及一些敏感操作的时候,我们为了防止服务器被暴力请求,或爬虫爬取,我们可以使用验证码进行过滤,减轻服务器的压力. 原生实现: 库名:pip install Pillow     ...

  5. [Paper Reading] Show and Tell: A Neural Image Caption Generator

    论文链接:https://arxiv.org/pdf/1411.4555.pdf 代码链接:https://github.com/karpathy/neuraltalk & https://g ...

  6. 《精通并发与Netty》学习笔记（09 - Java中流的概念）

    Java中流的概念 java程序通过流来完成输入/输出.流是生产或消费信息的抽象.流通过java的输入/输出与物理设备链接.尽管与它们链接的物理设备不尽相同,所有流的行为具有同样的方式.这样,相同的输 ...

  7. 自助机dmv？鸡肋

    今天终于扛着懒癌去了一趟所谓的dmv自动机(dmv now kiosk),发现此机器只处理有关vehicle的三种事项,比如vehicle的new registration之类的,如果是其它事情还是得 ...

  8. 【FFMPEG】VS2013编译ffmpeg

    原文:http://blog.csdn.net/uselym/article/details/49885867 由于VS2013支持c99了,所以,可以直接用vs2013进行ffmpeg的编译调试,而 ...

  9. Ubuntu修改终端显示的主机名、用户名、目录不同颜色

    打开终端输入:echo $PS1 输入:gedit ~/.bashrc #定位到如下代码: if [ "$color_prompt" = yes ]; then PS1='${de ...

  10. C语言I博客作业12—学期总结

    一.我学到的内容 二.我的收获(包括我完成的所有作业的链接+收获)不能只有作业链接,没有收获 作业次数 作业链接 第一次 C语言I博客作业01 第二次 C语言I博客作业02 第三次 C语言I博客作业0 ...