ES6：spread syntax —— JavaScript 将元素应用于数组和函数的文雅要领

2019年8月25日 277次阅读 来源: 胡子大哈

编译：胡子大哈

翻译原文：http://huziketang.com/blog/posts/detail?postId=58f6b7b3a58c240ae35bb8e7
英文衔接：ES6: The spread syntax — A concise way of applying elements to arrays and functions in JavaScript

转载请说明出处，保存原文链接以及作者信息

上一篇文章中，我引见了一些关于 ES6 解构要领的新特性。

本文中我们一同来看一下别的一个 JavaScript 新增语法 —— spread syntax（扩大语法）。

spread syntax 实际上异常简朴，假定你的可遍历对象中有一些元素（如数组），你想把这些元素应用于另一个新的数组或许一个函数挪用。一般的做法，你会从索引最先，应用轮回接见每一个元素。然则经由过程 spread syntax 这个事变就变的很简朴了，你能够应用三个点作为前缀，即 ... 应用于可遍历对象上，题目就处理了。

为了更直观，我们一同看几个用例就邃晓了。

复制一个数组

假定有一个数组名字是 names。

    const names = ['Luke','Eva','Phil'];

怎样把 names 内里的元素复制到一个新数组中呢？

传统的做法是用轮回来完成，然则应用 spread syntax，处理要领很简约。

    const copiedList = [...names]  
    console.log(copiedList); // ['Luke','Eva','Phil']

能够看到比轮回要领简朴的多。

这里值得一提的是，这里复制的是援用。也就是说假如一个数组中的元素发作转变，那末另一个数组中的元素也响应地发作转变。

    var initialArray = [{name: "Luke"}];  
    var copiedArray = [...initialArray];
    
    initialArray[0]['name'] = 'Mark';
    
    console.log(initialArray); //Array [{'name': 'Mark'}]  
    console.log(copiedArray); //Array [{'name': 'Mark'}]

衔接数组

spread syntax 另一个用法是衔接数组，做法是把你想要扩大的数组放到一同。以下：

    const concatinated = [...names, ...names];  
    console.log(concatinated); // ['Luke','Eva','Phil', 'Luke','Eva','Phil']

把自力变量扩大到一同

除了把元素复制到一个新数组中，还能够把自力变量一同扩大到某数组中。下面举个例子，把第一个元素和 names 数组扩大到一同。

    const first = ['Emily', ...names];  
    console.log(first); // ['Emily','Luke','Eva','Phil']

还能够把自力变量放到 names 的背面。

    const last = [...names, 'Emily'];  
    console.log(last); // ['Luke','Eva','Phil', 'Emily']

在函数挪用中应用 spread syntax

你已控制了怎样在数组中应用 spread syntax，如今我们来看一下怎样在函数挪用中应用。

假定我们有个简朴函数 —— printer —— 接收三个参数，而且打印出来。

    const printer = (name1, name2, name3) => {  
        console.log(`Names: ${name1}, ${name2} and ${name3}`);
    };

遵照 printer 函数定义，能够应用 spread syntax 把数组元素应用于 printer 函数。

    printer(...names); // Names: Luke, Eva and Phil

和数组的用法一样，能够把自力变量一同输出。我们增加 ‘Emily’ 作为 printer 函数的第一个参数，背面随着 ...names。

    printer('Emily', ...names); // Names: Emily, Luke and Eva

假如传递给函数过量的参数，那末凌驾函数参数个数的元素将会被疏忽掉。

Bonus：spread syntax 应用于对象字面值！

这个特性是基于 ECMAScript 的附加特性。然则现在应用它须要 babel 插件，叫做： babel-plugin-transform-object-rest-spread。

经由过程 spread syntax 这类变体，你能够把两个对象扩大到一同。假定你有两个对象包含了个人信息 —— nameAndAge 和 about。

    const nameAndAge = {  
      name: 'Luke',
      age: 24,
    }
    
    const about = {  
      work: 'Developer',
      hobby: 'Skydiving',
    }

接下来用 spread syntax 把两个对象合并到一同。

    const person = {  
      ...nameAndAge,
      ...about,
    }
    
    console.log(person);  
    //{
    //  "age": 24,
    //  "hobby": "Skydiving",
    //  "name": "Luke",
    //  "work": "Developer"
    //}

OK，这篇文章引见了 spread syntax 的用法。背面我们会继承引见 ES6 新特性，敬请继承关注！

我近来正在写一本《React.js 小书》，对 React.js 感兴趣的童鞋，迎接指导。

    原文作者：胡子大哈
    原文地址: https://segmentfault.com/a/1190000009389451
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞