理解spread运算符与rest参数

spread运算符与rest参数 是ES6的新语法。
它们的作用是什么?能做什么事情?

1. rest运算符用于获取函数调用时传入的参数。

function testFunc(...args) {
console.log(args); // ['aa', 'bb', 'cc']
console.log(args.length); //
}
// 调用函数
testFunc('aa', 'bb', 'cc');

2. spread运算符用于数组的构造,析构,以及在函数调用时使用数组填充参数列表。

let arrs1 = ['aa', 'bb'];
let arrs2 = ['cc', 'dd']; // 合并数组
let arrs = [...arrs1, ...arrs2];
console.log(arrs); // ['aa', 'bb', 'cc', 'dd'] // 析构数组
let param1, param2;
[param1, ...param2] = arrs1; console.log(param1); // aa
console.log(param2); // ['bb']

3. 类数组的对象转变成数组。

比如我们常见的是arguments对象,它是类数组,它有长度属性,但是没有数组的方法,比如如下代码:

function testFunc() {
console.log(arguments); // ['a', 'b']
console.log(typeof arguments); // object
console.log(arguments.length); //
console.log(arguments.push('aa')); // 报错 arguments.push is not a function
};
// 函数调用
testFunc('a', 'b');

把类数组对象转换成数组,代码如下:

function testFunc() {
// 转换成数组
var toArray = [...arguments];
console.log(toArray); // ['a', 'b']
toArray.push('11'); // ['a', 'b', '11']
console.log(toArray);
};
// 函数调用
testFunc('a', 'b');

4. 数组的深度拷贝
浅拷贝如下demo:

var arr1 = [1, 2];
var arr2 = arr1;
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

如上代码,arr1是一个数组有2个值 [1, 2], 然后把 arr1 赋值个 arr2, 接着往arr1中添加一个元素3,然后就会影响arr2中的数组。
因为我们知道浅拷贝是:拷贝的是该对象的引用,所以引用值改变,其他值也会跟着改变。
所以引用值也跟着改变。

深度拷贝对象如下代码:

var arr1 = [1, 2];
var arr2 = [...arr1];
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2]

5. 字符串转数组
如下代码:

var str = 'kongzhi';
var arr = [...str];
console.log(arr); // ["k", "o", "n", "g", "z", "h", "i"]

如果一个函数最后一个形参以 ...为前缀的,则在函数调用时候,该形参会成为一个数组,数组中的元素都是传递给这个函数多出来的实参的值。
比如如下代码:

function test(a, ...b) {
console.log(a); //
console.log(b); // ['22', '33']
}
test('11', '22', '33');

6. 解构赋值
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。

// 解构数组
var arr = ['aa', 'bb', 'cc'];
let [a1, a2, a3] = arr;
console.log(a1); // aa
console.log(a2); // bb
console.log(a3); // cc // 对象解构
var o = {a: 1, b: 2};
var {a, b} = o;
console.log(a); //
console.log(b); //

7. 交换变量

var a = 1, b = 2;
[a, b] = [b, a];
console.log(a); //
console.log(b); //

8. 从函数中返回多个值

function test() {
return {
aa: 1,
bb: 2
}
}
let { aa, bb } = test();
console.log(aa); //
console.log(bb); //

理解spread运算符与rest参数的更多相关文章

  1. 如何理解javaSript中函数的参数是按值传递

    本文是我基于红宝书<Javascript高级程序设计>中的第四章,4.1.3传递参数小节P70,进一步理解javaSript中函数的参数,当传递的参数是对象时的传递方式. (结合资料的个人 ...

  2. java 重写你可以这么理解 因为 方法名和参数类型个数相同 所以这就是重写了 然后 因为是重写 所以 返回值必须相同

    java  重写你可以这么理解    因为   方法名和参数类型个数相同  所以这就是重写了    然后  因为是重写  所以  返回值必须相同

  3. 理解 Linux backlog/somaxconn 内核参数

    https://jaminzhang.github.io/linux/understand-Linux-backlog-and-somaxconn-kernel-arguments/ 各参数的含义:h ...

  4. 深入理解python中函数传递参数是值传递还是引用传递

    深入理解python中函数传递参数是值传递还是引用传递 目前网络上大部分博客的结论都是这样的: Python不允许程序员选择采用传值还是传 引用.Python参数传递采用的肯定是"传对象引用 ...

  5. 深入理解new运算符

    在 JavaScript 中,new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例.创建一个对象很简单,为什么我们还要多此一举使用 new 运算符呢?它到底有什么样的魔力? 认 ...

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

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

  7. 理解 Python 中的可变参数 *args 和 **kwargs:

    默认参数:  Python是支持可变参数的,最简单的方法莫过于使用默认参数,例如: def getSum(x,y=5): print "x:", x print "y:& ...

  8. C++笔记(1)----此运算符函数的参数太多

    在VS2015中定义了这样一个类: #include<iostream> #include<vector> #include<string> using names ...

  9. 基于TensorFlow理解CNN中的padding参数

    1 TensorFlow中用到padding的地方 在TensorFlow中用到padding的地方主要有tf.nn.conv2d(),tf.nn.max_pool(),tf.nn.avg_pool( ...

随机推荐

  1. tmux frequently asked questions

    tmux frequently asked questions How is tmux different from GNU screen?     tmux and GNU screen have ...

  2. cookie 操作(转载)

    /** * Create a cookie with the given name and value and other optional parameters. * * @example $.co ...

  3. IIFE(立即执行函数表达式)

    我们经常会看到这样的写法: ;(fuction () { // do something })() 这就是一个简单的IIFE(立即执行函数表达式,immediately-invoked functio ...

  4. 跨域请求cookie获取与设置问题

    描述:最近做项目遇到了cookie的问题,项目为前后端分离项目,前台有分外网IP(A外)和内网IP(A内),后台服务只有一个内网IP(B内). 现象:当我前台异步请求发送给后台的时候,后台并不能获取到 ...

  5. CentOS6.x机器安装Python2.7.x

    准备环境:CentOS6.9机器 1.查看机器默认的Python版本 [root@hlmcent69nma ~]# python -V Python [root@hlmcent69nma ~]# wh ...

  6. C++反汇编第一讲,认识构造函数,析构函数,以及成员函数

    C++反汇编第一讲,认识构造函数,析构函数,以及成员函数 以前说过在C系列下的汇编,怎么认识函数.那么现在是C++了,隐含有构造和析构函数 一丶认识构造函数 高级代码: class MyTest { ...

  7. Django 2.0 新特性 抢先看!

    一.Python兼容性 Django 2.0支持Python3.4.3.5和3.6.Django官方强烈推荐每个系列的最新版本. 最重要的是Django 2.0不再支持Python2! Django ...

  8. mysql 双机热备注意事项

    上一篇文章已经介绍过    主从复制,   本文对主从复制只是简单描述,如对主从复制不清楚的,可以先看上一篇文章   主从复制  一:介绍 mysql版本:5.7.20 第一个主服服务器ip:192. ...

  9. 实践作业1:测试管理工具实践 Day2

    1.尝试配置TestLink所需环境 安装配置php+apache+mysql时遇到一系列稀奇古怪的错误. 2.百度之后发现有可行的替代工具:Vertrigoserv(VertrigoServ是一个W ...

  10. codeforces 893A Chess For Three 模拟

    893A Chess For Three 思路: 直接模拟即可,第一盘永远是A与B开始 代码: #include <bits/stdc++.h> using namespace std; ...