1、Array.form

   ES6中,Array.from = function(items,mapfn,thisArg) {  }

    Array.from 用于将 类数组 和 可遍历对象(实现了Iterator接口的对象以及set、map)对象,转换成真正的数组。

   (1)   第一个参数:items,类数组 和 可遍历对象。

         在ES5中,将类数组转换成真正数组,如下:

var arr=[].slice.call(likeArray);

         实际应用中,类数组对象常常包括 NodeList集合,以及 函数参数 arguments.

  (2) 第二个参数,类似map方法,可以直接改变原数组的值。

       如下:将 类数组中的值加 1

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

   (3)   第三个参数,绑定this。

   (4) Array.from 可以将只要原始的数据结构(string,number 等),会先对值进行处理,

     然后转换成规范的数组结构,进而可以使用Array中的方法。 

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

    将字符串转换为数组,能正确处理各种Unicode字符,避免 将大于 \uFFFF 的字符,算成两个字符。

function countString(string){
return Array.from(string).length;
}

2、Array.of

 Array.of = function(items) { }

  用于将一组值,转换成数组,用于弥补Array()不足。

比如:使用 Array(3),指定了数组为3,值为[undefined*3],当参数count>=2时,才会返回新数组。

  ES5中可以如下代替:

function ArrayOf(){
return [].slice.call(arguments);
}

3、扩展运算符  ( ... )

   扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果A对象没有实现此接口,则无法转换。

     [...数据结构A]  这样的书写方式可以将某些数据结构转换成为数组。

   扩展运算符 无法将类数组转换为 real Array.

    

4、数组实例的扩展

    (1)copyWithin()

       Array.prototype.copyWithin = function(target,start,enf) {}

  1、在当前数组内部,将指定位置的成员复制到其他位置,且覆盖原有成员;
   2、其中 包括start,不包括enf(end from),如果[1,3,5],即将 3,4位置的元素替换 arr 
  3、start,endf为负数,则表示数组倒数位数
[, , , , , ].copyWithin(, , ); //[0,1,3,3,4,5]

   (2)find() and findIndex()

       Array.prototype.find = function(predicate,thisArg) {}

                 find()   用于找出第一个符合条件的数组成员,参数是一个回调函数,所有数组成员依次执行该回调函数,若无符合条件,则返回undefined。  

      findIndex() 则返回第一个符合条件的成员的位置,未找到,则返回 -1。

let personList = [
{
name: 'jack',
age:
},
{
name: 'Tom',
age:
},
{
name: 'Lily',
age:
}
]; personList.find((item,index,arr)
=>(item.age < ));

  这两个方法都可以发现 NaN,弥补了数组 IndexOf方法的不足。

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

    (3) fill()

    Array.prototype.fill = function(value,start,end) {}
   使用给定值,填充一个数组。
['a','b','c'].fill(,,);//[a,7,c]

    (4)entries(),keys(),values()

    var arr = ['key1', 'key2'];
for (let index of arr.keys) { }

        如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

    (5)includes()   

        String.prototype.includes = function(searchString,position) {};

        表示某个数组是否包含给定的值

            position 表示搜索的起始位置,负数为倒数位置

     indexOf 内部使用严格相当运算符(===)进行判断,这会导致对NaN的误判。

    [, , ].includes(, );
[NaN].indexOf(NaN); //-1
[NaN].includes(NaN); //true
    Map 的has方法,用来查找 键名。  
   Set 的has方法,用来查找 值。

(5)数组的空位

   数组的空位,是指某一个位置没有任何值,空位不是undefined。

   1、forEach,filter,every,some 都会跳过空位。

   2、map会跳过空位,但会保留这个值。

   3、join 、toString 会将空位视为 undefined,undefined和null 则被处理成空字符串。

  而Array.from 会将数组的空位 转换为 undefined,不会忽略这个空位。
( ... )也会转换为 undefined。 至于为什么会出现 空位,我也不太明白。
  

ES6(三)数组的扩展的更多相关文章

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

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

  2. ES6 之 数组的扩展

    ES5 检测数组 let arr = [1,2,3,4] Array.isArray(arr) arr instanceof Array 转换方法 arr.toLocaleString() arr.t ...

  3. ES6对数组的扩展

    ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from().of()等静态方法,也为数组实例添加了find().findIndex()等方法.下面一起来看一下这些方法的用法. ...

  4. 【ES6】数组的扩展——扩展运算符

    1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...

  5. 【ES6】数组的扩展

    1.Array.from(): 将伪数组对象和遍历的对象转为真数组 如果一个对象的键都是正整数或者0,并且有 Length属性,那么这个对象很想数组,称它为伪数组. 伪数组: let obj = { ...

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

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

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

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

  8. es6数组的扩展

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

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

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

  10. ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法

    在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...

随机推荐

  1. yii2.0中数据缓存之增删改查

    public function actionSss(){ /* * 获取到缓存 * 这里是获取的是根目录下 的common/main.php中的缓存类组件 * */ $cache=\Yii::$app ...

  2. vs2015 制作安装包额外需要安装的软件VSI_bundle

    vs2015 制作安装包额外需要安装的软件VSI_bundle 下载地址:http://files.cnblogs.com/files/sdner/VSI_bundle.rar

  3. 使用.Net Core+EF7 完成CodeFirst

    emmm,本来想着用Core做一个小项目玩玩的,然后肯定是要用到数据库的, 然后想,啊,要不用CodeFirst,感觉很腻害的样子,于是,一脸天真无邪的我就踏入了一个深不见底的天坑... 本来想着,应 ...

  4. NOIP2016提高组初赛(1)

    一.选择题 6.后缀表达式,使用二叉树来求解,正常情况下的表达式a*(b+c)- d为中序遍历的二叉树. 即 若转换为后缀表达式(左右根)则为abc+*d- 14.代数字进去,多试几遍: 三.问题求解 ...

  5. 二分PkU3258

    <span style="color:#330099;">/* E - 二分 Time Limit:2000MS Memory Limit:65536KB 64bit ...

  6. Android笔记二十四.Android基于回调的事件处理机制

        假设说事件监听机制是一种托付式的事件处理,那么回调机制则与之相反,对于基于回调的事件处理模型来说,事件源和事件监听器是统一的,或者说事件监听器全然消失了,当用户在GUI控件上激发某个事件时,控 ...

  7. 最全Pycharm教程(28)——Pycharm搜索导航之搜索应用实例

    1.主题 这里我们将介绍Pycharm另外一项强力的搜索导航功能.如果你希望知道某个特定的类或方法都在project中的哪些地方发挥了作用.也就是找出其全部的usages,这将是一个很巨大而繁琐的pr ...

  8. Spark修炼之道(进阶篇)——Spark入门到精通:第九节 Spark SQL执行流程解析

    1.总体执行流程 使用下列代码对SparkSQL流程进行分析.让大家明确LogicalPlan的几种状态,理解SparkSQL总体执行流程 // sc is an existing SparkCont ...

  9. tiny210(s5pv210)移植u-boot(基于 2014.4 版本号)——NAND 8位硬件ECC

    这节我们实现nand的ecc,保存环境变量到nand flash 中.然后把我们之前的led灯烧写到nand flash 中.开机启动.在 tiny210.h 中定义宏 CONFIG_S5PV210_ ...

  10. 六、Spring Boot Controller使用

    在Controller中使用 @RestController 注解,该注解是spring 4.0引入的.查看源码可知其包含了 @Controller 和 @ResponseBody 注解.我们可以理解 ...