1.页面监听watch
<!-- 问题关闭 -->
Model:formData.problemList
<ws-table-column prop="treatmentMethodType" min-width="110"
:label="$t('system.shipCheck.questionClose')">
<template slot-scope="{ row }">
<BaseSwitch v-model="row.problemStateFlag"
v-if="formData.statusFlag == 35 && formData.closeFlag == 0"
active-value="1" inactive-value="2">
</BaseSwitch>
<span v-else>
{{ row.problemStateFlag == 1 ? $t('button.close') :
$t('processing')}}</span>
</template>
</ws-table-column>
watch: {
'formData.problemList': {
handler (val) {
if (val) {
val.map(item => {
console.log(item.problemStateFlag)
if (item.problemStateFlag == 1) {
// 监听问题有未处理的显示按钮
this.isShow = false
}
else {
this.isShow = true
}
})}},
immediate: true,
deep: true}
},
2.延迟方法调用
在 created 中调用 changeCompanyType 方法，this.$nextTick 有延迟执行的作用，
刚进入页面不进行表单校验；如果触发保存按钮进行表单校验；
changeCompanyType () {
this.$nextTick(() => {
this.$refs.formData.clearValidate()})
},
3.监听更新数据
监听页面 v-model 中 formData.problemList 的某个字段的变化
watch: {
'formData.problemList': {
handler (val) {
if (val) {
var result1 = val.some(function (item) {
return item.problemStateFlag == 2
})
if (result1 == true) {
this.isShow = true
} else {
this.isShow = false}}
},
immediate: true,
deep: true
}
},
4.请求数据处理返回值
async getReportList () {
try {
const res = await getInternalReportDeptMembers({
vesselId: this.formData.auditType == 1 ?
this.formData.vesselCompId : '',
auditType: this.formData.auditType
}).toPromise()
this.baseInfoReportList = res
} catch {
this.baseInfoReportList = []
}
},
问题列表责任人中处理数据：两个数组进行对比，拿出公有的部分
// 问题列表中责任人
async getExecutionPerson (id) {
const staffDept = []
this.reportList = {}
this.baseInfoReportList.forEach(item => {
if (!this.reportList.hasOwnProperty(item.deptId)) {
this.$set(this.reportList, item.deptId, [])
staffDept.push({
deptName: item.deptName,
deptId: item.deptId
})
}
this.reportList[item.deptId].push(item)
})
return staffDept
},
筛出页面中符合条件的数据回显
changeDefectType (id, row) {
this.$set(row, 'defectType', this.defectList.find(item =>
item.id == id).parameterValue)
},
5. Js 处理数组数据
a. hasOwnProperty：判断自身属性是否存在
hasOwnProperty：判断自身属性是否存在
Var obj = new Object();
obj.prop = ‘exists’;
function changeObj(){
obj.newprop = obj.prop;
delete obj.prop;
}
Obj.hasOwnProperty(‘prop’); //true
changeObj();
Obj.hasOwnProperty(‘prop’); //false
b. 判断自身属性与继承属性
c. Map 和 forEach:若需要改变数据使用 map，只是作为打印或者
存入数据可以使用 forEach，而且 map 速度会快
此处是根据 create 中数据控制页面显示，当 create 发生变化的时候
this.formData.problemList = this.formData.problemList.map(item => {
return {
...item,
switchFlag: item.problemStateFlag == 2 ? true : false
}
})
d. 删除数组中的重复值
编辑
e. 字符串到数字和数字到字符串的转换使用‘+’操作符
编辑
f.过滤错误值(例如 false、0、null、undefined 等)
const array = [1,0,undefined,6,7,’’,false]；
array.filter(Boolean);
//[1,6,7]
g.将数组元素转换为数字
const array = [‘12’,‘1’,‘3.1415’,‘-10.01’]；
array.map(Number);
//[12,1,3.1415,-10.01]
h.数组转字符串
[‘a’,[‘b’,[‘c’,[‘d’]]]].toString() //输出’a,b,c,d’
[‘a’,[‘b’,[‘c’,[‘d’]]]].toString().split(‘,’) //输出
[’a’,’b’,’c’,’d’]
6.vue-pdf 在 ios 端显示不安全提示白屏
编辑
7.Js 数据转化
对象转字符串 JSON.stringify(obj)
字符串转对象或数组 JSON.parse(str)
将数组中的数字都改为字符串
eg:if 条件运算
Var list = [1,2,3,’2323’]
List.map(String)
输出之后是[’1’,’2’,’3’,’2323’]
8.Js 深拷贝与浅拷贝
浅拷贝和深拷贝
浅拷贝是创建一个新对象，这个对象有着原始对象属性值的拷贝。如
果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，
拷贝的是内存地址 。如果不进行深拷贝，其中一个对象改变了对象
的值，就会影响到另一个对象的值。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟
一个新的区域存放新对象,且修改新对象不会影响原对象。
a. JSON.parse(JSON.stringify(obj)):一般情况下对普通对象需要
进行深拷贝，可以使用这种方法进行深拷贝操作，这种是最简单且代码量最少的深拷贝方法。
eg: let a = {a:1,b:2}
let b = JSON.parse(JSON.stringify(a))
a.a = 11
console.log(a)//{a:1,b:2}
console.log(b)//{a:11,b:2}弊端：取不到值为 undefined的 key；
如果对象里有函数，函数无法被拷贝下来；无法拷贝 copyObj对象原型链上的属性和方法；对象转变为 date字符串
b. 普通递归函数实现深拷贝
c. 兼容多种数据类型
d. Jquery.extend()方法
eg: 可以使用$.extend 进行深拷贝
$.extend(deepCopy, target, object1, [objectN])//第一个参数为 true,就是深拷贝
let a = { a: 1, b: { d:8}, c: [1, 2, 3]};
let b = $.extend(true, {}, a);
console.log(a.b.d === b.b.d); // false
9. 新建指定大小文件
在 cmd 中输入 fsutil file createnew text.txt 52428800
text.txt ：文件名
52428800：文件大小（换成字节）
10. 类数组转数组
① 通过 call 调用数组的 slice 方法来实现转换
Array.prototype.slice.call(arrayLike)
② 通过 call 调用数组的 splice 方法来实现转换
Array.prototype.splice.call(arrayLike,0)
③ 通过 apply 调用数组的 concat 方法来实现转换
Array.prototype.concat.apply([],arrayLike)
④ 通过 Array.from 方法来实现转换
Array.from(arrayLike)
11. 三元条件运算和 if 条件运算对比
eg:if 条件运算
Function customerValidation(customer){
if(!customer.email){
return error(‘email is require’)
}
else if(!customer.login){
return error(‘login is required’)
}
else if(!customer.name){
return error(‘name is required’)
}
else {
return customer
}
}
eg:三目运算
Const customerValidation = customer => !customer.email ? error(‘email
is required’) : !customer.login ? error(‘login is
required’) : !customer.name ? error(‘name is required’): customer
12.合并代码流程
a. 如果要把 B 代码合并到 A 上，就需要切刀 A 分支
b. 在 A 分支命令 git merge B(B 分支名)
c. 合并之后解决更改中的冲突（如果有的话）
13.短路逻辑运算符
eg:if 条件运算
Const active = true;
Const loan = {
uuid:123456,
ammount：10,
requestedBy:’rick’
};
Const sendMoney = ()=>{};
If(active&&loan){
sendMoney();
}
eg:三目运算
Const active = true;
Const loan = {
uuid:123456,
ammount：10,
requestedBy:’rick’
};
Const sendMoney = ()=>{};
Active && loan && sendMoney();
14.功能委托
eg:if 条件运算
function itemDropped(item,location){
if(!item){
return false;
}else if(outOfBounds(location)){
var error = outOfBounds;
server.notify(item,error);
items.resetAll();
return false;
}else{
animateCanvas();
server.notify(item,location);
return true;
}
}
eg:三目运算
function itemDropped(item,location){
Const dropOut = function(){
server.notify(item,outOfBounds);
items.resetAll();
return false;
}
Const dropIn = function() {
server.notify(item,location);
animateCanvas();
return true;
}
return !!item && (outOfBounds(location) ? dropOut():dropIn())
}
15.作为数据的函数
eg:if 条件运算
const calc ={
run:function(op,n1,n2){
const result;
if(op == ‘add’){
result = n1 + n2
}
else if(op == ‘sub’){
result = n1 - n2
}
else if(op == ‘mult’){
result = n1 * n2
}
else if(op == ‘div){
result = n1 / n2
}
return result;
}
}
calc.run(‘sub’,5,3)
eg:三目运算
Const calc = {
add:function(a,b){
return a+b;
},
sub:function(a,b){
return a-b;
},
mult:function(a,b){
return a*b;
},
div:function(a,b){
return a/b;
},
run:function(a,b){
return fn && fn(a,b);
}
}
calc.run(calc.mult,7,4)
16. 多态性
eg:if 条件运算
const bob={
name:’Bob’,
salary:1000,
job_type:’DEVELOPER’
};
const mary={
name:’Mary’,
salary:1000,
job_type:’QA’
};
const calc=(person)=>{
if(people.job_type === ’DEVELOPER’)
Return person.salary + 9000*0.10;
if(people.job_type === ’QA’)
Return person.salary + 1000*0.60;
};
console.log(‘salary,calc(bob));
console.log(‘salary,calc(mary));
eg:三目运算
const qaSalary = (base) => base+9000*0.10
const devSalary = (base) => base+1000*0.60
const bob={
name:’Bob’,
salary:1000,
job_type:’DEVELOPER’,
calc:devSalary
};
const mary={
name:’Mary’,
salary:1000,
job_type:’QA’,
calc:qaSalary
};
console.log(‘salary,bob.calc(bob.salary));
console.log(‘salary,mary.calc(mary.salary));
17. 实现指定单词、文本处换行 css
css 设置：white-space:pre-line
文字中设置："文字\n 微博"
18.JS 常见的问题点
Let、var、const 的区别
let:声明的变量具有块作用域
var:声明的变量具有函数作用域
const:声明常量，声明需要初始化
Js 中 forEach 和 map 的循环
foreach 循环用于遍历数组并对每个元素执行函数，但它不会返回新数组。
映射循环用于遍历数组，对每个元素执行一个函数，并返回一个包含结果的
新数组
Js 中‘==’和 object.is()的区别
都用于比较两个值是否相等。但是‘==’有一些独特，例如类型强制和对 NaN
和-0 的特殊处理。另一方面，Object.is() 是一种更健壮和精确的比较，它
不进行类型强制转换，并且可以区分-0 和+0、NaN 和 NaN
Js 中 reduce 和 filter 的区别
Array.reduce()用于对数组中的每个元素应用一个函数，并将数组缩减为单
个值。 Array.filter()用于根据提供的条件过滤数组的元素，并返回一个
包含满足条件的元素的新数组。
Js 中同步异步，解构赋值
解构赋值是 ECMAScript6 中引入一个特性，它允许您从数组或对象中提取值，
并以简洁 易读的方式将它们赋值给变量。它有助于将数组中的值或对象中
的属性解压缩到不同的 变量中。
