34个 JavaScript 简写优化技术
34个 JavaScript 简写优化技术你可能做了很长时间的 JavaScript 开发,但有时你可能没有更新最新的特性,这些特性可以解决你的问题,而不需要做或编写一些额外的代码。这些技术可以帮助您编写干净和优化的 JavaScript 代码。此外,这些主题可以为你接下来面试做准备。
1. 如果有多个条件我们可以在数组中存储多个值,并且可以使用数组includes方法。
// Longhandif (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic}// Shorthandif (["abc", "def", "ghi", "jkl"].includes(x)) { // logic}
2. 如果为真…否则简写这对于我们有if-else条件,里面不包含更大的逻辑时,是一个较大的捷径。我们可以简单的 ...
微信小程序选择图片并上传图床
微信小程序选择图片并上传图床
选择图片我们选择wx.chooseMedia,曾经的wx.chooseImage已经停止维护了,所以使用wx.chooseMedia 代替。
上传图片我们选择wx.uploadFile,这是最优的方案,如果使用wx.request会非常非常非常麻烦!
图床我这里以 Lsky 兰空图床为例,是在我自己的服务器上搭建的。
图床接口
wx.chooseMedia 的基本用法wx.chooseMedia({ count: 1, // 最多可以选择的图片张数,默认9 sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有 success: res => { const filePa ...
react-codemirror2 踩坑之onChange事件导致重渲染
react-codemirror2 踩坑之onChange事件导致重渲染背景:const [submittingCode, setSubmittingCode] = useState('');const submit = async () => { // 提交代码,提交的是submittingCode};return ( <CodeMirror value={submittingCode} options={{ ... }} onChange={(editor, data, value) => { setSubmittingCode(value) }} /> <button onClick={() => submit}> 提交代码 ...
两步实现本地Navicat连接远程服务器数据库(借助宝塔面板)
进入远程服务器,做两步操作
本地Navicat做如下操作
JavaScript 实现一行代码将变量复制到剪切板
JavaScript 实现一行代码将变量复制到剪切板用原生JavaScript的Promise风格实现一行代码将一个变量复制到剪切板。MDN上是这么写的:https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/writeText
网上大部分方法是创建一个中间人(隐藏的input框),然后remove掉,很麻烦!并且现在其中的document.execCommand方法已经被==弃用==了,那么还不用下面这个方法??别犹豫了!!
navigator.clipboard.writeText("被复制的文本").then(function() { /* 复制成功 */}, function() { /* 复制失败 */});
微信小程序bindtap事件绑定报错does not have a method “xxxx“ to handle event “tap“
微信小程序bindtap事件绑定莫名其妙报错错误代码:Component “components/noteCard/index” does not have a method “checkDetails” to handle event “tap”.
<view bindtap="checkDetails" class="evaluate btn">查看详情</view>
const app = getApp()Page({ data: {} addNote() { wx.navigateTo({ url: `/pages/addNote/index`, }) }})
这个bindtap看起来完全没问题,但是就是无法实现跳转且报警告,解决方法如下:把本地设置中的“将JS编译成ES5”取消勾选再勾选回去就行,具体原因未知。
在React中应用TS
在React中应用TS初始化一个React项目+TS
可以使用npm命令
利用npx的特性
$ npx create-react-app react-ts --template typescript
解释: npx create-react-app react-ts(项目名) –template typescript
VSCode打开项目
Vuetur + eslint 校验vue项目
假设没有用umi脚手架,用prettier插件就可以配置自动保存就行了
npm或者yarn一定要配置淘宝镜像,否则会很慢
创建的新项目,没有js文件,都是ts文件,原来的jsx编程了tsx
tsx表示在项目中需要用到react组件,JSX语法,需要使用TypeScript,必须使用tsx结尾
如果没有JSX语法,用ts结尾
useState当遇到never类型时,表示此类型不能用,不能通过该类型来解释当下的运行环境,必须指明类型
const [count, setCount] = useState(0)const [count, setCount] = useState<number& ...
JS一行代码实现二维数组的声明与初始化(3种方法)
JS一行代码实现二维数组的声明与初始化(3种方法)第一种:==强烈不推荐使用!!实际应用中存在致命问题!!!!== Array.fill() 嵌套方法致命问题看这里:JavaScript 踩坑 —— 使用 Array.fill( ) 填充对象导致的重大问题
const row = 5, col = 3 // 5行3列let arr1 = Array(row).fill(Array(col).fill('要填充的值'))console.log('arr1: ', arr1)
第二种:==强烈推荐!!== 其中item可以替换为任意临时变量,也可也是小括号对()先看看基础用法,是这样的: Array.from([1, 2, 3], x => x + x); 结果是[2, 4, 6]看懂了上面这句再看下面这句就明白了。
const row = 5, col = 3 // 5行3列let arr2 = Array.from(Array(row), item => new Array(col).fill('要填充的值 ...
JavaScript 踩坑 —— 使用 Array.fill( ) 填充对象导致的重大问题
JavaScript创建二维数组时尽量不要使用Array.fill( )的嵌套方式
当我们想使用 Array.fill( ) 来填充一个全是对象的数组时需要特别注意Array(size).fill({ }) 这样填充创建的数组,里面每一项{ }是完全相同的
问题是这样发现的~const row = 5, col = 3 // 5行3列let arr1 = Array(row).fill(Array(col).fill(0))let arr2 = Array.from(Array(row), item => new Array(col).fill(0))arr1[1][1] = 1arr2[1][1] = 1console.log('arr1 修改后', arr1);console.log('arr2 修改后', arr2);
执行上述代码时发现,用Array.fill()来向一个数组中填充若干个数组来创建二维数组,然后更改其中一个值时,那一列的所有值都发生了改变,于是引发了我的思考!! 然后就有了下面的测试语句:
const size ...
保姆级纯净的WIN10电脑安装+配置nodejs & 安装vue-cli
保姆级纯净的WIN10电脑安装+配置nodejs & 安装vue-cli
首先下载node.js地址:https://nodejs.org/en/1、下载安装包,点击安装就一直下一步就可以了。
2、安装完成后,系统会自动帮你配置系统环境变量,你可以在系统环境变量中path可以看到
3、win+r 进入cmd 查看node.js和npm的版本号,如下图:4、进入C:\Users\admin\AppData\Roaming,可以看到npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,
一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\ProgramFiles\nodejs,在D:\ProgramFiles\nodejs目录下创建两个文件夹,分别是以下两个:(==这里注意!!!== 有的人电脑是Program Files,有的人是ProgramFiles,区别在于中间的空格,不同电脑不一样,这里注意一下,一会儿会有影响,按照自己的情况就行)然后在docs命令下运行以下2条命令npm config set prefix “D:\ProgramF ...