扩展运算符 ...

将数组转化成用逗号分隔的参数序列

* 扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。

应用

1. 合并数组

2. 将字符串转化成数组

3. 与解构赋值结合(如果用于数组赋值,只能放在参数的最后一位,否则报错)

Array.from()

将类数组对象(array-like-object) 和 可遍历(iterable)对象转换成数组。

Array.from() lets you create Arrays from:

  • array-like objects (objects with a length property and indexed elements) or
  • iterable objects (objects where you can get its elements, such as Map and Set).

from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

需要注意的是,类数组对象的属性必须是索引,而且要从0开始,因为转换的时候会根据属性的索引值来觉得产生的数组中元素的对应位置,如下:

首先定义了 length 属性为 3 (虽然对象的属性长度为 4),决定了产生的数组长度,然后根据源对象的属性作为索引,0 对应的元素为空,因此数组对应的位置是 undefined。

所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。

使用 Array.from() 也可以很方便地将字符串转化成数组

Array.of()

将一组值转换成数组,总是返回参数值组成的数组。如果没有参数,就返回一个空数组。

find(value, index, arr)

找出第一个符合条件的数组成员,并返回,否则返回 undefined

findIndex()

找出第一个符合条件的数组成员的位置,并返回位置,否则返回 -1

includes()

检查数组中是否包含制定的值,可以代替 indexOf() 使用

参考:http://es6.ruanyifeng.com/#docs/array

ES6学习笔记(二)——数组的扩展的更多相关文章

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

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

  2. ES6学习笔记二:各种扩展

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html 一:字符串扩展 1:字符串遍历器 for (let char of str) { // ...

  3. ES6学习笔记之数组的扩展

    ✏️1. 扩展运算符 扩展运算符(spread)是三个点(...),将一个数组转为用逗号分隔的参数序列. 普通用法 console.log(...[1,2,3]);//1 2 3 数组拷贝(普通类型深 ...

  4. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  5. es6学习笔记9--函数的扩展

    函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值. ES6允许为函数的参数设置默认值,即直接写在参 ...

  6. ES6 学习笔记之四 对象的扩展

    ES6 为对象字面量添加了几个实用的功能,虽然这几个新功能基本上都是语法糖,但确实方便. 一.属性的简洁表示法 当定义一个对象时,允许直接写入一个变量,作为对象的属性,变量名就是属性名. 例1: , ...

  7. ES6学习笔记(二)——字符串扩展

    相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...

  8. ES6学习笔记(数组)

    1.扩展运算符:, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 用于函数调用 function add(x, y) { r ...

  9. ES6学习笔记(一)——扩展运算符和解构赋值

    前言 随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事.之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的 ...

  10. ES6学习笔记(三)——数值的扩展

    看到这条条目录有没有感觉很枯燥,觉得自己的工作中还用不到它所以实在没有耐心看下去,我也是最近得闲,逼自己静下心来去学习去总结,只有在别人浮躁的时候你能静下心来去学去看去总结,你才能进步.毕竟作为前端不 ...

随机推荐

  1. python2.7练习小例子(七)

        7):题目:将一个列表的数据复制到另一个列表中.     程序分析:使用列表[:].     程序源代码: #!/usr/bin/python # -*- coding: UTF-8 -*- ...

  2. 安装sql server

    因为电脑中只有mysql数据库,所以昨天准备安装一个sql server.安装中出现了许多问题,首先第一遍的时候,安装组件中没有勾选管理工具这个选项,所以在最后的时候,文件夹中只有配置管理器,没有数据 ...

  3. FireDAC 连接Access (accdb)数据库

    FireDAC可以方便连接数据库,但是要连接新版本的accdb数据库,要注意这样的事项(以Office2010版为例) 安装Office2010 x86版,注意,不能安装x64版,因为Delphi I ...

  4. LeetCode:17. Letter Combinations of a Phone Number(Medium)

    1. 原题链接 https://leetcode.com/problems/letter-combinations-of-a-phone-number/description/ 2. 题目要求 给定一 ...

  5. python中判断输入是否为数字(包括浮点数)

    1.当num确定为数字后 num=123.4print(isinstance(num,float))#判断是否为浮点数 print(isinstance(num,int))#判断是否为整数 2.当nu ...

  6. mock.js中新增测试接口无效,返回404

    项目是使用的npm+vue+mock模拟数据 我碰到的是在mock配置文件中新增接口,但是接口在测试时无效,返回404.但是在前端代码中把新接口换成配置文件中之前就有的,然后测试就正常了. 所以按问题 ...

  7. 原生js实现五子棋

    为什突然做这个,因为这是个笔试题,拖了一个月才写(最近终于闲了O(∩_∩)O),废话不多说,说说这个题吧 题目要求 编写一个单机[五子棋]游戏,要求如下: 1.使用原生技术实现,兼容 Chrome 浏 ...

  8. Hyper-v创建检查点(VM的快照功能)

    一. 问题描述 在Hyper的默认设置中没有创建检查点的功能,是因为他启用的并不是标准设置.设置检查点时会 二. 解决方法 再设置检查点就没问题了

  9. Java——异常博客作业

    本次任务地址 6. 为如下代码加上异常处理 6.1 改正代码,并增加如下功能.当找不到文件时,需提示用户找不到文件xxx,请重新输入文件名,然后尝试重新打开. 如果是其他异常则提示打开或读取文件失败! ...

  10. Mybatis学习系列(三)动态SQL

    在mapper配置文件中,有时需要根据查询条件选择不同的SQL语句,或者将一些使用频率高的SQL语句单独配置,在需要使用的地方引用.Mybatis的一个特性:动态SQL,来解决这个问题. mybati ...