一、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. Kotlin入门-Android的基础布局

    线性布局线性布局LinearLayout是最常用的布局,顾名思义,它下面的子视图像是用一根线串了起来,所以其内部视图的排列是有顺序的,要么从上到下垂直排列,要么从左到右水平排列.排列顺序只能指定一维方 ...

  2. spring data jpa实现多条件查询（分页和不分页）

    目前的spring data jpa已经帮我们干了CRUD的大部分活了,但如果有些活它干不了(CrudRepository接口中没定义),那么只能由我们自己干了.这里要说的就是在它的框架里,如何实现自 ...

  3. [Scikit-learn] *2.3 Clustering - DBSCAN: Density-Based Spatial Clustering of Applications with Noise

    http://scikit-learn.org/stable/modules/generated/sklearn.cluster.DBSCAN.html#sklearn.cluster.DBSCAN ...

  4. 独立的js文件中不能使用EL表达式取值

    在独立的js文件中写了一个EL表达式取值,发现没有取到值,原因在于不能在独立的js文件中使用EL表达式,可以在jsp页面定义全局变量,然后在js文件中引用

  5. Java工程师学习指南第6部分：深入理解JVM虚拟机

    本文整理了微信公众号[Java技术江湖]发表和转载过的JVM虚拟机相关优质文章,想看到更多Java技术文章,就赶紧关注本公众号吧吧. JVM原理分析,看了都说好 JVM 深入学习:Java 解析 Cl ...

  6. Java工程师学习指南第1部分：夯实Java基础系列

    点击关注上方"Java技术江湖",设为"置顶或星标",第一时间送达技术干货. 本文整理了微信公众号[Java技术江湖]发表和转载过的Java优质文章,想看到更多 ...

  7. Leetcode之并查集专题-684. 冗余连接（Redundant Connection）

    Leetcode之并查集专题-684. 冗余连接(Redundant Connection) 在本问题中, 树指的是一个连通且无环的无向图. 输入一个图,该图由一个有着N个节点 (节点值不重复1, 2 ...

  8. TensorFlow.训练_资料（有视频）

    ZC:自己训练 的文章 貌似 能度娘出来很多,得 自己弄过才知道哪些个是坑 哪些个好用...(在CSDN文章的右侧 也有列出很多相关的文章链接)(貌似 度娘的关键字是"TensorFlow ...

  9. SpringEl表达式解析

    应用场景: 1.用户日志 2.缓存处理 3........... import org.springframework.expression.EvaluationContext; import org ...

  10. PTA(Basci Level)1043.输出PATest

    给定一个长度不超过 104 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest.... 这样的顺序输出,并忽略其它字符.当然,六种字符的个数不一定是一样多的,若某种字符已 ...