扩展运算符技巧

我最近遇到了一些使用扩展运算符的便捷模式，因此我想写一篇简短的博客文章来分享一些。

这篇博文我不会介绍语法的基础知识。如果你需要复习一下，MDN 文档是一个很好的资源。

不变性

JavaScript 对对象的处理方式很巧妙。当你试图复制一个对象时，你可能会无意中创建对它的引用。

let oldNed = {
  name: 'Ned Stark',
  job: 'Warden of the North'
};
let newNed = oldNed;
newNed.job = 'Dead';
// oldNed variable is also mutated
console.log(oldNed) // { name: 'Ned Start', job: 'Dead' }

修改数据可能会导致一些难以发现的 bug，因此值得花时间和精力，通过正确复制需要更改的数据来确保避免这种情况。一种方法是使用扩展运算符。

let newNed = {...oldNed};

对 newNed 的任何更改都不会改变 oldNed 变量。但是有一个例外。扩展运算符不会对嵌套对象进行深层克隆。

let oldNed = {
  name: 'Ned Stark',
  job: 'Warden of the North',
  kids: ['John', 'Rob', 'Bran', 'Sansa', 'Arya', 'Rickon']
};
let newNed = { ...oldNed };
newNed.kids.splice(5)
// oldNed is now also missing Rickon :(

为了解决这个问题，你还必须展开嵌套数组

let newNed = { ...oldNed, kids: [...oldNed.kids] };

请记住，如果您有一个深度嵌套的对象，您可能需要某种自定义函数或库来帮助您进行深度克隆。

这里还有一些其他巧妙的不变技巧。

组合多个数组（部分或整体）。

let dontChangeMe = ['Apples', 'Peaches', 'Detergent', 'Flowers'];
let meNeither = ['A shiny red polo', 'coffee', 'milk'];
let shoppingList = [
    ...dontChangeMe,
    'diapers',
    ...meNeither.slice(1)
]

复制对象并同时更新属性。

let nedStark = {
  name: 'Ned Stark',
  job: 'Warden of the North'
};
let newNed = { ...nedStark, job: 'Dead' };

将 nodeList 转换为实际数组。

var divs = document.querySelectionAll('div')
var arrayOfDivs = [...divs] // returns an array not a nodelist

剩余操作符

所以，我个人还没有发现 Rest 运算符的太多用例。不过，我偶然发现了这种使用 React-Router 在 React 中创建经过身份验证的路由的模式。这是一个基本示例。

const AuthenticatedRoute = ({ ...rest }) => {
  const id = this.state;
  if (!id) {
    return <Redirect to={{ pathname: '/home' }} />;
  }
  return <Route {...rest} />;
};
// In Use
<AuthenticatedRoute
  path='/dashboard'
  data={this.state.data}
  render={() => (
    <SomeComponent someProps={this.someProps} />
  )}
/>

其余运算符的魔力在你返回时显现<Route {...rest} />。本质上，它调用了一个函数 AuthenticatedRoute，并检查状态对象上的 id。如果 id 不匹配，则返回一个<Redirect/>组件。否则，它返回一个<Route>组件并传递其所有 props（在本例中path为data、和render）。

很方便吧？还有吗？请在下方分享！

文章来源：https://dev.to/robaguilera/spread-operator-tricks-4g9k