技术标签: foreach nodejs javascript
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81153733
博主地址是:http://blog.csdn.net/freewebsys
https://developer.mozilla.org/zh-CN/
还有这么一个开发者中心呢,上面搜索写JavaScript的东西也相当的全面。
开始是使用 firefox,现在使用了 chrome就再也不看 mozilla 的东西了。
但是人家有个号东西也去学习。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction
学习javascript
虽然写javascript好多年,但是一些高级的用法不会。
造成代码感觉上冗余的多,不优美。
比如昨天写的CURD 项目设置属性为空,就相当难看的代码:
filters: {
id: '',
userName: '',
password: '',
nickName: '',
role: '',
status: '',
type: '',
},
loading: false,
dataForm: {
//编辑界面数据
id: '',
userName: '',
password: '',
nickName: '',
role: '',
status: '',
type: '',
createTime: '',
updateTime: '',
},
感觉上肯定有啥高级的用法,能将属性的默认值设置空啥的。
或者使用啥foreach的函数。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
拼接字符串:
let tmpDataForm = this.dataForm //赋值变量
Object.keys(tmpDataForm).forEach(function(key){
data += "&"+key+"=" + tmpDataForm[key]
})
进行filter查询:
let query = ""
let tmpFilters = this.filters //赋值变量
Object.keys(tmpFilters).forEach(function(key){
query += "&"+key+"=" + tmpFilters[key]
})
昨天的curd优化:
https://blog.csdn.net/freewebsys/article/details/81112630
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item><el-button type="primary" @click="editFunc">新建</el-button></el-form-item>
<el-form-item><el-input v-model="filters.id" placeholder="id"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.userName" placeholder="用户名"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.password" placeholder="密码"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.nickName" placeholder="昵称"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.role" placeholder="角色"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.status" placeholder="状态"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.type" placeholder="类型"></el-input></el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="listFunc">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<template>
<el-table :data="dataList" v-loading="loading" style="width: 100%;">
<el-table-column prop="id" label="id"/>
<el-table-column prop="userName" label="用户名"/>
<el-table-column prop="password" label="密码"/>
<el-table-column prop="nickName" label="昵称"/>
<el-table-column prop="role" label="角色"/>
<el-table-column prop="status" label="状态"/>
<el-table-column prop="type" label="类型"/>
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column prop="updateTime" label="更新时间"/>
<el-table-column label="操作" width="150">
<template slot-scope="scope"><el-button-group>
<el-button type="primary" size="mini" @click="editFunc(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="deleteFunc(scope.$index, scope.row)">删除</el-button>
</el-button-group></template>
</el-table-column>
</el-table>
</template>
<el-col style="text-align:right;padding-top: 30px;">
<el-pagination @current-change="pageChangeFunc" background="" layout="prev, pager, next" :total="totalCount">
</el-pagination>
</el-col>
<!--编辑弹出页面-->
<el-dialog title="用户编辑" :visible.sync="dialogVisible">
<el-input v-model="dataForm.id" placeholder="id" type="hidden"/>
<el-form label-width="100px" :rules="dataFormRules" ref="dataForm">
<el-form-item label="用户名" prop="userName"><el-input/></el-form-item>
<el-form-item label="密码" prop="password"><el-input/></el-form-item>
<el-form-item label="昵称" prop="nickName"><el-input v-model="dataForm.nickName"/></el-form-item>
<el-form-item label="角色" prop="role"><el-input v-model="dataForm.role"/></el-form-item>
<el-form-item label="状态" prop="status"><el-input v-model="dataForm.status"/></el-form-item>
<el-form-item label="类型" prop="type"><el-input v-model="dataForm.type"/></el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveFunc">确 定</el-button>
</span>
</el-dialog>
</section>
</template>
<script>
export default {
data() {
return {
filters: {
id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '',
},
loading: false,
dataForm: {
//编辑界面数据
id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '', createTime: '', updateTime: '',
},
dataFormRules: {
//编辑界面校验规则
userName: [{required: true, message: '请输入用户名', trigger: 'blur' } ],
password: [{required: true, message: '请输入密码', trigger: 'blur' } ],
nickName: [{required: true, message: '请输入昵称', trigger: 'blur' } ],
role: [{required: true, message: '请输入角色', trigger: 'blur' } ],
status: [{required: true, message: '请输入状态', trigger: 'blur' } ],
type: [{required: true, message: '请输入类型', trigger: 'blur' } ],
},
dialogVisible: false,
dataList: [], //列表数据
totalCount: 0,
currentPage: 1
}
},
methods: {
editFunc: function(index, row) {
//新建&编辑
if (row == undefined) {
let tmpDataForm = this.dataForm //赋值变量,修改tmpDataForm即可
Object.keys(tmpDataForm).forEach(function(key){
tmpDataForm[key] = ''
})
this.dialogVisible = true
} else {
this.$axios.get('/userInfo/get?id=' + row.id)
.then(resp => {
//数据直接赋值
this.dataForm = resp.data.data
}).finally(() => {
this.loading = false
this.dialogVisible = true
})
}},
saveFunc: function() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) { return false }
let data = ""
let tmpDataForm = this.dataForm //赋值变量
Object.keys(tmpDataForm).forEach(function(key){
data += "&"+key+"=" + tmpDataForm[key]
})
this.$axios.post('/userInfo/save?' + data)
.finally(() => {
this.dialogVisible = false
this.listFunc()
})
})
},
deleteFunc: function(index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.$axios.delete('/userInfo/delete?id=' + row.id)
.finally(() => {
this.listFunc()
})
})
},
listFunc: function() {
this.loading = true
let query = ""
let tmpFilters = this.filters //赋值变量
Object.keys(tmpFilters).forEach(function(key){
query += "&"+key+"=" + tmpFilters[key]
})
this.$axios.get('/userInfo/list?page=' + this.currentPage + query)
.then(resp => {
this.dataList = resp.data.data
this.totalCount = resp.data.totalCount
}).finally(() => {
this.loading = false
})
},
pageChangeFunc: function(idx) {
this.currentPage = idx
this.listFunc()
}
},
created: function() {
this.listFunc()
}
};
</script>
js代码中出现大量的 set 代码其实是冗余的本来就是动态语言,不能像java那样去写:this.xxx = xxx 这样不优雅。
要用 forEach去写:
let tmpDataForm = this.dataForm //赋值变量,修改tmpDataForm即可
Object.keys(tmpDataForm).forEach(function(key){
tmpDataForm[key] = ''
})
这个要是大表单数据,十几个 也没有啥意义。
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81153733
文章浏览阅读6.2k次,点赞6次,收藏26次。我是一个深度学习代码小白,请你用中文写上注释,能让我能轻松理解下面这段代码。注意包含所有函数、调用和参数的注释。以同样的python代码块样式返回你写的代码给我。代码看累了,就看《动手学深度学习》文档:基于PyTorch框架,从底层函数实现基础功能,再到框架的高级功能。努力上路的小白一枚,麻烦路过的大佬指导一二,同时希望能和大家交流学习~争取更新学习这个文档的专栏,记录学习过程。量身定做了一套话术hhh,亲身测试还不错。这个感觉更浅一点儿,之后复习看吧。20天吃掉那只Pytorch。_深度学习程序怎么读
文章浏览阅读2.7w次,点赞126次,收藏1.2k次。耗废1024根秀发,Java学习路线图来了,整合了自己所学的所有技术整理出来的2022最新版Java学习路线图,适合于初、中级别的Java程序员。_java学习路线
文章浏览阅读4.4k次。1.7-savingPNG介绍代码详情函数详解savePNGFile()源码savePNGFile()源码提示savePNGFile()推荐用法处理结果代码链接介绍PCL提供了将点云的值保存到PNG图像文件的可能性。这只能用有有序的云来完成,因为结果图像的行和列将与云中的行和列完全对应。例如,如果您从类似Kinect或Xtion的传感器中获取了点云,则可以使用它来检索与该云匹配的640x480 RGB图像。代码详情#include <pcl / io / pcd_io.h>#incl_pcl::io:savepng
文章浏览阅读936次。吸引妹子的关键点不在于喝什么咖啡,主要在于竖立哪种男性人设。能把人设在几分钟内快速固定下来,也就不愁吸引对口的妹子了。我有几个备选方案,仅供参考。1. 运动型男生左手单手俯卧撑,右手在键盘上敲代码。你雄壮的腰腹肌肉群活灵活现,简直就是移动的春药。2.幽默男生花 20 块找一个托(最好是老同学 or 同事)坐你对面。每当你侃侃而谈,他便满面涨红、放声大笑、不能自已。他笑的越弱_咖啡厅写代码
文章浏览阅读1.2w次,点赞5次,收藏5次。今天 (应该是昨天了,昨晚太晚了没发出去)下午参加了腾讯WXG的面委会面试。前面在牛客上搜索了面委会相关的面经普遍反映面委会较难,因为都是微信的核心大佬,问的问题也会比较深。昨晚还蛮紧张的,晚上都没睡好。面试使用的是腾讯会议,时间到了面试官准时进入会议。照例是简单的自我介绍,然后是几个常见的基础问题:例如数据库索引,什么时候索引会失效、设计模式等。这部分比较普通,问的也不是很多,不再赘述。现在回想下,大部分还是简历上写的技能点。接下来面试官让打开项目的代码,对着代码讲解思路。我笔记本上没有这部分代码,所_腾讯面委会面试是什么
文章浏览阅读382次,点赞3次,收藏4次。AI绘画自动生成器是一种利用人工智能技术,特别是深度学习算法,来自动创建视觉艺术作品的软件工具。这些工具通常基于神经网络模型,如生成对抗网络(GANs),通过学习大量的图像数据来生成新的图像。AI绘画自动生成器作为艺术与科技结合的产物,正在开启艺术创作的新篇章。它们不仅为艺术家和设计师提供了新的工具,也为普通用户提供了探索艺术的机会。随着技术的不断进步,我们可以预见,AI绘画自动生成器将在未来的创意产业中发挥越来越重要的作用。
文章浏览阅读1.7k次。理解为ListView 的三种形式吧ListView 默认构造但是这种方式创建的列表存在一个问题:对于那些长列表或者需要较昂贵渲染开销的子组件,即使还没有出现在屏幕中但仍然会被ListView所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿直接返回的是每一行的Widget,相当于ios的row。行高按Widget(cell)高设置ListView.build 就和io..._flutter listview.separated和listview.builder
文章浏览阅读1.4k次,点赞4次,收藏14次。废话不多说直接上干货1.js运行机制JavaScript单线程,任务需要排队执行同步任务进入主线程排队,异步任务进入事件队列排队等待被推入主线程执行定时器的延迟时间为0并不是立刻执行,只是代表相比于其他定时器更早的被执行以宏任务和微任务进一步理解js执行机制整段代码作为宏任务开始执行,执行过程中宏任务和微任务进入相应的队列中整段代码执行结束,看微任务队列中是否有任务等待执行,如果有则执行所有的微任务,直到微任务队列中的任务执行完毕,如果没有则继续执行新的宏任务执行新的宏任务,凡是在..._前端面试
文章浏览阅读1k次。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。(3)若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。_linux
文章浏览阅读7.9k次,点赞26次,收藏66次。HTML DOM——文档元素的操作1、通过id获取文档元素任务描述相关知识什么是DOM文档元素节点树通过id获取文档元素代码文件2、通过类名获取文档元素任务描述相关知识通过类名获取文档元素代码文件3、通过标签名获取文档元素任务描述相关知识通过标签名获取文档元素获取标签内部的子元素代码文件4、html5中获取元素的方法一任务描述相关知识css选择器querySelector的用法代码文件5、html5中获取元素的方法二任务描述相关知识querySelectorAll的用法代码文件6、节点树上的操作任务描述相关_javascript学习手册十三:html dom——文档元素的操作(一)
文章浏览阅读132次。《LeetCode学习》172. 阶乘后的零(java篇)_java 给定一个整数n,返回n!结果尾数中零的数量
文章浏览阅读426次。请注意,本文将要给大家分享的并不是开启公众号的安全操作风险提醒,而是当公众号粉丝给公众号发消息的时候,公众号的管理员和运营者如何能在手机上立即收到消息通知,以及在手机上回复粉丝消息。第一步:授权1、在微信中点击右上角+,然后选择“添加朋友”,然后选择“公众号”,然后输入“微小助”并关注该公众号。2、进入微小助公众号,然后点击底部菜单【新增授权】,如下图所示:3、然后会打开一个温馨提示页面。请一定要..._php微信公众号服务提示