一、對(duì)象創(chuàng)建引發(fā)構(gòu)造函數(shù)產(chǎn)生

1.1 創(chuàng)建對(duì)象三種方式：

1. 利用對(duì)象字面量創(chuàng)建對(duì)象

 const obj = {name: '佩奇'}

注：對(duì)象字面量的由來(lái)：即它是直接由字面形式（由源代碼直接）創(chuàng)建出來(lái)的對(duì)象，而不是通過(guò)構(gòu)造函數(shù)或者方法間接構(gòu)成的，所以就叫做對(duì)象字面量。

1. 利用 new Object 創(chuàng)建對(duì)象

   // 兩種添加屬性的方式// const obj = new Object()// obj.uname = '哈哈哈哈'// console.log(obj);const obj = new Object({ uname: '哈哈哈哈' })console.log(obj);

注：當(dāng)使用Object時(shí)，實(shí)際上是調(diào)用了js內(nèi)置的一個(gè)構(gòu)造函數(shù)并且通過(guò)new關(guān)鍵字來(lái)創(chuàng)建一個(gè)新的對(duì)象。
3. 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象 往下看。。。。。

1.2 構(gòu)造函數(shù)

構(gòu)造函數(shù)定義：就是一個(gè)函數(shù)，用來(lái)創(chuàng)建快速多個(gè)類(lèi)似的對(duì)象，將多個(gè)對(duì)象的公共屬性封裝在一個(gè)函數(shù)里

注意：創(chuàng)建對(duì)象的時(shí)候首字母大寫(xiě)；使用函數(shù)創(chuàng)建對(duì)象通過(guò)new關(guān)鍵字操作符。

        //創(chuàng)建一個(gè)豬豬 構(gòu)造函數(shù)function Pig (uname, age) {this.unmae = unamethis.age = age}// 通過(guò)new關(guān)鍵字調(diào)用函數(shù)// 實(shí)例化構(gòu)造函數(shù)// console.log(new Pig('佩奇', 6))const p = new Pig('佩奇', 6)console.log(p);

另外：同new Object（）、 new Date（） 一樣都是實(shí)例化構(gòu)造函數(shù)，js內(nèi)置了Date、Object構(gòu)造函數(shù)，然后通過(guò)new關(guān)鍵字實(shí)現(xiàn)實(shí)例化函數(shù)，最后實(shí)現(xiàn)實(shí)例化對(duì)象

const date = new Date('2021-3-4')console.log(date);function Goods (name, price, count) {this.nam = namethis.price = pricethis.count = count}const mi = new Goods('小米', 1999, 20)console.log(mi)const hw = new Goods('華為', 1999, 50)console.log(hw)

總結(jié)：
1.new關(guān)鍵字調(diào)用函數(shù)的行為被稱(chēng)為實(shí)例化
2.構(gòu)造函數(shù)無(wú)return，構(gòu)造函數(shù)自動(dòng)返回構(gòu)建的新的對(duì)象。
什么時(shí)候需要return？就是函數(shù)比起輸出結(jié)果，將返回結(jié)果給其他程序，然后程序使用這個(gè)結(jié)果做其他事情更重要的時(shí)候。這個(gè)具體見(jiàn)小編的 js——函數(shù)篇。
3.實(shí)例化構(gòu)造函數(shù)時(shí)沒(méi)有參數(shù)時(shí)可以省略 ()

實(shí)例化執(zhí)行過(guò)程

①構(gòu)造函數(shù)先調(diào)用，加上new，立刻創(chuàng)建一個(gè)空對(duì)象 ②this指向空對(duì)象
③執(zhí)行構(gòu)造函數(shù)代碼，利用this，添加屬性.（具體是通過(guò)形參傳入實(shí)參， this指向新對(duì)象，新對(duì)象添加一個(gè)name屬性
這樣實(shí)參通過(guò)形參就傳入到了對(duì)象中 生成了對(duì)象屬性 對(duì)象也有了 屬性也有了 ，構(gòu)造函數(shù)就會(huì)自動(dòng)返回一個(gè)新的對(duì)象 返回的新對(duì)象 由new Pig接收。）
④.返回新對(duì)象

1.3 實(shí)例成員 靜態(tài)成員

實(shí)例成員
通過(guò)構(gòu)造函數(shù)創(chuàng)建的對(duì)象稱(chēng)為實(shí)例對(duì)象；
實(shí)例對(duì)象中的屬性和方法稱(chēng)為實(shí)例成員 （實(shí)例屬性 實(shí)例方法）

下面舉一個(gè)不含有參數(shù)的利用構(gòu)造函數(shù)創(chuàng)建實(shí)例對(duì)象：

function Pig () {this.name = '佩奇'this.sayHi = function () {console.log('你好')}}const p = new Pig()console.log(p.name)p.sayHi()

注：

1. 實(shí)例對(duì)象的屬性和方法即為實(shí)例成員
2. 為構(gòu)造函數(shù)傳入?yún)?shù)，動(dòng)態(tài)創(chuàng)建結(jié)構(gòu)相同但值不同的對(duì)象
3. 構(gòu)造函數(shù)創(chuàng)建的實(shí)例對(duì)象彼此獨(dú)立互不影響

靜態(tài)成員
構(gòu)造函數(shù)的屬性和方法被稱(chēng)為靜態(tài)成員 靜態(tài)成員只能構(gòu)造函數(shù)訪問(wèn)。

 function Person () {// 省略實(shí)例成員}// 靜態(tài)屬性Person.eyes = 2Person.arms = 2// 靜態(tài)方法Person.walk = function () {console.log('人嗯呢')console.log(this.eyes)}new Person()console.log(Person.eyes)console.log(Person.arms)// 死記硬背：遇到方法一定要想到需要調(diào)用 并且不用打印調(diào)用  方法里面有結(jié)果的輸出// console.log(Person.walk);//錯(cuò)誤Person.walk()

說(shuō)明：

1. 構(gòu)造函數(shù)的屬性和方法被稱(chēng)為靜態(tài)成員
2. 一般公共特征的屬性或方法靜態(tài)成員設(shè)置為靜態(tài)成員
3. 靜態(tài)成員方法中的 this 指向構(gòu)造函數(shù)本身

二、內(nèi)置構(gòu)造函數(shù)

一切皆對(duì)象

我發(fā)現(xiàn)因?yàn)闃?gòu)造函數(shù)的存在，所以都可以new出來(lái)一個(gè)實(shí)例對(duì)象

主要的數(shù)據(jù)類(lèi)型有6種：
基本數(shù)據(jù)類(lèi)型：字符串、數(shù)值、布爾、undefined、null
引用數(shù)據(jù)類(lèi)型：對(duì)象、數(shù)組等。
字符串.Length

 // const str = 'pink'// // 有屬性// console.log(str.length)// const num = 12// // 有方法// console.log(num.toFixed(2));// js底層完成 把簡(jiǎn)單數(shù)據(jù)類(lèi)型包裝成了引用數(shù)據(jù)類(lèi)型// const str = new String('pink')

為什么任何數(shù)據(jù)都有屬性和方法？

原理：其實(shí)在js的底層 將字符串類(lèi)似轉(zhuǎn)化為了對(duì)象，也就存在了屬性和方法
基本包裝類(lèi)型就是基本數(shù)據(jù)類(lèi)型包裝成了復(fù)雜數(shù)據(jù)類(lèi)型
實(shí)字符串、數(shù)值、布爾、等基本類(lèi)型也都有專(zhuān)門(mén)的構(gòu)造函數(shù)，這些我們稱(chēng)為包裝類(lèi)型。
JS中幾乎所有的數(shù)據(jù)都可以基于構(gòu)成函數(shù)創(chuàng)建
包裝類(lèi)型
? String，Number，Boolean 等基本數(shù)據(jù)類(lèi)型

2.1 Object

Object 是內(nèi)置的構(gòu)造函數(shù)，用于創(chuàng)建普通對(duì)象。

使用 Object 創(chuàng)建對(duì)象

const aa = new Object({ uname: '哈哈', age: 18 })
console.log(aa);	

三個(gè)常用靜態(tài)方法（靜態(tài)方法就是只有構(gòu)造函數(shù)可以調(diào)用的，在這里是只有Object可以調(diào)用的）

 const o = { uanme: 'pink', age: 18 }// 1.Object.keys 靜態(tài)方法獲取對(duì)象中所有屬性（鍵） 返回?cái)?shù)組console.log(Object.keys(o))// 2.Object.values 靜態(tài)方法獲取對(duì)象中所有屬性值 返回?cái)?shù)組console.log(Object.values(o))// 3.Object. assign 靜態(tài)方法常用于對(duì)象拷貝 經(jīng)常使用的場(chǎng)景給對(duì)象添加屬性const oo = {}Object.assign(oo, o)console.log(oo)// 通過(guò)Object給對(duì)象添加屬性Object.assign(o, { gender: '女' })console.log(o)console.log(Object.keys(o));

2.2 Array

Array 是內(nèi)置的構(gòu)造函數(shù)，用于創(chuàng)建數(shù)組

const arr = new Array(3, 5)
console.log(arr);

創(chuàng)建數(shù)組建議使用字面量創(chuàng)建，不用 Array構(gòu)造函數(shù)創(chuàng)建

數(shù)組常見(jiàn)實(shí)例方法：

數(shù)組中的reduce方法：
這里不知道大家會(huì)不會(huì)有個(gè)問(wèn)題，為什么function函數(shù)沒(méi)有被調(diào)用呢，就能夠返回值，這是因?yàn)閿?shù)組中的reduce方法是js內(nèi)置函數(shù)自定義的方法，不需要我們返回，由內(nèi)部操作，我們只需要知道function被當(dāng)做參數(shù)傳入的時(shí)候是回調(diào)函數(shù)，最后返回的結(jié)果用一個(gè)變量來(lái)接收即可。

        // 數(shù)組reduce方法 兩個(gè)參數(shù)  回調(diào)函數(shù)  初始值// arr.reduce(function (上一次值，當(dāng)前值) { }, 初始值)const arr = [1, 5, 7]// 1.沒(méi)有初始值const total = arr.reduce(function (prev, current) {return prev + current})console.log(total)// 2.有初始值const total1 = arr.reduce(function (prev, current) {return prev + current}, 10)console.log(total1)// 3.箭頭函數(shù)表示const total2 = arr.reduce((prev, current) => prev + current, 20)console.log(total2);

forEach 遍歷數(shù)組 不返回新數(shù)組 也就是不返回值 就想著，遍歷數(shù)組，就跟for循環(huán)一樣，什么時(shí)候還有返回值呢！

<script>const arr = ['red', 'green', 'pink']// item是必須要寫(xiě)的 // foreach就是純遍歷  加強(qiáng)版的for循環(huán)  適合于遍歷數(shù)組對(duì)象const result = arr.forEach(function (item, index) {console.log(item)//每個(gè)數(shù)組元素console.log(index)//索引號(hào)})console.log(result)//不返回值</script>

filter 篩選（過(guò)濾）數(shù)組 所以一定會(huì)返回一個(gè)新的數(shù)組 也就是有返回值

<script>const arr = [10, 20, 30]// const newArr = arr.filter(function (item, index) {//     // 也有用item和index//     // console.log(item)//     // console.log(index)//過(guò)濾條件//     return item >= 20// })// console.log(newArr);// 寫(xiě)成箭頭函數(shù)const newArr = arr.filter(item => item >= 20)console.log(newArr);</script>

map 迭代數(shù)組 返回新數(shù)組
如果沒(méi)有進(jìn)行字符串拼接等操作，默認(rèn)是直接迭代數(shù)組，返回一個(gè)新的數(shù)組，和forEach方法類(lèi)似，一個(gè)返回?cái)?shù)組一個(gè)不返回

 <script>const arr = ['red', 'blue', 'pink']const newArr = arr.map(function (ele, index) {return ele + '顏色'})console.log(newArr)// 字符串是黑色的console.log(JSON.stringify(newArr))console.log(arr.join(''))console.log(newArr.join('|'));</script>

綜合案例一：
需求一：
把尺碼和顏色 拼成特定格式要隔開(kāi)（）：
思路：獲得所有屬性值，然后拼接字符串即可
①獲得所有屬性值：Object.values()返回的是數(shù)組
②拼接數(shù)組join 這樣就可以轉(zhuǎn)換為字符串了

這里我們需要注意，因?yàn)槲覀円笮劫Y和，可是薪資在每個(gè)對(duì)象中，而對(duì)象又是在數(shù)組中，所以當(dāng)我們直接使用數(shù)組進(jìn)行reduce累計(jì)求和，需要注意里面的參數(shù)實(shí)際上是映射到了每一個(gè)對(duì)象上

        // 對(duì)象數(shù)組const arr = [{name: '張三',salary: 10000}, {name: '李四',salary: 10000}, {name: '王五',salary: 20000},]// 映射上每一個(gè)對(duì)象const total = arr.reduce((prev, current) => {console.log(prev)console.log(current)})

有結(jié)果可知，有undefined，根據(jù)reduce的執(zhí)行過(guò)程可知，當(dāng)沒(méi)有添加初始值時(shí)，prev執(zhí)行數(shù)組的第一個(gè)元素，在本案例中，是第一個(gè)對(duì)象，所以就會(huì)輸出第一個(gè)對(duì)象，但是current會(huì)輸出第二個(gè)對(duì)象，但是因?yàn)閞educe通過(guò)多次遍歷元素，每一次循環(huán)遍歷都會(huì)將元素加在一起，但是顯然我們求得的元素使對(duì)象不可能求和，所以得到undefined，因?yàn)槊恳惠喲h(huán)返回的值回作為新一輪的prev，所以prev會(huì)返回一個(gè)undefined，緊接著current會(huì)返回之前遍歷數(shù)組元素的下一個(gè)元素。

所以我們現(xiàn)在要解決的是怎么拿到數(shù)組元素對(duì)象中salary薪資，可以通過(guò)對(duì)象.屬性拿到 但是注意一定要寫(xiě)成prev和current.salary,以及添加初始值

 // 對(duì)象數(shù)組const arr = [{name: '張三',salary: 10000}, {name: '李四',salary: 10000}, {name: '王五',salary: 20000},]const total = arr.reduce((prev, current) => {// console.log(prev)// 在數(shù)組對(duì)象中累加和 不寫(xiě)初始值  錯(cuò)誤  prev.salary第一次迭代的時(shí)候拿到的是元素 在我們這個(gè)代碼中是第一個(gè)數(shù)值 問(wèn)題是第二次迭代的時(shí)候我們想要實(shí)現(xiàn)的是prev拿到的是第一次迭代的返回值，顯然如果我們非要寫(xiě)prev.salary就拿不到第一次迭代的返回值接著就有問(wèn)題了，所以這里我們就用到了初始值// return prev.salary + current.salary// return prev + current.salary}, 0)console.log(total)const total1 = arr.reduce((prev, current) => prev + current.salary * 1.3, 0)console.log(total1)

Array數(shù)組常見(jiàn)方法

  // 單純數(shù)組 對(duì)數(shù)組進(jìn)行查找滿(mǎn)足條件的元素const arr = ['red', 'blue', 'green']const re = arr.find(function (item) {return item === 'blue'})console.log(re)//數(shù)組對(duì)象const arr1 = [{name: '小米',price: 1999}, {name: '華為',price: 2913}]// find查找滿(mǎn)足條件的元素 因?yàn)槭菙?shù)組對(duì)象 所以查找滿(mǎn)足條件的對(duì)象 只篩選滿(mǎn)足條件的第一個(gè)元素const mi = arr1.find(function (item) {console.log(item)console.log(item.name)return item.name === '小米'})// 篩選每一個(gè)元素const arr2 = [10, 20, 30]const flag = arr.every(item => item >= 20)console.log(flag);

2.3 String

js底層也見(jiàn)了構(gòu)造函數(shù)進(jìn)行包裝

String常見(jiàn)方法 split把字符串轉(zhuǎn)換為數(shù)組

  //1.split把字符串轉(zhuǎn)換為數(shù)組  和join（）相反const str = 'pink,red'const arr = str.split(',')console.log(arr)const str1 = '2022-4-8'const arr1 = str1.split('-')console.log(arr1)

//2. 字符串的截取 substring(開(kāi)始的索引號(hào)[，結(jié)束的索引號(hào)])// 2.1 如果省略結(jié)束的索引號(hào) 默認(rèn)取到最后// 2.2 結(jié)束的索引號(hào)不包含在想要截取的部分const str = '今天很開(kāi)心啊'// 不包含截取console.log(str.substring(3, 5))

      // 3.startwith 判斷是不是以某個(gè)字符開(kāi)頭const str = 'pink老師上課中'console.log(str.startsWith('ink'))

          // 4.includes 判斷某個(gè)字符是不是包含在一個(gè)字符串中 以及該字符的位置// 從字符串中開(kāi)始搜索哈哈哈哈的位置  也就是開(kāi)始搜索的位置const str = '我是pink老師'console.log(str.includes('pink'))console.log(str.includes('pink', 3));

基于字符串的小贈(zèng)品案例;字符串轉(zhuǎn)換為數(shù)組的而案例 并且使用join展示在頁(yè)面上

// 兩個(gè)小贈(zèng)品放在了字符串中，我們需要將這兩個(gè)贈(zèng)以頁(yè)面要求的格式放在頁(yè)面上 并且是兩行
// 思路：將字符串通過(guò)split轉(zhuǎn)化為數(shù)組，利用map方法將數(shù)組進(jìn)行遍歷拿到兩個(gè)元素并且以頁(yè)面要求的格式返回 最后獲取頁(yè)面元素進(jìn)行innerHTML

  const gift = '50g的茶葉,清洗球'// const str = gift.split(',').map(function (item) {//     return `<span>贈(zèng)品 ${item}</span></br>`// }).join('')// console.log(str)// document.querySelector('div').innerHTML = str// 箭頭函數(shù)表示document.querySelector('div').innerHTML = gift.split(',').map(item => `<span>贈(zèng)品 ${item}</span></br>`).join('')

toFixed()

 // 方法 可以讓數(shù)字制定保留的小數(shù)位數(shù)const num = 10.928console.log(num.toFixed(2))const num1 = 10console.log(num1.toFixed(2));

基于構(gòu)造函數(shù)&數(shù)據(jù)常用函數(shù)綜合案例

功能實(shí)現(xiàn)：購(gòu)物車(chē)展示 包括渲染圖片 標(biāo)題 顏色 價(jià)格 贈(zèng)品等數(shù)據(jù)

1. 把整體的結(jié)構(gòu)直接生成然后渲染到大盒子list里面
2. 遍歷并且返回值：map方法
3. 最后計(jì)算總價(jià)模塊求和：reduce方法
4. 具體思路：
   ①map遍歷數(shù)據(jù) 先寫(xiě)死數(shù)據(jù) join轉(zhuǎn)化為字符串 追加給list的innerHTML
   ②更換數(shù)據(jù) 先更換不需要處理的數(shù)據(jù) 圖片 商品名稱(chēng) 單價(jià) 數(shù)量
   對(duì)象結(jié)構(gòu)的方式 單價(jià)保留兩位小數(shù)
   ③更換數(shù)據(jù)——處理規(guī)格文字模塊
   獲取每個(gè)對(duì)象里面的spec，上面對(duì)象解構(gòu)添加spec
   獲得所有屬性值 Object.values()返回的是數(shù)組
   拼接數(shù)組是join（‘’）這樣就可以轉(zhuǎn)換為字符串了
   ④更換數(shù)據(jù)——處理贈(zèng)品模塊
   獲取每個(gè)對(duì)象里面的gift，上面對(duì)象解構(gòu)添加gift
   思路：把字符串拆分為數(shù)組，這樣兩個(gè)贈(zèng)品就拆分開(kāi)了 用split（）
   利用map遍歷數(shù)組，同時(shí)把數(shù)組元素生成到span里面，并且返回
   因?yàn)榉祷氐氖菙?shù)組 所以需要轉(zhuǎn)換為字符串 用join‘’（）
   注意要判斷是否有g(shù)ift屬性 沒(méi)有的話(huà)不需要渲染
   利用變成的字符串然后寫(xiě)到p.name里面

<script>const goodsList = [{id: '4001172',name: '稱(chēng)心如意手搖咖啡磨豆機(jī)咖啡豆研磨機(jī)',price: 289.9,picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',count: 2,spec: { color: '白色' }},{id: '4001009',name: '竹制干泡茶盤(pán)正方形瀝水茶臺(tái)品茶盤(pán)',price: 109.8,picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',count: 3,spec: { size: '40cm*40cm', color: '黑色' }},{id: '4001874',name: '古法溫酒汝瓷酒具套裝白酒杯蓮花溫酒器',price: 488,picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',count: 1,spec: { color: '青色', sum: '一大四小' }},{id: '4001649',name: '大師監(jiān)制龍泉青瓷茶葉罐',price: 139,picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',count: 1,spec: { size: '小號(hào)', color: '紫色' },gift: '50g茶葉,清洗球,寶馬, 奔馳'}]// 因?yàn)槭菙?shù)組對(duì)象  所以使用map遍歷數(shù)組 有返回值document.querySelector('.list').innerHTML = goodsList.map(item => {// console.log(item)// 通過(guò)對(duì)象解構(gòu)拿到想要的屬性const { picture, name, count, price, spec, gift } = item//規(guī)格文字模塊  const text = Object.values(spec).join('/')// 計(jì)算小計(jì)模塊 單價(jià)*數(shù)量const subTotal = ((price * 100 * count) / 100).toFixed(2)//處理贈(zèng)品模塊const str = gift ? gift.split(',').map(item => `<span class="tag">【贈(zèng)品】10${item}</span>`).join('') : ''//這里在返回頁(yè)面的時(shí)候先返回一個(gè)死的數(shù)據(jù)  便于梳理思路return `<div div class="item" ><img src=${picture} alt=""><p class="name">${name}<span class="tag">【贈(zèng)品】10優(yōu)惠券</span></p><p class="spec">${text}</p><p class="price">${price}</p><p class="count">x${count}</p><p class="sub-total">579.80</p></div> `}).join('')// 3.合計(jì)模塊const total = (goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)).toFixed(2)document.querySelector('.amount').innerHTML = total</script>

三 、 完整代碼

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.list {width: 990px;margin: 100px auto 0;}.item {padding: 15px;transition: all .5s;display: flex;border-top: 1px solid #e4e4e4;}.item:nth-child(4n) {margin-left: 0;}.item:hover {cursor: pointer;background-color: #f5f5f5;}.item img {width: 80px;height: 80px;margin-right: 10px;}.item .name {font-size: 18px;margin-right: 10px;color: #333;flex: 2;}.item .name .tag {display: block;padding: 2px;font-size: 12px;color: #999;}.item .price,.item .sub-total {font-size: 18px;color: firebrick;flex: 1;}.item .price::before,.item .sub-total::before,.amount::before {content: "￥";font-size: 12px;}.item .spec {flex: 2;color: #888;font-size: 14px;}.item .count {flex: 1;color: #aaa;}.total {width: 990px;margin: 0 auto;display: flex;justify-content: flex-end;border-top: 1px solid #e4e4e4;padding: 20px;}.total .amount {font-size: 18px;color: firebrick;font-weight: bold;margin-right: 50px;}</style>
</head><body><div class="list"><!-- <div class="item"><img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt=""><p class="name">稱(chēng)心如意手搖咖啡磨豆機(jī)咖啡豆研磨機(jī) <span class="tag">【贈(zèng)品】10優(yōu)惠券</span></p><p class="spec">白色/10寸</p><p class="price">289.90</p><p class="count">x2</p><p class="sub-total">579.80</p></div> --></div><div class="total"><div>合計(jì)：<span class="amount">1000.00</span></div></div><script>const goodsList = [{id: '4001172',name: '稱(chēng)心如意手搖咖啡磨豆機(jī)咖啡豆研磨機(jī)',price: 289.9,picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',count: 2,spec: { color: '白色' }},{id: '4001009',name: '竹制干泡茶盤(pán)正方形瀝水茶臺(tái)品茶盤(pán)',price: 109.8,picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',count: 3,spec: { size: '40cm*40cm', color: '黑色' }},{id: '4001874',name: '古法溫酒汝瓷酒具套裝白酒杯蓮花溫酒器',price: 488,picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',count: 1,spec: { color: '青色', sum: '一大四小' }},{id: '4001649',name: '大師監(jiān)制龍泉青瓷茶葉罐',price: 139,picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',count: 1,spec: { size: '小號(hào)', color: '紫色' },gift: '50g茶葉,清洗球,寶馬, 奔馳'}]// 1.根據(jù)數(shù)據(jù)渲染頁(yè)面document.querySelector('.list').innerHTML = goodsList.map(item => {// console.log(item) //每一條對(duì)象   四條數(shù)據(jù) 遍歷了四次 const { picture, name, count, price, spec, gift } = item// 規(guī)格文字模塊const text = Object.values(spec).join('/') //Object.values(spec)獲取的是數(shù)組// 計(jì)算小計(jì)模塊 單價(jià)*數(shù)量const subTotal = ((price * 100 * count) / 100).toFixed(2)// 處理贈(zèng)品模塊const str = gift ? gift.split(',').map(item => `<span class="tag">【贈(zèng)品】10${item}</span>`).join('') : ''return `<div class="item"><img src=${picture} alt=""><p class="name">${name} ${str}</p><p class="spec">${text}</p><p class="price">${price.toFixed(2)}</p><p class="count">x${count}</p><p class="sub-total">${subTotal}</p></div>`}).join('')//3.合計(jì)模塊const total = (goodsList.reduce((prev, item) => prev + (item.price * 100 * item.count) / 100, 0)).toFixed(2)// console.log(total);document.querySelector('.amount').innerHTML = total</script>
</body></html>