（一）reduce作迭代器

1. reduce 函数的基本用法

array.reduce((accumulator, currentValue) => { ... }, initialValue);

• accumulator: 累积器，表示当前累积的值，通常在第一次时为 initialValue。（总数sum）
• currentValue: 当前数组正在遍历的元素。（遍历元素item）
• initialValue: reduce 的初始值，在第一次迭代时作为 accumulator 的初始值。（一般为0）

在你的代码中：

• sum 是累积器，表示当前累积的书的数量。
• item 是当前数组的元素，表示每一本书。
• 0 是 reduce 的初始值，即累积器 sum 初始为 0。

代码例子

学习时的疑问

为什么不能调换 sum 和 item？

不能调换 sum 和 item 的位置。因为 reduce 的设计是将累积的值作为第一个参数，当前元素作为第二个参数。如果调换了两者位置，函数的逻辑就会出错，无法正确累加。

为什么括号后面要跟一个 0？

0 是 reduce 的初始值，表示累积器 sum 的初始值。如果你不设置初始值，reduce 会将数组的第一个元素作为初始值，第二个元素作为第一个遍历的 currentValue。在你的例子中，累加的是数量（num），所以初始值 0 是合理的，因为它表示还没有累积任何数量。

（二）vue页面购物车数据本地化二三事

A. 前置准备：

定义常量books作为书籍列表：

·JSON.parse() 转类型 恢复数据原本的类型

·localStore.getItem（‘要获取的键值’）  从本地中取值

·localStore.setItem('要存储的键值',JSON.stringify(要转型的对象 一般是this.前面的键值))  从本地中存值

学时疑问：

1.为什么 bookList: JSON.parse(localStorage.getItem('bookList')) 这样写？

因为bookList 是一个属性，它的值是 JSON.parse(localStorage.getItem('bookList'))

而JSON.parse(localStorage.getItem('bookList')) 的结果就是一个值，不需要额外用花括号包裹。

如果 JSON.parse() 之后的结果是数组或对象，这就是最终赋值给 bookList 的内容，所以不需要额外的花括号。

2.为什么不需要花括号？

花括号 {} 在 JavaScript 中表示对象的字面量。如果你想定义一个空对象或复杂对象，才需要使用 {}。但是，在这里，bookList 已经是一个值（解析后的对象或数组），并不需要额外的花括号。

3. .parse()方法的定义/作用是？（在此例子中为了取值）

JSON.parse(...): 将 localStorage 中的 bookList 数据（这是一个字符串形式的 JSON）解析回 JavaScript 对象。JSON.parse() 用于将存储的字符串转换为原来的数据结构（如数组或对象）。

接上图的后半代码 

|| books: 如果 localStorage 中没有存储 bookList（即 localStorage.getItem('bookList') 返回 null），那么使用 books 作为默认值。books是一个定义好的默认书籍列表。

B.内置方法：

 deep:true（深度监视）的基本用法

watch 是 Vue.js 提供的一个侦听属性变化的机制，它允许你监听某个数据属性的变化，并在变化时执行相应的代码。它特别适用于需要在数据变化时进行异步操作或处理副作用的场景，比如更新 localStorage。

deep: true: 这是一个选项，表示进行深度监听。当你监听的属性是一个对象或数组时，Vue 默认只监听该对象或数组的引用，而不会监听它内部的深层变化。如果你希望监听对象内部的属性变化，就需要使用 deep: true。在这种情况下，bookList 是一个数组，因此启用深度监听意味着数组中的元素（比如每本书）发生变化时，也会触发 watch。

代码例子：

写在computed中

• bookList: 这是你要监听的数据属性。在 Vue 的实例中，bookList 可能是你的一个状态属性，包含了多个书籍的列表信息。

• handler(newValue): 这是回调函数，newValue 是 bookList 发生变化后的新值。每当 bookList 或其内部内容发生变化时（无论是添加、删除书籍，还是修改其中某个书的属性），都会调用这个 handler 函数。

localStorage.setItem

在 handler 函数中，调用了 localStorage.setItem('bookList', JSON.stringify(this.bookList))，其作用是将当前的 bookList 保存到浏览器的 localStorage 中。

• localStorage.setItem：这是浏览器的 localStorage API，用来存储数据。它的第一个参数是存储项的键名 'bookList'，第二个参数是存储的值，这里通过 JSON.stringify 把 bookList 转换成了字符串格式。

• this.bookList：指向当前 Vue 实例中的 bookList，这个 bookList 是 JSON.stringify 之后被存储到 localStorage 的。

• JSON.stringify(this.bookList)在这里是为了存值到本地 故转化为JSON格式的数据 而A中前置准备是为了取值 故将bookList变回原本的样子（使用.parse()）