:::tip{title="工作中参数处理"}
给后台传递数组对象(子数组对象)处理逻辑
:::



# 1.给后台传递数组对象(子数组对象)

## 1、举例一个场景要求

> 需要对原数组数据提取每个对象的 goodsId 和 goodsName，以及对应的 goodsPrices 数组中每个对象的 id 和 roomDay，将这些值组合成新的对象，并存入一个新的数组中

```js
let arrList = [
  {
    goodsId: 1,
    goodsName: '商品1',
    goodsPrice: 100,
    goodsNum: 1,
    goodsPrices: [
      {
        id: 1,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-10', //日期
      },
      {
        id: 2,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-11', //日期
      },
      {
        id: 3,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-12', //日期
      },
      {
        id: 4,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-13', //日期
      },
    ],
  },
  {
    goodsId: 2,
    goodsName: '商品2',
    goodsPrice: 100,
    goodsNum: 1,
    goodsPrices: [
      {
        id: 1,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-10', //日期
      },
      {
        id: 2,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-11', //日期
      },
      {
        id: 3,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-12', //日期
      },
    ],
  },
  {
    goodsId: 3,
    goodsName: '商品3',
    goodsPrice: 100,
    goodsNum: 1,
    goodsPrices: [
      {
        id: 1,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-10', //日期
      },
      {
        id: 2,
        newRoomPrice: 100, //新房价
        roomDay: '2023-02-11', //日期
      },
    ],
  },
]
```

## 解决方案（一）

### 1、你可以通过 `Array.map()` 方法遍历 `arrList` 数组，然后针对每一项对象生成新的数组项，包含 `goodsId`、`goodsName`、`id`、`roomDay` 等信息。具体实现如下

```js
const newData = arrList.map((item) => {
  const { goodsId, goodsName, goodsPrices } = item
  const newGoodsPrices = goodsPrices.map(({ id, roomDay }) => ({ id, roomDay }))
  return { goodsId, goodsName, goodsPrices: newGoodsPrices }
})

console.log(newData)
```

- **代码解释**

  > 上述代码中，通过解构赋值将每个对象的 `goodsId`、`goodsName`、`goodsPrices` 提取出来，然后对 `goodsPrices` 数组再次使用 `Array.map()` 方法，取出每个对象中的 `id` 和 `roomDay` 属性，生成新的数组项。最后返回一个新的对象，包含 `goodsId`、`goodsName` 和新的 `goodsPrices` 数组。整个过程可以一步到位，不需要定义中间变量。

## 解决方案（二）

### 2、除了使用 map 方法之外，你还可以使用 for 循环来遍历原数组，并将每一项的 goodsId、goodsName 以及对应的 goodsPrices 的 id、roomDay 组成一个新对象，再将这个对象推入一个新数组中。以下是使用 for 循环实现的示例代码

```js
let newArrList = []

for (let i = 0; i < arrList.length; i++) {
  let obj = {
    goodsId: arrList[i].goodsId,
    goodsName: arrList[i].goodsName,
    goodsPrices: [],
  }

  for (let j = 0; j < arrList[i].goodsPrices.length; j++) {
    obj.goodsPrices.push({
      id: arrList[i].goodsPrices[j].id,
      roomDay: arrList[i].goodsPrices[j].roomDay,
    })
  }

  newArrList.push(obj)
}

console.log(newArrList)

// 输出结果与使用map方法得到的结果相同。
```

- **代码解释**

> 这段代码是对给定的数组 arrList 进行遍历，然后将每一项转换为一个新的对象，并将这些新的对象添加到一个新的数组 newArrList 中。

具体来说，内部循环遍历了每个商品的价格数组 goodsPrices，将其转换为新的对象并将其添加到新数组 goodsPrices 中。外部循环遍历了每个商品对象，每个商品对象的 goodsId、goodsName 属性被保存下来，并且将内部循环中转换出来的 goodsPrices 数组添加到新的商品对象中。最终得到的是一个新的数组 newArrList，其中每个元素都是一个包含商品信息和价格信息的对象。

## 解决方案（三）

### 3、需要对原数组进行遍历，提取每个对象的 goodsId 和 goodsName，以及对应的 goodsPrices 数组中每个对象的 id 和 roomDay，将这些值组合成新的对象，并存入一个新的数组中。可以使用 map()+forEach 方法实现这个过程

```js
const newArrList = arrList.map((item) => {
  const newObj = {
    goodsId: item.goodsId,
    goodsName: item.goodsName,
    goodsPrices: [],
  }
  item.goodsPrices.forEach((priceItem) => {
    newObj.goodsPrices.push({
      id: priceItem.id,
      roomDay: priceItem.roomDay,
    })
  })
  return newObj
})

// 输出新数组
console.log(newArrList)
```

- **代码解释**

> 这里定义了一个新的空数组 newArrList，然后使用 map()方法对原数组进行遍历，map()方法会返回一个新的数组，将每次循环得到的新对象存入这个新数组中。在每次遍历时，首先创建一个空对象 newObj，然后将当前遍历到的对象的 goodsId 和 goodsName 赋值给这个新对象。然后，对当前对象的 goodsPrices 数组进行遍历，将每个对象的 id 和 roomDay 提取出来，存入一个新的对象中，并将这个新的对象存入 newObj 对象的 goodsPrices 数组中。最后，返回这个新对象。

通过这个代码，我们将原数组中每个对象的 goodsId、goodsName 和对应的 goodsPrices 数组中的 id 和 roomDay 提取出来，组成了一个新的数组。

JS给后端传递参数数组对象场景例子

:::tip{title="日期动态前后格式化处理"}
这篇文章主要介绍了一个JavaScript函数，用于根据给定的时间偏移量和格式化字符串来动态格式化日期时间，支持自定义时间格式和计算过去或未来的特定时间点。
:::



# 根据给定的时间偏移量和格式化字符串格式化日期时间方法

```js
/**
    根据给定的时间偏移量和格式化字符串格式化日期时间。
    @param {Object} numAgo - 时间偏移量对象，包括以下属性：
    years {number} 年数偏移量，默认为 0。
    months {number} 月数偏移量，默认为 0。
    days {number} 天数偏移量，默认为 0。
    hours {number} 小时数偏移量，默认为 0。
    minutes {number} 分钟数偏移量，默认为 0。
    seconds {number} 秒数偏移量，默认为 0。
    @param {string} format - 时间格式化字符串，默认为 '{y}-{m}-{d} {h}:{i}:{s}'。
    可使用的占位符有：{y} 年、{m} 月、{d} 日、{h} 小时、{i} 分钟、{s} 秒、{w} 星期。
    @param {Date} date - 基准日期时间，默认为当前时间。
    @returns {string} 格式化后的日期时间字符串。
    */
function getFormattedDate(
  numAgo = { years: 0, months: 0, days: 0, hours: 0, minutes: 0, seconds: 0 },
  format = '{y}-{m}-{d} {h}:{i}:{s}',
  date = new Date()
) {
  // 根据 numAgo 修改时间
  const {
    years = 0,
    months = 0,
    days = 0,
    hours = 0,
    minutes = 0,
    seconds = 0,
  } = numAgo
  date.setFullYear(date.getFullYear() - years)
  date.setMonth(date.getMonth() - months)
  date.setDate(date.getDate() - days)
  date.setHours(date.getHours() - hours)
  date.setMinutes(date.getMinutes() - minutes)
  date.setSeconds(date.getSeconds() - seconds)

  // 获取年、月、日、时、分、秒、星期
  const [y, m, d, h, i, s] = [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate(),
    date.getHours(),
    date.getMinutes(),
    date.getSeconds(),
  ]
  const w = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]

  // 格式化时间
  const formattedDate = format
    .replace(/\{y\}/g, y)
    .replace(/\{m\}/g, m.toString().padStart(2, '0'))
    .replace(/\{d\}/g, d.toString().padStart(2, '0'))
    .replace(/\{h\}/g, h.toString().padStart(2, '0'))
    .replace(/\{i\}/g, i.toString().padStart(2, '0'))
    .replace(/\{s\}/g, s.toString().padStart(2, '0'))
    .replace(/\{w\}/g, w)

  return formattedDate
}
```

### 这个函数可以根据需求格式化时间，并且也支持修改时间。以下是一些调用方法

#### 1. 获取当前时间并格式化

```js
const currentTime = getFormattedDate()
console.log(currentTime) // 输出如：2023-03-14 18:34:14
```

#### 2. 获取当前时间并按指定格式格式化

```js
const format = '{y}/{m}/{d} {h}:{i}:{s}'
const currentTime = getFormattedDate({}, format)
console.log(currentTime) // 输出如：2023/03/14 18:35:30
```

#### 3. 获取当前时间前一天的时间并格式化

```js
const numAgo = { days: 1 }
const currentTime = getFormattedDate(numAgo)
console.log(currentTime) // 输出如：2023-03-13 18:35:51
```

#### 4. 获取当前时间前一周的时间并按指定格式格式化

```js
const numAgo = { days: 7 }
const format = '{y}/{m}/{d} {h}:{i}:{s}'
const currentTime = getFormattedDate(numAgo, format)
console.log(currentTime) // 输出如：2023/03/07 18:36:07
```

#### 5. 获取指定时间并格式化

```js
const date = new Date('2022-02-02 12:00:00')
const currentTime = getFormattedDate({}, '{y}/{m}/{d} {h}:{i}:{s}', date)
console.log(currentTime) // 输出如：2022/02/02 12:00:00
```

#### 6. 获取指定时间前一小时的时间并格式化

```js
const date = new Date('2022-02-02 12:00:00')
const numAgo = { hours: 1 }
const currentTime = getFormattedDate(numAgo, '{y}-{m}-{d} {h}:{i}:{s}', date)
console.log(currentTime) // 输出如：2022-02-02 11:00:00
```

#### 7. 获取指定时间前一年一月一日一小时一分一秒的时间并格式化

```js
const currentTime = getFormattedDate(
  { years: 1, months: 1, days: 1, hours: 1, minutes: 1, seconds: 1 },
  '{y}-{m}-{d} {h}:{i}:{s}',
  new Date('2022-03-14 17:37:00')
)
console.log(currentTime) // 输出如：2021-02-13 16:35:59
```

#### 8. 获取当前时间前一年一月一日一小时一分一秒的时间并格式化

```js
const currentTime = getFormattedDate(
  { years: 1, months: 1, days: 1, hours: 1, minutes: 1, seconds: 1 },
  '{y}-{m}-{d} {h}:{i}:{s}'
)
console.log(currentTime) // 输出如：2022-02-13 18:25:13
```

#### 9.  获取当前时间后一年一月一日星期的时间并格式化

```js
const currentTime = getFormattedDate(
  { years: 1, months: 1, days: 1 },
  '{y}-{m}-{d} 星期{w}'
)
console.log(currentTime) //输出如：2023-03-15 星期三
```

JS日期前后动态获取

:::tip{title="localforage存储细节"}
这篇文章主要介绍了localforage库在JavaScript中的使用，包括如何存储和获取数据、设置数据过期时间、使用高级方法（如iterate和keys）以及配置localforage的高级选项（如driver和name）。
:::



## 1.localforage 如何设置过期时间

- 可以使用 `setItem()` 方法并添加一个时间戳来存储数据，然后在获取数据时检查时间戳，如果过期了则删除数据并返回 `null`。

```js
// 设置一个过期时间为1小时的数据
var expires = new Date().getTime() + 3600 * 1000; // 当前时间戳 + 1小时的毫秒数
var data = {
  key: 'value',
  expires: expires
};

// 将数据存储到 localForage 中
localforage.setItem('dataKey', data).then(function() {
  console.log('Data stored');
}).catch(function(err) {
  console.log('Error: ' + err);
});

// 获取数据时检查过期时间
localforage.getItem('dataKey').then(function(data) {
  if (data && new Date().getTime() < data.expires) {
    console.log('Data not expired');
    console.log(data.key);
  } else {
    console.log('Data expired or not found');
    localforage.removeItem('dataKey');
  }
}).catch(function(err) {
  console.log('Error: ' + err);
});

```

- 在这个示例中，我们创建了一个名为 `data` 的对象，并将其存储到 `localForage` 中。该对象包含一个 `expires` 属性，其值为当前时间加上一个小时的时间戳。在获取数据时，我们首先检查数据是否存在并且没有过期，如果数据有效，我们就可以获取其中的值。如果数据过期或不存在，我们就删除它。

- 注意，这个方法并不是 `localForage` 内置的方法，但是可以用来实现类似于过期时间的功能。如果需要更高级的功能，建议使用专门的过期时间库或插件。



## 2.关于存储的高级写法，localforage 除了提供基本的 setItem() 和 getItem() 方法外，还提供了许多其他的方法，比如：

- `keys()`: 获取所有已存储的键名
- `iterate()`: 遍历所有键值对
- `removeItem()`: 删除指定键名的键值对
- `clear()`: 删除所有已存储的键值对

以下是一些示例：

```js
// 使用 iterate() 方法遍历所有已存储的键值对
localforage.iterate(function(value, key, index) {
    console.log(key, value);
}).then(function() {
    console.log('Iteration has completed');
}).catch(function(err) {
    console.log(err);
});

// 使用 keys() 方法获取所有已存储的键名
localforage.keys().then(function(keys) {
    console.log(keys);
}).catch(function(err) {
    console.log(err);
});

// 使用 removeItem() 方法删除指定键名的键值对
localforage.removeItem('myKey').then(function() {
    console.log('Item has been removed');
}).catch(function(err) {
    console.log(err);
});

// 使用 clear() 方法删除所有已存储的键值对
localforage.clear().then(function() {
    console.log('Database has been cleared');
}).catch(function(err) {
    console.log(err);
});

```

## 3.localforage 还提供了一些高级配置选项，比如：

- `driver`: 存储数据所使用的驱动（默认为 IndexedDB）
- `name`: 数据库的名称（默认为 localforage）
- `version`: 数据库的版本号（默认为 1.0）
- `storeName`: 存储数据的对象存储名称（默认为 keyvaluepairs）

可以通过 `config()` 方法来设置这些选项。例如，以下代码将使用 WebSQL 存储数据，并将数据库的名称设置为 myApp：

```js
localforage.config({
  driver: localforage.WEBSQL, // 使用 WebSQL 驱动
  name: 'myApp' // 数据库名称为 myApp
});

```