1、默认值

现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。

function sayHello(name){

    //传统的指定默认参数的方式

    var name = name||'hubwiz';

    document.write('Hello '+name);

} 

//运用ES6的默认参数

function sayHello2(name='hubwiz'){

    document.write(`Hello ${name}`);

}

sayHello();  //输出:Hello hubwiz

sayHello('汇智网');  //输出:Hello 汇智网

sayHello2();  //输出:Hello hubwiz

sayHello2('汇智网');  //输出:Hello 汇智网

2、rest参数

rest参数(形式为“...变量名”)可以称为不定参数,用于获取函数的多余参数,这样就不需要使用arguments对象了。

rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {

   let sum = ; 

   for (var val of values) {

      sum += val;

   } 

   return sum;

} 

add(, , ) //

不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如以上示例中,...values 代表了所有传入add函数的参数。

3、扩展运算符

扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

var people=['张三','李四','王五']; 

//sayHello函数本来接收三个单独的参数people1,people2和people3

function sayHello(people1,people2,people3){

    document.write(`Hello ${people1},${people2},${people3}`);

} 

//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数

sayHello(...people);   //输出:Hello 张三,李四,王五  

//而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法

sayHello.apply(null,people);   //输出:Hello 张三,李四,王五 

 4、扩展运算符的应用(常用)

a、合并数组

扩展运算符提供了数组合并的新写法。

var arr1 = ['a', 'b'];  

var arr2 = ['c'];  

var arr3 = ['d', 'e'];  

// ES5 的合并数组  

arr1.concat(arr2, arr3);  

// [ 'a', 'b', 'c', 'd', 'e' ]  

// ES6 的合并数组  

[...arr1, ...arr2, ...arr3]  

// [ 'a', 'b', 'c', 'd', 'e' ]  

 b、与解构赋值结合

扩展运算符可以与解构赋值结合起来,用于生成数组。

const [first, ...rest] = [, , , , ];  

first // 1  

rest // [2, 3, 4, 5]  

const [first, ...rest] = [];  

first // undefined  

rest // []:  

const [first, ...rest] = ["foo"];  

first // "foo"  

rest // []  

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

const [...butLast, last] = [, , , , ];  

//  报错  

const [first, ...middle, last] = [, , , , ];  

//  报错  

es6 默认参数、rest参数、扩展运算符的更多相关文章

  1. rest 参数与扩展运算符

    rest 参数与扩展运算符 1.rest 参数 ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了.rest 参数搭配的变量是一个数组 ...

  2. ...扩展运算符+rest参数+call/apply/bind

    之前在set,map里面有提过扩展运算符的概念,但是今天偶然遇到一个问题,类似于扩展运算符的经典用法,突然发现对其了解不是很深,所以再来整理一下扩展运算符的相关知识. 重点:扩展运算符内部调用的是数据 ...

  3. es6 学习小记 扩展运算符 三个点(...)

    参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...

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

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

  5. ES6 入门系列 - 函数的扩展

    1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...

  6. ES6 学习6 数组的扩展

    本章学习要点: 扩展运算符 Array.from() Array.of() 数组实例的 copyWithin() 数组实例的 find() 和 findIndex() 数组实例的 fill() 数组实 ...

  7. es6中参数【默认值,扩展运算符】

    参数默认值 1.普通参数 function info(age,name="grace"){ console.log(name); } info(); //输入:grace 2.对象 ...

  8. ES6躬行记(2)——扩展运算符和剩余参数

    扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包含Symbol.iterator属性的可迭代对 ...

  9. es6可变参数-扩展运算符

    es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...

随机推荐

  1. nfs网络共享服务基础

    nfs原理 1.开启RPC服务 2.NFS向RPC服务注册启动的端口 3.用户向RPC询问NFS服务的端口 4.RPC返回端口给客户端 5.客户端通过获得的端口与NFS服务器进行数据传输 实验步骤 一 ...

  2. 一致性Hash算法原理,java实现,及用途

    学习记录: 一致性Hash算法原理及java实现:https://blog.csdn.net/suifeng629/article/details/81567777 一致性Hash算法介绍,原理,及使 ...

  3. SpringCloud微服务实战二:Spring Cloud Ribbon 负载均衡 + Spring Cloud Feign 声明式调用

    1.Spring Cloud Ribbon的作用 Ribbon是Netflix开发的一个负载均衡组件,它在服务体系中起着重要作用,Pivotal将其整合成为Spring Cloud Ribbon,与其 ...

  4. oracle习题练习-表空间-用户-表-约束

    题一 1.       创建名字为hy_tablespace的表空间,默认大小为10M;@@ 2.       创建一个用户,用户名以自己名字命名,并指定命名空间为hy_tablespace;@@@@ ...

  5. IbatchBolt和BaseTransactionalBolt区别

    void prepare(java.util.Map conf, TopologyContext context, BatchOutputCollector collector, T id) T id ...

  6. Leetcode46. Permutations全排列

    给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1 ...

  7. Python中的进程池与线程池(包含代码)

    Python中的进程池与线程池 引入进程池与线程池 使用ProcessPoolExecutor进程池,使用ThreadPoolExecutor 使用shutdown 使用submit同步调用 使用su ...

  8. Directx11教程(50) 输出depth/stencil buffer的内容

    原文:Directx11教程(50) 输出depth/stencil buffer的内容      有时候,我们需要查看depth/stencil buffer的内容,比如上一章中,我们要查看sten ...

  9. day39-Spring 12-Spring的JDBC模板:快速入门

    Spring AOP的关键是它的底层的原理和思想,配置和使用并不是十分困难.AOP本身就是一个思想,是面向对象的延伸,不是用来替换面向对象的,而是用来解决面向对象中的一些问题的.在最初的时候提出过一个 ...

  10. 新一代视频AI服务 —— 阿里云智能视觉重磅发布

    3月27日下午,第51期阿里云产品发布会-智能视觉产品隆重发布,本次产品发布会首次面向全网用户深入的解读了智能视觉的前世今生. 行业背景 随着人工智能的技术不断成熟,AI逐渐在各行业内落地.在新零售领 ...