https://blog.archai.space/tags/javascript/ Recent content in Javascript on Archai's home Hugo -- gohugo.io Tue, 05 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/%E5%88%86%E4%BA%AB%E4%B9%A6%E7%AD%BE%E6%A0%8F%E7%9A%84%E8%84%9A%E6%9C%AC/ Tue, 05 Apr 2022 00:00:00 +0000 https://blog.archai.space/p/%E5%88%86%E4%BA%AB%E4%B9%A6%E7%AD%BE%E6%A0%8F%E7%9A%84%E8%84%9A%E6%9C%AC/ 跳转到脚本列表🚀 什么是书签栏的脚本？ 用过油猴脚本自然不会对书签栏脚本感到陌生，与油猴不同的是，书签栏脚本的触发方式是点击书签，而不会自动触发。以下是演示GIF： 使用方式 以Chrome浏览器为例，第一步：右键书签栏，选择添加网页 第二步：在名称处填写脚本名称，网址处填写脚本，最后点击保存即可！ 脚本分享 1.页面自动刷新 功能： 点击之后输入秒数t（未作限制，请输入数字），页面会自动进行 t 秒一次的刷新，无限循环；如果需要停止，再次单击，点击取消或者输入0即可刷新一次自动取消。 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倍速播放。 javascript: var t=prompt("speed = "); if(t){document.getElementsByTagName("video")[0].playbackRate = t*1;}else{document.getElementsByTagName("video")[0].playbackRate = 1;}; https://blog.archai.space/p/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/ Wed, 30 Mar 2022 00:00:00 +0000 https://blog.archai.space/p/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/ 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。 https://blog.archai.space/p/javascript%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/ Sun, 20 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/ 关于正则表达式的创建，就不做过多的赘述 ::: tip 由于不知名原因，span标签报错，因此全部替换为[sp] ::: 关于转义 1.字面量形式创建的RegExp 转义形式： \d, \., \s 等 let str='fintinger2592030861.com$323e' let reg=/\d+\.com/ str.match(reg);//2592030861.com 2.对象形式创建的RegExp 转义形式： \\d, \\., \\s等 let str = 'fintinger2592030861.com$323e' let reg = new RegExp('\\d+\\.com', 'g') str.match(reg)//2592030861.com 边界约束 利用^和$分别限制开头和结尾 let str = 'bdhw42556jbjkhb2592030861jrh4jbhkfehrbj43jk32kbbjhb' let reg = /\d{3,6}/ let reg2 = /^\d{3,6}$/ str.match(reg)//42556 str.match(reg2)//null 元字符 元字符 用法 \d & \D 表示数字和非数字 \s & \S 表示空白（空格，换行，Tab制表符等）和非空白 \w & \W 表示字母，数字，下划线和非… . https://blog.archai.space/p/es6%E4%B8%AD%E7%9A%84class%E7%B1%BB/ Wed, 09 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/es6%E4%B8%AD%E7%9A%84class%E7%B1%BB/ class实质上是对js中继承的封装组合，用一种“语法糖”的形式实现原型链的继承 静态属性/方法 静态方法/属性是指，函数作为对象时，定义在其原型(__proto__)上的方法，而需要实例化继承的动态方法是定义在其原型对象(prototype) 中的，静态方法中的参数都是固定的，直接通过整个构造函数调用，实例化对象并不会继承；而动态方法中的参数会因为实例化对象的不同而产生改变，实例化对象默认是继承的。 function User(){} User.__proto__.show=function(){} console.dir(User) //这里的show()方法就属于静态方法 在class中，利用static定义静态属性/方法 class Admin{ static show(){}//__proto__中 show(){}//prototype中 } console.dir(Admin) 关于class一些注意点 class中声明的方法在prototype对象中，由于默认的属性特征设置，这些方法是不可遍历的！ class Admin{ show(){} } console.log( Object.getOwnPropertyDescriptor( Admin.prototype,"show" )) //enumerable: false class中声明方法时，方法之间不用,隔开！ class中默认开启严格模式 class中的属性保护 主要可以通过三种途径实现属性保护：Symbol,weakmap,私有属性 1.Symbol /*利用Symbol创建一个受保护的属性的集合对象,无法直接获取，只能通过自定义的get/set方法*/ const protects = Symbol('受保护的属性') class User { constructor(name) { this.name = name this[protects] = { host: 'https://www.fintinger.xyz', token: '5574f1b81bbe4e3847e7a83c0a84a442', password: '123456' } } set host(url) { if (! https://blog.archai.space/p/javascript%E4%B8%AD%E7%9A%84%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%88%86%E6%9E%90/ Fri, 04 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E4%B8%AD%E7%9A%84%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%88%86%E6%9E%90/ 原型链自定义设置 原型链的设置可以通过Object.creative , __proto__, Object.setProperty三种方法 Object.creative () 说明： 该方法只能设置原型链，而不能获取 let a1 = {name: 'a1'} let b1 = Object.create(a1) b1.name = 'b1' console.log(b1); Object.creative()为创建对象的方法，第一个参数为其原型对象，第二个参数为其默认属性，这些属性默认是不可写，不可遍历，不可修改的 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 let a2 = {name: 'a2'} let b2 = {name: 'b2'} a2.__proto__ = b2 console.log(a2); console.log(a2.__proto__);//{name: "b2"} 关于__proto__是setter,getter？ https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ Wed, 02 Sep 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ 自定义一个模块引擎 要求： 能够让模块之间产生依赖关系 代码 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.define('tools', [], function () { return { max(arr) { return arr.sort((a, b) => b - a)[0]//获取最大值挺别致昂 }, min(arr) { return arr.sort((a, b) => b - a)[arr.length - 1]; } } }); //使用之前定义的工具库，引入 _module. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%AF%B9%E8%B1%A1/ Mon, 31 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%AF%B9%E8%B1%A1/ 对象中参数获取和值的接收 1.对象中利用key获取value. | [] 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() delete obj.name console.log(obj);//{ age: 19 } 2.参数/配置合并 👉 展开语法 利用展开语法合并对象，让后面传入的参数覆盖默认参数，完成合并 function upload(params) { let config = { url: '/images', type: '*.jpg,*.png' } config = {...config, ...params} //do something... console.log(config); } upload({type:'*.webp'})//{ url: '/images', type: '*.webp' } 👉 解构赋值 解构赋值会把相同key的进行合并，后面覆盖掉前面的 function upload(params = {}) { let {url = '/images', type = '*. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%87%BD%E6%95%B0%E7%9B%B8%E5%85%B3/ Fri, 28 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%87%BD%E6%95%B0%E7%9B%B8%E5%85%B3/ 关于函数传参 当参数数量不确定时，通常用arguments 来统一接收 function sum() { return [...arguments].reduce((res, i,) => res + i, 0) } let res = sum(1, 2, 3) console.log(res);//6 可以用展开语法代替arguments接收所有的参数： function sum(...args) { return args.reduce((res, i,) => res + i, 0) } let res = sum(1, 2, 3) console.log(res);//6 注意： 接收参数时展开语法放其他形参后面，做统一接收 递归函数 递归函数有两个关键点，一是要有退出执行的条件，二是要不断执行自身并返回 递归思想实现阶乘函数 function factorial(num) { if (num === 1) { return num } return num * factorial(--num) } 如果用到箭头函数，可以简写为： function factorial(num) { return num === 1 ? https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bmap%E4%B8%8Eweakmap%E7%B1%BB%E5%9E%8B/ Wed, 26 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bmap%E4%B8%8Eweakmap%E7%B1%BB%E5%9E%8B/ Map类型 1.属性 👉 set() 设置值 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长度 console.log(map.size);//3 👉get() 获取值 console.log(map.get(fn));//function //通过key获取value 👉 delete() / clear() 删除某个，清空Map console.log(map.delete(fn));//true console.log(map); /*Map(3){"key" => "value", {…} => "object"}*/ 👉 has() 是否有某个key console.log(map.has(user));//true 2.遍历 👉forEach(val,key,map) https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bset%E4%B8%8Eweakset/ Wed, 26 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bset%E4%B8%8Eweakset/ Set类型 1.属性 👉 size ：数组长度 let set = new Set([1, 2, 3]) console.log(set.size);//9 👉 add() ：添加元素 console.log(set.add(99));//返回修改后的数组Set(4) { 1, 2, 3, 99 } console.log(set);//原数组已经被修改Set(4) { 1, 2, 3, 99 } 👉 delete() ：删除元素 console.log(set.delete(99));//true console.log(set);//Set(3) { 1, 2, 3 } 👉 has() ：有某个元素 console.log(set.has(3)); //true 👉 clear()：清空数组 set.clear()//返回undefined console.log(set);//Set(0) {} 2.遍历Set 👉 forEach() 方法 let set=new Set(['jqf','fin','zzh']) set.forEach((value, samevalue, set) => { console.log(value);//jqf,fin,zzh console.log(samevalue);//jqf,fin,zzh console.log(set);//Set(3) { 'jqf', 'fin', 'zzh' } }) //这里回调中的参数，前两个都是一样的值， //第三个参数为遍历的Set 👉 [. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bsymbol%E7%B1%BB%E5%9E%8B/ Mon, 24 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bsymbol%E7%B1%BB%E5%9E%8B/ Symbol() 类型不能当做普通对象(不能加属性值)，只能当做一种永远都不会重复的字符串 定义 方法： Symbol(desc)、Symbol.for(desc) let s1 = Symbol('d') let s2 = Symbol.for('d') let s3 = Symbol.for('d') console.log(s1.description);//d console.log(Symbol.keyFor(s2));//d console.log(s1 === s3);//false console.log(s2 === s3);//true 注意： 利用Symbol() 定义的值永远都不会相等，而Symbol.for() 定义的，如果描述相同，则值相等 定义对象时，key相同会覆盖的问题 普通方式定义： let user1={ name:'李四' } let user2={ name:'李四' } let grade={ [user1.name]:{C:98,E:60}, [user2.name]:{C:99,E:59} } console.log(grade);//{'李四':{C:99,E:59}} 可以看到，后面的覆盖掉了前面的 利用Symbol() 定义 let user1={ name:'李四', key:Symbol() } let user2={ name:'李四', key:Symbol() } let grade={ [user1.key]:{C:98,E:60}, [user2.key]:{C:99,E:59} } console.log(grade)//{[Symbol(user1)]: { C: 98, E: 60 },[Symbol(user2)]: { C: 99, E: 59 }} console. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E6%95%B0%E7%BB%84%E6%B7%B1%E5%80%94/ Mon, 24 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E6%95%B0%E7%BB%84%E6%B7%B1%E5%80%94/ 数组是经常用到的一种数据结构 定义方法 let a = new Array(3) let b = [1, 2, 3] 如何定义一个只有一个元素的数组？ new Array(n)表示有n个空元素的的数组，利用Array.of(n),可以定义一个只有n元素的数组 类型转换 利用join 可以把数组转成字符串 let a = [1, 2, 3, 4, 5] let b = a.join('') console.log(b); 说明： join 的作用就是将数组中的所有元素用指定的符号连接，成为一个字符串 如何把DOM集合NodeList转换成普通数组形式？ Nodelist形式无法使用.map(),reduce()等方法(能用forEach())，处理不太方便，因此需要转换成普通数组类型 let titles = document.querySelectorAll('h1'); [...titles].map((v, i,titles) => { console.log(v); }) titles.map()//Uncaught TypeError: titles.map is not a function 注意： 利用展开语法可以把DOM集合转换成普通数组形式 解构赋值 是一种数组间批量赋值的方法 let [name, age] = ['fin', 18] console. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%80%BC%E7%B1%BB%E5%9E%8B/ Sun, 23 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E5%80%BC%E7%B1%BB%E5%9E%8B/ 字符串 1.截取字符串 主要有slice()、substr()、substring() 三种方法 一个参数[i] 都是从i开始截取，返回n及其后面的全部字符串。 第二个参数[i,n] slice(i,n)和substring(i,n)表示从i开始截取到n；substr(i,n)，表示从i开始截取n个 负参数 slice()和substr()将最后一位记为-1，然后依次编号；substring()则会将任何负参数变为0，然后查找 let w = 'fintinger.xyz' let a = w.slice(-4, w.length) let b = w.substring(-1, 2) let c = w.substr(-4, 4) console.log(a, b, c);//.xyz fi .xyz 2.查找字符串 主要有indexof()、includes()、lastIndexof() 三种方法 共同点： 两个参数[searchString,position]，第一个为要检索的字符串，第二个为开始检索位置； 若position < 0，则position = 0 position可以省略 不同之处： lastIndexof()为从右往左找，找到第一个立即返回索引！其他两个都是从左往右 indexof(),lastIndexof()找不到则返回-1，includes()找不到返回false position 省略之后，includes(),indexof()默认值为0，lastIndexof()则为str.length 3.重复函数 repeat() 作用： 复制粘贴指定字符串指定次数 案例： /** * 电话号码模糊处理 * @param{String|Number}number * @param{Number}len * @returns {Error|string} * @constructor */ function Phone(number, len = 4) { number = String(number) return number. https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bjs%E9%BB%91%E6%B4%9E/ Sat, 22 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8Bjs%E9%BB%91%E6%B4%9E/ JavaScript中最容易忽视的一些点 let和var 都用来定义变量，但二者之间有些细微的差别 区别1: 是否有块作用域 var a = 1 { // var a=2 let a = 2 } console.log(a); //output var:a=2 let:a=1 var i=1 // for (var i = 0; i <3; i++) { for (let i = 0; i <3; i++) { //..do something } console.log(i); //output var:i=3 let:i=1 说明： 可以看出，var并没有作用域的概念，定义在特定作用于内的变量会受到作用域外的影响，let则不会 区别2：全局污染问题 console.log(window.screenLeft);//600 // var screenLeft = 1 let screenLeft = 1 console.log(window.screenLeft); //output var:1 let:600 说明： var定义的变量用window对象也可以访问，当定义一些特定的key时，会造成全局的污染! https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E8%BF%90%E7%AE%97%E7%AC%A6/ Sat, 22 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E5%9F%BA%E7%A1%80%E4%B9%8B%E8%BF%90%E7%AE%97%E7%AC%A6/ ++的前置与后置 let a1 = 1 let b1 = 2 let c1 = b1 + a1++ console.log(a1, b1, c1);//2,2,3 let a2 = 1 let b2 = 2 let c2 = b2 + ++a2 console.log(a2, b2, c2);//2,2,4 说明： 后置是先计算再++ 前置是先++再计算 短路运算 let a = 0; let b = 1; let c = a || b; console.log(c);//1 利用这个原理，我们可以简化一些函数 let sex = prompt('您的性别?') if (!sex){ sex="保密" } console.log(sex); => let sex = prompt('您的性别? https://blog.archai.space/p/es6%E4%B9%8Bpromise%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/ Tue, 18 Aug 2020 00:00:00 +0000 https://blog.archai.space/p/es6%E4%B9%8Bpromise%E7%94%A8%E6%B3%95%E5%B0%8F%E7%BB%93/ Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值。其目的主要是解决以往回调中嵌套回调的"嵌套地狱"问题，使代码可读性更好，更美观! 基本用法 对于一个标准的Prommise，其基本写法为: new Promise(function (resolve, reject) { //do something... //success resolve('success') //fail & reject // reject('rejected') *resolve和reject只能出现一个 }).then( function (value) { //if succeed,do something... }, function (reason) { //if fail & reject,do something... } ) 如果采用ES6的箭头函数写法，则为: new Promise((resolve, reject) => { resolve('success') //reject('rejected') }).then( value => {}, reason => {} ) 始终牢记，前一个Promise()必须是在后面一个.then()中处理， 如果前一个Promsie()中没有改变状态，即没有resolve()/reject()方法，后面的.then就不会针对这个Promsie()处理 Promise错误处理 Promise()中的错误处理有两种方式,.then()和.catch() .then() 特点： “一一对应”，即一个then()对应处理上一个Promise 用法： new Promise((resolve, reject) => { // 12+p // throw new Error('fail') reject('失败') }). https://blog.archai.space/p/%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D/ Thu, 09 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E6%89%A9%E5%B1%95%E5%90%8D/ 该怎么去获得文件名字符串中的文件扩展名呢？ 一种较为强大的解决方法是利用String的slice、lastIndexOf方法： function getFileExtension(filename) { return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); } console.log(getFileExtension3('')); // '' console.log(getFileExtension3('filename')); // '' console.log(getFileExtension3('filename.txt')); // 'txt' console.log(getFileExtension3('.hiddenfile')); // '' console.log(getFileExtension3('hiddenfile.')); // '' console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext' 说明 filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2) 本方法中的>>>运算目的是 找到最后一个.所在索引，然后索引-1+2，相当于+1，则slice方法返回.后面的后缀名 .不会再开头，否则索引会是0，因为-1>>>0 = 4294967295，所不会匹配到 .出现在末尾，索引会等于length+1，也不会匹配到 slice(start,end) 说明：start必须指定，负值为从后往前数，若只指定start值，则返回start位置及后面一直到数组结尾所有的元素 **注意：**区别于删除数组中的一段元素的方法 Array.splice() lastIndexOf(searchvalue,fromindex) **说明：**如果要检索的字符串值没有出现，则该方法返回 -1，该方法对大小写敏感 使用： var str="Hello world!" document.write(str.lastIndexOf("Hello") + "<br />")//0 document.write(str.lastIndexOf("World") + "<br />")//-1 document. https://blog.archai.space/p/%E4%B8%80%E7%BB%84%E5%BE%AA%E7%8E%AF%E6%95%B0%E7%BB%84/ Wed, 08 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E4%B8%80%E7%BB%84%E5%BE%AA%E7%8E%AF%E6%95%B0%E7%BB%84/ 做网页轮播图，或者音乐播放列表时经常要用到一组循环的数组，到最后一项返回第一项，第一项返回最后一项 利用两次判断 function doLoop( arr ){ arr.loop_idx = 0; // 返回当前的元素 arr.current = function(){ if( this.loop_idx < 0 ){// 第一次检查 this.loop_idx = this.length - 1;// 更新 loop_idx } if( this.loop_idx >= this.length ){// 第二次检查 this.loop_idx = 0;// 更新 loop_idx } return arr[ this.loop_idx ];//返回元素 }; // 增加 loop_idx 然后返回新的当前元素 arr.next = function(){ this.loop_idx++; return this.current(); }; // 减少 loop_idx 然后返回新的当前元素 arr.prev = function(){ this. https://blog.archai.space/p/es6%E4%B8%AD%E6%96%B0%E5%A2%9E%E5%85%B3%E4%BA%8Earray%E7%9A%84%E6%96%B9%E6%B3%95/ Mon, 06 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/es6%E4%B8%AD%E6%96%B0%E5%A2%9E%E5%85%B3%E4%BA%8Earray%E7%9A%84%E6%96%B9%E6%B3%95/ 在javascript中，Array()经常用到，利用ES6中的一些新特性会让数组的处理更加方便快捷 1.迭代空数组 直接创建一个数组 const arr=new Array(4); //Output:[undefined，undefined，undefined，undefined] 利用map方法，转化成新的数组，企图得到 [0,1,2,3] 数组 const arr=new Array(4); arr.map((ele,index) => index); //Output:[undefined，undefined，undefined，undefined] 解决这个问题可以在创建数组时用到Array.apply apply与call类似，都是用来继承父类的方法的，不同之处是： call() 方法分别接受参数。person.fullName.apply(person1, ["Oslo", "Norway"]); apply() 方法接受数组形式的参数. person.fullName.call(person1, "Oslo", "Norway"); 如果要使用数组而不是参数列表，则 apply() 方法非常方便。 const arr = Array.apply(null, new Array(4)); arr.map((ele,index) => index); //Output:[0,1,2,3] 由此，我们可以创建一个指定最大值、最小值、或者长度生成指定数列的方法 /** * 生成自定义的连续数列 * @param{Number}min * @param{Number}max * @param{Number}len */ function newArr({min = null, max = null, len = null} = {}) { let newArray=[], skip = min if (len == null) {len = max - min + 1} if (min == null) {skip = -max} const arr = Array. https://blog.archai.space/p/%E9%81%BF%E5%85%8D%E5%A4%9A%E6%9D%A1%E4%BB%B6%E5%B9%B6%E5%88%97/ Mon, 06 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/%E9%81%BF%E5%85%8D%E5%A4%9A%E6%9D%A1%E4%BB%B6%E5%B9%B6%E5%88%97/ 开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种： if (status === 'process' || status === 'wait' || status === 'fail') { doSomething() } 这种写法语义性、可读性都不太好。可以通过switch case或includes这种进行改造。 switch case switch(status) { case 'process': case 'wait': case 'fail': doSomething() } includes const enum = ['process', 'wait', 'fail'] if (enum.includes(status)) { doSomething() https://blog.archai.space/p/javascript%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84json/ Sun, 05 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84json/ 在写小demo的过程中，经常需要把某个文件夹的图片文件的路径给引入，除非全部重命名成有序的数字，不然不好处理，这就用到了node中的fs和path模块，还没学… const path=require("path"); const fs = require('fs'); fs.stat('../images',(err)=>{//图片文件所在目录 if (err)return; var result='{' fs.readdir("../images",(err,data)=>{//图片文件所在目录 for(var i=0;i<Object.keys(data).length;i++){ let ImgPath="\"images/"+data[i]+"\""; result+="\""+i+"\":"+ImgPath+","; } result=result.substring(0,result.length-1); let length="\""+"length"+"\""+":"+"\""+Object.keys(data).length+"\""//文件数量 result+=","+length+'}' fs.writeFile("../data/imgPath.json",result,(err)=>{ if(err)return; console.log("写入文件成功，一共"+Object.keys(data).length+"个文件"); }); }); }); 生成的文件大概就是这样的一个json数据 {"0":"images/1.jpg","1":"images/10.jpg","2":"images/100.jpg","3":"images/101.jpg","4":"images/102.jpg","5":"images/103.jpg","6":"images/104.jpg","7":"images/105.jpg","8":"images/106.jpg","9":"images/107.jpg","10":"images/108.jpg","length":"109"} https://blog.archai.space/p/javascript%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/ Wed, 01 Jul 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80/ 什么是瀑布流？ 一种图片在网页的布局方式，具体要求为：从页面第二行开始，后续图片跟在页面中最矮的那张图片后面 用JavaScript怎么实现？ 为此我将整个过程封装为一个函数。 /*HTML部分*/ <head> <link rel="stylesheet" href="main.css"> </head> <div id="box"></div>//container和img由js动态加入 <script src="jquery.min.js"></script> <script src="loadFile.js"></script> <script src="main.js"></script> /*CSS部分*/ /*首先清空默认样式*/ #box{ position: relative; } .container{ float: left; } .container>.pic{ width: 200px; } .container>.pic>img{ width: 100%; } /*JS部分*/ /*loadFile.js(在window.onload之前执行，加载DOM树)*/ $(function () { function addImg(imgNum,eleID) { let container for (let i = 1; i < imgNum; i++) { container=$("<div class='container'><div class='pic'><img src='images/"+i+".jpg' alt=''></div></div>") $(eleID).append(container) } } addImg(109,"#box"); }) /*******************************************/ /*main.js(在$(function(){})之前执行，DOM树加载完毕 )*/ window. https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ Fri, 29 May 2020 00:00:00 +0000 https://blog.archai.space/p/%E5%85%B3%E4%BA%8Ejavascript%E6%A8%A1%E5%9D%97%E5%8C%96/ 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 //profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export function sayName () { return firstName + lastName; } export default function () { console.log('foo'); } // main.js import { firstName, lastName , sayName} from './profile.js'; 注意：在index.html中引入的时候需要给script加type=“module”,即 <script type="module" src="./profiles.js"></script> <script type="module" src="./main.js"></script> https://blog.archai.space/p/javascript%E4%B8%80%E4%BA%9B%E6%93%8D%E4%BD%9C/ Thu, 02 Apr 2020 00:00:00 +0000 https://blog.archai.space/p/javascript%E4%B8%80%E4%BA%9B%E6%93%8D%E4%BD%9C/ 1.通过id获取元素 function $(id) { return typeof id === 'string' ? document.getElementById(id): null; } 2.日期格式化 function formatDate(cDate) { //1.判断 if (!cDate instanceof Date){ return; } //2.转化 var year=cDate.getFullYear(); var month=cDate.getMonth(); var date=cDate.getDate(); var hour=cDate.getHours(); var minute=cDate.getMinutes(); var second=cDate.getSeconds(); //2.1 补0 month=month<10? '0'+month:month; date=date<10? '0'+date: date; minute=minute<10? '0'+minute:minute; second=second<10? '0'+second:second; return year + '-' + month + '-' + date + ' ' +hour+':'+minute+":"+second; } console.log(formatDate(new Date())); 3.匀速运动封装 /** * 设置一个盒子右边距匀速变化 * @param{string} btnId * @param{string} boxId * @param{number} step * @param{number}target */ function linearAnimation(btnId, boxId, step, target) { // 1.