適用閱讀對(duì)象：需要兼顧前端的C#后端開(kāi)發(fā)人員（基礎(chǔ)筆記）

目錄

一、后端交互-獲取實(shí)體數(shù)據(jù)

二、變量

1.聲明

2.作用域

三、字符串的處理

四、數(shù)組(列表)的處理

1.數(shù)組中的SELECT語(yǔ)法（提取特定字段到新數(shù)組）

2.數(shù)組中的foreach語(yǔ)法

【字符串轉(zhuǎn)化】

【數(shù)組中的for】

【數(shù)組字段的重命名整理】（map語(yǔ)法）

3.數(shù)組的Length語(yǔ)法

4.數(shù)組的First語(yǔ)法

5.數(shù)組的Where語(yǔ)法

6.數(shù)組的Add語(yǔ)法

百、VUE3易犯錯(cuò)誤：

---

一、后端交互-獲取實(shí)體數(shù)據(jù)

后端返回結(jié)構(gòu)

{"msg": null,"result": {"operationSituation": {"stationName": "xxxx"}}
}

【想法】獲取到stationName,代碼寫(xiě)法如下：

定義

//data中先定義列表loadData：
data() {
? ? return {
? ? ? loadData: null,
? ? ? searchUrl1: '/xxx',//后端api

? ? }

賦值

const request1 = axios.getData(this.searchUrl1, param)//請(qǐng)求接口

Promise.all([request1])//等待1個(gè)接口響應(yīng)
? ? ? ? ? .then(
? ? ? ? ? ? (res) => {

? ? ? ? ? ? ? this.loadData = res[0].result//獲取result1（序號(hào)是0）返回的結(jié)果的result對(duì)象
? ? ? ? ? ? ? this.loading = false

? ? ? ? ? ? }

渲染到前端（注意空判斷）

<div class="report-item-title" ?v-if="loadData" >
? ? ? ? ? ? 站點(diǎn)名稱(chēng)是：{{ loadData.operationSituation.stationName }}
</div>

【如何獲取更深的實(shí)體（例如直接獲取OperationSituation）】

data中定義：
????????loadData: null,
????????operationSituation:null

Promise中寫(xiě)法（注意加this）：
????????this.loadData = res[0].result
????????this.operationSituation = this.loadData.operationSituation

html寫(xiě)法：
<div class="report-item-title" ?>
? ? ? ? ? ? {{ operationSituation.stationName }}
</div>

二、變量

1.聲明

var str = '123'
var nums = 123
var array = []        //數(shù)組，例如  arr:[{ name:'susu',age:15},{ name:'linlin',age:18}]
var obejct =null    //對(duì)象，例如  obj:{ name:'susu',age:15}
var bool = true

this變量需要在data中聲明，其余可以在方法中直接使用var等關(guān)鍵字聲明

2.作用域

Method() {const d = 0; // 聲明的變量 `d` 在最近一層的花括號(hào)內(nèi)部有效let a = 1; // 聲明的變量 `a` 在最近一層的花括號(hào)內(nèi)部有效var b = 2; // 聲明的變量 `b` 整個(gè)方法有效，即在 `Method` 方法內(nèi)部有效this.c = 3; // 使用 `this.c`，如果 `c` 已經(jīng)在 `data` 對(duì)象中聲明，它是全局對(duì)象的一個(gè)屬性，因此在整個(gè)程序中都是有效的
}

三、字符串的處理

var str = 'abcde'
var b = str.includes('de') //true
var c ?= str.split('c')[0] //'ab'
var sub = str.substring(1, 4); // 'bcd'
var trimmed = str.trim(); // 'abcde' 去除空格let num = 123  //數(shù)字轉(zhuǎn)化為字符串
let str2 = num.toString()  // 使用 toString() 方法，注意是大寫(xiě)S

四、數(shù)組(列表)的處理

【情景須知】后端返回的結(jié)構(gòu)如下：

details": [{"name": "AAA","value": 123,"Time": null},{"name": "BBB","value": 456,"Time": null}
]

假設(shè)前端已經(jīng)定義了一個(gè)數(shù)組this.details，并且將后端的數(shù)據(jù)賦值給它。

1.數(shù)組中的SELECT語(yǔ)法（提取特定字段到新數(shù)組）

【需求】提取所有 name 屬性到一個(gè)新數(shù)組

const nameArray = this.details.map(item => item.name)

2.數(shù)組中的foreach語(yǔ)法

【字符串轉(zhuǎn)化】

調(diào)用一個(gè)方法，將上面獲得的結(jié)果扔進(jìn)去

var newArray = this.GetNew(nameArray)

方法如下(if語(yǔ)句)：

GetNew(nameArray){    const newArray = []         // 創(chuàng)建一個(gè)空數(shù)組，用于存放處理后的結(jié)果          for (let i = 0; i < nameArray.length; i++) // 使用for循環(huán)遍歷nameArray{var change =''//每次循環(huán)都創(chuàng)建一個(gè)變量存儲(chǔ)if (nameArray[i]=='AAA'){change='A號(hào)站點(diǎn)'}else if (nameArray[i]=='BBB'){change='B號(hào)站點(diǎn)'}else{change=nameArray[i] //其余的直接返回}newArray.push(change)}return newArray
}

也可以寫(xiě)成switch語(yǔ)法：

GetNew(nameArray){    const newArray = []         // 創(chuàng)建一個(gè)空數(shù)組，用于存放處理后的結(jié)果          for (let i = 0; i < nameArray.length; i++) // 使用for循環(huán)遍歷nameArray{var change =''//每次循環(huán)都創(chuàng)建一個(gè)變量存儲(chǔ)switch (nameArray[i]) {case 'AAA':change = 'A號(hào)站點(diǎn)'breakcase 'BBB':change = 'B號(hào)站點(diǎn)'breakdefault:change = nameArray[i] // 其余的直接返回}newArray.push(change)}return newArray
}

【數(shù)組中的for】

?列表：

for (let i = 0; i < list.length; i++) // 使用for循環(huán)遍歷列表
{var item = list[i].name  //訪問(wèn)列表中的name實(shí)體var jtem = list[i].value
}

普通數(shù)組;

for (let i = 0; i < array.length; i++) // 使用for循環(huán)遍歷數(shù)組
{var item = array[i]  //訪問(wèn)數(shù)組里面的數(shù)據(jù)
}

【數(shù)組字段的重命名整理】（map語(yǔ)法）

A-整理字段名

【需求】后端返回的結(jié)構(gòu)中，包含一個(gè)數(shù)組List<details> 包含：name value Time，我想提取name和value字段到前端中，提取成List<newdetails> 包含:Newname Newvalue，取值來(lái)自于后端的name value。

【后端返回】

details": [{"name": "AAA","value": 123,"Time": null},{"name": "BBB","value": 456,"Time": null}
]

【實(shí)現(xiàn)代碼】用map遍歷并且創(chuàng)建數(shù)組（this.details是后端返回的）

const newarray = this.details.map(item => 
({ Newname: item.name,Newvalue: item.value})
)

B-整理字段內(nèi)容

本例遍歷alarmtime字段并且做一個(gè)字符串替換

var dataarray = tablesource.map(item => ({
...item, // 保留原始對(duì)象的其它字段
alarmTime: item.alarmTime.replace('T', ' ') // 替換 'T' 為空格
}))

3.數(shù)組的Length語(yǔ)法

//輸出數(shù)組長(zhǎng)度
const nameArrayLength = nameArray.length; 

4.數(shù)組的First語(yǔ)法

【情景】后端傳入一個(gè)數(shù)組，存入list(id name)中，如何獲取id=30的name的值呢

const entity = list.find(x => x.id === 30)
if (entity) {console.log(entity.name) // 輸出：Charlie
} else {console.log('未找到匹配的 id')
}

5.數(shù)組的Where語(yǔ)法

//獲取列表：details數(shù)組中的name字段包含xxx字符串的數(shù)組
const filteredDetails = this.details.filter(item => item.name.includes('xxx'))

6.數(shù)組中的Contais語(yǔ)法

//包含字符A篩選
dataarray = dataarray.filter(item => newVal.includes('A'))//includes方法支持?jǐn)?shù)組篩選，注意是mainarray.inculudes(secondearray)
dataarray = dataarray.filter(item => newarray.includes(item.alarmType))

7.數(shù)組的Add語(yǔ)法

//假設(shè)Data是一個(gè)有數(shù)據(jù)的數(shù)組
Data.push(30)  //加入數(shù)字，相當(dāng)于List<object>
Data.push({name: '123',value: 30]})  //加入實(shí)體，相當(dāng)于List<Model> Model包含兩個(gè)字段

百、VUE3易犯錯(cuò)誤：

1.一個(gè)方法調(diào)用另外一個(gè)方法，沒(méi)用this
2.變量沒(méi)在data()聲明
3.代碼修改保存后，忘記F5刷新頁(yè)面（一般來(lái)講，修改html css保存后不需要刷新網(wǎng)頁(yè)，修改js保存后需要刷新網(wǎng)頁(yè) ）
4.如果進(jìn)入不了debugger 就是在這之前報(bào)錯(cuò)了（F12調(diào)試一下吧）

5.const定義常量不可以再賦值，若想再次修改請(qǐng)用var或let聲明。（以下寫(xiě)法是錯(cuò)的，應(yīng)該改為var）

const name = '123'
if (flag==false)
{name = '456'
}

6.如果你的父級(jí)元素設(shè)置了某些樣式，你可以在子元素的 style 屬性中直接覆蓋這些樣式，因?yàn)?span style="color:#fe2c24;">內(nèi)聯(lián)樣式優(yōu)先級(jí)更高

<div style="margin-left: 100px;" id="vdrBarChart" class="Barcharts"></div>