JS
dd
高同学呀
这个作者很懒,什么都没留下…
展开
-
Javascript中的箭头函数
Javascript中的箭头函数没有自己的this不能使用new没有arguments没有prototype写法简单 默认返回 a => a原创 2021-05-10 15:19:17 · 117 阅读 · 0 评论 -
canvas粒子动画之404(即拿即用)
canvas粒子动画之404(即拿即用)/** * canvas 粒子动画 * 2020-09-28 gaoli */class Grain { constructor(el) { // 初始化canvas this.createCav(el); this.init(); } init() { setInterval(() => { const imgData = this.drawText(); this.draw原创 2021-01-05 16:03:17 · 241 阅读 · 0 评论 -
JS发布订阅模式
/*** 发布订阅模式** */function Observe(arr) { this.data = {}; this.SubData = Array.isArray(arr) ? arr : [arr];}// 发布Observe.prototype.Subscribe = function (type, fun) { if (!this....原创 2020-03-26 12:40:20 · 110 阅读 · 0 评论 -
JS数组之Array.from
JS数组之Array.fromArray.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。首先、我们从可迭代对象入手,我们知道JS里可迭代对象有:字符串、 数组、Map、 Set、generator,他们都属于ES6标准引入了新的iterable类型 注意:对象不属于iterable类型示例 var arr = ['Marry', 'Jack',...原创 2020-03-24 12:05:32 · 925 阅读 · 1 评论 -
手写一个new
new方法实现 function _new() { let arr = Array.from(arguments); const fn = arr.shift(); console.log(fn); let obj = {}; if (typeof fn !== "function") return; ...原创 2020-03-24 11:01:09 · 98 阅读 · 0 评论 -
JS call applay bind 实现
call方法实现 const name = "Marry"; function myCall() { const arr = Array.from(arguments); const obj = arr.splice(0,1)[0]; const sym = Symbol('a'); obj[sym] = this...原创 2020-03-23 17:13:23 · 225 阅读 · 0 评论 -
proxy的深度拦截实现
let obj = { city: "北京", area: ['海淀区', '石景山区', '门头沟区'], children: { test1: { name: "鲁谷", area: ['sss', 'bbb'] } ...原创 2020-03-23 11:35:03 · 1436 阅读 · 0 评论 -
ES6 generator function* yiled*用法
简单叙述一下generator用法function*关键字可以在表达式内部定义一个生成器函数。function* foo() { yield 'a'; yield 'b'; yield 'c';}let str = '';for (const val of foo()) { str = str + val;}console.log(str); // "...原创 2020-03-22 09:11:46 · 186 阅读 · 0 评论 -
JS对象常用方法
JS对象常用方法APIexampleObject.entriesconst entries = Object.entries({name: "Marry", age: 18}); // console.log(JSON.stringify(entries)) // [[“name”,“Marry”],[“age”,18]]Object.keysObject.key...原创 2020-03-22 08:33:25 · 160 阅读 · 0 评论 -
JS中判断数据类型
JS中判断数组还是对象原创 2020-03-21 16:23:11 · 73 阅读 · 0 评论 -
ES6 Map Set
flat数组扁平化/ 数组扁平化 排序let arr = [1,[2,3],[1,2,3],[3,2,1]];arr = arr.join(",").split(",").sort((x,y) => x-y)console.log(arr)我们看ES6的Map Setlet Arr = new Set(["A","B","C"]);console.log(Arr...原创 2020-03-18 11:42:16 · 90 阅读 · 0 评论 -
文本分割动画
function textSplice() { var dom = document.querySelector("#app"); var arr = dom.innerText.split(""); dom.style.opacity = 1; dom.innerHTML = ""; arr.forEach((tex...原创 2020-03-13 11:17:18 · 122 阅读 · 0 评论 -
JS判断元素是否在可视区域
function ISshow(dom, callback) { // start 。。。。 var status = Array.isArray(dom); // 减少判断 var scro = (function() { if(document.document...原创 2020-03-13 10:26:59 · 1164 阅读 · 1 评论 -
JS Event Loop
众所周知:JS是单线程 非阻塞 的脚本语言, 所有的任务都在主线程里执行。执行顺序1.执行主线程任务2.遇到宏任务添加到宏任务队列3.遇到微任务添加到微任务队列4.主线程执行完毕5.执行微任务队列中的微任务6.微任务执行完毕7.执行宏任务队列的宏任务8.宏任务执行完毕9.以上任务中包含新的微任务和宏任务 以此循环代码示例:setTimeout(()=>{ ...原创 2020-03-05 11:03:21 · 123 阅读 · 0 评论 -
web安全预防之xss攻击
innerHTML(原生)、v-html(vue)、dangerouslySetInnerHTML(react)等直接渲染html的函数慎用,确保渲染的数据是由前端写死的、无危害的才可直接使用;使用innerHTML(原生)、v-html(vue)、dangerouslySetInnerHTML(react)等直接渲染html的函数渲染请求数据时,需要先把字符串转义:1)、把 > 替换...原创 2020-03-05 10:22:48 · 152 阅读 · 0 评论 -
JS柯里化实例
function add() { // 第一次执行时,定义一个数组专门用来存储所有的参数 var _args = Array.prototype.slice.call(arguments); // 在内部声明一个函数,利用闭包的特性保存_args并收集所有的参数值 var _adder = function() { _args.push(...ar...原创 2020-03-04 19:16:20 · 201 阅读 · 0 评论 -
JS将俩个有序数组合并为一个有序数组
function arrSort(arr1, arr2) { var [i,j] = [0,0]; let newArr = []; while(i < arr1.length || j <arr2.length) { if (arr1[i] < arr2[j]) { newArr.push(arr1[i]); ...原创 2020-03-04 18:01:23 · 3074 阅读 · 1 评论 -
JS二叉树递归算法
模拟数据let tree = { value: "-", left: { value: '+', left: { value: 'a', }, right: { value: '*', left: { value: 'b', },...原创 2020-03-04 11:38:27 · 269 阅读 · 0 评论 -
JS call方法实现
Function.prototype.mycall = function (context) { console.log(context, arguments) var content = context || window; content.fn = this; var args = []; // arguments是类数组对象,遍历之前需要保存长度,过滤出第一个传参 f...原创 2020-03-03 12:23:08 · 170 阅读 · 0 评论 -
JS算法之深度优先遍历及广度优先遍历
模拟数据// 模拟数据let msg = [ { name: 1, children: [ { name: '1-1', children: [ { name: '1-1-1'...原创 2020-03-03 11:17:07 · 768 阅读 · 0 评论 -
web拾色器
说明:此拾色器自己闲来无事随便画的 提供一个思路 大佬勿喷html: <!-- 选择器 --> <div class="color-select"> <div class="color-select-content" id="select_back"> <div class="color-point"&g...原创 2020-02-26 15:56:18 · 594 阅读 · 0 评论 -
Promise.all简单封装
promise.all 本质上也是一个promise 通过then方法获取值function myPromiseall(...arguments) { return new Promise((reslove,reject) => { let arr = [], // resolove返回值 err = true, // Promise 状态 ...原创 2020-02-22 11:55:29 · 814 阅读 · 0 评论 -
常见算法
letarr=[1,12,3,65,12,745,88,44];/****冒泡排序是每级筛选出最大的排到最后**/functionBubbling(arr){constlength=arr.length;letstate=false;//位置未进行改变则循环结束...原创 2020-01-21 22:18:55 · 121 阅读 · 0 评论