网站原码（网站源码免费下载使用）

投稿用户 • 2022年6月29日 23:24:06 • 站长资源 • 阅读 56

有时您可能希望轻松复制或制作 Javascript 对象或数组的浅拷贝，或者可能将许多参数传递给函数或类方法。

扩展运算符通常用于实现此目标。

使用该运算符使代码简洁并增强了其可读性。

在本文后面，我将“传播”来自 Binance API 的示例数据。

为什么我们使用扩展运算符？

扩展运算符是 JavaScript ES6 中运算符集的新增内容。它接受一个可迭代的（例如一个数组）并将其扩展为单个元素。

句法

扩展运算符的语法由三个点 (…) 表示

后面是对象或数组或函数/方法参数的名称。

具体用例将在本文后面解释。

如何使用 ES6 Javascript 扩展运算符

扩展运算符在以下用例中非常有用。

1. 对象

让我们使用传播运算符组合这两个对象（myVehicle 和 updateMyVehicle）

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
//result
{
  brand: 'Ford',
  color: 'red'
  model: 'Mustang',
  type: 'car',
  year: 2021
}

请注意，颜色属性 red 已更新为 Yellow。这意味着使用扩展运算符，您可以使用来自另一个对象的新值更新属性。

我还可以在 myUpdateVehicle 对象的任何位置包含任何属性。我将包括所有者，马力，任何东西。你应该试试看！

...
const myUpdatedVehicle = {
  owner:"Onwuka Victor",
  ...myVehicle,
  horsepower:"750 hp",
  ...updateMyVehicle,
  anything:"yes, anything"
}
//result
{
  anything:'yes, anything', //added
  brand: 'Ford',
  color: 'red'
  horsepower:"750 hp",  //added
  model: 'Mustang',
  owner:"Onwuka Victor",  //added
  type: 'car',
}
...

控制台通常会按字母顺序对属性进行排序，因为对象中的位置并不重要。

2. 数组

我们可以使用扩展运算符轻松组合数组。下面是它是如何完成的：

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = […numbersOne, …numbersTwo];

3.休息参数

rest 参数为您提供了一种处理不定数量参数的可靠方法。它涉及在创建函数或方法时使用扩展运算符。

为了更好地理解什么是休息参数，让我们从头开始。

您可以使用未指定数量的参数调用函数，无论它如何定义。

例如：

function multiplyAll(...args) { //observe the spread operator
  let result = 1;
  for (let arg of args){
    result *= arg;
  }
  return result;
}
// run the code
console.log(multiplyAll(1)); // result: 1
console.log(multiplyAll(1, 2)); //result: 2
console.log(multiplyAll(1, 2, 3)); // result: 6

您可能还想这样做：

…
function multiplyAll( parameter1, parameter2, …args)
…

您仍然可以像往常一样访问 args 参数和其他参数吗？查出。

传播币安市场数据作为样本数据

Binance 提供了一个有据可查的 API，支持第三方集成和访问 Binance 数据和指标。

第一步

在此示例中，我将使用此 API 端点 (/api/v3/trades) 从 binance 获取 BTC-USDT 符号的 5 笔交易结果作为市场数据，以访问交易信息。

第二步

我将传播第一步（交易）的结果，然后传播第一个数组元素或数据的属性，即第一笔交易。

你也应该试试。

这是代码：

const fetch = require('node-fetch'); //npm install node-fetch

//STEP ONE: get the trades data via post request

//binance required parameter
const params = {
    symbol: 'BTC/USDT',
    limit: 5; 
};
// get the 5 trades for BTC-USDT Symbol on Binance Exchange
const trades = async () => await fetch('https://httpbin.org/post', {
  method: 'POST',
  body: body: JSON.stringify( params )
});
//sample result
let sample = [
//...
  {
    "id": 28457,
    "price": "4.00000100",
    "qty": "12.00000000",
    "quoteQty": "48.000012",
    "time": 1499865549590,
    "isBuyerMaker": true,
    "isBestMatch": true
  }
//...
];

//STEP TWO: I will spread the return Array and the properties of the first array element or data( the first trade data at index 0)

//extra data to combine with
let to extra = {exchange:"binance", account:"MrOvos"};

//spread the trades array
const combinedArray = [ ...extra , ...trades ]; 

//spread the first trade at index 0 
const firstTrade = {...trades[0]};

//TRY IT NOW!
console.log(combinedArray);
console.log(firstTrade);

结论

使用 Rest Operator (…)，您可以快速将现有数组或对象的全部或部分复制到另一个数组或对象中，而不会影响原始对象或数组。

您还可以使用扩展运算符扩展函数或方法的参数。

在本文中，我使用了币安市场数据对象和数组作为示例。如果你想知道为什么；我喜欢展示示例代码的真实示例。是的，我在我的代码中使用了扩展运算符。你也应该试试。

谢谢阅读！

更多APP/小程序/网站源码资源，请搜索"七爪网源码交易平台"！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 cloud@ksuyun.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.daxuejiayuan.com/38903.html

网站原码（网站源码免费下载使用）

相关推荐