js
关注
分享
扫一扫
zeroyulong
前端攻城狮，日常撸代码
展开
-
js 递归展开对象中的数组
提取深层嵌套数据结构中的子数组到一层原创 2022-09-29 14:10:11 · 848 阅读 · 1 评论 -
Uncaught URIError: URI malformed
报错原因：decodeURI不能解码“%”结局方法：改用unescape函数原创 2022-02-24 20:10:57 · 990 阅读 · 0 评论 -
js补足字符串/数字位数
以前补足倒计时时间（05：03）判断length 字符串拼接0现在padStart() padEnd()来补足位数12.padStart(4, '0') // 001212.padEnd(4, '0') // 1200原创 2020-12-04 15:57:50 · 1003 阅读 · 0 评论 -
使用Map 代替Switch语句
function getResult(status) { // 使用 switch case 语句，根据颜色找出对应的水果 switch (status) { case 1: return '待发货'; case 2: return '已发货'; case 3: return '已完成'; default: return ''; }}//测试结果getResult(null); // []getResul.原创 2020-08-28 21:02:19 · 2613 阅读 · 0 评论 -
浮窗出现时阻止浮窗下的页面滚动
//阻止touchmove的默认事件$('body').on('touchmove',function(e){e.preventDefault();});})//解除阻止默认事件$('body').off('touchmove');}原创 2020-07-13 22:49:35 · 382 阅读 · 0 评论 -
js 模拟所有请求返回数据后执行操作
场景：请求两个没有请求依赖关系的数据源，当两个数据源都成功返回数据后，进行数据重组方案：Promise.all() function mockTimer(type) { // 这里用定时器模拟，可以换为ajax请求 let result = [1, 2, 3]; let timeout = 1000; if (type == 2) { result = [4, 5, 6]; timeout = 2000; } else if (typ原创 2020-05-25 19:58:26 · 1261 阅读 · 0 评论 -
js判断数据类型
function getType(param){ return Object.prototype.toString.call(param);} console.log(getType(3)); //[object Number]js基础数据类型：number string null undefined string boolean，存放在栈内存 js引用数据类型：Object ...原创 2020-03-31 17:03:38 · 157 阅读 · 0 评论 -
history.pushState
mounted(){ if (window.history && window.history.pushState) { // @ts-ignore history.pushState(null, null, document.URL); window.addEventListener('popstate', this....原创 2019-12-18 19:55:39 · 641 阅读 · 0 评论 -
Typescript错误忽略
忽略单行（在要忽略的上一行使用@ts-ignore来忽略错误）// @ts-ignore原创 2019-12-18 19:37:15 · 3406 阅读 · 2 评论 -
reduce()数组去重
需求：去除掉下列数组中id重复的对象 let colors = [{ id: 0, colorName: 'red' }, { id: 1, colorName: "orange" }, { id: 2, colorName: "yellow" }, { id: 3, ...原创 2019-01-04 14:37:05 · 11728 阅读 · 2 评论 -
设置Chrome浏览器允许跨域访问
一、Windowsdir= 后的路径需要自己新建文件夹，之后将路径拼上即可二、Mac1.终端新建一个文件夹mkdir MyChromeDev2.进入该目录下，查看当前文件所在的系统目录cdMyChromeDev pwd得到的结果 /Users/用户名/MyChromeDev3.输入如下命令，在终端打开新的chrome窗口，出现如上图“您使用...原创 2018-12-24 17:33:38 · 5241 阅读 · 0 评论 -
JavaScript数字精度丢失问题总结
本文分为三个部分JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案（一个对象+一个函数）一、JS数字精度丢失的一些典型问题1. 两个简单的浮点数相加 1 0.1 + 0.2 != 0.3// true Firebug这真不是 Firebug 的问题，可以用alert试试 （哈哈开玩笑）。...转载 2019-03-05 20:57:55 · 602 阅读 · 0 评论 -
js 数组排序
转自：https://www.cnblogs.com/onepixel/articles/7674659.html0、算法概述0.1 算法分类十种常见排序算法可以分为两大类：比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。 非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性...转载 2019-03-17 11:08:31 · 1380 阅读 · 0 评论 -
js数字键盘乱序方法
var arr = ['1','2','3','4','5','6','7','8','9','0'];arr.sort(function(){ return Math.random()-Math.random();});console.log(arr);sort 方法可以接收一个函数作为参数，若函数返回正数则交换前后两项的位置，若函数返回负数则不作交换。所以将两个随机数相减的...原创 2019-03-21 10:04:57 · 680 阅读 · 0 评论 -
js 类型转换
一、转换为string时，建议使用+"。//推荐num + ";//也可new String(num);num.toString();String(num);二、转换成number时，建议使用+。//推荐+str;//也可Number(str);...原创 2019-03-21 16:04:19 · 128 阅读 · 0 评论 -
js includes函数
includes()函数用来判断一个数组是否包含一个指定的值，包含则返回true，否则falselet arr= ['1','2','3'];console.log(arr.includes('1'));原创 2019-06-28 09:59:24 · 15525 阅读 · 0 评论 -
Object.keys()，Object.values()
Object.keys返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。let obj = {a:'song',b:'yuan',c:'ming',d:'qing'};console.log(Object.keys(obj));//["a","b","c","d"]Object.values()返回一个数...原创 2019-06-28 11:05:51 · 811 阅读 · 0 评论 -
js中 !! 的用法
一、！的用法，！将变量转换成布尔值，null、undefined和空字符串取反皆为true!null //true!undefined //true!'' //true!'2' //false!2 //false二、！！，其实就是在非后再取非，一般用来做非空判断（不为空，不为null，不为undefined)if(!!a){ // a不为空，且不为null、unde...原创 2019-08-19 09:57:32 · 465 阅读 · 0 评论 -
ES6 map方法与filter方法
map 方法：可以简单的理解为映射var num = [1,2,3,4];var dataAdd = num.map(n => n+n);var datadeep = num.map(n => n-1);console.log(dataAdd);//[2, 4, 6, 8]console.log(datadeep);//[0,1,2,3]filter方法: 过滤筛选的...原创 2018-04-23 18:27:31 · 8599 阅读 · 0 评论 -
ES6 Array.from()方法
Array.from()该方法是将一个类数组对象或者可遍历对象转换成一个真正的数组。一、类数组对象转换为真正数组：该类数组需满足以下两条件：1.必须具有length属性，用于指定数组的长度。若无length属性，那么转换后的数组是一个空数组。2.属性名必须为数值型或字符串型的数字。若非数字，那么转换后的数组每一项的值都为undefined。let arrayLike = {...原创 2018-12-10 16:40:11 · 249 阅读 · 0 评论 -
$.ajax 中的contentType
$.ajax contentType 和 dataType , contentType 主要设置你发送给服务器的格式，dataType设置你收到服务器数据的格式。在http 请求中，get 和 post 是最常用的。在 jquery 的 ajax 中， contentType都是默认的值：application/x-www-form-urlencoded，这种格式的特点就是，name/valu...原创 2018-11-16 10:15:05 · 659 阅读 · 0 评论 -
js上传文件或图片至后台
一、jqXMLHttpRequest Level2 添加了一个新的接口——FormData。【主要用于发送表单数据,但也可以独立使用于传输键控数据。与普通的Ajax相比，它能异步上传二进制文件】利用FormData对象，可通过js用一些键值对来模拟一系列表单控件，还可以使用XMLHttpRequest的send()方法异步提交表单。首先，在之前的“前后台交互之传参方式”中讲了传统...原创 2018-11-20 14:39:13 · 7766 阅读 · 2 评论 -
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
今天来看看前端的冒泡和事件默认事件如何处理1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；3.ret...转载 2018-06-12 11:42:48 · 344 阅读 · 0 评论 -
handlebars模板
官方网址http://handlebarsjs.com/原创 2018-04-25 15:50:11 · 206 阅读 · 0 评论 -
es6 数组实例的 find() 和 findIndex()
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 [javascript] view plain copy[1, 4, -5, 10].find((n) => n < 0) // -5 [1, ...转载 2018-04-24 15:52:12 · 396 阅读 · 0 评论 -
break 和 continue的区别
break是结束整个循环，continue是结束单次循环<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>break and continue</title> </head> <body&原创 2018-04-19 15:36:30 · 140 阅读 · 0 评论 -
js查找数组中是否存在某个值（some函数indexOf函数includes函数）
一、some方法some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。注意： some() 不会对空数组进行检测。注意： some() 不会改变原始数组。 var ages= [3, 10,18, 35]; function myFn(){ re...原创 2018-04-19 11:24:03 · 10718 阅读 · 0 评论 -
js获取url参数
方法一、获取参数数组 function getQueryString() { var qs = location.search.substr(1), // 获取url中"?"符后的字串 args = {}, // 保存参数数据的对象 items = qs.length ? qs.split("&") : [], // 取得每一个参数项,split() 方法...原创 2018-04-19 10:55:21 · 242 阅读 · 0 评论 -
let 和 const 用法和区别
ES6 中新增加了 let 和 const 两个命令，let 用于定义变量，const 用于定义常量。两个命令与原有的 var 命令所不同的地方在于，let, const 都是块级作用域，其有效范围仅在代码块中//varif(ture){ var a = 'varA';}console.log(a);//varA//letif(true){let b = 'letA';}cons...原创 2018-04-17 14:08:43 · 1914 阅读 · 0 评论 -
es6 javascript对象方法Object.assign()的基本用法
在学习某开源代码中遇到此函数，遂记录下来备忘。 基本用法Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。var target = { a: 1 }; var source1 = { b: 2 }; var source2 = { c: 3 }; Object.assign(target, source1, ...转载 2018-04-03 16:51:37 · 349 阅读 · 0 评论 -
js 字符串相关方法整理
一.字符串切割与提取 1.slice(start,end);两个参数可正可负，负值代表从右截取var mystr="hello world!";var sliceStr1=mystr.slice(-3); //ld!var sliceStr2=mystr.slice(-3,-1); //ldvar sliceStr3=mystr.slice(3);//lo world!var...原创 2018-09-27 14:08:25 · 235 阅读 · 0 评论 -
正则去除字符串中所有空格
function removeAllSpace(str) { return str.replace(/\s+/g, ""); }原创 2018-10-08 17:00:18 · 5398 阅读 · 0 评论 -
通过设置chrome浏览器解决跨域问题，在本地进行开发工作
转载自：https://www.cnblogs.com/kugeliu/p/6566462.html后端跨域权限无法打开，于是去网上找了下我这边能不能解决现在的浏览器出于安全策略的限制，都是不允许跨域的，但是开发的时候经常需要一些别的域的接口，特别是一些接口不是自己能控制的时候，往往会造成开发困难。今天无意中知道了，chrome浏览器可以通过设置，解决跨域问题。如果 Chrome ...转载 2018-11-13 13:58:04 · 251 阅读 · 0 评论 -
js中保留4位小数，超过4位截取保留4位，不足4位补足0
getFloat = function(number, n) { n = n ? parseInt(n) : 0; if(n <= 0) { return Math.round(number); } number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入 number = Number(n...原创 2018-11-06 15:19:27 · 10463 阅读 · 3 评论 -
常用正则速查表
速记手机号：/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/大写字母：/^[A-Z]+$/日期，如：2000-01-01：/^\d{4}(-)\d{1,2}\1\d{1,2}$/email地址：/^\w+([-+.]\w+)*@\w+([-.]\w+)*...原创 2018-10-30 14:25:21 · 479 阅读 · 0 评论 -
sessionStorage、localStorage、cookie方法小结
特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4K左右 一般为5MB 与服务器端通信 每次都会携带在HTTP头中，...原创 2018-10-29 10:14:16 · 189 阅读 · 0 评论 -
js数组方法总结
JavaScript中创建数组有两种方式（一）使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组（二）使用数组字面量表示法：...原创 2018-10-18 11:17:01 · 170 阅读 · 0 评论 -
详解JavaScript中的Event Loop（事件循环）机制
前言我们都知道，javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程意味着，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。而非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的...转载 2018-10-19 09:44:56 · 127 阅读 · 0 评论 -
JS三座大山
前言本篇文章比较适合3年以上的前端工作者，JS三座大山分别指：原型与原型链，作用域及闭包，异步和单线程。原型与原型链说到原型，就不得不提一下构造函数，首先我们看下面一个简单的例子：function Dog(name,age){ this.name = name; this.age = age;}let dog1 = new Dog("哈士奇",3)...转载 2018-10-19 09:10:01 · 1435 阅读 · 2 评论 -
深拷贝与浅拷贝的区别，实现深拷贝的几种方法
转载自 https://www.cnblogs.com/echolun/p/7889848.html如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例...转载 2018-10-09 10:08:44 · 156 阅读 · 0 评论