es6 -- 默认参数Default，不定参数Rest，扩展运算符Spread详解

Betta 发布于2019-08-23 15:20 / 2225人阅读

摘要：将数组中的每个元素展开为函数参数扩展运算符取代方法的一个实际的例子，应用方法，简化求出一个数组最大元素的写法。

欢迎访问我的个人博客：http://www.xiaolongwu.cn

前言

记录一下在实际开发中，很有用的三个es6的新方法

用法详解

默认参数

function f(x, y=13) {
  // 如果没有传入y或传入了undefined，y的默认值为13
  return x + y;
}
f(5) // 18

不定参数Rest

不定参数rest，让我们不再需要arguments，从而避免很多麻烦

function f(x, ...r) {
  // y是一个数组
  console.log(r);  //["h", true]
  return x * r.length;
}
f(4, "h", true) // 8

扩展运算符

1、展开运算符，展开函数的参数。

function f(x, y, z) {
  return x + y + z;
}
// 将数组中的每个元素展开为函数参数
f(...[3,5,7]) //  15

2、扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。

// ES5 的写法
Math.max.apply(null, [14, 3, 77])
 
// ES6 的写法
Math.max(...[14, 3, 77])
 
// 等同于
Math.max(14, 3, 77);

3、通过push函数，将一个数组添加到另一个数组的尾部

// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
 
// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

4、扩展运算符将字符串转为真正的数组

[..."leon"]

// [ "l", "e", "o", "n"]

5、合并数组更加简单

// ES5
[11, 2].concat([4,5])

// ES6
[11, 2, ...[4,5]]
 
 
 //多个的写法
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" ]

我的github资源地址：es6 -- 默认参数Default，不定参数Rest，扩展运算符Spread详解

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com

云服务器 GPU云服务器不定参数 default参数 java不定参数类型 java检查不定参数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101882.html

ES6 ...操作符

摘要：在语法中，操作符有两种意义剩余语法，参数和展开语法，展开数组对象，作为函数数组对象的扩展运算符。使用和参数进行操作其余参数传给原始函数展开语法运算则可以看作是参数的逆运算。在ES6语法中，...操作符有两种意义：rest(剩余语法，rest参数) 和 spread(展开语法，展开数组/对象)，作为函数、数组、对象的扩展运算符。从某种意义上说，剩余语法与展开语法是相反的：剩余语法将多...

MorePainMoreGain 2019-08-23 12:12 评论0 收藏0
es6的解构赋值、扩展运算符、rest参数使用

摘要：模板字符串甚至还能嵌套解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免对象的使用。 es6中较为常用的书写风格为了书写的方便，es6中提出了很多比较友好的书写方式，其中最为常见的属于以下几个：字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1,...

xuweijian 2019-08-21 16:47 评论0 收藏0
ES6—扩展运算符和rest运算符（6）

摘要：扩展运算符简介扩展运算符是三个点，可以将一个数组转为用逗号分隔的参数序列。在实际项目中灵活应用扩展运算符运算符，能写出更精简易读性高的代码。 1、扩展运算符简介扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 评论0 收藏0
ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解

摘要：变量声明与赋值值传递浅拷贝与深拷贝详解归纳于笔者的现代开发语法基础与实践技巧系列文章。变量声明在中，基本的变量声明可以用方式允许省略，直接对未声明的变量赋值。按值传递中函数的形参是被调用时所传实参的副本。 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了...

snowLu 2019-08-21 11:55 评论0 收藏0
学习ES6 变量的解构赋值

摘要：变量的解构赋值数组的解构赋值允许写成下面这样本质上，这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。对象的解构赋值对象的解构与数组有一个重要的不同。由于和无法转为对象，所以对他们进行解构赋值，都会报错。变量的解构赋值数组的解构赋值 let a = 1; let b = 2; let c = 3; ES6允许写成下面这样 let [a,b,c] = [1,...

sugarmo 2019-08-20 18:10 评论0 收藏0