白也blog - 2022年5月
type: channel
link: https://www.baiyeovo.cn/index.php/2022/05/
description: 总有人间一两风,填我十万八千梦
items: Vue3 知识回顾
items: 常见数据的处理
items: 将数据处理为Tree树形数据
items: element-ui 表格合并
items: element文件上传进度条效果
items: element-ui 文件上传大小控制
items: 打包上线流程
items: 面试题——长更
items: Vue UI 组件库
items: 代码优化---长更

Vue3 知识回顾
type: item
date: 2022-05-31T18:49:00+08:00
description: 1.setup1.setup:Vue3的新配置项,值为一个函数.2.setup时所有Composition API(组合APi)'表演舞台'3.组件中所用到的:数据、方法等等,均要配置在setup中4.setup函数的两种返回值:若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用若返回一个渲染函数,则可以自定义渲染内容.5.注意点:1.尽量不要与Vue2配置混用Vue2配置(data、methods、computed...)中可以访问setup中的属性、方法但在setup中不能访问到Vue2配置(data、methods、computed...)如果有重名,setup优先2.setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性.6.setup的语法糖 在 标签里面 加上一个setup 可以不用return直接在script中写我们的代码 2.ref函数作用:定义一个响应式数据语法:const xxx=ref(initValue)创建一个包含响应式数据的引用对象(reference对象,简称ref对象)JS中操作数据:xxx.value模板中读取数据,不需要.value,直接 {{xxx}} 备注接收的数据可以是:基本类型,也可以是对象类型基本类型的数据:响应式依然是靠Object.defineProperty()的get与set完成的对象类型的数据:内部求助了Vue3的一个新函数---reactive函数3.reactive函数作用:定义一个对象类型的响应式数据(基本类型别用他,用r ef函数)语法:const 代理对象=reactive(被代理对象)接收一个对象(或数组),返回一个代理器对象(proxy对象)reactive定义的响应式数据时深层次的内部基于ES6的Proxy实现,通过代理对象操作对象内部数据都是响应式的4.Vue3中的响应式原理Vue2.x的响应式实现原理:对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截、数据劫持数组类型:通过重写更新数组的一系列方法实现拦截.(对数据的变更方法进行了包裹).Object.defineProperty(data,'count',{ get(){}, set(){}, })存在问题:新增属性、删除属性,界面不会更新.直接通过下标修改数组,界面不会自动更新.(.$set .$delete去处理)Vue3的响应式实现原理:通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、属性的添加.通过Reflect(反射):对被代理的属性进行操作.MDN文档中描述的Proxy与Reflect:Proxy:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ProxyReflect:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect new Proxy(data, { // 拦截读取属性值 get(target, prop) {https://www.baiyeovo.cn/admin/write-post.php?cid=290#wmd-editarea return Reflect.get(target, prop) }, // 拦截设置属性值或添加新属性 set(target, prop, value) { return Reflect(target, prop, value) }, //拦截删除属性 deleteProperty(target, prop) { return Reflect.deleteProperty(target, prop) } }) proxy.name = 'tom' 4.reactive对比ref从定义数据角度对比:ref用来定义:基本数据类型reactive用来定义:对象(或数组)类型数据备注:ref也可用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象.从原理角度对比ref通过Object.defineProperty()的get与set来实现响应式(数据劫持).reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据.从实用角度来对比ref定义数据:操作数据需要 .value,读取数据时模板中直接读取不需要.valuereactive定义的数据:操作数据与读取数据,均不需要.value5.setup的两个注意点se…

常见数据的处理
type: item
date: 2022-05-31T16:02:00+08:00
description: 把date的数据处理成data2这样的最简单的一种方法:Object.valuesconst obj = {}; data.forEach((item)=> { const { a , b , c} = item if(!obj[a]){ obj[a] = {a,list:[{b , c}]} }else{ obj[a]['list'].push({b , c}) } }) console.log(Object.values(obj),'obj')element中Pagination分页功能的自定义序号//自定义序号 <el-table-column type="index" :index="indexMethod" label="序号" width="120" /> //配置自定义函数 indexMethod(index) { return (this.page - 1) * this.pagesize + index + 1 } // 解决删除时只有一条数据 if (this.list.length === 1 && this.page > 1) { this.page-- } //然后重新渲染数据效果:数组扁平化递归 const newArr = arr => [].concat(...arr.map(item => Array.isArray(item) ? newArr(item) : item)) console.log(newArr([1, [2, 3], [4, [5], 6], 7]));flat方法--二维数组扁平化flat 用于将多维数组拉平（扁平化），不影响原数组，返回新的数组。[1, 2, [3, [4]]].flat() // [1, 2, 3, [4]] 仅有一个参数depth，用于指定拉平的深度，默认值为1。若depth指定为非正数，将返回原数组，指定为Infinity，无论多少层都将扁平化为一维数组。例如:[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4] [1, 2, [3, [4]]].flat(0) // [1, 2, [3, [4]]] [1, 2, [3, [4]]].flat(Infinity) // [1, 2, 3, 4]Array.fromArray.from() 是用来把伪数组转真数组的console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] 生成一个数字6-72的数组 Array.from({ length: 67 }).map((item,index)=>index+6)Array.from()可以接收两个参数,第一个参数时伪数组,第二个是一个回调函数(item,index)=>{}可以用来操作第一个参数 如上所示new Array()new Array(1,2) 参数长度大于一,则生成一个由参数组成的新数组 //[1,2] new Array(10) 参数只有一个时,生成数组,长度为传入的参数.值为空 //[空属性 × 10]字符串去0String.prototype.startsWith()startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 falseconst str1 = 'Saturday night plans'; console.log(str1.startsWith('Sat')); // expected output: true console.log(str1.startsWith('Sat', 3)); // expected output: false 参数传0,根据返回值处理即可补零String.prototype.padStart()padStart() 方法用另一个字符串填充当前字符串 (如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" 'abc'.padStart(1); // "abc"小程序获取数据返回的带有div的字符串小程序获取数据返回的带有div的…

将数据处理为Tree树形数据
type: item
date: 2022-05-31T01:51:00+08:00
description: 当我们使用element组件库的Tree组件时，我们需要一个树形数据才能进行渲染示例数据:const arr = [ { id: '01', name: '张大大 项目经理', pid: '', job: '项目经理' }, { id: '02', name: '小亮 产品leader', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老马 技术leader', pid: '01', job: '技术leader' }, { id: '05', name: '老王 测试leader', pid: '01', job: '测试leader' }, { id: '06', name: '老李 运维leader', pid: '01', job: '运维leader' }, { id: '07', name: '小丽 产品经理', pid: '02', job: '产品经理' }, { id: '08', name: '大光 产品经理', pid: '02', job: '产品经理' }, { id: '09', name: '小高 UI设计师', pid: '03', job: 'UI设计师' }, { id: '10', name: '小刘 前端工程师', pid: '04', job: '前端工程师' }, { id: '11', name: '小华 后端工程师', pid: '04', job: '后端工程师' }, { id: '12', name: '小李 后端工程师', pid: '04', job: '后端工程师' }, { id: '13', name: '小赵 测试工程师', pid: '05', job: '测试工程师' }, { id: '14', name: '小强 测试工程师', pid: '05', job: '测试工程师' }, { id: '15', name: '小涛 运维工程师', pid: '06', job: '运维工程师' }, { id: '16', name: '小才 运维工程师', pid: '07', job: '运维工程师' }, ]方法:递归/** * 将列表型的数据转换成树形数据 => 递归算法 * 这里是要建立树形结构, 所以一定要找一个头 */ export function tranListToTreeData(list, rootValue) { const arr = [] list.forEach(item => { if (item.pid === rootValue) { // 以 item.id 作为 父 id, 接着往下找 const children = tranListToTreeData(list, item.id) if (children.length > 0) { item.children = children } // 将item项, 追加到arr数组中 arr.push(item) } }) return arr }我们发现,一级数据的pid值是空,所以传入的value为空,一级菜单就得到了.再以 item.id 作为 父 id, 接着往下找(递归),判断递归的数组长度,长度大于0则,是对应父级的children(不固定,element定义可以在props更改哦 记得看文档)效果如下将tree数据转为arrfunction treeToList(data) { let ret = []; const fn = (list) => { list.forEach(item => { ret.push({ ...item, children: undefined, pid: item.pid === '0' ? null : item.pid}); if (item.children) { fn(item.children); } }) return ret; } return fn(data); }精简后的写法//第二种 const treeToarr = (list=[])=>{ let arr =[] list.forEach(item=>{ arr.push({...item,children:undefined,pid:item.pid==0? null : item.pid}) if(item.children){ // arr.push(...treeToarr(item.children)) arr =arr.concat(treeToarr(item.children)…

element-ui 表格合并
type: item
date: 2022-05-29T14:12:00+08:00
description: 目标样式：首先先来看下我们拿到的返回数据：tableData: [ { productType: "纺织品", price: 123, productName: '男装上衣', amount: 20, operate_number: "20180831142020", price: "36.00", updateTime: "2018-08-31", operator: "小吴" },{ productType: "纺织品", price: 123, productName: '男装裤子', amount: 20, operate_number: "20180831142020", price: "36.00", updateTime: "2018-08-31", operator: "小吴" },{ productType: "饮料", price: 123, productName: '康师傅冰红茶', amount: 20, operate_number: "20180823142020", price: "36.00", updateTime: "2018-08-31", operator: "小吴" },{ productType: "纺织品", price: 223, productName: '男装裤子', amount: 10, operate_number: "20180821142020", price: "36.00", updateTime: "2018-08-31", operator: "小王" },{ productType: "绸缎", price: 888, productName: '旗袍', amount: 200, operate_number: "20180821142020", price: "36.00", updateTime: "2018-08-31", operator: "小吴" },{ productType: "绸缎", price: 123, productName: '席子', amount: 20, operate_number: "20180821142020", price: "36.00", updateTime: "2018-08-31", operator: "小吴" }, ] 我们需要将返回的数据按照该字段（operate_number）进行处理。—— 将相同operate_number的信息的索引进行对应存储。getOrderNumber() { let OrderObj = {} this.tableData.forEach((element, index) => { element.rowIndex = index if (OrderObj[element.operate_number]) { OrderObj[element.operate_number].push(index) } else { OrderObj[element.operate_number] = [] OrderObj[element.operate_number].push(index) } }) // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项） for (let k in OrderObj) { if (OrderObj[k].length > 1) { this.OrderIndexArr.push(OrderObj[k]) } } }, 然后根据我们页面展示需要， 控制哪一些列上的数据是需要进行展示的。 // 合并单元格 objectSpanMethod({row,column,rowIndex,columnIndex}) { if (columnIndex === 0 || columnIndex === 3 || columnIndex === 4) { for (let i = 0; i < this.OrderIndexArr.length; i++) { let element = this.OrderIndexArr[i] for (let j = 0; j < element.length; j++) { let item = element[j] if (rowIndex == item) { if (j == 0) { return { rowspan: element.length, colspan: 1 } } else if (j != 0) { return { rowspan: 0, colspan: 0 } } } } } } }, 经过上述操作之后我们就能成功的绘制出如图所需要的效果了。##…

element文件上传进度条效果
type: item
date: 2022-05-26T09:42:00+08:00
description: :http-request="handleRequest" handleRequest(obj) { // console.log(obj) // 找到对应的上传的这个file的项 const fileObj = this.fileList.find(item => item.uid === obj.file.uid) fileObj.status = 'uploading'// 要上传的文件状态改为uploading if (obj.file) { // 执行上传操作 cos.putObject({ Bucket: 'luoxue-1252247442', /* 存储桶 */ Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */ Key: obj.file.name, /* 文件名 */ StorageClass: 'STANDARD', // 上传模式, 标准模式 Body: obj.file, // 上传文件对象 //进度的回调函数，进度回调响应对象（progressData） onProgress: (progressData) => { //percentage 百分比 fileObj.percentage = parseInt(progressData.percent * 100) } }, (err, data) => { // console.log(err || data) if (err) return console.log(err) if (data.statusCode === 200) { // console.log('地址:', 'https://' + data.Location) // console.log('uid:', obj.file.uid) // 更新状态 fileObj.status = 'success' // 修改地址 fileObj.url = 'https://' + data.Location } console.log(data) }) } },记得先导包,配置身份import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk) const cos = new COS({ SecretId: xxx, // 身份识别ID SecretKey: xxx // 身份秘钥 })腾讯对象存储文档地址:https://cloud.tencent.com/document/product/436/64960

element-ui 文件上传大小控制
type: item
date: 2022-05-24T11:28:00+08:00
description: 问题如下:首先,elementui是有对应的事件函数的,如图:步骤1.页面代码 <el-upload :show-file-list="false" class="upload-demo" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="onSuccess" :on-error="onError" action="/api/upload"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> 2.在before-upload事件中判断文件大小，不符合返回falsebeforeUpload(file) { let fileObj = { name: file.name, size: file.size, status: "开始上传", process: 0, id: file.uid } if (file.size > 100 * 1024 * 1024) { console.log('上传文件过大', file.size) return false //必须返回false } this.fileList.push(fileObj) }, ————————————————版权声明：本文为CSDN博主「franklin_yuan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/xin_yun_Jian/article/details/103620480补充3.发现这个兄弟询问的是上传总文件的大小,emmm.目前不知道他的需求是一次上传多个文件的总和,还是分多次上传文件的大小总和.可以定义一个变量,每次上传将上传文件的大小累加给这个变量.对这个变量进行判断但是这种有bug啊,页面一刷新定义的变量值就重置了...

打包上线流程
type: item
date: 2022-05-23T21:09:00+08:00
description: 1.配置externals结合CDN加速流程1.找到要CDN加速的包(report.html)中最大的包2.去jsdelivr(Boot等CDN加速)上搜索对应的包名3.将js文件引入到test.html测试,观察window对象中添加了什么属性4.再vue.config.js中配置 externals属性5.将测试的代码复制导index.html(注意全局 css也可以引入过来,将main.js的引入删除) configureWebpack: { 打包优化 只要配置了externals,webpack 不会打爆对应的第三方模块 项目中怎么找echarts呢? 由属性值来指定 echarts:'echarts' 意思就是不打包echarts 模块了,去 window中找echarts变量 externals: { // import 导包的包名:windows全局的成员名称 echarts: 'echarts' } }CDN文件配置以采用CDN的方式，在页面模板中预先引入vue.config.jsconst cdn = { css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表 ], js: [ // vue must at first! 'https://unpkg.com/vue/dist/vue.js', // vuejs 'https://unpkg.com/element-ui/lib/index.js', // element-ui js 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js', 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', 'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js' ] }但是，这时的配置实际上是对 开发环境 和 生产环境 都生效的，let externals = {} let cdn = { css: [], js: [] } const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境 if (isProduction) { externals = { // key(要排除的包名), value(引入的CDN包的全局变量名) 'vue': 'Vue', 'element-ui': 'ELEMENT', 'xlsx': 'XLSX', 'moment': 'moment' } cdn = { css: [ 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表 ], js: [ // vue must at first! 'https://unpkg.com/vue/dist/vue.js', // vuejs 'https://unpkg.com/element-ui/lib/index.js', // element-ui js 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js', 'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', 'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js' ] } }底下使用 externalsconfigureWebpack: { // 配置单页应用程序的页面的标题 name: name, externals: externals, resolve: { alias: { '@': resolve('src') } } },注入 CDN文件变量 到模板chainWebpack(config) { // it can improve the speed of the first screen, it is recommended to turn on preload config.plugin('preload').tap(() => [ { rel: 'preload', // to ignore runtime.js // https://github.com/vuejs/vue-cli/blob/d…

面试题——长更
type: item
date: 2022-05-08T00:10:00+08:00
description: 群聊面试题1.函数声明代码如下:setTimeout(function a(){ // debugger console.log(a) //f a() a= 8 console.log(a) //f a() }) 群友理解:个人理解:js的函数优先原则-在js函数声明和变量都会被提升，但是函数会优先提升，变量覆盖不了函数的a=8那里，是静默失败setTimeout(function a(){ // debugger console.log(a) //f a() a= 8 // 静默失败 console.log(a) //f a() }) // console.log(a) // function a(){ // debugger // console.log(a) //f a() // a= 8 // console.log(a) //f a() // } // a()2.margin 外边距塌陷问题2022-05-08T04:15:11.png这里就是外边距塌陷了,解决方法有很多.我让他加了个透明的border外边距塌陷出现的情况: 1.两个同级元素,上面的给margin-bottom 下面的给margin-top,他们的间距会重叠,以最大的那个计算 解决办法:两个外边距不同时出现 2.一对父子元素,内部的盒子给margin-top,欺负元素也会受到影响,也会发生外边距重叠.关于外边距塌陷的解决方案:1.给父盒子设置border 2.父盒子overflow:hidden 3.为父盒子设置padding 4.给父盒子设置position:fixed 5.给父盒子添加 display:table 6.利用为元素给父元素的的前面添加一个空元素 .father::before{ content:'', display:table; }防抖和节流函数防抖 函数防抖：单位时间内，频繁触发事件，只会触发最后一次函数防抖实际开发应用场景： 实时获取输入框文本小知识:王者荣耀的回城函数节流函数节流：单位时间内，频繁触发事件，只会触发一次函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能小知识:王者荣耀的技能类似封装// 防抖 const debounce = (fn, delay = 1000) => { let timer = null return function (...args) { clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, args) }, delay) fn } } // 节流 const throttle = (fn, delay = 1000) => { let timer = null return function (...args) { if (!timer) { timer = setTimeout(() => { fn.apply(this, args) timer = null }, delay) } } }1.什么是ref用来获取Dom的 在html标签中获取的就是当前的Dom元素 在Vue组件上获取的就是当前组件实例2.v-if和v-for的优先级v-for的优先级更高 是在源码中体现的 function genElement v-if不能和v-for一起使用，会造成性能浪费3.v-if和v-show的区别1.展现形式不同 v-if是创建一个dom节点 v-show是 display：none block 2.使用场景不同 初次加载v-if要比v-show好，页面不会做加载盒子 频繁切换v-show要比v-if好，创建和删除的开销太大了，显示隐藏开销小4.Vue生命周期相关1.有哪些生命周期系统自带 beforeCreate 组件实例被创建之初 created 组件实例已经完全创建 beforeMount 组件挂载之前 mounted 组件挂载到实例上去之后 beforeUpdate 组件数据发生变化，更新之前 updated 组件数据更新之后 beforeDestroy 组件实例销毁之前 destroyed 组件实例销毁之后(注销事件、清除定时器)2.一旦进入到页面或组件，会执行哪些生命周期？顺序beforeCreate created beforeMount mounted3.在哪个阶段有$el，在哪个阶段有$data？beforeCreate 啥也没有 created 有data，没有el beforeMount 有data，没有el mounted 都有4.如果加入了keep-alive会多两个生命周期activated deactivated5.如果加入keep-alive，第一次打开页面会执行哪些生命周期bef…

Vue UI 组件库
type: item
date: 2022-05-07T12:33:00+08:00
description: 移动端常用组件库1.Cube UI2.Mint UI3.NutUI4.VantUI5.Bootstrap Vue6.VUXPC端常用UI组件库1.Element2.VIew UI3.Ant4.Material5.bootstrap可视化工具6.vue-element-admin7.Variant Form低代码表单，可视化设计8.Vuetify9.Naive UI10.vxe-table个人强推1.Tailwind CSS 2.svg插图element-ui基本使用 示例1.安装element-ui:npm i elelment-ui -S2.src/main.jsimport Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; // 引入ElementUI组件库 import 'element-ui/lib/theme-chalk/index.css'; // 引入ElementUI全部样式 Vue.config.productionTip = false Vue.use(ElementUI) // 使用ElementUI new Vue({ el:"#app", render: h => h(App), }) 3.src/App.vue <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row> element-ui按需引入安装 babel-plugin-component npm i babel-plugin-component -D修改 babel-config-jsmodule.exports = { presets: [ '@vue/cli-plugin-babel/preset', ["@babel/preset-env", { "modules": false }] ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }3.src/main.js:import Vue from 'vue' import App from './App.vue' import { Button,Row } from 'element-ui' // 按需引入 Vue.config.productionTip = false Vue.component(Button.name, Button); Vue.component(Row.name, Row); /* 或写为 * Vue.use(Button) * Vue.use(Row) */ new Vue({ el:"#app", render: h => h(App), })Element 表单校验校验必要性在向后端发请求调用接口之前，我们需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。校验内容● 内容不能为空（*）● 密码长度必须多少位● 手机号的格式要合规● 邮箱的格式要合规● ...校验方式● 不依赖于任何组件的验证 ○ 在做提交之前，自己把数据分析处理一下。● 基于具体组件的验证（不同的组件库，它的验证方式可能也各有不同基本步骤定义验证规则。data()中按格式定义规则在模板上做属性配置来应用规则（三个配置）给表单设置 rules 属性传入验证规则给表单设置model属性传入表单数据给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名 3.手动兜底验证定义表单验证规则格式data() { return { rules: { // 字段名1：表示要验证的属性 // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。 // 数组中的…

代码优化---长更
type: item
date: 2022-05-06T23:11:00+08:00
description: 1. 拼接字符串原const name = '小明'; const score = 59; let result = ''; if(score > 60){ result = `${name}的考试成绩及格`; }else{ result = `${name}的考试成绩不及格`; }改进:三元const name = '小明'; const score = 59; const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;精简:逻辑优化const result = `${name}的考试成绩${score > 60?'':'不'}及格`; 2.关于输入框非空的判断非空判断是任何项目都会遇到,直接上代码原if(value !== null && value !== undefined && value !== ''){ //... }改:ES6中新出的空值合并运算符if((value??'') !== ''){ //... }3.关于if中判断条件的吐槽原if( type == 1 || type == 2 || type == 3 || type == 4 || ){ //... } 改:ES6中数组实例方法includesconst condition = [1,2,3,4]; if( condition.includes(type) ){ //... }4.关于列表搜索原const a = [1,2,3,4,5]; const result = a.filter( item =>{ return item === 3 } )改:ES6中的findconst a = [1,2,3,4,5]; const result = a.find( item =>{ return item === 3 } )5.查询数组中某个对象的属性来获得该属性的下标原:抱歉,原代码我忘记了改:ES6中的findindex,找到返回该属性索引(下标),没找到返回-1 find返回的是值,没找到就是undefined6.求累加和原:各种for循环去累加改:大哥,ES6里面的reduce你是没见过吗?reduce((previousValue, currentValue, currentIndex) => { /* ... */ } ) reduce((累加器, 当前值, 下表) => { /* ... */ },初始值 ) list.reduce((sum, item) => sum + item.price, 0)7.关于合并数据原:合并两个数组，合并两个对象const a = [1,2,3]; const b = [1,5,6]; const c = a.concat(b);//[1,2,3,1,5,6] const obj1 = { a:1, } const obj2 = { b:1, } const obj = Object.assign({}, obj1, obj2);//{a:1,b:1} 改:ES6的扩展运算符、Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用const a = [1,2,3]; const b = [1,5,6]; const c = [...new Set([...a,...b])];//[1,2,3,5,6] const obj1 = { a:1, } const obj2 = { b:1, } const obj = {...obj1,...obj2};//{a:1,b:1}8.保留有效数字Number.toFixed(n) n保留几位 不写默认进行四舍六入五看情况，不包括小数部分