javascript技巧

运行环境:vue3.2以上,复制张贴运行即可看效果效果如下: <template> <div class="container"> <transition-group name="flip-list"> <div v-for="item in items" :key="item" draggable="true" class="items" @d

目录 声明数组 1. 常规方式 2. 简洁方式 3. 字面 Array 对象方法 1. forEach 2. map 3. concat 4. push 5. unshift 6. pop 7. shift 8. splice 9. slice 10. join 11. every 12. filter 13. indexOf 14. reduce 15. reverse 16. sort 17. toString 18. at 19. find 20. some JavaScript中的Arr

目录 原始类型:string,number,boolean 数组(Arrays) Any类型 在变量上使用类型注释 函数(Functions) 返回类型注释(Return Type Annotations) 匿名函数(Anonymous Functions) 对象类型(Object Types) 可选属性(Options Properties) 联合类型(Union Types) 定义一个联合类型(Define a Union Type) 使用联合类型(Working with Union Ty

目录 一.回调地狱 二.Promise 三.生成器(generator) 四.使用生成器同步化promise 五.async.await异步代码究极解决方案 一.回调地狱 在es6兴起之后许多人都开始使用promise,promise目的是解决es5中的回调地狱(callback hell),那么什么是回调地狱呢?先来提一个需求,现在需要发送n个request请求,第二个请求参数需要第一个请求的结果,第三个请求的参数需要第二个请求的结果,以此类推... ,在没有promise的条件下,我们不难使

目录 情景再现 使用泛型 泛型类型 泛型接口 泛型类 泛型约束 在泛型里使用类类型[] 高级案例 情景再现 这里针对一种情况,也是非常常见的一种情况:那就是 function identity(arg: number): number { return arg; } 就是我接收一个number类型的参数,同时也返回一个number,那如果现在我想要接收一个string类型,同时也返回一个string,那么我就要再写一个函数像这样: function identity2(arg: string):

目录 基本定义 声明数组时直接初始化 访问数组 Array对象 声明数组时指定数组大小 两种定义方式 声明多维数组(含泛型) 普通版 泛型版 类数组 数组解构 通过接口描述数组 数组迭代 基本定义 声明数组时直接初始化 // 基本定义 let arr:number[] = [1,2,3]; let arrS: string[] = ["1","2"] 如果数组声明时未设置类型,则会被认为是 any 类型,在初始化时根据第一个元素的类型来推断数组的类型. 访问数组 A

目录 引言 全局数据共享 安装 MobX 相关的包 创建Store实例 将 Store 中的成员绑定到页面中 在页面使用 Store 中的成员 将 Store 成员绑定到组件中 在组件中使用 Store 中的成员 分包 分包的项目构成: 分包的加载规则: 分包的体积限制: 创建分包 打包原则 分包的引用原则 独立分包 独立分包的引用原则 分包预下载 总结 引言 经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我

目录 1. 什么是迭代器? 1.1 迭代器的基本实现 1.2 迭代器的封装实现 2. 什么是可迭代对象 2.1 原生可迭代对象(JS内置) 2.1.1 部分for of 演示 2.1.2 查看内置的[Symbol.iterator]方法 2.2 可迭代对象的实现 2.3 可迭代对象的应用 2.4 自定义类迭代实现 3. 生成器函数 3.1 生成器函数基本实现 3.2 生成器函数单次执行 3.3 生成器函数多次执行 3.4 生成器函数的分段传参 3.5 生成器代替迭代器 4. 可迭代对象的终极封装

目录 前言: 正文 Tips 1.首先我们准备好自己项目所需要的tab图标 2.找到我们的pages.json文件进行配置 3.配置一下导航栏标题内容 4.来看看我们的成果(效果图) 总结 前言: 配置底部导航栏首先需要大家准备好自己想要使用的图标,每个tab可以选择两个图标,分别为选中前的和选中后的.之后我们根据uniapp官网提供的 uniapp官网tabbar配置项,话不多说直接上正文一起来学习一下如何配置底部导航栏吧. 正文 首先我们先看一下官网中的介绍:如果应用是一个多 tab 应用,

目录 前言 1.没有使用严格模式 我们为什么要使用严格模式? 2. 使用 || 确定默认值 那它应该是什么样子的呢? 3.使用any作为类型 为什么要这么做呢? 为什么不能用any? 4. val 作为 SomeType 强制告诉编译器它无法推断的类型. 这就是类型守卫的用途. 5. any在测试用例中的表现 在编写测试时 6. 可选属性 将属性定义为有时存在,有时不存在的可选属性. 清楚地表达,模型哪些组合存在,哪些不存在. 7. 使用一个字母作为泛型参数 用一个字母给作为名称,比如常用的T作

目录 前言 1.效果图展示 2.需求分析 3.实现的技术 4.实现的过程 1. HTML 部分 2. SASS部分 3. JavaScript部分 5.全部源码 1.index.html 2. style.scss 3. index.js 前言 内容: 效果图 需求分析 实现技术 实现过程 全部源码 1.效果图展示 随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2.需求分析 可以自定义倒计时结束的时间 圆环的颜色是渐变的 倒计时的动画在视觉上是流畅运行, 而

目录 前言 ES5与ES6的区别 1. 作用域 2. 全局属性 3. 变量提升与暂时性死区 4. 重复声明 let与const的区别 1. 常量 最佳实践 前言 JavaScript中一共有3种用来声明变量的关键字,分别是var.let和const. 其中var关键字是ES5时代的产物,由于ES5对变量的约束很宽松,使用var来声明变量时经常会出现一些预料之外的问题. ES6为了使变量的定义更加规范,提出了let和const这两个关键字. 因此要解释清楚这三个的区别,首先要从ES5时代和ES6时

目录 在for循环中使用var声明初始化带来的问题 解决方法 使用闭包 使用let变量初始化 for循环怎么处理用let和var声明的初始化变量? 总结 在for循环中使用var声明初始化带来的问题 // 一道经典面试题: var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log("My value: " + i) }; } for (var j = 0; j < 3;

javascript[手机验证].[邮箱验证].[密码验证]的正则表达式的封装: [手机验证]: 以下代码是验证手机号码的正则表达式的方法, [checkPhone]:表示的是方法的名称: [phoneId]:表示方法的参数,这里为获取手机号码的html元素的id,一般为input元素的id: [$(phoneId).val()]:JQ通过id获取input的值: [手机匹配的正则表达式]: /^1[2|3|4|5|6|7|8|9|]\d{9}$/ /*手机验证*/ function check

目录 1.基本概念 2.创建数组的三种方法 3.访问数组 4.数组常用属性 5.数组常用方法 6.常用的循环遍历数组的方法 1.基本概念 JavaScript 数组用于在单一变量中存储多个值.是一个具有相同数据类型的一个或多个值的集合 2.创建数组的三种方法 (1)使用JavaScript关键词 new 一个Array对象,并且单独赋值 //1.创建数组 new 一个Array() 对象 let arr = new Array(); arr[0] = "html"; arr[1] =

目录 单线程的Javascript 同步 vs 异步 宏任务 vs 微任务 定时器 To Be Continued 单线程的Javascript JavaScript是一种单线程语言,它主要用来与用户互动,以及操作DOM.多线程需要共享资源.且有可能修改彼此的运行结果,且存在上下文切换. 在 JS 运行的时候可能会阻止 UI 渲染,这说明两个线程是互斥的.这是因为 JS 可以修改 DOM,如果在 JS 执行的时候 UI 线程还在工作,就可能导致不能安全的渲染 UI. JS 是单线程运行的,可以达

目录 页面跳转和数据传递 wx的API跳转 navigator组件(了解) 总结 页面跳转和数据传递 界面的跳转有两种方式:通过navigator组件 和 通过wx的API跳转 这里我们先以wx的API作为讲解: wx的API跳转 上面API中, 我们最常用的就是wx.navigateTo和wx.navigateBack wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面: 但是不能跳到 tabbar 页面: 参数属性 属性 类型 默认值 必填 说明

场景 2个json合并, jQuery 的“extend()”方法有两个原型:合并的方法,分别是浅合并和深度合并,其实浅合并只是json的第一层被合并,而深度合并是全部层数都被合并,分别如下写法: 1.浅合并,target被object1...合并,只有一层 $.extend( target [, object1 ] [, objectN ] ) 深度合并,target被object1...合并,包含一层二层三层... 要深度合并, [deep]需要为true, 后面覆盖前面,所以如要要保留后面

目录 JS art-template模板使用if判断 模板引擎art-template的基本使用 一.输出数据 二.if判断语句 三.for循环语句 四.子模板 JS art-template模板使用if判断 JS代码:     // json数据     var json=[         {             "id": 1,             "good_sign": 2,             "good_img": &q

目录 一.webpack 1.1 简介 1.2 五大核心概念 entry (入口) output (出口) loader plugin (插件) mode (模式) 二.配置及使用 项目结构 使用html-webpack-plugin 三.写在最后 一.webpack 1.1 简介 在最原始的前端开发中,我们引入js和css等文件都是通过手动地在html中插入script和link标签来达到引用的目的,不仅繁琐,每个文件都需要单独发一次请求,而且容易发生变量冲突的问题. 于是提出了JavaScr