1.Array.from()

  Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)对象。

  下面是一个类似数组的对象,Array.from将它转为真正的数组。

  只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

  以上代码中,字符串和Set结构都具有Iterator接口,因此可以被Array.from转为真正的数组。

  对于还没有部署该方法的浏览器,可以用Array.prototype.slice方法替代:

const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj))();

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

2.Array.of()

  Array.of方法用于将一组值转换为数组。

  这个方法的主要目的是弥补数组构造函数Array()的不足。基本上可以用来替代Array()或者new Array(),并且不存在由参数不同而导致的重载。

3.copyWithin()

  数组实例的copyWithin方法,在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。

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

  它接受3个参数。

  ● target(必需):从该位置开始替换数据

  ● start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数

  ● end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数

  这3个参数都应该是数值,如果不是,会自动转换为数值。

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

  对于没有部署TypeArray的copyWithin方法的平台,需要采用下面的写法:

4. 数组实例的find()和findIndex()

  数组实例的find()方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

  上面的代码找出数组中第一个小于0的成员。

  上面的代码中,find方法的回调函数可以接受3个参数,依次为当前的值、当前的位置和原数组。

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

5.数组实例的fill()

  fill方法使用给定值填充数组。

  上面的代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素会被全部抹去。fill方法还接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

  上面的代码表示,fill方法从1号位置开始,向原数组填充7,到2号位置之前结束。

6.数组实例的entries()、keys()和values()

  ES6提供了3个新方法——entries()、keys()和values()——用于遍历数组。它们都返回一个遍历器对象,可用for...of循环遍历,唯一的区别是:keys()是对键名的遍历,values()是对键值的遍历,entries()是对键值对的遍历。

7.数组实例的includes()

  Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。该方法属于ES7,但Babel转码器已经支持。

  该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,若此位置超出数组长度,则会重置从0开始。

  没有该方法时,通常使用indexOf方法检查是否包含某个值,但是indexOf方法有两个缺点:一是不够语义化,其含义是找到参数值的第一个出现位置,所以要比较是否不等于-1,表达起来不够直观;二是其内部使用严格相当运算符(===)进行判断,会导致NaN的误判。

  对于没有部署该方法的平台,可以使用以下代码:

8.数组的空位

  数组的空位指数组的某一个位置没有任何值。ES5会忽略空位,而ES6明确将空位转为undefined,不会忽略。

- Array.from()会将空位转为undefined

- 扩展运算符(...)也会将空位转为undefined

- copyWithin()会将空位一起复制

- fill()会将空位视为正常的位置

- for...of循环也会遍历空位

  上面的代码中,数组arr有两个空位,for...of并没有忽视它们。如果改成map方法则会跳过空位。

- entries()、keys()、values()、find()和findIndex()会将空位处理成undefined

  由于空位的处理非常不统一,因此建议避免出现空位。

ES 6 : 数组的扩展的更多相关文章

  1. ES入门——数组的扩展

    1.Array.from() 该方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,包括ES6新增的数据结构Set和Map.下面是 ...

  2. 从js的repeat方法谈js字符串与数组的扩展方法

    js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...

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

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

  4. 前端笔记之ES678&Webpack&Babel(中)对象|字符串|数组的扩展&函数新特性&类

    一.对象的扩展 1.1对象属性名表达式 ES6可以在JSON中使用[]包裹一个key的名字.此时这个key将用表达式作为属性名(被当做变量求值),这个key值必须是字符串. var a = 'name ...

  5. es6数组的扩展

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

  6. Delphi泛型动态数组的扩展--转贴

    此文章转载于http://www.raysoftware.cn/?p=278&tdsourcetag=s_pcqq_aiomsg的博客 从Delphi支持泛型的第一天起就有了一种新的动态数组类 ...

  7. ES6的新特性(8)——数组的扩展

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

  8. ES6学习(三):数组的扩展

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

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

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

随机推荐

  1. c语言:最长对称子串(3种解决方案)

    问题描述: 输入一个字符串,输出该字符串中最大对称子串的长度.例如输入字符串:“avvbeeb”,该字符串中最长的子字符串是“beeb”,长度为4,因而输出为4. 解决方法:中序遍历 一,全遍历的方法 ...

  2. 关于Jquery 序列化表单的注意事项

    在JQuery 的serialize方法序列化表单的过程中,如果表单的name值最后有空格,会出现“+”号,查源码可见原因.这一小问题就浪费了半小时的时间,记录下来,备忘.

  3. LINQ to XML LINQ学习第一篇

    LINQ to XML LINQ学习第一篇 1.LINQ to XML类 以下的代码演示了如何使用LINQ to XML来快速创建一个xml: public static void CreateDoc ...

  4. iOS7 Sprite Kit 学习

    iOS7 Sprite Kit 学习 iOS 7有一个新功能 Sprite Kit 这个有点类似cocos2d 感觉用法都差不多.下面简单来介绍下Sprite Kit About Sprite Kit ...

  5. .net SoapHeader验证

    .net SoapHeader验证 在工作中经常用到webservice,在.net 开发中经常用到webservice,在java开发经常用到cxf. 今天闲置没事就介绍下 .net webserv ...

  6. boost xpressive 例子

    1.效果图: 我有一个wordpress博客,每次在csdn上写完博客,都需要复制到wordpress中,还需要手动修改<pre>和图片地址,比较麻烦,所以做了这个工具. 功能: 1.把C ...

  7. MAC上的包管理利器

    Homebrew- MAC上的包管理利器 2013-07-01 16:25 by 黄博文, 76 阅读, 0 评论, 收藏, 编辑 包管理器是神马东西?让我们看看wikipedia上的介绍. In s ...

  8. poj1483 It's not a Bug, It's a Feature!

    It's not a Bug, It's a Feature! Time Limit: 5000MS   Memory Limit: 30000K Total Submissions: 1231   ...

  9. 【deep learning学习笔记】最近读的几个ppt(四)

    这几个ppt都是在微博上看到的,是百度的一个员工整理的. <Deep Belief Nets>,31页的一个ppt 1. 相关背景 还是在说deep learning好啦,如特征表示云云. ...

  10. Android中检测软键盘的弹出和关闭

    Android系统并没有提供明显的API来监听软键盘的弹出和关闭,但是在某些情况下我们还是有办法来检测软键盘的弹出和关闭. 从StackOverflow找到了一个不错的方法.但是这种只适用于在mani ...