ES6的 数组

ES6的 数组_第1张图片
扩展运算符
  • 含义
    扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。
    ES6的 数组_第2张图片
    代码

    ES6的 数组_第3张图片
    结果

    该运算符主要用于函数调用。
    ES6的 数组_第4张图片
    代码

    ES6的 数组_第5张图片
    结果

    上面代码中add(...numbers)是函数的调用,它使用了扩展运算符。该运算符将一个数组,变为参数序列。
    扩展运算符与正常的函数参数可以结合使用,非常灵活。扩展运算符后面还可以放置表达式。如果扩展运算符后面是一个空数组,则不产生任何效果。
    注意:
  • 扩展运算符的应用
    (1)复制数组
    数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。
    ES6的 数组_第6张图片
    代码

    ES6的 数组_第7张图片
    结果

    扩展运算符提供了复制数组的简便写法。
    ES6的 数组_第8张图片
    代码

    ES6的 数组_第9张图片
    结果

    (2)合并数组
    扩展运算符提供了数组合并的新写法。
    ES6的 数组_第10张图片
    代码

    ES6的 数组_第11张图片
    结果

    ES6的 数组_第12张图片
    代码

    ES6的 数组_第13张图片
    结果

    (3)与解构赋值结合
    扩展运算符可以与解构赋值结合起来,用于生成数组。
    ES6的 数组_第14张图片
    代码

    ES6的 数组_第15张图片
    结果

    注意:
    (4)字符串
    扩展运算符还可以将字符串转为真正的数组。
    ES6的 数组_第16张图片
    代码

    ES6的 数组_第17张图片
    结果

    (5)实现了 Iterator 接口的对象
    任何定义了遍历器(Iterator)接口的对象(参阅 Iterator 一章),都可以用扩展运算符转为真正的数组。
    ES6的 数组_第18张图片
    代码

    ES6的 数组_第19张图片
    结果

    (6)Map 和 Set 结构,Generator 函数
    扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。
    ES6的 数组_第20张图片
    代码

    ES6的 数组_第21张图片
    结果
数组创建
  • Array.of()
    将参数中所有值作为元素形成数组。


    ES6的 数组_第22张图片
    代码

    ES6的 数组_第23张图片
    结果
  • Array.from()
    将类数组对象或可迭代对象转化为数组。


    ES6的 数组_第24张图片
    代码

    ES6的 数组_第25张图片
    结果
扩展的方法
  • find()
    查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素。


    ES6的 数组_第26张图片
    代码

    ES6的 数组_第27张图片
    结果
  • findIndex()
    查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。


    ES6的 数组_第28张图片
    代码

    ES6的 数组_第29张图片
    结果
  • fill()
    将一定范围索引的数组元素内容填充为单个指定的值。


    ES6的 数组_第30张图片
    代码

    ES6的 数组_第31张图片
    结果
  • copyWithin()
    将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。


    ES6的 数组_第32张图片
    代码

    ES6的 数组_第33张图片
    结果
  • entries()
    遍历键值对。


    ES6的 数组_第34张图片
    代码

    ES6的 数组_第35张图片
    结果
  • keys()
    遍历键名。


    ES6的 数组_第36张图片
    代码

    ES6的 数组_第37张图片
    结果
  • values()
    遍历键值。


    ES6的 数组_第38张图片
    代码

    ES6的 数组_第39张图片
    结果
  • includes()
    数组是否包含指定值。
    ES6的 数组_第40张图片
    代码

    ES6的 数组_第41张图片
    结果

    注意:
  • flat()
    嵌套数组转一维数组。


    ES6的 数组_第42张图片
    代码

    ES6的 数组_第43张图片
    结果
  • flatMap()
    先对数组中每个元素进行了的处理,再对数组执行 flat() 方法。


    ES6的 数组_第44张图片
    代码

    ES6的 数组_第45张图片
    结果
  • map()
    映射,一个对一个。


    ES6的 数组_第46张图片
    代码

    ES6的 数组_第47张图片
    结果
  • reduce()
    汇总, 一堆出来一个,用于比如,算个总数,算个平均等。


    ES6的 数组_第48张图片
    代码

    ES6的 数组_第49张图片
    结果
  • filter()
    过滤器 保留为true的。


    ES6的 数组_第50张图片
    代码

    ES6的 数组_第51张图片
    结果
  • forEach()
    循环迭代。


    ES6的 数组_第52张图片
    代码

    ES6的 数组_第53张图片
    结果
Array.prototype.sort() 的排序稳定性

排序稳定性(stable sorting)是排序算法的重要属性,指的是排序关键字相同的项目,排序前后的顺序不变。

ES6的 数组_第54张图片
代码

ES6的 数组_第55张图片
结果

ES6的 数组_第56张图片
代码

ES6的 数组_第57张图片
结果

常见的排序算法之中,插入排序、合并排序、冒泡排序等都是稳定的,堆排序、快速排序等是不稳定的。不稳定排序的主要缺点是,多重排序时可能会产生问题。假设有一个姓和名的列表,要求按照“姓氏为主要关键字,名字为次要关键字”进行排序。开发者可能会先按名字排序,再按姓氏进行排序。如果排序算法是稳定的,这样就可以达到“先姓氏,后名字”的排序效果。如果是不稳定的,就不行。
早先的 ECMAScript 没有规定, Array.prototype.sort()的默认排序算法是否稳定,留给浏览器自己决定,这导致某些实现是不稳定的。 ES2019 明确规定, Array.prototype.sort()的默认排序算法必须稳定。这个规定已经做到了,现在 JavaScript 各个主要实现的默认排序算法都是稳定的。

你可能感兴趣的:(ES6的 数组)