关于es6的展开语法和Array.from方法

一、展开语法:

展开语法(Spread syntax),可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

1、语法:

函数调用:

myFunction(...iterableObj);

字面量数组构造或字符串:

[...iterableObj, '4', ...'hello', 6];

构造字面量对象时,进行克隆或者属性拷贝(ECMAScript 2018规范新增特性):

let objClone = { ...obj };

2、示例:

在函数调用时使用展开语法,等价于apply的方式

如果想将数组元素迭代为函数参数,一般使用Function.prototype.apply的方式进行调用。

function myFunction(x, y, z) { }

var args = [0, 1, 2];

myFunction.apply(null, args);

有了展开语法,可以这样写:

function myFunction(x, y, z) { }

var args = [0, 1, 2];

myFunction(...args);

函数相关我们先只写到这里,本文的标题是展开语法与Array.from()方法。肯定讲的是这两个es6的属性的相同点和不同点,现在我们主要针对这两个属性的复制来进行分析。

展开语法除了可以在函数调用时使用,还可以用于可迭代对象(即可以被循环遍历的对象),扩展语法可以对数组和对象字面量进行拼接、复制、连接等骚操作。在实际的代码编写中,我们可能会涉及到对象的深复制;

深复制:两数组指针指向不同的地址,数组元素发生改变时不会相互影响。

浅拷贝:相当于使两个数组指针指向相同的地址,任一个数组元素发生改变,影响另一个。

简单的对象赋值只是进行了浅赋值,所以在操作对象时会出现数据的误操作;以前的解决方法是对需要深复制的对象进行递归操作,从而实现深复制,现在我们只需要Array.from()方法即可进行深复制。

之前在使用扩展语法进行数组复制时,我就有过思考这个到底是深复制还是浅复制,在控制台操作一遍后,结果是浅复制,在MDN官网上写的也是浅复制

之后我又看到这个Array.from()方法,也是用于复制数组。此时我当然要试验一些该方法是否是可以进行深复制,在控制台操作一遍后,我兴奋的发现是深复制。

以后对数组进行深复制再也不需要进行递归操作了

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180702A1QMRQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券