Javascript

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....

数组是经常用到的一种数据结构 定义方法 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....

字符串 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....

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时，会造成全局的污染!...

++的前置与后置 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('您的性别?...

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('失败') })....

该怎么去获得文件名字符串中的文件扩展名呢？ 一种较为强大的解决方法是利用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....

做网页轮播图，或者音乐播放列表时经常要用到一组循环的数组，到最后一项返回第一项，第一项返回最后一项 利用两次判断 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....

在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....

开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种： 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()