Javascript

跳转到脚本列表🚀 什么是书签栏的脚本？ 用过油猴脚本自然不会对书签栏脚本感到陌生，与油猴不同的是，书签栏脚本的触发方式是点击书签，而不会自动触发。以下是演示GIF： 演示动图 使用方式 以Chrome浏览器为例，第一步：右键书签栏，选择添加网页 添加网页 第二步：在名称处填写脚本名称，网址处填写脚本，最后点击保存即可！ 输入脚本 脚本分享 1.页面自动刷新 功能： 点击之后输入秒数t（未作限制，请输入数字），页面会自动进行 t 秒一次的刷新，无限循环；如果需要停止，再次单击，点击取消或者输入0即可刷新一次自动取消。 1 javascript: var t=prompt("Time(s)="); var current = location.href; if (t) {setTimeout('reload()', 1000 * t); function reload() { setTimeout('reload()', 1000 * t); var fr4me = '<frameset cols=\'*\'>\n<frame src=\'' + current + '\' />'; fr4me += '</frameset>'; with (document) { write(fr4me); void (close()); }; };}else{location.replace(current);}; 2. Video自动播放 功能：点击之后输入速度t即可实现视频倍速播放，点击取消或者输入0即可恢复1倍速播放。 1 javascript: var t=prompt("speed = "); if(t){document....

webStorage 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)。 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 相关API: xxxStorage.setItem('key','value'); 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。 xxxStorage.getItem('key'); 该方法接受一个键名作为参数，返回键名对应的值。 xxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。 xxxStorage.clear(); 该方法会清空存储中的所有数据。 备注: SessionStorage存储的内容会随着浏览器窗口关闭而消失。 LocalStorage存储的内容，需要手动清除才会消失。 xxxStorage.getItem('key');如果key对应的value获取不到，那么getItem的返回值是null。 可以通过JSON.stringify()存储对象，通过JSON.parse()解析对象，JSON.parse(null)的结果仍然是null。

关于正则表达式的创建，就不做过多的赘述 ::: tip 由于不知名原因，span标签报错，因此全部替换为[sp] ::: 关于转义 1.字面量形式创建的RegExp 转义形式： \d, \., \s 等 1 2 3 let str='fintinger2592030861.com$323e' let reg=/\d+\.com/ str.match(reg);//2592030861.com 2.对象形式创建的RegExp 转义形式： \\d, \\., \\s等 1 2 3 let str = 'fintinger2592030861.com$323e' let reg = new RegExp('\\d+\\.com', 'g') str.match(reg)//2592030861.com 边界约束 利用^和$分别限制开头和结尾 1 2 3 4 5 let str = 'bdhw42556jbjkhb2592030861jrh4jbhkfehrbj43jk32kbbjhb' let reg = /\d{3,6}/ let reg2 = /^\d{3,6}$/ str.match(reg)//42556 str....

class实质上是对js中继承的封装组合，用一种“语法糖”的形式实现原型链的继承 静态属性/方法 静态方法/属性是指，函数作为对象时，定义在其原型(__proto__)上的方法，而需要实例化继承的动态方法是定义在其原型对象(prototype) 中的，静态方法中的参数都是固定的，直接通过整个构造函数调用，实例化对象并不会继承；而动态方法中的参数会因为实例化对象的不同而产生改变，实例化对象默认是继承的。 1 2 3 4 function User(){} User.__proto__.show=function(){} console.dir(User) //这里的show()方法就属于静态方法 在class中，利用static定义静态属性/方法 1 2 3 4 5 class Admin{ static show(){}//__proto__中 show(){}//prototype中 } console.dir(Admin) 关于class一些注意点 class中声明的方法在prototype对象中，由于默认的属性特征设置，这些方法是不可遍历的！ 1 2 3 4 5 6 7 8 class Admin{ show(){} } console.log( Object.getOwnPropertyDescriptor( Admin.prototype,"show" )) //enumerable: false class中声明方法时，方法之间不用,隔开！ class中默认开启严格模式 class中的属性保护 主要可以通过三种途径实现属性保护：Symbol,weakmap,私有属性 1.Symbol 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 /*利用Symbol创建一个受保护的属性的集合对象,无法直接获取，只能通过自定义的get/set方法*/ const protects = Symbol('受保护的属性') class User { constructor(name) { this....

原型链自定义设置 原型链的设置可以通过Object.creative , __proto__, Object.setProperty三种方法 Object.creative () 说明： 该方法只能设置原型链，而不能获取 1 2 3 4 let a1 = {name: 'a1'} let b1 = Object.create(a1) b1.name = 'b1' console.log(b1); Object.creative()为创建对象的方法，第一个参数为其原型对象，第二个参数为其默认属性，这些属性默认是不可写，不可遍历，不可修改的 1 2 3 4 5 6 7 let b=Object.create(null,{ a:{value:'ohh', enumerable:true}, b:{value:'jqf'}, }) console.log(Object.getOwnPropertyDescriptors(b)); //a: {value: "ohh", writable: false, enumerable: true, configurable: false} //b: {value: "jqf", writable: false, enumerable: false, configurable: false} __proto__ 说明： 能设置，能获取，实质上是setter，getter...

自定义一个模块引擎 要求： 能够让模块之间产生依赖关系 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 let _module = (function () { let moduleList = {} function define(name, modules, action) { modules.map((n, i) => { //将传入的只含名称的模块数组 => 指定名称模块的返回结果 modules[i] = moduleList[n] }) moduleList[name] = action.apply(null, modules) // console.log(moduleList); } return {define} })(); //定义一个工具库，暴露给外界使用，输出 _module....

对象中参数获取和值的接收 1.对象中利用key获取value. | [] 1 2 3 4 5 let obj = {name: 'jqf', age: 19} for (let key in obj) { // console.log(obj.key);//会报undefined console.log(obj[key]);//jqf,19 } 👉 delete Object.key() 1 2 delete obj.name console.log(obj);//{ age: 19 } 2.参数/配置合并 👉 展开语法 利用展开语法合并对象，让后面传入的参数覆盖默认参数，完成合并 1 2 3 4 5 6 7 8 9 10 11 12 function upload(params) { let config = { url: '/images', type: '*....

关于函数传参 当参数数量不确定时，通常用arguments 来统一接收 1 2 3 4 5 6 function sum() { return [...arguments].reduce((res, i,) => res + i, 0) } let res = sum(1, 2, 3) console.log(res);//6 可以用展开语法代替arguments接收所有的参数： 1 2 3 4 5 6 function sum(...args) { return args.reduce((res, i,) => res + i, 0) } let res = sum(1, 2, 3) console.log(res);//6 注意： 接收参数时展开语法放其他形参后面，做统一接收 递归函数 递归函数有两个关键点，一是要有退出执行的条件，二是要不断执行自身并返回 递归思想实现阶乘函数 1 2 3 4 5 6 function factorial(num) { if (num === 1) { return num } return num * factorial(--num) } 如果用到箭头函数，可以简写为：...

Map类型 1.属性 👉 set() 设置值 1 2 3 4 5 6 7 8 9 10 let map = new Map() let fn = function () {console.log('this is function')} let user = {name: 'jqf', age: 18} map.set('key', 'value') map.set(fn, 'function') map.set(user, 'object') console.log(map); /*Map(3){"key" => "value", ƒ => "function", {…} => "object"}*/ 注意： Map类型，字符串、函数、对象都可以作为key设置 👉 size Map长度 1 console.log(map.size);//3 👉get() 获取值 1 2 3 console....

Set类型 1.属性 👉 size ：数组长度 1 2 3 let set = new Set([1, 2, 3]) console.log(set.size);//9 👉 add() ：添加元素 1 2 console.log(set.add(99));//返回修改后的数组Set(4) { 1, 2, 3, 99 } console.log(set);//原数组已经被修改Set(4) { 1, 2, 3, 99 } 👉 delete() ：删除元素 1 2 console.log(set.delete(99));//true console.log(set);//Set(3) { 1, 2, 3 } 👉 has() ：有某个元素 1 console.log(set.has(3)); //true 👉 clear()：清空数组 1 2 set....