本章学习要点:

  1. 扩展运算符
  2. Array.from()
  3. Array.of()
  4. 数组实例的 copyWithin()
  5. 数组实例的 find() 和 findIndex()
  6. 数组实例的 fill()
  7. 数组实例的 entries(),keys() 和 values()
  8. 数组实例的 includes()
  9. 数组实例的 flat(),flatMap()
  10. 数组的空位

1、扩展运算符

含义:扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3 console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5 [...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算符主要用于函数调用。

function add(x, y) {
return x + y;
} const numbers = [4, 38];
add(...numbers) //

上面代码中add(...numbers)是函数的调用,它使用了扩展运算符。该运算符将一个数组,变为参数序列。

扩展运算符后面还可以放置表达式。

let x = 0;
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
console.log(arr) // ["b"]

如果扩展运算符后面是一个空数组,则不产生任何效果。

[...[], 1]   // [1]

注意,扩展运算符如果放在括号中,JavaScript 引擎就会认为这是函数调用。如果这时不是函数调用,就会报错。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number console.log(...[1, 2])
// 1 2

ES6 学习6 数组的扩展的更多相关文章

  1. ES6中对数组的扩展

    hello,大家好,我又来了.         前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白 ...

  2. ES6-11学习笔记--数组的扩展

    类数组 / 伪数组 Array.from() Array.of() copyWithin() fill() includes()   类数组.伪数组例子: let divs = document.ge ...

  3. ES6学习之数组扩展

    扩展运算符(...将数组分割为用逗号分割的参数序列) console.log(...[1,2,3]) //1 2 3 可替换数组的apply写法: function test(x,y,z){ cons ...

  4. ES6(三)数组的扩展

    1.Array.form ES6中,Array.from = function(items,mapfn,thisArg) {  }   Array.from 用于将 类数组 和 可遍历对象(实现了It ...

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

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

  6. ES6中的数组方法扩展

    上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...

  7. JavaScript学习笔记--ES6学习(四) 字符串的扩展

    ES6对字符串进行了一些扩展,主要表现在对Unicode 大于\uFFFF的字符的处理上. 1. ES6中字符的Unicode表示方法 在ES5中,字符串的Unicode表示方法: \uxxxx . ...

  8. JavaScript学习笔记--ES6学习(五) 数值的扩展

    ES6 对于数值类型 (Number) 进行了一下扩展: 1.对于二进制和八进制提供了新的写法 ES6对于二进制和八进制的数值提供了新的写法,分别用0b (或者0B) 和0o (或者0o) 表示.例如 ...

  9. es6 学习四 数组的学习

    1. Array.from() 语法: Array.from(arrayLike[, mapFn[, thisArg]]) arrayLike 类数组对象 mapFn 如果指定了该参数,新数组中的每个 ...

随机推荐

  1. laravel 运行migrate报错 1071 Specified key was too long

     转自:https://segmentfault.com/a/1190000008416200 laravel运行命令migrate时报错: 1071 Specified key was too lo ...

  2. DNS解析流程原理(图例)

    13台根服务器的dns: 1.root-servers.net198.41.0.4美国2.root-servers.net192.228.79.201美国(另支持IPv6)3.root-servers ...

  3. java的基本数据类型及运算符等

    基本数据类型 一.整数(整形) 值域 1. byte [-128,127] 2.short [-32768,32767] 3.int [-2147483648,2147483647] 4.long [ ...

  4. 移植Mplayer到OK6410开发板

    移植Mplayer到OK6410开发板 作者:vasage 项目需要,需要将Mplayer移植到开发板上,所以今天花了一下下午成功移植,其中参考很多文档,后发现许多文档陈旧,些许文档有少量错误,所以这 ...

  5. 深入了解Spring中的容器

    1.创建Bean的3种方式 1.1使用构造器创建bean实例 这是最常见的方式,如果不采用构造注入,bean类需要有默认构造函数.如果采用构造注入,则需要配置xml文件的<constructor ...

  6. Ajax发送GET和POST请求案例

    使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...

  7. 定时器SDK

    定时器是一切SDK的根本,欲写SDK必先确定定时器,定时器效率的高低决定着SDK函数的效率,下面是我个人写的Linux C++服务器端进程SDK中的定时器,部分参照了ACE和RocketMQ定时器的思 ...

  8. Tcl学习之--表达式

    l 数值操作数 表达式的操作数一般是整数或实数.整数可能是十进制.二进制,八进制或十六进制. 比方以下同一个整数 335               --> 十进制 0o517         ...

  9. 39.Qt XML

    1.使用QXmlStreamReader读取XML,可以读取内存中容纳不了的特大文件,或者读取在XML文档中定制的文档的内容. xml文件(in1.xml) <?xml version=&quo ...

  10. eclipse 配置 tomcat 时候的一些注意事项(随机更新)

    1,一些常用的设置,如下图,不特别说明了,看标记应该就知道注意事项了 2,配置文件的问题.eclipse里面如下图的配置文件里如果有所改动,那么在eclipse里启动Tomcat的时候,Tomcat的 ...