标签搜索
搜索到
152
篇与
的结果
-
JS生成器 function* 这种声明方式(function关键字后跟一个星号）会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。function* generator(i) { yield i; yield i + 10; } var gen = generator(10); console.log(gen.next().value); // expected output: 10 console.log(gen.next().value); // expected output: 20生成器函数在执行时能暂停，后面又能从暂停处继续执行。调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的 迭代器 （iterator ）对象。当这个迭代器的 next() 方法被首次（后续）调用时，其内的语句会执行到第一个（后续）出现yield的位置为止，yield 后紧跟迭代器要返回的值。或者如果用的是 yield*（多了个星号），则表示将执行权移交给另一个生成器函数（当前生成器暂停执行）。next()方法返回一个对象，这个对象包含两个属性：value 和 done，value 属性表示本次 yield 表达式的返回值，done 属性为布尔类型，表示生成器后续是否还有 yield 语句，即生成器函数是否已经执行完毕并返回。调用 next()方法时，如果传入了参数，那么这个参数会作为上一条执行的 yield 语句的返回值function *gen(){ yield 10; y=yield 'foo'; yield y; } var gen_obj=gen(); console.log(gen_obj.next());// 执行 yield 10，返回 10 console.log(gen_obj.next());// 执行 yield 'foo'，返回 'foo' console.log(gen_obj.next(10));// 将 10 赋给上一条 yield 'foo' 的左值，即执行 y=10，返回 10 console.log(gen_obj.next());// 执行完毕，value 为 undefined，done 为 true -
迭代器[Symbol.iterator] 当需要对一个对象进行迭代时（比如开始用于一个for..of循环中），它的@@iterator方法都会在不传参情况下被调用，返回的迭代器用于获取要迭代的值。自定义迭代器let arr []; arr[Synbol,iterator] = fuction(){ let i = 0; let self = this; return { next() { return { done: self.length - 1 < i, value: self[i++] }; } }; } for (let v of arr) { console.log(v); }当执行 for(var i of arr) 的时候，其实是调用了 arr[Symbol.iterator]() 方法，这个方法返回了一个iterator（迭代器）。迭代器有一个next方法，for循环会不断调用这个 arr.next方法来获取下一个值，直到返回值中的 done 属性为true的时候结束循环。
-
Objict属性操作 属性的描述Object.defineProperty(..)修改或新增对象的属性的描述.let Obj = {}; Object.defineProperty(Obj,a,{ value:2, writable:true,//可写 enumerable:true,//可枚举 configurable:true//可配置(值为false时对象属性将不可删除,writable可以从true改为false) })禁止扩展Object.preventExtensions();禁止添加新属性.密封及不能添加也不能删除对象属性.Object.seal();冻结及不可修改,不可添加,不可新增属性.Object.freeze();如果这个对象引用了其他对象, freeze不会生效.“深度冻结”一个对象，具体方法为，首先在这个对象上调用 Object.freeze(..)，然后遍历它引用的所有对象并在这些对象上调用 Object.freeze(..)。但是一定要小心，因为这样做有可能会在无意中冻结其他（共享）对象。in 操作符和hasOwnProperty()in 检查对象属性是否在对象及prototype中.hasOwnProperty 检查对象属性是否在对象不检查原型链. var Obj = {}; (a in Obj)//false Obj.hasOwnProperty('a')//false
-
JS计算精度问题 export default function point(f) { if (f === '+') { return accAdd; } else if (f === '-') { return accSub; } else if (f === '*') { return accMul; } else { return accDiv; } } /** ** 除法函数，用来得到精确的除法结果 ** 说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 ** 调用：accDiv(arg1,arg2) ** 返回值：arg1除以arg2的精确结果 **/ function accDiv(arg1, arg2) { var t1 = 0; var t2 = 0; var r1, r2; try { t1 = arg1.toString().split('.')[1].length; } catch (e) {} try { t2 = arg2.toString().split('.')[1].length; } catch (e) {} r1 = Number(arg1.toString().replace('.', '')); r2 = Number(arg2.toString().replace('.', '')); return (r1 / r2) * Math.pow(10, t2 - t1); } //给Number类型增加一个div方法，调用起来更加方便。Number.prototype.div = function (arg) { return accDiv(this, arg); /** ** 乘法函数，用来得到精确的乘法结果 ** 说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 ** 调用：accMul(arg1,arg2) ** 返回值：arg1乘以 arg2的精确结果 **/ function accMul(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try { m += s1.split('.')[1].length; } catch (e) {} try { m += s2.split('.')[1].length; } catch (e) {} return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m); } // 给Number类型增加一个mul方法，调用起来更加方便。Number.prototype.mul = function (arg) { return accMul(arg, this); /** ** 减法函数，用来得到精确的减法结果 ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。 ** 调用：accSub(arg1,arg2) ** 返回值：arg1加上arg2的精确结果 **/ function accSub(arg1, arg2) { var r1, r2, m, n; try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度 n = (r1 >= r2) ? r1 : r2; return ((arg1 * m - arg2 * m) / m).toFixed(n); } // 给Number类型增加一个mul方法，调用起来更加方便。Number.prototype.sub = function (arg) { return accMul(arg, this); /** ** 加法函数，用来得到精确的加法结果 ** 说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 ** 调用：accAdd(arg1,arg2) ** 返回值：arg1加上arg2的精确结果 **/ function accAdd(arg1, arg2) { var r1, r2, m, c; try { r1 = arg1.toString().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split('.')[1].length; } catch (e) { r2 = 0; } c = Math.abs(r1 - r2); m = Math.pow(10, Math.max(r1, r2)); if (c > 0) { var cm = Math.pow(10, c); if (r1 > r2) { arg1 = Number(arg1.toString().replace('.', '')); arg2 = Number(arg2.toString().replace('.', '')) * cm; } else { arg1 = Number(arg1.toString().replace('.', '')) * cm; arg2 = Number(arg2.toString().replace('.', '')); } } else { arg1 = Number(arg1.toString().replace('.', '')); arg2 = Number(arg2.toString().replace('.', '')); } return (arg1 + arg2) / m; } //给Number类型增加一个add方法，调用起来更加方便。Number.prototype.add = function (arg) { return accAdd(arg, this);
-
vue-cli注册全局方法 把方法挂载到window对象上!import axios from 'axios'; window.axios = axios;//这样每个vue主件都可以调用axios把方法挂载到Vue的原型上import Vue from 'vue'; import axios from 'axios'; Vue.prototype.axios = axios;通过webpack全局注入!plugins:[ new webpack.ProvidePlugin({ //webpack配置项 axios:"axios", jQuery: "jquery", $: "jquery" }) ]总结:挂载到window上将被暴露在全局,(不推荐使用).挂载到Vue原型上, 可以在每个Vue实例上使用.(每次使用都的加this).webpack注入, 会在编译后在每个模块中引入.(推荐使用)
-
作用域和闭包的深入理解 当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。我来对这个定义进行解释下 函数要在执行后不被垃圾回收机制回收,并且可以访问当前作用域中的属性和方法. 函数在当前作用域外也可以被调用!let message = "Cicaba" function foo(){ console.log(message) //是一个 RHS 引用查询 } foo()//Cicaba上面代码并不是真正意义上的闭包.函数内部作用域只是引用了函数外部作用域的变量.(只是作用域链的一种体现)function foo() { var a = 2; function baz() { console.log( a ); // 2 } bar( baz ); } function bar(fn) { fn(); // 妈妈快看呀，这就是闭包！ }闭包和作用域链有着密切的关系.闭包就是突破作用域链的一种方式!看一个金典的例子:for(var i = 0; i<6; i++){ setTimeout(function timer(){ console.log(i) },1000) }上面代码每隔一秒会输出6个5,为什么乐?要理解这个问题必须你先理解词法作用域(作用域)我们来看上面代码发生了什么.for循环中定义了一个全局变量i, 每次循环都在改变i的值.而setTimeout是在循环结束后才被执行(延迟回调函数(异步执行)).每次循环都在当前作用域声明一个定时器函数, 都共享一个作用域里的资源, 所以打印了6个5.解决办法for(var i = 0; i<6; i++){ let j = i; setTimeout(function timer(){ console.log(j) },1000) }解决思路在每次循环中创建一个词法作用域,for(let i = 0; i<6; i++){ setTimeout(function timer(){ console.log(i) },1000) } //for循环的let声明, 会有一个特殊的行为, 会在每次循环迭代时重新声明, 并且会把上次迭代的值初始化当前变量!
-
-
作用域 - 总结 函数是 JavaScript 中最常见的作用域单元。本质上，声明在一个函数内部的变量或函数会在所处的作用域中“隐藏”起来，这是有意为之的良好软件的设计原则。但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块（通常指 { .. } 内部）。从 ES3 开始，try/catch 结构在 catch 分句中具有块作用域。在 ES6 中引入了 let 关键字（var 关键字的表亲），用来在任意代码块中声明变量。if(..) { let a = 2; } 会声明一个劫持了 if 的 { .. } 块的变量，并且将变量添加到这个块中。let 声明不会再在块级作用域中进行提升.{ //{}可以创建块及作用域 console.log( bar ); // ReferenceError! let bar = 2; }
-
ES7 includes padStart padEnd includes方法类似ES5的indexOf方法, 用来检查字符窜和数组中的元素是否存在,存在返回true, 不存在返回false.这样减去了使用indexOf比较运算.let str = "12344" //使用indexOf if(str.indexOf('1')>-1){ console.log(str) } //使用includes if(str.includes('1')){ console.log(str) }padStart padEndpadStart和padEnd用来填充字符串.padStart和padEnd方法接收两个参数, 1.填充后字符串长度(如果小于等于字符串的长度将不做任何处理), 2.填充内容(可选参数, 默认使用空格填充)console.log('cicaba'.padStart(10,*)) //****cicabb console.log('cicaba'.padStart(10,*)) //cicabb****
-
ES7 async, await async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用通常async、await都是跟随Promise一起使用的。为什么这么说呢？因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么)；await得到Promise对象之后就等待Promise接下来的resolve或者reject。来看一段简单的代码： async function testSync() { const response = await new Promise(resolve => { setTimeout(() => { resolve("async await test..."); }, 1000); }); console.log(response); } testSync();//async await test...就这样一个简单的async、await异步就完成了。使用async、await完成异步操作代码可读与写法上更像是同步的，也更容易让人理解。async、await串行并行处理串行：等待前面一个await执行后接着执行下一个await，以此类推复制代码 async function asyncAwaitFn(str) { return await new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); }) } const serialFn = async () => { //串行执行 console.time('serialFn') console.log(await asyncAwaitFn('string 1')); console.log(await asyncAwaitFn('string 2')); console.timeEnd('serialFn') } serialFn();可以看到两个await串行执行的总耗时为两千多毫秒。并行：将多个promise直接发起请求（先执行async所在函数），然后再进行await操作。async function asyncAwaitFn(str) { return await new Promise((resolve, reject) => { setTimeout(() => { resolve(str) }, 1000); }) } const parallel = async () => { //并行执行 console.time('parallel') const parallelOne = asyncAwaitFn('string 1'); const parallelTwo = asyncAwaitFn('string 2') //直接打印 console.log(await parallelOne) console.log(await parallelTwo) console.timeEnd('parallel') } parallel()通过打印我们可以看到相对于串行执行，效率提升了一倍。在并行请求中先执行async的异步操作再await它的结果，把多个串行请求改为并行可以将代码执行得更快，效率更高。async、await错误处理JavaScript异步请求肯定会有请求失败的情况，上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。async function catchErr() { try { const errRes = await new Promise((resolve, reject) => { setTimeout(() => { reject("http error..."); }, 1000); ); //平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功 // console.log(errRes.status, errRes.statusText); } catch(err) { console.log(err); } } catchErr(); //http error...注意:await可以直接获取到后面Promise成功状态传递的参数，但是却捕捉不到失败状态!一是async函数需要主动return一下，如果Promise的状态是成功的，那么return的这个值就会被下面的then方法捕捉到；二是，如果async函数有任何错误，都被catch捕捉到！原文
![迭代器[Symbol.iterator]](https://www.cicaba.cn/usr/themes/Joe-master/assets/thumb/8.jpg)
