本文比较并总结遍历数组的四种方式: for 循环: for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环: for (const key in someArray) { console.log(key); } 数组方法 .forEach(): someArray.forEach((elem, index) => { console.log(
javascript技巧
JS中循环遍历数组的四种方式总结
js简单粗暴的发布订阅示例代码
什么是发布/订阅? 我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系. 当门店挂出衣服款式,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家店.整个过程就是这么简单. 使用场景 异步通信.多页面间相互通信,pageA 的方法想在 pageB的方法调用的某个时机触发 直接上代码 class Publish { constructor()
原生js实现自定义难度的扫雷游戏
本文实例为大家分享了js实现扫雷游戏的具体代码,供大家参考,具体内容如下 游戏功能: 1.有四个难度 2.可以自定难度 1.html相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
原生js实现自定义滚动条
本文实例为大家分享了js实现自定义滚动条的具体代码,供大家参考,具体内容如下 1.HTML文件 div1是滚动条,div2是滚动小球,div3是文本区域容器,div4是文本区域. <div id="div"> <div id="div1"> <div id="div2"> </div> </div> <div id="div3"> <div id=&
JavaScript实现下拉列表
本文实例为大家分享了JavaScript实现下拉列表的具体代码,供大家参考,具体内容如下 这一次写了一个比较简单的下拉列表的实现,点击出现列表内容,再次点击列表消失,研究了很久,发现这种js写法确实比较好用.先看一下效果. 直接上代码,js是主要写的部分,css是随意调试的,不过这个写法要用到css. 1.HTML部分的代码 <body> <!--最外面的一层--> <div class="outer"> <!-- 里面的--> <
uniapp微信小程序:key失效的解决方法
uniapp 代码 <template> <view> <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image> </view> </template> <script> export default { props: { urlKey: {defau
微信小程序canvas实现签名功能
在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场 前言 微信小程序canvas实现签名功能 核心内容简介: (1)签名实现,开始,移动,结束 (2)重写 (3)完成 (4)上传 一.微信小程序canvas实现签名功能 效果演示: (1)签名实现 (2)重写 (3)完成 完成后将图片展示在相应的位置 (4)根据业务需求,可以将图片上传到后台,在需要的地方展示 二.上代码 1.全部演示 wxml <!--pages/canvas-test/canvas-test.wxm
js实现电灯开关效果
本文实例为大家分享了js实现电灯开关效果的具体代码,供大家参考,具体内容如下 通过对js的一个学习,我们来完成一个模拟电灯开关的小案例. 首先对本案例进行一个分析,过程如下: 1.获取图片属性 2.绑定单击事件 3.点击时切换图片 1.通过按钮实现电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&
JS实现纸牌发牌动画
本文实例为大家分享了JS实现纸牌发牌动画的具体代码,供大家参考,具体内容如下 先看演示 游戏构建准备 1.准备52张纸牌 2.一张桌布 3.编辑工具为 Visual Code 技术概要 1.对象操作 2.数据操作 3.JS animation动画 4.全局变量 function desen_x(){ let that = this; var desen=["h_1","h_2","h_3","h_4","h_5&qu
微信小程序之高德地图多点路线规划过程示例详解
调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程
在JavaScript中查找字符串中最长单词的三种方法(推荐)
本文基于Free Code Camp基本算法脚本"查找字符串中最长的单词". 在此算法中,我们要查看每个单词并计算每个单词中有多少个字母.然后,比较计数以确定哪个单词的字符最多,并返回最长单词的长度. 在本文中,我将解释三种方法.首先使用FOR循环,其次使用sort()方法,第三次使用reduce()方法. 算法挑战 返回提供的句子中最长单词的长度. 您的回复应该是一个数字. 提供的测试用例 findLongestWord("The quick brown fox jumpe
js加减乘除精确运算方法实例代码
前言 因为计算机数字是浮点型,所以在计算过程中通常得到的并不是一个准确的数据,所以在做一些数组运算的时候比较头疼,我们这里就来写一下精确运算的方法 首先是加法 (这里以两个数据相加为例) function add(arg1, arg2) { arg1 = arg1.toString(), arg2 = arg2.toString(); // 将传入的数据转化为字符串 var arg1Arr = arg1.split("."), // 将小数的数据从小数点的位置拆开 arg2Arr =
关于javascript中的promise的用法和注意事项(推荐)
一.promise描述 promise是javascript中标准的内置对象,用于表示一个异步操作的最终状态(是失败还是成功完成)及其结果值.它让你能够把异步操作最终成功或者失败的原因和响应的处理程序相关联,也就是说通过promise你可以自定义异步操作结束后该做什么.这样的话异步方法就和同步方法很类似,也有返回值,只不过这个返回值不是立即返回最终的值,而是返回一个promise,当promise的状态发生改变时,就会触发相应的处理程序. 一个promise无论什么时候都必然处于以下几种状态:1
js中延迟加载和预加载的具体使用
延迟加载(懒加载)和预加载是常用的 web 优化的手段.. 一.延迟加载(懒加载) 原理: 当在真正需要数据的时候,才真正执行数据加载操作. 目的: 延迟加载机制是为了避免一些无谓的性能开销而提出来的 实现延迟加载的几种方法 1. 让 js 最后加载 使用方法: 把 js 外部引入的文件放到页面底部 用途: 让 js 最后引入,从而加快页面加载速度 说明: 流览器之所以会采用同步模式,通常加载 js 文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后
JS中箭头函数与this的写法和理解
前言 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进.this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系. 一.JS中函数的写法 1.常规函数的写法 在ES6语法之前,JS中的函数由function关键字.params参数和被花括号包裹的函数体组成.为了与后面说到的箭头函数相区别,我们先把这样的函数叫做常规函数,常规函数既可以用声明式写法也可以用赋
使用Typescript开发微信小程序的步骤详解
Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以
JavaScript中展开运算符及应用的实例代码
展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用. let obj1 = { value1: 1, value2: 2 }; let obj2 = {...obj1 }; console.log(obj2); // {value1: 1, value2: 2} 上面的用法实际相当于 obj2 = {value1: 1, value2: 2} 展开运算符的写法与obj2
JavaScript实现消消乐的源代码
JavaScript实现消消乐的源码下载地址:点击下载源代码 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
一.准备工作 下载vue-quill-editor npm install vue-quill-editor --save 或者 yarn add vue-quill-editor 二.定义全局组件quill-editor 下载好vue-quill-editor后,我们需要定义一个全局组件,把这个组件名字命名为quill-editor 1.定义template模板 <div> <quill-editor v-model="value" ref="myQuil
详解ES6 中的Object.assign()的用法实例代码
方法:Object.assign() 作用:将sourse对象的 值 赋值给目标对象,两者都有的会覆盖,target独有会保留,sourse独有会添加 使用方法: Object.assign方法实行的是浅拷贝,而不是深拷贝.也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用. var object1 = { a: { b: 1 } }; ar object2 = Object.assign({}, object1); object1.a.b = 2; console.